The first small step in experiencing JavaScript

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>

Todo List in head

Todo List in body

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.