Welcome to Dev Route – Your Ultimate Hub for Programming, Web Development & Smart Tech Tips!
Are you passionate about coding, building websites, or leveling up your computer skills? You’re in the right place!
What You’ll Learn Here:
Beginner to advanced Programming tutorials (Python, JavaScript, PHP and more)
Practical Web Development projects using HTML, CSS, JS, React, React Native & backend tech
Time-saving Computer Tips & Tricks to boost your productivity
Software installations, system optimization, and troubleshooting guides
Real-world projects and portfolio-building advice
Whether you’re a student, aspiring developer, or tech enthusiast, our easy-to-follow videos are designed to help you code smarter, work faster, and grow confidently.
New videos regularly – Subscribe and turn on notifications so you never miss a tech tip or coding lesson!
Let’s build your tech skills—one video at a time!
Dev Route
This is the complete source code for the SMS app. Follow the video in order to use the code correctly.
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Send SMS from HTML form using JavaScript</title>
<link rel="stylesheet" href="css/style.css">
<link rel="Shortcut Icon" href="images/logo.png">
<script defer src="js/send_sms.js"></script>
</head>
<body>
<fieldset>
<legend><img src="images/sms.png" style="width: 84px;;"/></legend>
<div>
<textarea class="phoneNumber" required></textarea>
<span>Phone numbers </span>
</div>
<div>
<input type="text" class="message" required>
<span>Message</span>
</div>
<button class="btnSend">Send</button>
<p class="showMessage"></p>
</fieldset>
</body>
</html>
<!-- CSS -->
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
fieldset{
margin: auto;
position: absolute;
right: 0;
left: 0;
margin-top: 7em;
width: 26%;
border-radius: 8px;
padding: 22px;
border: #233463 1px solid;
box-shadow: -3px 6px 43px -13px #0000008c;
border: 0;
}
legend{
color: #4d4d4d;
padding: 0 9px 0 9px;
border-radius: 8px;
text-align: center;
font-size: 20px;
font-weight: 500;
}
legend img{
width: 34px;
}
fieldset div{
position: relative;
}
fieldset input, fieldset textarea, fieldset button{
display: block;
width: 100%;
height: 44px;
border-radius: 8px;
border: 0;
outline: 0;
margin-top: 1.9em;
}
fieldset input, fieldset textarea{
border: #a2a2a2 1px solid;
padding-left: 8px;
font-size: 14px;
color: #808080;
transition: .5s;
}
fieldset textarea{
padding-top: 7px;
height: 86px;
resize: none;
}
fieldset input:focus, fieldset textarea:focus{
outline: #7493d7 1px solid;
}
fieldset button{
width: 100%;
background-color: #012c7c;
margin-bottom: 17px;
font-size: 22px;
color: #fcfcfc;
transition: .4s;
}
fieldset button:hover{
letter-spacing: 4px;
cursor: pointer;
}
fieldset span{
display: block;
position: absolute;
color: #b6b6b6;
top: 12px;
left: 7px;
font-size: 16px;
pointer-events: none;
transition: .5s;
}
fieldset input:focus ~ span, fieldset input:valid ~ span,
fieldset textarea:focus ~ span, fieldset textarea:valid ~ span{
top: -20px;
color: #010114;
}
.displayMessage{
padding: 7px;
border-radius: 8px;
}
.displayMessageError{
background-color: #ffd0c8;
color: #ff2600;
}
.displayMessageSuccess{
background-color: #00b16d;
color: #c4fff9;
}
.error{
border: 1.2px #ff2600 solid;
}
.success{
border: 1.2px #00b16d solid;
}
@media (max-width: 900px) {
fieldset{
width: 40%;
}
}
@media (max-width: 700px) {
fieldset{
width: 50%;
}
}
@media (max-width: 500px) {
fieldset{
margin-top: 3.5em;
width: 95%;
}
}
@media (max-width: 300px) {
fieldset{
width: 90%;
}
}
<!-- Javascript -->
let phoneNumber = document.querySelector(".phoneNumber"),
message = document.querySelector(".message"),
btnSend = document.querySelector(".btnSend"),
showMessage = document.querySelector(".showMessage");
btnSend.addEventListener("click", ()=>{
//SMS section
const phoneNumbers = phoneNumber.value.split(",").map(number => number.trim());
const destinations = phoneNumbers.map(number => ({to: number}));
const myHeaders = new Headers();
myHeaders.append("Authorization", "YOUR API KEY");
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Accept", "application/json");
const newJSON = JSON.stringify({
"messages": [{
"destinations": destinations,
"from": "Sender Name",
"text": message.value
}]
});
const requestTypes = {
method: "POST",
headers: myHeaders,
body: newJSON,
redirect: "follow"
};
fetch("e158qq.api.infobip.com/sms/2/text/advanced", requestTypes)
.then(response =>{
if(response.ok){
showMessage.innerHTML = "SMS message sent successfully";
}else{
showMessage.innerHTML = "Failed to send SMS message";
}
phoneNumber.value = "";
message.value = "";
})
.catch((error) => {
console.error(error);
showMessage.innerHTML = "Error sending SMS message";
});
});
2 months ago (edited) | [YT] | 1
View 0 replies
Dev Route
Out Now!!!
New tutorial series on Android Mobile App Development
7 months ago | [YT] | 0
View 0 replies
Dev Route
New video series on SMS applications dropping soonest.
10 months ago | [YT] | 0
View 5 replies
Dev Route
Hey guys! Welcome to my channel. You'll have a great time here. Thank you for stopping by.
11 months ago | [YT] | 1
View 2 replies