In this article, we will be discussing how to build a notes app using HTML, CSS, and JavaScript. This app allows users to easily add, edit, or delete their notes and stores them in the browser's local storage so they will not be removed on page refresh or tab close. This is done using pure JavaScript.
Build Notes App Using HTML CSS and JavaScript (source code)
Building a notes app can seem daunting, but with the help of this guide and the accompanying source code, it is a relatively simple process. The first step is to create three separate files: an HTML file, a CSS file, and a JavaScript file.
To create this notes app in JavaScript, you will need to create three files: an HTML file, a CSS file, and a JavaScript file. First, create an HTML file named index.html and paste the provided code into it. Make sure to save the file with the .html extension.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Notes App</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<button class="add" id="add">
<i class="fas fa-plus"></i> Add note
</button>
</body>
</html>
Next, create a CSS file named style.css and paste the provided code into it. Remember to save the file with the .css extension.
CSS Code:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #7bdaf3;
display: flex;
flex-wrap: wrap;
font-family: "Poppins", sans-serif;
margin: 0;
padding-top: 3rem;
}
.add {
background-color: #9ec862;
border-radius: 3px;
border: none;
color: white;
cursor: pointer;
padding: 0.5rem 1rem;
position: fixed;
top: 1rem;
right: 1rem;
}
.note {
background-color: #fff;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
margin: 20px;
height: 400px;
width: 400px;
}
.note .tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.note .tools button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: 0.5rem;
}
.note .main {
background-color: #eee;
overflow: hidden;
height: 400px;
width: 100%;
}
.note textarea {
outline: none;
font-family: inherit;
font-size: 1.2rem;
border: none;
height: 400px;
width: 100%;
}
.note .hidden {
display: none;
}
Finally, create a JavaScript file named script.js and paste the provided code into it. Remember to save the file with the .js extension.
JavaScript Code:
const addBtn = document.getElementById("add");
const notes = JSON.parse(localStorage.getItem("notes"));
if (notes) {
notes.forEach((note) => {
addNewNote(note);
});
}
addBtn.addEventListener("click", () => {
addNewNote();
});
function addNewNote(text = "") {
const note = document.createElement("div");
note.classList.add("note");
note.innerHTML = `<div class="notes">
<div class="tools">
<button class="edit"><i class="fas fa-edit"></i></button>
<button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main ${text ? "" : "hidden"}"></div>
<textarea class="${text ? "hidden" : ""}"></textarea>
`;
const editBtn = note.querySelector(".edit");
const deleteBtn = note.querySelector(".delete");
const main = note.querySelector(".main");
const textArea = note.querySelector("textarea");
textArea.value = text;
main.innerHTML = marked(text);
editBtn.addEventListener("click", () => {
main.classList.toggle("hidden");
textArea.classList.toggle("hidden");
});
deleteBtn.addEventListener("click", () => {
note.remove();
updateLS();
});
textArea.addEventListener("input", (e) => {
const { value } = e.target;
main.innerHTML = marked(value);
updateLS();
});
document.body.appendChild(note);
}
function updateLS() {
const notesText = document.querySelectorAll("textarea");
const notes = [];
notesText.forEach((note) => {
notes.push(note.value);
});
localStorage.setItem("notes", JSON.stringify(notes));
}
Once you have completed these steps, you have successfully built a notes app using HTML, CSS, and JavaScript. If you encounter any issues or your code is not working properly, you can download the source code files from the provided download button. The files are available for free in a .zip file and can be easily extracted.
Additionally, if you are having difficulty understanding the instructions or want to see a demonstration of the notes app, you can watch a demo or full video tutorial of the notes app in JavaScript. This will give you a better understanding of how the app works and how to implement the code.
In conclusion, building a notes app using HTML, CSS, and JavaScript is a relatively simple process. With the help of this guide and the accompanying source code, you can easily create your own notes app that allows users to add, edit, and delete notes. Additionally, by using JavaScript, the notes are stored in the browser's local storage so they will not be removed on page refresh or tab close. With this knowledge, you can now create a useful and practical notes app for yourself or for others.