Building a Dynamic Sticky Note App with HTML, CSS, Vanilla JavaScript, and API
<p>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.</p>
<p>Here are four steps we will follow to build sticky note app:<br />
1. Set up html structure and css<br />
2. Create form to capture note<br />
3. Post note to Api<br />
4. Get notes from Api</p>
<p>To follow along with this tutorial, you’ll need to be familiar with the following:</p>
<p>- html and css<br />
- javascript and dom manupilation<br />
- fetch api</p>
<p>**NOTE:** In this tutorial we’ll use [mock api](<a href="https://github.com/mockapi-io/docs/wiki/Quick-start-guide" rel="noopener ugc nofollow" target="_blank">https://github.com/mockapi-io/docs/wiki/Quick-start-guide</a>) to store notes.</p>
<p>## 1. Set up html structure and css</p>
<p>Create `index.html` file and link it to `style.css` file. Add the following html code to `index.html`.</p>
<p>**NOTE:** The follow html code, also link `index.js` file</p>
<p>```html:<br />
<head><br />
<! — link style.css file →<br />
<link rel=”stylesheet” href=”./style.css” /><br />
<title>my notes</title><br />
</head><br />
<body><br />
<main><br />
<header><br />
<h1>My Notes</h1><br />
<a id=”display-form-input”<br />
class=”Add-new-note-btn”>+ Add a new note</a><br />
</header><br />
<section id=”note-section” class=”main-article-section”><br />
<div id=”article-div” class=”flex-section-div”></div><br />
</section><br />
</main><br />
<script src=”./index.js”></script><br />
</body></p>
<p>```</p>
<p>Now create a `style.css` file. Add the code below to `style.css` file.</p>
<p><a href="https://medium.com/@bryondickers/building-a-dynamic-sticky-note-app-with-html-css-vanilla-javascript-and-api-151e4835c13e">Visit Now</a></p>