Note App Using HTML CSS and JavaScript

5 min readOct 1, 2023

hey everybody, today we are going to learn how to make a note app using HTML CSS, and JavaScript from scratch. Notes app which is used to add the content or tasks inside the notes app. Once you add the content, then you can change it and also remove it. So, It’s a great application for everyone who can use it for different purposes.

Taking notes has become an integral part of our daily lives. Whether it’s jotting down important information, making to-do lists, or simply saving ideas, having a convenient way to manage notes can be incredibly useful.

In this article, we’ll explore how to create a basic Notes App using HTML CSS, and JavaScript. While we won’t provide the actual code here, we’ll outline the key steps and concepts you need to build your own Notes App.

You May Also Like:

To start building our Notes App, we first need to set up the project environment. Create a folder for your project and name it appropriately, like “NotesApp.” Within this folder, create three separate files: index.html, style.css, and script.js. These files will house the structure, styling, and functionality of your app.

Note App Using HTML CSS and JavaScript

If you are interested in the source code of codes of the project you can find it below, but, I’ve made a video tutorial on this topic. If you are interested in how to create a note App using HTML CSS and JavaScript from scratch with practically, you can watch the video tutorial.

Before diving into coding, it’s essential to have a clear design in mind for your Notes App. Sketch out how you want the app to look and function. Here are some elements to consider:

Header: Include a title or logo for your Notes App to make it easily recognizable.
Note Input Area: Create a space where users can input their notes. This is typically a text area or an input field.
Save Button: Implement a button that allows users to save their notes.
Note List: Allocate an area to display the saved notes. Each note should be visible in a list format.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
    <script defer src="js/script.js"></script>
    <title>Note App Using HTML CSS & JS</title>
  </head>
  <body>
    <h2>Notes Application</h2>
    <button class="btn_add"><i class="fas fa-pencil"></i> Add Note</button>
    <!-- <div class="note-wrapper">
      <div class="operations">
        <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 hidden"></div>
      <textarea></textarea>
    </div> -->
  </body>
</html>

In your index.html file, set up the basic structure of your app. Here’s a template to get you started:

Header: Include a header with the title or logo of your Notes App.

Main Content: Within the main content section, create a note input area (a text area or input field) where users can type their notes. Add a “Save” button adjacent to this input area.

Note List: Allocate an empty container where the saved notes will be displayed. Initially, this area will be empty, but as users add notes, they will populate this section.

Open your style.css file and apply styles to your app’s HTML elements. You can customize the colors, fonts, layout, and overall appearance of your app to match your design vision. Pay attention to making your app visually appealing and user-friendly.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #9b59b6;
  font-family: "poppins", sans-serif;
  display: flex;
  flex-wrap: wrap;
  padding-top: 15rem;
}
h2 {
  font-size: 3rem;
  color: #f4f6f7;
  position: absolute;
  top: 7rem;
  left: 4rem;
}
.btn_add {
  position: fixed;
  top: 12rem;
  left: 4rem;
  outline: none;
  border: none;
  background: #8e44ad;
  color: #fff;
  padding: 0.6rem 2rem;
  margin-bottom: 8rem 0;
  font-family: inherit;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
}
.note-wrapper {
  background: #fff;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
  width: 400px;
  height: 250px;
  font-size: 1.2rem;
  margin: 30px 0 0 3.8rem;
}
.note-wrapper .operations {
  background: #5b2c6f;
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}
.note-wrapper .operations button {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  margin-left: 0.7rem;
}
.note-wrapper textarea {
  outline: none;
  font-family: inherit;
  font-size: 1.2rem;
  width: 100%;
  height: 250px;
  padding: 20px;
  resize: none;
  border: none;
}
.main {
  padding: 20px;
}
.hidden {
  display: none;
}

The last thing you need to add is JS, you can use JS to store, delete, and edit the note list. So, you can find the source code below.

"use strict";
const btnAdd = document.querySelector(".btn_add");
const notes = JSON.parse(localStorage.getItem("notes"));
if (notes) {
  notes.forEach((noteTxt) => addNote(noteTxt));
}

btnAdd.addEventListener("click", () => addNote());
function addNote(text = "") {
  const note = document.createElement("div");
  note.classList.add("note-wrapper");
  note.innerHTML = `<div class="operations">
    <button class="edit fas fa-edit"></button>
    <button class="delete fas fa-trash-alt"></button>
  </div>
  <div class="main ${text ? "" : "hidden"}"></div>
  <textarea class="${text ? "hidden" : ""}"></textarea>`;

  const editBtn = note.querySelector(".edit");
  const deleteBtn = note.querySelector(".delete");
  const mainEl = note.querySelector(".main");
  const textAreaEl = note.querySelector("textarea");

  textAreaEl.value = text;
  mainEl.innerHTML = text;
  deleteBtn.addEventListener("click", () => {
    note.remove();
    updates();
  });

  editBtn.addEventListener("click", () => {
    mainEl.classList.toggle("hidden");
    textAreaEl.classList.toggle("hidden");
  });

  textAreaEl.addEventListener("input", (e) => {
    const { value } = e.target;
    mainEl.innerHTML = value;
    updates();
  });
  document.body.appendChild(note);
}

function updates() {
  const noteText = document.querySelectorAll("textarea");
  const notes = [];
  noteText.forEach((note) => notes.push(note.value));
  localStorage.setItem("notes", JSON.stringify(notes));
}

Building a Notes App is just the beginning. Continue to refine and improve your app based on user feedback and your ideas. Consider adding features like editing and deleting notes, categorizing notes, or implementing responsive design for various devices.

If you want to learn how to upload or deploy the HTML-based website on a server or cpanel. So, I made many tutorials, I’m going to share with you the easiest and best way to Upload an HTML Project on a Server you can watch the video that I mentioned below.

In conclusion, creating a Notes App using HTML, CSS, and JavaScript is an excellent way to enhance your web development skills. While we’ve provided a high-level guide here, you’ll need to write the actual code to bring your app to life. Use online resources, tutorials, and documentation to help you write the code and refine your app further. With determination and practice, you can create a fully functional and stylish Notes App to streamline your note-taking process.

Note App Using HTML CSS and JavaScript

Note App Using HTML CSS and JavaScript

Written by Arhaan Ali