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&rsquo;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&rsquo;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&rsquo;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 /> &lt;head&gt;<br /> &lt;! &mdash; link style.css file &rarr;<br /> &lt;link rel=&rdquo;stylesheet&rdquo; href=&rdquo;./style.css&rdquo; /&gt;<br /> &lt;title&gt;my notes&lt;/title&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &lt;main&gt;<br /> &lt;header&gt;<br /> &lt;h1&gt;My Notes&lt;/h1&gt;<br /> &lt;a id=&rdquo;display-form-input&rdquo;<br /> class=&rdquo;Add-new-note-btn&rdquo;&gt;+ Add a new note&lt;/a&gt;<br /> &lt;/header&gt;<br /> &lt;section id=&rdquo;note-section&rdquo; class=&rdquo;main-article-section&rdquo;&gt;<br /> &lt;div id=&rdquo;article-div&rdquo; class=&rdquo;flex-section-div&rdquo;&gt;&lt;/div&gt;<br /> &lt;/section&gt;<br /> &lt;/main&gt;<br /> &lt;script src=&rdquo;./index.js&rdquo;&gt;&lt;/script&gt;<br /> &lt;/body&gt;</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>
Tags: CSS HTML Vanilla