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

#javascript #api #tutorial #webdev

In this article, you are going to learn about how to build a sticky note app using html,css and javascript. You're going to store the notes in Api and get 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 you will 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.

2. Create form to capture note

Now user needs somewhere to type their note. In this section you will implement 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. The browser should resemble the image below.

3. Post note to Api

User is able to type the note in our application. But, the text vanishes when submitted. You need to prevent the default behavior of form submission. 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

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

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 resembles the image below

Conclusion

In conclusion, You'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 :