Learn how to create interactive sticky notes using HTML, CSS, and JavaScript with our comprehensive step-by-step tutorial. Perfect for web developers of all levels.
Table of Contents
Creating sticky notes using HTML, CSS, and JavaScript is a fun and practical exercise in web development. Sticky notes, reminiscent of physical reminders, can be implemented on a webpage to jot down quick notes, reminders, or tasks. In this blog, we'll explore how to create customizable sticky notes that users can create, edit, and delete dynamically.
Introduction to Sticky Notes
Sticky notes are small, colorful pieces of paper designed for jotting down short messages or reminders and sticking them to surfaces where they'll catch your eye. Translating this concept into a web application involves using front-end technologies like HTML for structure, CSS for styling, and JavaScript for interactivity.
Source Code
Step 1 (HTML Code):
Let's begin with the HTML structure. The main elements include a container for the sticky notes and a button to create new notes.
Let's go through the HTML code step by step:
<!DOCTYPE html>: Declares the document type and version of HTML used, which is HTML5 in this case.
<html lang="en">: Defines the root element of the HTML document with the language attribute set to English (en).
<head>: Contains meta-information about the HTML document, such as character set, viewport settings, title, and links to external resources.
<meta charset="UTF-8" />: Sets the character encoding of the document to UTF-8, which includes most characters from the vast majority of human written languages.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport to the width of the device screen and sets the initial zoom level to 1.0. This is crucial for responsive web design.<title>Sticky Notes</title>: Sets the title of the web page to "Sticky Notes", which appears in the browser tab or window title bar.<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah"/>: Links to a Google Fonts stylesheet to import the "Gloria Hallelujah" font for use in the web page.<link rel="stylesheet" href="styles.css">: Links to an external CSS file named "styles.css" for additional styling of the HTML content.
<body>: Contains the content of the HTML document visible to users in the browser.
<div class="sticky-notes">: Defines a container for sticky notes.<div class="note-container">: Contains a single sticky note.<div class="note-content" contenteditable>: This is where the content of the sticky note resides. contenteditable attribute makes this div editable by users.<div class="note-actions">: Contains actions related to the sticky note.<button class="delete-note" onclick="deleteNote(this)">Delete</button>: A button labeled "Delete" that, when clicked, triggers a JavaScript function deleteNote(this), passing the button itself as an argument.
<div class="create-note" title="New Notes" onclick="createNote()">+</div>: Represents a button or a link (with + as the content) to create new notes. When clicked, it triggers a JavaScript function createNote().
<script src="script.js"></script>: Links to an external JavaScript file named "script.js" for scripting functionalities like handling note creation and deletion.
Step 2 (CSS Code):
Styling is crucial for creating an attractive and user-friendly interface. We'll use CSS to define the appearance of the sticky notes, including their size, colors, and animations.
Let's break down the CSS code:
Universal Reset
* {
margin: 0;
padding: 0;
}
- This sets all margins and paddings to zero for all elements on the page. This is a common technique to reset default browser styling, ensuring consistent behavior across different browsers.
Body Styling
body {
display: flex;
justify-content: center;
align-items: center;
background: #1f1d2b;
font-family: 'Gloria Hallelujah', cursive;
min-height: 100vh;
}
display: flex; justify-content: center; align-items: center;: Centers content horizontally and vertically within the body.background: #1f1d2b;: Sets a dark background color.font-family: 'Gloria Hallelujah', cursive;: Applies a cursive font style for the body text.min-height: 100vh;: Ensures the body takes up at least the full height of the viewport.
Sticky Notes Container
.sticky-notes {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: 800px;
}
display: flex;: Turns the container into a flex container.flex-wrap: wrap;: Allows items to wrap onto multiple lines if needed.gap: 20px;: Adds space between the sticky notes.max-width: 800px;: Limits the width of the container to 800px, ensuring it doesn't stretch too wide.
Note Container Styling
.note-container {
position: relative;
width: 250px;
height: 250px;
background: linear-gradient(#f9efaf, #f7e98d);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
- Styles each sticky note container:
position: relative;: Positions the note relative to its normal position.width: 250px; height: 250px;: Sets dimensions of the note container.background: linear-gradient(#f9efaf, #f7e98d);: Applies a gradient background.border-radius: 10px;: Rounds the corners of the note.box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);: Adds a subtle shadow.overflow: hidden;: Ensures content doesn't overflow the container.
Note Container Hover Effects
.note-container:hover {
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}
- Changes the box shadow slightly when hovering over a note container for a visual effect.
Note Content Styling
.note-content {
padding: 15px;
height: calc(100% - 40px);
border: none;
outline: none;
}
- Styles the content inside the note:
padding: 15px;: Adds internal space around the content.height: calc(100% - 40px);: Adjusts the height to leave space for action buttons.border: none; outline: none;: Removes default borders and outlines.
Action Buttons Styling
.note-actions {
position: absolute;
bottom: 10px;
right: 10px;
}
.delete-note {
background-color: #ff6347;
color: #fff;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.delete-note:hover {
background-color: #d9534f;
}
- Positions action buttons at the bottom right of the note container.
- Styles the delete button:
background-color: #ff6347;: Sets background color.color: #fff; border: none;: Sets text color and removes border.padding: 8px 12px; border-radius: 5px;: Adds padding and rounds corners.cursor: pointer;: Changes cursor to pointer on hover.font-size: 14px;: Sets font size.transition: background-color 0.3s ease;: Smooth transition on hover.
Create Note Button Styling
.create-note {
display: flex;
justify-content: center;
align-items: center;
font: 120px 'Helvetica', sans-serif;
margin: 0 15px;
width: 250px;
height: 250px;
background-color: #fff;
color: #888;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}
.create-note:hover {
transform: scale(1.05);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
- Styles the create note button:
display: flex; justify-content: center; align-items: center;: Centers content.font: 120px 'Helvetica', sans-serif;: Sets font style and size.margin: 0 15px;: Adds margin around the button.background-color: #fff; color: #888;: Sets background and text color.cursor: pointer;: Changes cursor to pointer.border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);: Rounds corners and adds shadow.transition: transform 0.2s ease-in-out;: Adds smooth scaling effect on hover.
*{
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #1f1d2b;
font-family: 'Gloria Hallelujah', cursive;
min-height: 100vh;
}
.sticky-notes {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: 800px;
}
.note-container {
position: relative;
width: 250px;
height: 250px;
background: linear-gradient(#f9efaf, #f7e98d);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.note-container:hover {
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}
.note-content {
padding: 15px;
height: calc(100% - 40px);
border: none;
outline: none;
}
.note-actions {
position: absolute;
bottom: 10px;
right: 10px;
}
.delete-note {
background-color: #ff6347;
color: #fff;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.delete-note:hover {
background-color: #d9534f;
}
.create-note {
display: flex;
justify-content: center;
align-items: center;
font: 120px 'Helvetica', sans-serif;
margin: 0 15px;
width: 250px;
height: 250px;
background-color: #fff;
color: #888;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}
.create-note:hover {
transform: scale(1.05);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
} Step 3 (JavaScript Code):
JavaScript brings the sticky notes to life by enabling creation, deletion, and editing functionalities. Let's implement these functions:
createNote() Function:
This function creates a new sticky note and appends it to a container with class .sticky-notes.
Select Container:
const stickyNotes = document.querySelector('.sticky-notes');
- Finds the element in the DOM with the class .sticky-notes, which presumably is a container where sticky notes are displayed.
Create Note Container:
const noteContainer = document.createElement('div');
noteContainer.classList.add('note-container');
- Creates a new div element (noteContainer) and assigns it the class note-container.
Create Note Content:
const noteContent = document.createElement('div');
noteContent.classList.add('note-content');
noteContent.contentEditable = true;
noteContent.textContent = 'New note';
- Creates another div element (noteContent) for the content of the sticky note. It's made editable (contentEditable = true) so users can type in it, and initially sets its text content to "New note".
Create Note Actions:
const noteActions = document.createElement('div');
noteActions.classList.add('note-actions');
const deleteButton = document.createElement('button');
deleteButton.classList.add('delete-note');
deleteButton.textContent = 'Delete';
- Creates a container (noteActions) for actions related to the sticky note. Inside noteActions, it creates a delete button (deleteButton) with the text "Delete".
Delete Functionality:
deleteButton.onclick = function () {
noteContainer.remove();
};
- Assigns a click event handler to the delete button. When clicked, it removes the entire noteContainer (the parent element of both noteContent and noteActions) from the DOM.
Append Elements:
noteActions.appendChild(deleteButton); noteContainer.appendChild(noteContent); noteContainer.appendChild(noteActions); stickyNotes.appendChild(noteContainer);
- Appends deleteButton to noteActions, noteContent to noteContainer, noteActions to noteContainer, and finally appends noteContainer to the .sticky-notes container in the DOM.
deleteNote(button) Function:
This function is designed to delete a specific note when called with a button element as an argument.
Find Note Container:
const noteContainer = button.closest('.note-container');
- Finds the closest ancestor of the button element (button) with the class .note-container. This assumes the button is nested inside the .note-container.
Remove Note:
noteContainer.remove();
- Removes the noteContainer from the DOM when the function is called.
function createNote() {
const stickyNotes = document.querySelector('.sticky-notes');
const noteContainer = document.createElement('div');
noteContainer.classList.add('note-container');
const noteContent = document.createElement('div');
noteContent.classList.add('note-content');
noteContent.contentEditable = true;
noteContent.textContent = 'New note';
const noteActions = document.createElement('div');
noteActions.classList.add('note-actions');
const deleteButton = document.createElement('button');
deleteButton.classList.add('delete-note');
deleteButton.textContent = 'Delete';
deleteButton.onclick = function () {
noteContainer.remove();
};
noteActions.appendChild(deleteButton);
noteContainer.appendChild(noteContent);
noteContainer.appendChild(noteActions);
stickyNotes.appendChild(noteContainer);
}
function deleteNote(button) {
const noteContainer = button.closest('.note-container');
noteContainer.remove();
}Final Output:
See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In this blog post, we've explored how to create interactive sticky notes using HTML, CSS, and JavaScript. By combining these technologies, we've developed a user-friendly interface where users can create, edit, and delete sticky notes dynamically. This project not only enhances your web development skills but also provides a practical application of front-end technologies. Feel free to customize further by adding colors, animations, or additional features to suit your preferences or project requirements.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
