Implementing a Simple Web-based Note Taking Application

Image for post
Image for post
A screenshot of My Note Keeper. Photo by Andrey Aldoshkin on Unsplash

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:

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);

A number of extra features were added to the project:

<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>

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!

Image for post
Image for post
Flexbox Froggy Screenshot

Enthusiastic Junior Software Developer striving for discoveries & curious about technology

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store