DEV Community: Brian Ndickers

Building shopping cart with html, tailwindcss and Javascript

Brian Ndickers — Sat, 16 Sep 2023 18:04:34 +0000

A shopping cart is a compulsory section in modern ecommerce web application. Ecommerce web apps processes payment of products. Through shopping cart, the web app is able to:

Keep track of items selected.
Get price of each selected item.
Get quantity of items to be purchased.
Compute shipping fees
Compute total amount to be paid for the items.

In summary, shopping cart facilitates the purchase of product or service.

In this tutorial, I'm going to illustrate how to build an interactive shopping cart with html, tailwindcss and javascript.

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

html
tailwindcss
javascript
dom manipulation

NOTE: This tutorial assumes you already select items from the home page. Now you are in the shopping cart page.

Let's start creating shopping cart.

Create html file and configure tailwindcss

First create index.html file and configure tailwindcss to index.html. For installation of tailwindcss in your project, checkout here.
Now create index.html in our project.

Add the head tag. Inside head tag, link the following:

google font to use in the project (fraunces, montserrat).
output.css file (generated by tailwindcss when project executes)
index.js file (created later)

Below is how head tag looks

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Montserrat:wght@400;500;700&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="./output.css" />
  <script type="module" src="./index.js" defer></script>
  <title>cart</title>
</head>

Now go to the body tag. The body tag contains, the header tag, section tag and footer tag.

The header tag consist of the cart logo. The section tag is currently empty (later add cart items). The footer tag contains cart total price, shipping fee and checkout price and checkout button.

<body>
    <main class="md:p-6 md:pt-10 px-2 pt-6">
        <div class="md:flex md:flex-row md:items-center md:justify-between">
        <header class=" flex md:flex flex-row gap-x-2 pb-3 items-center">
          <img src="./images/bag-2.png" alt="" srcset="" />
          <p class="text-darkBlue text-2xl font-bold">Cart</p>
        </header>
      </div>
         <section class="lg:flex lg:flex-row lg:justify-start">
          <section class="lg:w-[65%] lg:pr-4">
           <div
           class="md:w-full border-y-2 py-4 border-lineColor flex flex-row justify-between text-grey font-medium"
         >
           <div class="md:flex md:w-[45%] md:flex-row md:justify-between ">
             <p>PRODUCT</p>
             <p>PRICE</p>
           </div>
           <div class="md:flex md:w-[30%] md:flex-row md:justify-between">
             <p>TOTAL</p>
             <p>QTY</p>
           </div>
         </div>
         <section id="add-items" class="add-cart-items">
              <!-- purchased items -->
         </section>
         <footer class="bg-totalsGrey p-4 lg:px-4 lg:p-0 lg:w-[35%]">
           <div class="total-section">
             <p class="total-amount-name">TOTAL AMOUNT IN CART</p>
             <p id="add-items-cost" class="total-amount">$</p>
           </div>
           <div class="total-section">
             <p class="total-amount-name">SHIPPING FEE</p>
             <p id="shipping-fee" class="total-amount">$</p>
           </div>
           <div class="total-section">
             <p class="total-amount-name">TOTAL AMOUNT</p>
             <p id="total-amount-to-pay" class="total-amount">$</p>
           </div>
           <button id='checkout-btn' class="total-amount mt-4 py-3 w-full active:bg-grey hover:bg-darkBlue bg-blue text-white ">Checkout <span id="checkout-btn-amount">708.85</span></button>
          </footer>
         </section>
       </main>
</body>

NOTE: The colors used in this project are custom colors (not tailwind default colors). These colors are darkBlue, totalsGrey, grey. For more information about tailwind custom colors check here.

Create two javascript files

The first file is item.js file. This file has newItem function. The newItem function takes an object as a parameter. The object has three properties(image, name, price).

The function has two local variables named createDiv and itemHtml. Variable createDiv stores newly created html div. The itemHtml stores html code in a string variable.

The innerHtml property of createDiv is assign to itemHtml. The newItem function returns createDiv. The function is then exported.

