Today, I created my own account on this site, and I wanted to share a small step in learning JavaScript.
What I developed today is
Todo List
Hierarchical Structure Example is
my-todo-app/
│
├── index.html
├── style.css
├── script.js
Detailed Code is
index.html
<!DOCTYPE html>
<!--difine the size when it pops up in device-->
Todo List in head
Todo List in body
<!--client input, input type, text in field-->
add
style.css
body{
font-family:Arial, sans-serif;
margin: 20px;
}
input{
margin-right: 10px;
}
ul{
list-style-type: none;
padding:0;
}
li{
margin:5px 0;
}
script.js
document.getElementById('add-button').addEventListener('click', function() {
const input = document.getElementById('todo-input');
const newTodo = input.value;
if (newTodo) {
const li = document.createElement('li');
li.textContent = newTodo;
document.getElementById('todo-list').appendChild(li);
input.value = ''; // clear in input field
}else{
alert("type something please");
}
});
There is one input field and one button displayed on the screen when the client accesses index.html.
If the client fills in the input field with text and clicks the button, the text entered will be displayed on the screen.
If the client does not enter anything and clicks the button, an alert saying "Please type something." will pop up.
I believe these codes are very basic but useful for learning JavaScript. They especially help you understand the relationship between the HTML file and the JavaScript file (script.js), and how they interact with each other.
Top comments (0)