Now, that we have 'got our feet wet' and we know how HTML, CSS and JavaScript work together, we can try to put together a little project. This will be an introductory project, and it will represent a nice transition towards more advanced full-stack applications that we will build in the future. We will build a note taking application. The application will only have a client (a 'front page' doing all the logic for us). There will be no server (to store data for us or to import/export data, filter it and do other 'back-end' related stuff). However, the applicaiton will be able to do many things and it will sort of 'mimmick' a real backend.
This project will help you get familiar with how a JavaScript application is built, without any
framework. This will help you regardless of which framework you will use (as you will build something using the full power of JavaScript, power on which all the hot frameworks now and I mean React, Angular or VueJS are built).
Here's a link of a live deployment of the application, so you can see what we will build and what it will look like: Link to app.
Test the application a bit before starting, so you get familiar with how it works and what you will be building. Try adding some notes, edit them, delete some and add them back, etc...
Try exporting your notes, delete all the notes and import them back. The import functionality is set so that it prepends the imported notes to the existing ones (so if you import without deleting the current notes, you will simply get the ones imported added to the top of the list of your current ones).
The most important thing to notice about the application, is that it does not need a refresh of the page. Everything you do instantly updates the screen without the need for a refresh or a redirect (note that the URL never changes either, so you are basically staying on the same page continuously, and dynamically manipulate its contents to suit your needs). This is how modern front-end frameworks like React or Angular work.
Once you get used to the application, we can start building it. It will be a single page application, it will serve all the contents in an index.html file and all the contents there (the routing from one page/section) to the next, will be performed dynamically, with JavaScript by adding and removing/hiding stuff from the DOM. The Document Object Model (that's the DOM) is a tree-like representation of the webpage, in which all elements of a page are branches of a tree. It looks like this:
*note that the reason why the CSS selectors are similar to the JS ones is because they actually reference the very same 'branches' from the DOM tree.
So as for the structure of our application, we will have an index.html file, a .css file and two JavaScript files. The two JavaScript files are handling the UI (user interface) and the notes processing. So one will do the notes and the other one will do the interface manipulation (and there will be quite a bit of code in there).
Application start (UI creation)
Start by creating a folder (I named mine project) and create an index.html file in it. Inside the .html file, add the below code:
*note how the ui.js script is under the notes.js one. This means that it can use variables and methods declared in notes.js as JavaScript 'scripts' apply top to bottom.
Next, create the 3 files referenced into the HTML, namely the style.css, notes.js and ui.js. Now, you can open the index.html file in the browser, and you will see some very ugly html code thrown in there. Do not worry, we will right now start styling it and make it look pretty and do awesome things.
We will start working on the style.css file in order to make the first bit of UI look better. Add the below code to the css file:
Based on these 2 configurations we will bring our interface to life. We want when we click on one of the buttons, that the respective section is visible to us. So let's just do that, below the config objects add:
let themeColor = "blue";
let activeSelector = "inputBtn";
const mainInputs = Array.from(document.querySelectorAll(".mainInput"));
mainInputs.forEach((i) => i.addEventListener("click", () => activateTab(i)));
Now we just need to create the activateTab() method:
With this, we can toggle between colors and tabs nicely. The only missing feature is the 'remembering' of what was clicked or what color was selected by the user (say if we refresh the page). With our current setup the application does not 'remember' all of this. All of this data (button clicked, color selected, etc...) is lost.
This data is called state and it is usually hard to manage. In the case of our application it will not be too hard, but imagine if we had more screens or more features. It would quickly get out of hand or we'd have to set up a pretty smart way to do that (imagine if we added 20 more selectors for 20 extra buttons or lables in our already existing screens).
Managing state nicely and under the hood (so we are not concerned with that at all) is one of the things modern frameworks like React, Angular or Vue do, but it's good to have a solid grasp of the concept for any developer.
With all of these in mind, let's make our application 'remember' its current state in between page refreshes by using The Local Storage API. Read in the docs if you want to see how it works, I will just finish the implementation in our ui.js file. Replace everything in the file with:
*Note that beside implementing Local Storage, I have also outsourced all the logic in simpler methods that I just reuse. This keeps our code clean and maintainable. Now the UI part is done. Try swapping tabs or colors and refreshing the page.
Let's move on to the notes.js file. For starters, we want a method that grabs the user input while on the Input tab, and that saves it. Add it as per below in the notes.js file:
const saveBtn = document.querySelector(".add-note");
saveBtn.addEventListener("click", grabNote);
const notes = [];
/*
* Grabs user note and saves to localStorage API
*/
function grabNote(e) {
const note = {};
//regexp to 'know' how to put linebreaks
let noteText = document.querySelector("#note").value;
note.text = noteText.replace(/\r?\n/g, "<br />");
const noteDate = new Date()
.toString()
.replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/, "$2-$1-$3");
note.date = noteDate;
let id =
Math.random().toString(12).substring(2, 17) +
Math.random().toString(12).substring(2, 17);
note.id = id;
notes.unshift(note);
localStorage.setItem("notes", JSON.stringify(notes));
document.querySelector("#note").value = "";
//alert functionality
showAlert("Note Saved 😉");
}
All is good, and if you check the Application tab in your dev tools you will see the notes stored, but we want to display them too. Replace all the contetns in notes.js with the below:
const saveBtn = document.querySelector(".add-note");
saveBtn.addEventListener("click", grabNote);
let notes;
if (localStorage.getItem("notes") === null) {
notes = [];
} else {
notes = JSON.parse(localStorage.getItem("notes"));
}
//call display notes to see the notes
displayNotes();
/*
* Grabs user note and saves to localStorage API
*/
function grabNote(e) {
const note = {};
//regexp to 'know' how to put linebreaks
let noteText = document.querySelector("#note").value;
note.text = noteText.replace(/\r?\n/g, "<br />");
const noteDate = new Date()
.toString()
.replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/, "$2-$1-$3");
note.date = noteDate;
let id =
Math.random().toString(12).substring(2, 17) +
Math.random().toString(12).substring(2, 17);
note.id = id;
notes.unshift(note);
localStorage.setItem("notes", JSON.stringify(notes));
document.querySelector("#note").value = "";
displayNotes();
//alert functionality
showAlert("Note Saved 😉");
}
/*
* Grabs notes from localStorage
* API and displays them to UI
*/
function displayNotes() {
let records = document.querySelector("#records");
let output = "";
notes.map((n) => {
output += `
<div class="card">
<p class="text">
${n.text}
</p>
<p class="text">
Written at: ${n.date}
</p>
<p class="text invisible">
id: ${n.id}
</p>
<i
onclick="editNote(event)"
class="fa fa-pencil pencil-note"
aria-hidden="true"></i>
<span id="saveEdit">
</span>
<i
onclick="deleteNote(event)"
class="fa fa-times-circle"
aria-hidden="true"></i>
<hr>
</div>
`;
});
records.innerHTML = output;
}
Now you can add a new note, it will get instantly displayed and on top of the file. Let's quickly add a filtering functionality, we want to filter by date and text:
//this will simply clear the filter upon click
const filterField = document.querySelector(".filter");
filterField.addEventListener("click", () => (filterField.value = ""));
/*
* Filters notes by title/date
*/
const filter = () => {
document.querySelectorAll(".card").forEach((item) => {
let value = document.querySelector(".filter").value.toLowerCase();
const note = item.children[0].innerText;
const date = item.children[1].innerText;
if (
note.toLowerCase().indexOf(value) != -1 ||
date.toLowerCase().indexOf(value) != -1
) {
item.style.display = "block";
} else {
item.style.display = "none";
}
});
};
*Note that we did not hook any event listener for the actual filter() method, the reason for that is that in the index.html file we have an oninput="filter()" event added directly into the template.
Now that we can filter, let's edit the notes too. Add the below 2 methods in your notes.js file:
*Note that for both the edit/save methods and for delete we did not actually 'manually' bind event handlers to icons (instead we did it directly in the template) inside the displayNotes() method. This makes it much easier to handle the event binding for notes that are being dynamically added/removed by the user. One more thing I want us to do before moving to import/export is to add a deleteNotes() method too (for clearing everything):
Now you can test the delete functionality (both with one note and with all of them). Finally I want us to do the import/export part. Let's do the export first:
const exportBTN = document.querySelector("#exportBtn");
exportBTN.addEventListener("click", exportNotes);
/*
* Export notes as JSON
*/
function exportNotes() {
let notesObj = {
notes,
};
let exportDate = new Date()
.toString()
.replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/, "$2-$1-$3");
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var json = JSON.stringify(notesObj),
blob = new Blob([json], { type: "octet/stream" }),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = `myNotes-${exportDate}.json`;
a.click();
window.URL.revokeObjectURL(url);
}
Go to the export tab, and you can test 'exporting' your notes (after having added at least one of them of course). After having exported the notes, add the import method too, and test the importing of the very same .JSON file:
const importBTN = document.querySelector("#importBtn");
importBTN.addEventListener("click", importNotes);
/*
* Import JSON with notes
*/
function importNotes(e) {
document.getElementById("file").addEventListener(
"change",
(evt) => {
var files = evt.target.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function (event) {
let newNotes = JSON.parse(event.target.result).notes;
newNotes.map((i) => notes.unshift(i));
localStorage.setItem("notes", JSON.stringify(notes));
showAlert("Notes imported Successfully 😉");
displayNotes();
};
let readValue = reader.readAsText(file);
console.log(readValue);
},
false
);
}
If you have been following me until now, Here is a cleaned up version of notes.js. And also the full
Repo.
Now our application is complete. It works just as the initial version you have been testing at the beginning of this article. We have even refactored it and decoupled some functionality. The next projects we will build will have a real back-end, and not only use files written in localStorage. I do hope you have enjoyed working on this little project and I thank you a lot for sticking with me until the very end.