export default function newItem(item){
  const createDiv = document.createElement("div");
    const itemHtml = `<div class="border-b-2 md:justify-between border-lineColor flex flex-row py-6">
    <div class="flex md:w-[45%] md:justify-between flex-col md:flex-row md:items-center w-[60%] ">
      <div class="flex flex-row gap-x-2">
        <img class="max-w-[7.5rem] h-auto" src="${item.image}" alt="" srcset="" />
        <div class="md:pr-6 md:flex md:flex-col md:justify-center" >
          <p class="text-lightGrey text-sm md:text-base">Footwear</p>
          <p  style="white-space:wrap;overflow:hidden;width:100%" class="item-description md:text-lg text-base">
            ${item.name}
          </p>
        </div>
      </div>
      <p class="self-end md:self-center text-xl md:text-2xl font-bold mr-4 md:mr-0">${item.price}</p>
    </div>
    <div class="w-[40%] md:w-[30%] flex md:flex-row-reverse md:items-center flex-col items-end justify-between">
      <p id="total-item-cost" class="text-xl md:text-2xl text-purple font-bold">${item.price}</p>
      <div
        class="flex flex-row gap-x-2 items-center border-y-[2px] border-lineColor"
      >
        <button id="decrease" class="increment-btn">-</button>
        <p class="px-2">1</p>
        <button id="increase" class="increment-btn ">+</button>
      </div>
    </div>
  </div>`;
  createDiv.innerHTML = itemHtml;
return createDiv;
}

Create index.js file. In index.js file import the newItem function from item.js file. Rename the imported function to newShoeItem.

import newShoeItem from "./item.js";

The index.js file, contains an array of objects named shoes. The object has image, name and price properties. The objects displays later as cart selected items.

const shoes = [
    {
      name:"Nike Air Force 1",
      price:110,
      image:"https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/e777c881-5b62-4250-92a6-362967f54cca/air-force-1-07-womens-shoes-b19lqD.png"
    },
    {
      name:"Air Jordan 4 'Black Cat'",
      price:240,
      image:"https://images.stockx.com/images/Air-Jordan-4-Retro-Black-Cat-2020-Product.jpg?fit=fill&bg=FFFFFF&w=700&h=500&fm=webp&auto=compress&q=90&dpr=2&trim=color&updated_at=1606315877"
    },
    {  
      name: "Air Jordan 7 Retro",
      price: 200,
      image: "https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/bd3da02f-2ddc-4f0c-bb7b-f94c634cc0dd/air-jordan-7-retro-mens-shoes-7Zr804.png",  
    },
    {
      name: "Air Jordan 1 Utility",
      price: 170,
      image: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/956b0723-ef2f-4b49-8982-e2ec37e14f9c/air-jordan-1-utility-mens-shoes.png"
    }];

Add DOMContentLoaded event listener. The event calls addItemToCart function after loading dom content.

The addItemsToCart function does the follow:

Get empty select tag with id add-items
Create a loop to get each item object in the array of shoes
Call newShoeItem(imported function) passing each shoe as argument

Insert returned html code to empty select tag of id add-items

document.addEventListener("DOMContentLoaded",addItemToCart);

function addItemToCart() {
const addSelectedShoes = document.getElementById("add-items");
shoes.forEach(shoe=>{
  addSelectedShoes.appendChild(shoeItem(shoe));
  })
}

Now run index.html file in the browser. Your output should resemble the image below

Quantity manipulation

You'll notice the increment(+) and decrement(-) buttons are not working when clicked. You should make the buttons functional in index.js file.

Increment quantity

Start with increment button.To make items quantity increase when + button is clicked, follow the steps below:

Inside addItemsToCart function

Get all increment buttons

const incrementButtons = document.querySelectorAll("#increase");

Use forEach method to trigger increaseItems function on each button.
```
incrementButtons.forEach(increaseItems)
```
The increaseItems function, does the following
1. Pass in button as parameter
2. Add click event listener to the button
3. Use event object to get the current quantity of the items
4. Increments the current quantity
```
function increaseItems(button){
button.addEventListener("click", function (e){
e.target.previousElementSibling.textContent++;
 })
}
```

Decrement quantity

Make items quantity decrease when clicking - button.

Inside addItemsToCart function

Get all decrement buttons

const decrementButtons = document.querySelectorAll("#decrease");

Use forEach method to trigger decreaseItems function on each button.
```
decrementButtons.forEach(decreaseItems)
```

The decreaseItems function does the following:

Pass in button as parameter
Add click event listener to the button
Use event object to get current item quantity

Decrement current quantity, if current quantity is greater than 1

function decreaseItems(button) {
button.addEventListener("click", function (e) {
let currentQuantity = e.target.nextElementSibling.textContent;
if(currentQuantity > 1){
e.target.nextElementSibling.textContent--;
    }
  });
}

Now, you are able to increment and decrement the quantity when + button and - button are clicked as shown below.

You are able to increase and decrease the quantity. But the quantity amount is still constant.

Updating total item price

Multiply item price with quantity to get total item price

Create totalItemPrice function. The function will take in two parameters element and siblingPostion. The totalItemPrice function does the following:

Use element parameter(clicked button) to get item price by dom traverse
Use siblingPosition parameter to get item quantity
Multiply item price with item quantity to get total item price

Use element to get text content of total item price and update total item price

