I am really new in the tech world. I am learning web designing. I am trying to create a to-do list using HTML,CSS & JAVASCRIPT. The problem I am facing is when I enter an input the button goes below the text. I am not able to align them in the same line. I am gonna include the codes below. Please help me with this problem. Thank you for taking your time to read this post.
this is what happens when I enter input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My ToDo</title>
<script src="https://kit.fontawesome.com/48b4a15e7f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="My todo.css">
</head>
<body>
<div class="mainbody">
<div id="container">
<input type="text" id="inputbox" placeholder="Enter tasks">
<button id="addbutton">Add</button>
</div>
<div id="tasks">
</div>
</div>
<script>
const input = document.getElementById('inputbox');
const addbutton = document.getElementById('addbutton');
//adding add button next to input//
addbutton.addEventListener('click', function() {
var paragraph = document.createElement('p');
paragraph.classList.add('parastyling');
//id user doesn't enter any input//
if (input.value.trim().length == '') {
alert('Please enter a task')
} else {
paragraph.innerText = input.value;
tasks.appendChild(paragraph);
input.value = '';
//creating delete button//
var deletebutton = document.createElement('button');
deletebutton.innerHTML = '<i class="fas fa-trash"</i>';
deletebutton.className = 'delete';
tasks.appendChild(deletebutton);
}
deletebutton.addEventListener('click', function() {
tasks.removeChild(paragraph);
tasks.removeChild(deletebutton);
tasks.removeChild(editbutton)
})
//strikethrough//
paragraph.addEventListener('click', function() {
paragraph.style.textDecoration = 'line-through';
})
})
</script>
</body>
</html>
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(135deg, #4f2f9a, #f206e6);
}
.mainbody {
border: 2px solid white;
width: 480px;
top: 20%;
left: 40%;
position: absolute;
padding: 30px 40px;
}
#container {
width: 400px;
padding: 30px 20px;
background-color: aliceblue;
border-radius: 5px;
position: relative;
}
#inputbox {
width: 250px;
height: 45px;
font-family: "Cambria";
font-size: 15px;
font-weight: bold;
position: relative;
padding: 12px;
}
#inputbox:focus {
outline: none;
border-color: #4f2f9a;
}
#tasks {
position: relative;
}
#addbutton {
position: relative;
width: 60px;
height: 45px;
float: right;
font-family: 'Cambria';
font-size: 15px;
border-radius: 5px;
background-color: purple;
color: white;
border: none;
cursor: pointer;
}
#tasks {
background-color: aliceblue;
padding: 30px 20px;
margin-top: 60px;
border-radius: 10px;
width: 100%;
}
.delete {
position: relative;
display: inline;
float: right;
font-size: 15px;
border-radius: 5px;
color: purple;
border: none;
cursor: pointer;
margin-left: 10px;
}
.parastyling {
display: inline;
margin: 10px;
}