Implementing a Simple Web-based Note Taking Application
In an exciting yet sometimes thorny way into the Open Source community have I had an opportunity to implement a quick note taking app. Based on the following list of technologies, it is fairly simple in its nature:
- HTML5
- CSS3
- JavaScript 6
- Filer
- Flexbox
- Google Fonts
How does it work?
To start off the development of the app I have created a basic HTML5 document:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Web Page</title>
</head>
<body>
<!-- This is a comment -->
<h1>Hello World!</h1>
</body>
</html>Afterwards, I have added basic elements, such as headers and containers. Note, that contenteditable attribute can be used to make the contents of any HTML5 element editable.
<body>
<h1 align="center">DPS909 Lab 2</h1>
<h2 align="center">My Note Keeper</h2>
<div class="card">
<div class="card-body">
<h4 class="card-title">Enter Notes Below:</h4>
<div class="note" id="note" contenteditable></div>
</div>
</div>
</body>In order to save notes, it was also necessary to implement the logic to store the input into an innerHTML property of the
<div class="note" id="note" contenteditable></div>To accomplish this, I used the Filer.js library within the following ES6 script:
const fs = new Filer.FileSystem();
document.addEventListener("DOMContentLoaded", event => {
fs.readFile("/note", "utf8", function(err, data) {
if (err != null || data == null) {
data = "Welcome to my notepad!";
}
document.querySelector("#note").innerHTML = data;
});
});
var saveFile = function() {
fs.writeFile("/note", document.querySelector("#note").innerHTML,
function(err) {
if (err) throw err;
});
};In addition, for the ease of use the note is saved every 3 seconds:
var interval = window.setInterval(saveFile, 3000);Adding additional features
A number of extra features were added to the project:
- Custom Google Fonts (Dancing Script and Source Code Pro)
<link
href="https://fonts.googleapis.com/css?
family=Source+Code+Pro&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?
family=Dancing+Script&display=swap"
rel="stylesheet"
/>In the background you can see banks of the mighty river Volga in the city of Samara in Russia during wintertime. Photo by Andrey Aldoshkin on Unsplash.
- Navigation bar with save and clear buttons, as well as a number of links
<div class="topnav">
<div class="leftNavContainer">
<button onclick="saveFile()">Save</button>
<button onclick="clearFile()">Clear</button>
</div>
<h1 align="center">DPS909 Lab 2</h1>
<div class="rightNavContainer">
<a href="http://zenit.senecac.on.ca/~chris.tyler/planet/"
target="_blank">CDOT Planet</a>
<a href="https://medium.com/@birtony"
target="_blank">Medium</a>
<a href="https://github.com/birtony/my-note-keeper.git"
target="_blank">GitHub</a>
</div>
</div>Useful information
While working on this project I have used a lot of Flexbox styling. It is quite an easy and very efficient tool that, in my opinion, every web developer should be familiar with. As mentioned in my previous post, I believe that the most powerful learing is the applied learning. If you think so too, make sure to check out this game and learn Flexbox as a pro!
