Note Taker App With Vanilla JavaScript & Bootstrap
Hello everyone, I am the founder of Syiainfoku. Today in Syiainfoku you will learn how to create a Note Taker Application In HTML With Vanilla JavaScript and Bootstrap.
The Note Taker app is also a JavaScript Mini Project, and very useful to train you, if you are just starting to learn JS. And many people suggest you to practice creating some Mini JS Projects so that you understand JS better.
Preview Note Taker App
In my Note Taker design, there will be several elements in it which you can also customize to your liking.
1. Navigation Bar
- logo
- Home button
- Search bar
2. The sentence "Welcome To Notes Que" (can be customized).
3. Columns to fill in notes
4. Button to add your note
5. Notes that you have made can also be saved under the column to fill in your notes.
6. And you can delete the notes you created earlier by using the "Delete Notes" button.
7. You can also search for your notes in the search field, if the notes you make are too many.
8. This Note Taker application is also Responsive on all screen sizes of Mobile or Laptop.
Source Code and Brief Explanation
To make this program [Note Taker App with Vanilla JavaScript and Bootstrap]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Note Taker App from the given download button.
A little information, if you want to use this Note Taker application, make sure you are connected to an internet connection. So that the Bootstrap script can work properly.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Note Taker App | hitoricoding</title>
<link rel="stylesheet" href="./assets/style.css">
<!-- stylesheet bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<!-- nav dan search note -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Notes Que</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="searchTxt" type="search" placeholder="Search a note"
aria-label="Search">
<!-- <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button> -->
</form>
</div>
</nav>
<div class="container my-5">
<h1>Welcome To Notes Que</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">Add a notes</h5>
<div class="form-group">
<textarea class="form-control" id="addTxt" rows="3"></textarea>
</div>
<button class="btn btn-primary" id="addBtn">Add Notes</button>
</div>
</div>
<br>
<h1>Your Notes</h1>
<br>
<div id="notes" class="row container-fluid"> </div>
</div>
</div>
</div>
<script src="./assets/main.js" charset="utf-8"></script>
<!-- script cdn bootstrap, jquery and popper -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>
</body>
</html>Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Quicksand:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
.container h1 {
font-family: 'Poppins', sans-serif;
font-weight: 500;
letter-spacing: 1px;
}Finally, create a JS file with the name main.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.
console.log('Welcome to notes app. This is main.js');
showNotes();
// if user add a notes, add it ke localStorage browser
let addBtn = document.getElementById('addBtn');
addBtn.addEventListener("click", function (e) {
let addTxt = document.getElementById("addTxt");
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 = "";
// console.log(notesObj);
showNotes();
})
// function for display localStorage
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 my-2 mx-2 card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Notes ${index + 1}</h5>
<p class="card-text"> ${element}</p>
<button id="${index}" onclick="deleteNote(this.id)" class="btn btn-danger">Delete Notes</button>
</div>
</div>`;
});
let notesElm = document.getElementById('notes');
if (notesObj.length != 0) {
notesElm.innerHTML = html;
} else {
notesElm.innerHTML = 'Nothing to show! Use "Add Notes" to make a notes.';
}
}
// function for delete a notes
function deleteNote(index) {
// console.log('I am deleting', 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();
}
// function search
let search = document.getElementById('searchTxt');
search.addEventListener("input", function () {
let inputVal = search.value.toLowerCase();
// console.log('Input even fired!', 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";
}
// console.log(cardTxt);
});
});That's it, now you have successfully created a Note Taker Application with Vanilla JavaScript and Bootstrap. If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
Closing
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Post a Comment