function totalItemPrice(element,siblingPosition){
let itemPrice = element.parentElement.parentElement.previousElementSibling.children[1].textContent.slice(1);
let itemQuantity = siblingPosition.textContent;
let totalItemPrice = itemPrice * itemQuantity;
element.parentElement.previousElementSibling.textContent = `$${totalItemPrice}`;
}

Now you need to call totalItemPrice function inside decreaseItem and increaseItem function. This will make item total price update everytime increment and decrement button is clicked.

Call totalItemPrice function inside click event function of increaseItem and decreaseItem function.

Use the event object to get the arguments in totalItemPrice.

In increaseItem the arguments used in event function are e.target and e.target.previousElementSibling.

const previousSibling = e.target.previusElementSibling;
totalItemPrice(e.target,previousSibling);

In decreaseItem the arguments used in event function are e.target and e.target.nextElementSibling.

const nextSibling = e.target.nextElementSibling;
totalItemPrice(e.target,previousSibling);

The e.target is the button clicked. The e.target.previousElementSibling and e.target.nextElementSibling gets item quantity

Total item price updates when + and - buttons are clicked.

Now sum up item total price.

Compute cart Total price, shipping fee and checkout price

A cart need to sum up total item price, compute shipping fees and calculate the checkout price of the items. You are going to create calculateTotals function. The function returns an array.

The calculateTotals function does the following:

Declare cartTotalPrice variable and initialize cartTotalPrice to 0.
Get each item total price and add them to cartTotalPrice.
Declare shippingFee variable and initialize it to 7% of cartTotalPrice.
Declare totalCashToPay variable and initialize it to sum of cartTotalPrice and shippingFee.

Returns an array consisting of three variables; cartTotalPrice, shippingFee and totalCashToPay.

function calculateTotals() {
let cartTotalPrice = 0;
const getItemPrices = document.querySelectorAll("#total-item-cost");
getItemPrices.forEach(itemPrice =>{
  cartTotalPrice += Number(itemPrice.textContent.slice(1));
})
const shippingFee = (cartTotalPrice*7/100);
const totalCashToPay = cartTotalPrice + shippingFee;
return [cartTotalPrice.toFixed(2), shippingFee.toFixed(2), totalCashToPay.toFixed(2)]
}

Updating cart Total price, shipping fee and checkout price on corresponding elements

You need to update the UI with computed values. Everytime the user decrement or increment quantity, the UI needs to show real time values.

Create updateTotals function which takes in two parameters. The parameters are elementId and value. The function gets the element of the id and update the element text content with the value.

function updateTotals(elementId,value){
  const element = document.querySelector(elementId);
  element.textContent = value;
}

Call calculateTotals and updateTotals function inside the totalItemPrice function. This will make updates when either increment or decrement button is clicked.

The calculateTotals function will return an array. Then destructure the array to get three independent value.

const [totalPrice,shippingFee,checkoutPrice] = calculateTotals();

Now call the updateTotals function to change the initial value of the elements to current value.

Update content of element with id add-items-cost to totalPrice value.
Update content of element with id shipping-fee to shippingFee value.
Update content of element with id total-amount-to-pay to checkoutPrice value.

Update checkout button to read checkoutPrice.

updateTotals("#add-items-cost",`$${totalPrice}`);
updateTotals("#shipping-fee",`$${shippingFee}`);
updateTotals("#total-amount-to-pay",`$${checkoutPrice}`);
updateTotals("#checkout-btn",`Checkout $${checkoutPrice}`);

Finally your shopping cat should be responsive and resemble the image below.

Now the shopping cart is responsive and manipulable. In summary the shopping cart is able to:

Increase and decrease item quantity
Compute item total price
Sum item total price
Compute shipping fee
Compute total checkout price

Drag and Drop implementation using html/css and Javascript

Brian Ndickers — Sun, 03 Sep 2023 21:12:57 +0000

Drag & drop is among the important technique a web developer must be comfortable working with. In this article we are going to cover important events involved in drag & drop. For better understanding of this article, you need to be familiar with:

html
Javascript
DOM events.

Drag & drop events can be categorised into two:

Events that happens on dragged element
Events that happens on target element(dropZone).

For these events to work, set draggable attribute in dragged element to true.

<p draggable="true" class="dragged-item">This is our draggable element</p>

NOTE: Images and links are draggable by default (No need to set draggable attribute to true)

1 Events that happen on dragged element

These are events that trigger when draggable elements moves from their original position to final position. The events are:

dragstart event
drag event
dragend event

Now let's discuss each event to see when and how to use these events.

a) Dragstart event

The dragstart event triggers when user start to move dragged element.This event uses dataTransfer object to set data.

The dataTransfer object sets data using setData method. The setData method takes in two parameter:

format of data to be set ("text/plain", "text/html" etc)
data value (anything in string form)

