Building a Dynamic Sticky Note App with HTML, CSS, Vanilla JavaScript, and API
Tags: javascript, api, tutorial, webdev
Published: 2023-09-02 19:34:16

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:
1. Set up html structure and css
2. Create form to capture note
3. Post note to Api
4. 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](https://github.com/mockapi-io/docs/wiki/Quick-start-guide) 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

```html:
 <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.

```css:
: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](https://bryondickers.github.io/technical-w/images/initial-site-look.png)

## 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.

1. Create `index.js` file. 

2. Add click event listener to `+Add a new note` button. The code below handles the clicked event by calling `displayForm` function.


```js:
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);
}

```
3. Run `index.html` file and click `Add new note` button. The browser should resemble the image below.

![Display form to add new note](https://bryondickers.github.io/technical-w/images/add-note-screen.png)

## 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:

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

```js:
 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:

1. Gets user typed value.
2. Creates new object(**noteObject**) with `content` as key
3. Assign typed value to 
 ```js:
  const noteObject = {content:typedValueFromUser};
  ```
4. Post **noteObject** to Api using `fetch` method
5. Create new `div` html element
6. Assign `textContent` property of new `div` to value obtained from `fetch` method
7. Append created `div` to a section element of id `note-section` in `index.html`
8. Remove the form element

```js:
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:

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

```js:
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

![sticky note end product](https://bryondickers.github.io/technical-w/images/end-sticky.png)

## 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 :
1. Set up html structure and css
2. Create form to capture note
3. Post note to Api
4. Get notes from Api

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