Build Notes Taking App Using Html CSS JavaScript . In this article, we will explore how to create a Notes App using HTML, CSS, and JavaScript. This project will enhance your practical skills in these technologies. The notes app will allow you to save notes with titles and descriptions in the local storage, ensuring they persist even after a page reload.
Prerequisites:
- HTML
- CSS
- JavaScript
Approach:
- Structure: Start by building the basic structure of the app with HTML, using tags like
<div>,<p>, and<button>as needed. - Styling: Style the app using CSS. Apply properties like flex, position, and padding to improve the appearance. Ensure the app has appropriate formatting, height, width, and color.
- Functionality: Add functionality to the add, delete, and save buttons using JavaScript. Store notes in localStorage to maintain them.
Build Notes Taking App Using Html CSS JavaScript Separate functions will be created for adding and saving notes. First, we’ll design the layout and apply styles, then we’ll implement the necessary functionality.
Let us get started, create a html,css ,JavaScript separate file and add the below code in it.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<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">
<title>Note App</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="btn">
<div class="heading">
<h1>Note Taking App</h1>
</div>
<button id="addBtn">
<i class="fas fa-plus"></i>
Add Note
</button>
</div>
<div id="main">
</div>
<script src=
"https://kit.fontawesome.com/bf520e6492.js"
crossorigin="anonymous">
</script>
<script src="./script.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main {
width: 100%;
min-height: 100vh;
padding-bottom: 50px;
background-color: #81ecec;
display: flex;
flex-wrap: wrap;
}
#addBtn {
position: fixed;
left: 18px;
top: 10px;
background-color: #2d3436;
color: white;
padding: 10px;
border: 0;
outline: 0;
border-radius: 5px;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
background-color: #81ecec;
margin-top: 0px;
}
.note {
width: 380px;
height: 260px;
background-color: white;
margin: 15px;
margin-top: 55px;
border-radius: 10px;
margin-left: 20px;
margin-bottom: 30px;
}
.icons {
width: 100%;
background-color: #0d7390;
color: white;
padding: 5px;
display: flex;
justify-content: start;
border-radius: 10px 10px 0px 0px;
}
.icons i {
padding: 5px;
cursor: pointer;
}
.note textarea {
border: none;
width: 100%;
height: 87%;
resize: none;
padding: 10px;
font-size: 18px;
border-radius: 15px;
background-color: beige;
border-radius: 0px 0px 10px 10px;
}
.title-div textarea {
border-radius: 0px 0px 0px 0px;
margin-bottom: -4px;
background-color: #a4cad4;
font-weight: bolder;
font-size: x-large;
}
.heading {
position: fixed;
margin-top: 46px;
color: ivory;
}
.note textarea:focus {
border: 0;
outline: 0;
}
Javascript
const addBtn = document.querySelector("#addBtn");
const main = document.querySelector("#main");
// Click event listener
addBtn.addEventListener("click", function () {
addNote();
});
// Save button function
const saveNotes = () => {
// Select content textareas
const notes =
document.querySelectorAll(".note .content");
// Select title textareas
const titles =
document.querySelectorAll(".note .title");
const data = [];
notes.forEach((note, index) => {
const content = note.value;
const title = titles[index].value;
console.log(title);
if (content.trim() !== "") {
data.push({ title, content });
}
});
const titlesData =
data.map((item) => item.title);
console.log(titlesData);
localStorage.setItem(
"titles", JSON.stringify(titlesData));
const contentData =
data.map((item) => item.content);
localStorage.setItem(
"notes", JSON.stringify(contentData));
};
// Addnote button function
const addNote = (text = "", title = "") => {
const note = document.createElement("div");
note.classList.add("note");
note.innerHTML = `
<div class="icons">
<i class="save fas fa-save"
style="color:red">
</i>
<i class="trash fas fa-trash"
style="color:yellow">
</i>
</div>
<div class="title-div">
<textarea class="title"
placeholder="Write the title ...">${title}
</textarea>
</div>
<textarea class="content"
placeholder="Note down your thoughts ...">${text}
</textarea>
`;
function handleTrashClick() {
note.remove();
saveNotes();
}
function handleSaveClick() {
saveNotes();
}
const delBtn = note.querySelector(".trash");
const saveButton = note.querySelector(".save");
const textareas = note.querySelectorAll("textarea");
delBtn.addEventListener("click", handleTrashClick);
saveButton.addEventListener("click", handleSaveClick);
main.appendChild(note);
saveNotes();
};
// Loading all the notes those are saved in
// the localstorage
function loadNotes() {
const titlesData =
JSON.parse(localStorage.getItem("titles")) || [];
const contentData =
JSON.parse(localStorage.getItem("notes")) || [];
for (let i = 0;
i < Math.max(
titlesData.length, contentData.length); i++) {
addNote(contentData[i], titlesData[i]);
}
}
loadNotes();
Output:
Conclusion
Building a Notes App using HTML, CSS, and JavaScript is an excellent project to consolidate your understanding of these core web technologies. This project not only provides practical experience but also demonstrates how these technologies work together to create a functional and aesthetically pleasing web application.
Key Takeaways:
- HTML Structure: By creating the basic structure with HTML, you learned how to use various tags and elements effectively to lay out the user interface. This includes understanding the hierarchy and semantics of HTML tags, which is crucial for web development.
- CSS Styling: Styling the app with CSS allowed you to see the importance of design in web applications. You learned how to use different CSS properties such as flexbox, positioning, and padding to create a visually appealing layout. This also covered responsive design principles, ensuring that your app looks good on various devices.
- JavaScript Functionality: Implementing functionality with JavaScript showcased how to make your web pages interactive. You learned how to handle events (like clicking a button), manipulate the DOM (Document Object Model), and manage data with localStorage. This is essential for creating dynamic and user-friendly applications.
- LocalStorage: Using localStorage to save notes demonstrated how to maintain data on the client side. This ensures that user data persists across page reloads, which is a fundamental aspect of modern web applications. Understanding how to use localStorage is a valuable skill for any web developer.
Practical Skills Gained:
- Project Planning: You experienced the importance of planning a project before diving into coding. This involves outlining the structure, deciding on the styling, and planning the functionality.
- Problem-Solving: Throughout the project, you encountered and resolved various issues, improving your problem-solving skills. Debugging JavaScript, adjusting CSS for different screen sizes, and ensuring HTML structure integrity are all part of this process.
- Code Organization: Keeping your HTML, CSS, and JavaScript code organized and modular makes the project more maintainable and scalable. This project reinforced best practices in code organization.
- User Experience: By focusing on both the design and functionality, you gained insights into creating a good user experience. This includes intuitive UI design, quick response times, and reliable data storage.
Future Enhancements:
- Enhanced Styling: Further improve the UI/UX by adding animations, transitions, and more advanced CSS features.
- Data Management: Implement a backend using technologies like Node.js and databases such as MongoDB to manage notes, allowing for more advanced features like user authentication and remote data storage.
- Additional Features: Add features like note categorization, search functionality, and the ability to sync notes across devices.
- PWA (Progressive Web App): Transform the notes app into a PWA, allowing users to install it on their devices and use it offline.
Final Thoughts
Building a Notes App is a rewarding project that encompasses many aspects of web development. It provides a comprehensive learning experience, from structuring content with HTML to styling with CSS and adding interactivity with JavaScript. By completing this project, you have taken a significant step towards becoming proficient in web development. Keep experimenting with new features and technologies, and continue to build more projects to further enhance your skills.
Leave a Reply