Hello, I am new to coding and just got started with HTML and CSS. I wanted to know how I can improve my code and any options and suggestions. I wanted to write the best code.
This is my first project—a ToDo app.
<!DOCTYPE html>
<html>
<body>
<h1>Have Something in your mind!</h1>
<hr>
<br>
<div class="center">
<input id="noteinput" type="text" placeholder="What's in your mind? ">
<button id="addbtn">Keep Note</button>
</div>
<ul id="notelist"></ul>
<h4 id="ErrorMessage" style="color:red; display:none; text-align: center;">
Please write something first!
</h4>
<hr>
<style>
h1{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
#noteinput{
width: 550px;
height: 60px;
outline: none;
border: none;
}
li{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
li:hover {
background: #eaeaea;
}
</style>
<script>
const input = document.getElementById("noteinput");
const button = document.getElementById("addbtn");
const list = document.getElementById("notelist");
const error = document.getElementById("ErrorMessage");
button.addEventListener("click", () => {
if (input.value.trim() === "") {
error.style.display = "block";
return;
}
error.style.display = "none";
const li = document.createElement("li");
li.textContent = input.value;
li.addEventListener("click", () => {
li.remove();
});
list.appendChild(li);
input.value = "";
});
</script>
</body>
</html>
Thank you.
