Sticky Notes— Building the Visual Structure

Part 1: A JavaScript Application built with no frameworks

Published in

JavaScript in Plain English

5 min readDec 22, 2021

Live dev notes taken throughout the following tutorial by dcode — How to Build a Sticky Notes App using JavaScript (Beginner’s Project)

In part 1, we look at setting up a sticky notes application. From mapping out the core functions to writing the files for the HTML structure and styling.

Introduction

Why are we building this project?

Great beginner project
A useful project that you can customise to make your own
Understand the ins and outs of a simple CRUD application
To get familiar with handling data through an interface

What are we going to learn?

How to use the localStorage API
How to reference a JavaScript file to run properly at runtime
How to create a vanilla JavaScript application with CRUD functionality without any libraries or frameworks
Handling elements which are created dynamically with JavaScript

We should have a basic understanding of the following:

HTML
CSS
JavaScript

Tools

Google Chrome
Terminal — currently using Command Prompt
Code Editor — currently using Sublime Text

Set up a local server

Since I already had Python installed — I used the http.server module.

However, you’re more than welcome to use any other tool to set up a local server, such as browsersync.

How to spin up a python local server:

Navigate your terminal to the folder you want to host
Run the following command, add a custom port if you want at the end of the command.

python -m http.server <port>

Designing the interface

The core functions of the application

Click on the plus symbol to add a note. Adds sticky note with placeholder content
Click into the sticky note to write custom content. Click out of sticky note to save custom content
Double click on the sticky note to delete. Alerts user if they would like to confirm deletion
Custom content is saved in local storage. Refreshing or loading of page will regenerate notes that have been stored in the browser

File structure

We’ll be working with 3 files: index.html, styles.css and main.js

Below is the folder structure I’m following so that it makes sense with how I reference files.

stickynotes
├── index.html
└── src
     ├── styles.css
     └── main.js

Here in index.html, we’ll set up a base structure

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

Let’s also link up the CSS and JS files.

It’s super important that you include a defer attribute for styles.css . This will make sure that the JS file loads up as the page loads and executes only once the HTML has been loaded inside the JS. It will prevent errors with undefined elements.

<head>
 ... <link rel="stylesheet" type="text/css" href="src/styles.css">
 <script type="text/javascript" src="src/main.js" defer></script>...
</head>

Building the visual structure

Inside the <body> tags, we’ll create a single div that will house the entire application and assign it an id of “app”. Then inside of that, we’ll include a sample text area and button.

<body> <div id="app">
  <textarea class="note">Some sample text</textarea>
  <button class="add-note" type="button">+</button>
 </div></body>

Styling the application

To style the application, we’ll jump into styles.css and start by removing some of the default stylings.

body {
 margin: 0;
 background: #008578;
}

Using CSS Grid

To style the app, we’ll be using CSS Grid.

The app will have the following styling:

width of 200px
padding of 24px
gap of 24px

#app {
 display: grid;
 grid-template-columns: repeat(auto-fill, 200px);
 padding: 24px;
 gap: 24px;
}

Using auto-fill means that when another 200px wide sticky note can fit, it will fill in the gap on the right side of the application, otherwise, it will drop to the next row. You can read more about it here.

Let’s duplicate the sample textareas to see what happens to the grid of notes.

<div id="app">
 <textarea class="note">Some sample text</textarea>
 <textarea class="note">Some sample text</textarea>
 <textarea class="note">Some sample text</textarea>
 <textarea class="note">Some sample text</textarea>
 <textarea class="note">Some sample text</textarea>
 <textarea class="note">Some sample text</textarea>
 <button class="add-note" type="button">+</button>
</div>

Styling the Sticky Notes

height of 200px
a box-sizing of border-box meaning that the padding doesn’t increase the width and height of the sticky note
padding of 16px
no border
border-radius of 10px
box-shadow 15% opaque black shadow
remove resize capabilities
font-family of sans-serif
font-size of 16px

.note {
 height: 200px;
 box-sizing: border-box;
 padding: 16px;
 border: none;
 border-radius: 10px;
 box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
 resize: none;
 font-family: sans-serif;
 font-size: 16px;
}

Styling the add button

height of 200px
no border
no outline
background of 10% opaque black so that the background colour seeps through
border-radius of 10px
font-size of 120px
color of 50% opaque black
cursor of pointer
hover over effect to darken the background of the button and make it transition with a smooth fade

.add-note {
 height: 200px;
 border: none;
 outline: none;
 background: rgba(0, 0, 0, 0.1);
 border-radius: 10px;
 font-size: 120px;
 color: rgba(0, 0, 0, 0.5);
 cursor: pointer;
 transition: background 0.2s;
}.add-note:hover {
 background: rgba(0, 0, 0, 0.2);
}

Next, we look into storing content into the Local Storage API and adding interactivity.

More content at plainenglish.io. Sign up for our free weekly newsletter here.