Create Sticky Note App: HTML, CSS, JS & API

In this article, we are going to learn how to build a sticky note app using html/css and javascript. We're going to store the notes in Api and getting the notes from api for display in the screen.

Here are four steps we will follow to build sticky note app:

Set up html structure and css
Create form to capture note
Post note to Api
Get notes from Api

To follow along with this tutorial, you'll need to be familiar with the following:

html and css
javascript and dom manupilation
fetch api

NOTE: In this tutorial we'll use mock api to store notes.

1. Set up html structure and css

Create index.html file and link it to style.css file. Add the following html code to index.html.

NOTE: The follow html code, also link index.js file

 <head>
    <!-- link style.css file -->
    <link rel="stylesheet" href="./style.css" />
    <title>my notes</title>
  </head>
 <body>
    <main>
      <header>
        <h1>My Notes</h1>
        <a id="display-form-input"
          class="Add-new-note-btn">+ Add a new note</a>
      </header>
      <section id="note-section" class="main-article-section">
        <div id="article-div" class="flex-section-div"></div>
      </section>
    </main>
    <script src="./index.js"></script>
  </body>

Now create a style.css file. Add the code below to style.css file.

:root {
  --head-color: hsla(0, 0%, 13%, 1);
  --dark-blue: hsla(228, 69%, 13%, 1);
  --blue: hsla(228, 69%, 20%, 1);

  --content-color: hsla(0, 0%, 13%, 1);
  --greyish: hsla(0, 2%, 44%, 1);
  --white: hsla(0, 0%, 100%, 1);
}
body {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  font-family: "DM Sans", sans-serif;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main {
  inline-size: 90%;
}

.add-new-note-btn {
  background-color: var(--dark-blue);
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  inline-size: 15%;
  text-align: center;
  text-decoration: none;
  padding: 15px 24px;
  color: var(--white);
  border-radius: 25px;
  margin-block-end: 1.5rem;
}
.submit-note{
  padding: 15px 24px;
  background:var(--dark-blue);
  border-radius: 20px;
  color: var(--white);
  margin-block-start: 1rem;
  inline-size: 40%;
  margin-inline-start:60%;
  border:none;
  white-space: nowrap;
}
textarea{
  resize: none;
  padding: 0.7rem;
  display: block;
  inline-size: 310px;
  block-size: 112px;
  border-radius: 10px;
  background:var(--greyish);
  color: var(--white);
}
.note-div{
  inline-size: 160px;
  block-size: 120px;
  background: #FCF5D2;
  border-radius: 10px;
  margin: 1rem;
  padding: 0.4rem;
}
#note-section{
  display: flex;
  flex-wrap: wrap;
}

Run index.html file in the browser. The code output should ressemble the image below.

Sticky note app initial look

2. Create form to capture note

Now user needs somewhere to type their note. In this section we're going to implement our display form logic. When user clicks +Add new note button, a form displays. Users can then type note in the textarea. The steps below implements display form logic.

Create index.js file.
Add click event listener to +Add a new note button. The code below handles the clicked event by calling displayForm function.

const addNewNote = document.querySelector(".Add-new-note-btn");

addNewNote.addEventListener("click",function (event){
  event.preventDefault();
  displayForm()
})

function displayForm(){
  const form = document.createElement("form");
    form.setAttribute("id", "note-form");
    // create textarea
    const textArea = document.createElement("textarea");
    textArea.setAttribute("id", "note");
    textArea.setAttribute("placeholder","Add note");
    // create add note button
    const button = document.createElement("button");
    button.setAttribute("class", "submit-note btn-state");
    button.setAttribute("id", "add-note");
    button.textContent = "Add note";
    // add textarea and button element to form created
    form.append(textArea, button);
    document.body.appendChild(form);
}

Run index.html file and click Add new note button. Your browser should look like the image below.

Display form to add new note

3. Post note to Api

User is able to type the note in our application but, the text vanishes when submitted. We need to first prevent default submission of the form. Then get note content and store the note in Api.

To store note in Api, follow the following steps:

Add click event listener to add note button
Call postNote function passing in url as parameter

 const postNoteBtn = document.querySelector("#add-note");
  postNoteBtn.addEventListener("click", function (e) {
    e.preventDefault();
    postNote("https://64e507a7c555638029140f2a.mockapi.io/note");
  });

NOTE: add note button event listener, is added inside displayForm function to prevent TypeError messege(postNoteBtn is null) since the form to type text, is not yet displayed.

The postNote function does the following:

Gets user typed value.
Creates new object(noteObject) with content as key

Assign typed value to

const noteObject = {content:typedValueFromUser};

Post noteObject to Api using fetch method
Create new div html element
Assign textContent property of new div to value obtained from fetch method
Append created div to a section element of id note-section in index.html
Remove the form element

function postNote(url) {
  const note = document.getElementById("note").value;

  let noteObject = { content: note };
  //   request object used in fetch api
  const requestObject = {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify(noteObject),
  };

  fetch(url, requestObject).then((response) => {
    if (response.statusText == "Created") {
      response.json().then((noteObj) => {
        const div = document.createElement("div");
        div.setAttribute("class", "note-div");
        div.textContent = noteObj.content;
        document.querySelector("#note-section").appendChild(div);
        document.getElementById("note-form").remove();
      });
    }
  });
}

4. Get notes from Api

We are able to post our note to api. We are also able to display our note in the browser. But when the browser loads, every note dissappear. We need to get all notes displayed in the browser when browser loads.

We'll add load event listener to window object. When browser loads, it triggers fetchNote function. fetchNote function does the following:

Gets all notes from Api in array form
Create div for each note in the array
Set textContent for each div to each note in array
Append each div to a section element of id note-section in index.html

window.addEventListener("load", function fetchNote() {
  fetch("https://64e507a7c555638029140f2a.mockapi.io/note").then((response) => {
    if (response.statusText == "OK") {
      response.json().then((notes) => {
        notes.forEach((note) => {
          const div = document.createElement("div");
          div.setAttribute("class", "note-div");
          div.textContent = note.content;
          document.querySelector("#note-section").appendChild(div);
        });
      });
    }
  });
});

Great! Now you have created your own sticky note application. The end result for the sticky note will ressemble the image below

sticky note end product

Conclusion

In conclusion, we've embarked on a journey to create a dynamic and engaging Sticky Note application using the fundamental web technologies of HTML, CSS, and Vanilla JavaScript, enhanced with API integration.Through this step-by-step tutorial, we've learned how to :

Set up html structure and css
Create form to capture note
Post note to Api
Get notes from Api

Remember there are endless possibilities for expansion. You can expand your sticky note app to edit and delete posted note.

Building a Dynamic Sticky Note App with HTML, CSS, Vanilla JavaScript, and API

Table of contents

1. Set up html structure and css

2. Create form to capture note

3. Post note to Api

4. Get notes from Api

Conclusion