To-Do App
Step by Step Algorithm:
1. Declare the document type as HTML5 with the DOCTYPE declaration.
2. Inside the 'html' element, add a 'body' element.
3. Inside the 'body' element, add a 'form' element with an id attribute set to "todo-form".
4. Inside the 'form' element, add an input element with a type attribute set to "text" and an 'id' attribute set to "todo-input". Set the 'placeholder' attribute to "Enter a to-do...".
5. Inside the form element, add a button element with a type attribute set to "submit" and the text "Add".
6. Inside the body element, add an unordered list ul element with an id attribute set to "todos".
7. Inside the body element, add a script element with a src attribute set to "app.js". This links to a JavaScript file that will contain the app's functionality.
8. Close the body and html elements.
9. End the HTML document with the DOCTYPE declaration.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>webdevmonk - To-Do App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>webdevmonk - To-Do App</h1>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="Enter a to-do...">
<button type="submit">Add</button>
</form>
<ul id="todos"></ul>
<script src="app.js"></script>
</body>
</html>
CSS:
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
width: 60%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
button[type="submit"] {
width: 20%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #45a049;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 12px;
background-color: #f1f1f1;
padding: 12px;
border-radius: 4px;
}
.remove-button {
background-color: #f44336;
color: white;
border: none;
padding: 3px;
cursor: pointer;
float: right;
}
.remove-button:hover {
background-color: #dc3545;
}
Step by Step Algorithm:
1. Select the form element using document.querySelector('#todo-form') and store it in a variable named form.
2. Select the input element using document.querySelector('#todo-input') and store it in a variable named input.
3. Select the ul element using document.querySelector('#todos') and store it in a variable named todosList.
4. Attach an event listener to the form element that listens for the submit event and calls the addTodo function when the event is triggered.
5. Define the addTodo function, which takes an event object as an argument.
6. Inside the addTodo function, use the preventDefault method on the event object to prevent the default action of the form submission from occurring.
7. Check if the value of the input element is an empty string. If it is, display an alert message asking the user to enter a to-do.
8. If the value of the input element is not an empty string, create a new li element using document.createElement('li').
9. Set the text content of the li element to the value of the input element.
10. Create a new button element using document.createElement('button').
11. Set the text content of the button element to 'Remove'.
12. Set the class name of the button element to 'remove-button'.
13. Attach an event listener to the button element that listens for the click event and calls the removeTodo function when the event is triggered.
14. Append the button element to the li element using the appendChild method.
15. Append the li element to the todosList element using the appendChild method.
16. Set the value of the input element to an empty string.
17. Define the removeTodo function, which takes an event object as an argument.
18. Inside the removeTodo function, get the button element that was clicked by accessing the target property of the event object.
19. Get the parent li element of the button element by accessing the parentNode property of the button element.
20. Remove the li element from the todosList element by calling the removeChild method on the todosList element and passing in the li element as an argument.
Java Script:
const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const todosList = document.querySelector('#todos');
form.addEventListener('submit', addTodo);
function addTodo(e) {
e.preventDefault();
if (input.value === '') {
alert('Please enter a to-do.');
} else {
const li = document.createElement('li');
li.textContent = input.value;
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.className = 'remove-button';
removeButton.addEventListener('click', removeTodo);
li.appendChild(removeButton);
todosList.appendChild(li);
input.value = '';
}
}
function removeTodo(e) {
const button = e.target;
const li = button.parentNode;
todosList.removeChild(li);
}
You can improve this project in your own version.
We are ready to release more projects please support us by sharing and visiting webdevmonk