Notes App
Step by Step Algorithm:
1. Define the document type as HTML5 by using the !DOCTYPE html declaration at the top of the document.
2. Create a body element to contain the content of the HTML document.
3. In the body element, create a div element with the class "container".
4. Within the div element, add a form element with the id attribute set to "note-form".
5. Within the form element, add an input element with the type attribute set to "text", the id attribute set to "note-input", and the placeholder attribute set to "Enter a note...".
6. Within the form element, add a button element with the type attribute set to "submit" and the text "Add".
7. Within the div element, add an ul element with the id attribute set to "notes".
HTML:
<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="style.css">
<title>webdevmonk - Notes App</title>
</head>
<body>
<div class="container">
<h1>webdevmonk - Notes App</h1>
<form id="note-form">
<input type="text" id="note-input" placeholder="Enter a note...">
<button type="submit">Add</button>
</form>
<ul id="notes"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
CSS:
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.container{
display: flex;
flex-direction: column;
}
body {
font-family: sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 30px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
form {
display: flex;
align-items: center;
margin-bottom: 30px;
}
input[type="text"] {
flex: 1;
padding: 10px;
font-size: 18px;
border: none;
border-bottom: 2px solid lightgray;
}
button[type="submit"] {
padding: 10px 20px;
font-size: 18px;
background: lightgray;
border: none;
cursor: pointer;
}
button[type="submit"]:hover {
background: darkgray;
color: white;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
margin: 10px 0;
padding: 10px;
background: lightgray;
border-radius: 5px;
}
.remove-button {
margin-left: 10px;
padding: 5px 10px;
font-size:10px;
}
@media screen and (max-width:800px) {
.container{
display: flex;
flex-direction: column;
}
}
Step by Step Algorithm:
1. Select the form element using document.querySelector('#note-form') and assign it to a variable named form.
2. Select the input element using document.querySelector('#note-input') and assign it to a variable named input.
3. Select the ul element using document.querySelector('#notes') and assign it to a variable named notesList.
4. Add a submit event listener to the form element, which will call the addNote function when the form is submitted.
5. Define the addNote function, which takes an event object as an argument.
6. In the addNote function, use the preventDefault method on the event object to prevent the default form submission behavior.
7. If the value of the input element is an empty string, display an alert message saying "Please enter a note."
8. If the value of the input element is not an empty string:
9. Create a new li element using document.createElement('li').
10. Set the textContent of the li element to the value of the input element.
11. Create a new button element using document.createElement('button').
12. Set the className of the button element to "remove-button".
13. Add a click event listener to the button element, which will call the removeNote function when the button is clicked.
14. Append the button element to the li element using the appendChild method.
15. Append the li element to the notesList element using the appendChild method.
16. Set the value of the input element to an empty string.
17. Define the removeNote function, which takes an event object as an argument.
18. In the removeNote function, get the target element (the button that was clicked) from the event object and assign it to a variable named button.
19. Get the parent node (the li element) of the button element and assign it to a variable named li.
20. Remove the li element from the notesList element using the removeChild method.
Java Script:
const form = document.querySelector('#note-form');
const input = document.querySelector('#note-input');
const notesList = document.querySelector('#notes');
form.addEventListener('submit', addNote);
function addNote(e) {
e.preventDefault();
if (input.value === '') {
alert('Please enter a note.');
} 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', removeNote);
li.appendChild(removeButton);
notesList.appendChild(li);
input.value = '';
}
}
function removeNote(e) {
const button = e.target;
const li = button.parentNode;
notesList.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