e.dataTransfer.setData(format, data);

NOTE: The data set above, is later retrieved and used in drop event.

dragstart event implemention

Add dragstart event listener to dragged element
Get id of dragged element for later use (use event.target.getAttribute("id") to get id).
Set data(in text/plain format) to id of dragged element. The data is set usingsetData method in dataTransfer object.

const draggedElement = document.querySelector(".dragged-item");
draggedElement.addEventListener("dragstart",function(e){
    e.dataTansfer.setData("text/plain",e.target.id);
})

b) drag event

The drag event triggers when dragged element is moving. The drag event fires continuously since it triggers when moving dragged element.

Drag event provides an opportunity to change appearance of dragged element so that users can visualize their action.

In drag event, change the appearance of dragged element using css.

drag event implementation

Add drag event listener to dragged element
Get dragged element(e.target)
Change the color of dragged element

draggedElement.addEventListener("drag",function(e){
    e.target.style.color = "grey";
})

NOTE:

You can ommit drag event if you not changing appearance of dragged element

It is possible to use setData method in dataTransfer object to set data in this drag event.

c) dragend event

The dragend event triggers when drag operation is completed. Drag operation can either be successful or unsuccessful.

This dragend event allows you to reset appearance of dragged element to initial appearance of dragged element.

dragend event implementation

Add dragend event listener to dragged element
Get dragged element(e.target)
Change the color of dragged element to its initial color

draggedElement.addEventListener("drag",function(e){
    e.target.style.color = "grey";
})

NOTE: You can ommit dragend event if you not changing appearance of dragged element

2 Events that happen on drop target element

These are events that occur when dragged element moves over the drop target element(dropZone). The events modifies the dropZone element. The events are:

dragenter event
dragover event
drop event
dragleave event

let's discuss the above events and how they should be implemented.

a) dragenter event

Thedragenter event fires when dragged element enters the dropZone. This dragenter event provides a visual feedback that a dropZone element accepts dragged element(drop target).

dragenter event implemention

Create dropZone element in html

<div class="drop-zone"></div>

Get dropZone element using selector

const dropZone = document,querySelector(".drop-zone");

Add dragenter event listener to dropZone element
Using e.target, modify dropZone element(change bacground color).

dropZone.addEventListener("dragenter",function(e){
e.preventDefault()
e.target.style.border = "dotted 4px black";
})

NOTE: The default behavior of dragenter is to avoid dropping of dragged element. The e.preventDefault() prevents the default behaviour of dragenter event hence allowing dropping of dragged element in dropZone.

b) dragover event

The dragover event fires when dragged element is over the dropZone. This dragover event fires every milliseconds.

The main purpose of dragover event is to prevent default. Preventing default, prevents dragged element from going back to its original position when handling drop event.

dragover event implemention

Get the dropZone element
Add dragover event listener to dropZone element
Prevent default of dragover event

dropZone.addEventListener("dragover",function(e){
e.preventDefault()
})

c) drop event

The drop event fires when dragged element drops in dropZone. The drop event is where we get the data that was set in dragstart event and use the data. The data is obtained from dataTransfer object using getData method.

drop event implemention

Get dropZone element
Add drop event listener to dropZone element
Prevent default of drop event (opening link when dropped)
Get the data that was set in dragstart event and store it in a variable called draggedElementId

   const draggedElementId = e.dataTransfer.getData("text/plain");

NOTE: draggedElementId is a string (id of dragged element)

Get the dragged element using document.getElementById and store it in another variable called draggedElement

const draggedElement = document.getElementById(draggedElementId);

Get the dropZone element(e.target) and append the draggedElement

    dropZone.addEventListener("drop",function(e){
        e.preventDefault()
        const draggedElementId = e.dataTransfer.getData("text/plain");
        const draggedElement = document.getElementById( draggedElementId);
        e.target.appendChild(draggedElement);
    })

The draggedElement moves inside dropZone as child element.

d) dragleave event

The dragleave event fires when dragged element leaves the dropZone area. This dragleave event can be used to modify dropZone element to its original state( remove visual feedback in dragenter event).

dragleave event implementation

Get dropZone element
Add dragleave event listener to dropZone element
Reset dropZone element to its original state

dropZone.addEventListener("dragleave",function(e){
        e.preventDefault()
        e.target.style.border = "solid 4px black";
    })

Conclusion

In summary, mastering these drag & drop events is essential for creating interactive and user-friendly web applications. They allow you to build features like drag-and-drop interfaces, file uploads, and more.

By understanding and effectively implementing these events, you can create dynamic and user-friendly interfaces with drag & drop functionality, enhancing the user experience and interactivity of websites.

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

Brian Ndickers — Sat, 02 Sep 2023 19:34:16 +0000

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 :

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.