Learn to build a user-friendly note app using HTML, Bootstrap, and JavaScript. A beginner-friendly tutorial with step-by-step guidance.
Table of Contents
Welcome to the ultimate guide on building your very own Notes App using HTML, Bootstrap, and JavaScript. Whether you're a coding novice or an experienced developer, this step-by-step tutorial will help you create a functional and stylish note-taking web application.
Setting up the Environment
Before we dive into coding, ensure you have a text editor and a web browser handy. You might also want to use a code editor like Visual Studio Code for an enhanced experience.
Source Code
Step 1 (HTML Code):
To start, let's create the basic HTML structure. We'll set up the essential elements that our Notes App will rely on. These include the header, the note container, and the input field.
Let's break down the code step by step:
1. <!DOCTYPE html>: This is the document type declaration and indicates that this is an HTML5 document.
2. <html lang="en">: This opening tag signifies the start of the HTML document. It also specifies that the primary language used in the document is English (the "en" attribute).
3. <head>: The head section contains metadata and links to external resources. Here, you have:
- <meta charset="UTF-8">: Specifies the character encoding of the document as UTF-8, which is a widely used character encoding for handling text in various languages.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This is a directive for Internet Explorer, instructing it to use the latest rendering engine (the "edge" mode) for compatibility.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is used for responsive web design and ensures that the webpage adapts to various device screen sizes.
- <title>Note App</title>: Sets the title of the web page to "Note App," which is displayed in the browser's title bar or tab.
- <link>: Links to external resources. In this case, it's linking to the Bootstrap CSS framework to style the page.
4. <body>: The body section contains the main content of the web page. Here's what it includes:
5. <nav>: Defines a navigation bar at the top of the page. It uses Bootstrap classes for styling and includes a logo, a collapsible menu, and a search form.
6. <div class="container my-3">: This container holds the main content of the page. It includes a greeting, a card for adding notes, and a section for displaying existing notes.
7. Inside the container:
- <h1>: Displays the main heading "Hello! Take your notes."
- <div class="card my-2 mx-2">: This is a Bootstrap card element that holds the note input form. It has a title, a text area for adding notes, and "Add note" and "Clear" buttons.
- <h1> Your notes</h1>: Another heading for the section displaying notes.
- <div class="row container-fluid" id="notes">: This is an empty container that's meant to be populated dynamically with notes via JavaScript. The "id" attribute is used to target this element in JavaScript.
8. <script>: This section includes links to external JavaScript libraries. It loads Popper.js and Bootstrap.js from content delivery networks (CDNs). Additionally, it loads a custom JavaScript file called "script.js" for handling interactivity and functionality on the page.
Step 2 (CSS Code):
No custom CSS thanks to Bootstrap!
bootstrap.com
/*
No custom CSS thanks to Bootstrap!
Bootstrap.com
*/ Step 3 (JavaScript Code):
Now comes the exciting part - adding interactivity with JavaScript. You'll be able to add and delete notes using JavaScript. We'll walk you through the code step by step.
1. shownotes() function:
- This function is initially called to display any existing notes from local storage.
2. let addbtn = document.getElementById('addbtn'); and let clrbtn = document.getElementById('clrbtn');:
- These lines retrieve two HTML elements by their IDs. addbtn represents a button for adding notes, and clrbtn represents a button for clearing the input field.
3. Event Listener for the Add Button:
- addbtn.addEventListener('click', function (e) { ... }) sets up an event listener for the click event on the "Add" button.
- When the button is clicked, this code:
- Retrieves the input text from an element with the ID 'addtext'.
- Retrieves any existing notes from local storage, if any.
- If there are no existing notes, it initializes an empty array called notesobj. If there are existing notes, it parses and populates notesobj with the stored notes.
- Appends the new note to the notesobj array.
- Stores the updated notesobj back in local storage as a JSON string.
- Clears the input field.
- Calls shownotes() to display the updated list of notes.
4. Event Listener for the Clear Button:
- clrbtn.addEventListener('click', function (e) { ... }) sets up an event listener for the click event on the "Clear" button.
- When the button is clicked, it clears the input field with the ID 'addtext'.
5. shownotes() function:
- This function is responsible for displaying the notes on the webpage.
- It retrieves notes from local storage and checks if any notes exist.
- If notes exist, it creates HTML elements for each note, including a "Delete" button for each note.
- If no notes exist, it displays a message indicating that there are no notes.
- The shownotes() function is also called when adding or deleting notes to refresh the displayed notes.
6. deletenotes(index) function:
- This function is used to delete a note by its index.
- It retrieves notes from local storage and checks if any notes exist.
- It uses the index parameter to remove a specific note from the notesobj array.
- It then updates local storage with the modified notesobj and calls shownotes() to refresh the displayed notes.
7. Event Listener for the Search Input:
- search is an input field element where users can search for specific notes.
- When the input in the search field changes, this code listens for the input event and filters the displayed notes based on the search text.
- It iterates through all the notes and hides or shows them based on whether they contain the search text.
// if user adds notes
shownotes();
let addbtn = document.getElementById('addbtn');
let clrbtn = document.getElementById('clrbtn');
addbtn.addEventListener('click', function (e) {
let adddtxt = document.getElementById('addtext')
let notes = localStorage.getItem('notes');
if (notes == null) {
notesobj = [];
} else {
notesobj = JSON.parse(notes)
}
notesobj.push(addtxt.value)
localStorage.setItem('notes', JSON.stringify(notesobj));
addtxt.value = "";
shownotes();
})
clrbtn.addEventListener('click', function (e){
let adddtxt = document.getElementById('addtext');
addtxt.value = "";
})
function shownotes() {
let notes = localStorage.getItem('notes');
if (notes == null) {
notesobj = [];
} else {
notesobj = JSON.parse(notes)
}
let html = "";
notesobj.forEach(function (element, index) {
html += `
<div class=" notecard card my-2 mx-2" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Note ${index+1}</h5>
<p class="card-text"> ${element}</p>
<button id="${index} " class="btn btn-primary" onclick="deletenotes(this.id)">Delete</button>
</div>
</div>`;
})
let noteselem = document.getElementById('notes');
if (notesobj.length != 0) {
noteselem.innerHTML = html;
}
else{
noteselem.innerHTML= `<h6> Nothing to show please Add notes </h6>`;
}
}
// deleting
function deletenotes(index){
let notes = localStorage.getItem('notes');
if (notes == null) {
notesobj = [];
} else {
notesobj = JSON.parse(notes)
}
notesobj.splice(index,1);
localStorage.setItem('notes', JSON.stringify(notesobj));
shownotes();
}
let search=document.getElementById('searchtext');
search.addEventListener("input",function(){
let inputval=search.value;
console.log(inputval);
let notecards= document.getElementsByClassName('notecard');
Array.from(notecards).forEach(function(element){
let cardtxt= element.getElementsByTagName('p')[0].innerText;
if(cardtxt.includes(inputval)){
element.style.display="block";
}
else{
element.style.display="none";
}
})
})Final Output:
Conclusion:
Congratulations! You've just created your own Notes App using HTML, Bootstrap, and JavaScript. You're now equipped with the skills to build web applications and explore new horizons in web development. If you want to dive deeper, there are countless resources available to help you expand your knowledge.
Building a Notes App is a fantastic project for beginners, offering practical experience in web development. Don't hesitate to experiment and add more features to make your app truly unique. Happy coding!
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 😊
