Forem: Abel Roy

Build a Calculator using HTML and JavaScript: A Hands-On Guide

Abel Roy — Sun, 28 Apr 2024 10:30:00 +0000

Welcome to this hands-on guide to creating a calculator from scratch using HTML and JavaScript only. The only pre-requisite you need is a computer and an internet connection, but I doubt that would be a problem, otherwise, how are you reading this? 😂 Let's not waste any more time, and dive into the dynamics of frontend web development!

Step 1: Setup HTML Boilerplate

Boilerplates are sections of code that are repeated in projects multiple times. In HTML5, the basic outline is always the same, with minimal to no variations.

Below, is one of the simple boilerplate HTML codes.

<html>
<head>
    <title> Calculator Web </title>
</head>
<body>
    <!-- Main HTML5 Code -->
</body>
</html>

Once, you have done it, you now have a simple basic functional site with nothing on it.

Step 2: Create our Basic Calculator

We will be using a <main> block in HTML to create a container block where we can create our basic calculator. [ inside <body> ]

<body>
    <main>
    ...
    </main>
</body>

Now, add an <input> tag where we will be displaying the result, and add buttons for all the 10 numbers, we know.

<main>
    <!-- Input Bar for the Result -->
    <input type="text" id="result" readonly>

    <!-- Buttons for the Numbers -->
    <button onclick="append('1')">1</button>
    ...
    <button onclick="append('9')">9</button>
    <button onclick="append('0')">0</button>
</main>

append('1') refers to the function it performs whenever the button is clicked. We will be writing the code for it afterwards. Now, you might see the buttons all displaying in a single line, which ain't that great.

So, use <div> to wrap the buttons in sets of 3, resulting in the code below. If you don't understand anything written below, ask me in the comments!

<main>
    <input type="text" id="result">
    <div>
        <button onclick="append('1')">1</button>
        <button onclick="append('2')">2</button>
        <button onclick="append('3')">3</button>
        <button onclick="append('+')">+</button>
    </div>
    <div>
        <button onclick="append('4')">4</button>
        <button onclick="append('5')">5</button>
        <button onclick="append('6')">6</button>
        <button onclick="append('-')">-</button>
    </div>
    <div>
        <button onclick="append('7')">7</button>
        <button onclick="append('8')">8</button>
        <button onclick="append('9')">9</button>
        <button onclick="append('*')">x</button>
    </div>
    <div>
        <button onclick="append('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearall()">Clear</button>
    </div>
</main>

For the = button we used a calculate() function, unlike other buttons since we want a function that can calculate the current values in the display input.

Step 3: Write JavaScript

You can add JavaScript to HTML code in many ways. But for this, we are covering two ways:

Internal JavaScript (via script tag)
External JavaScript

For this guide, we are gonna be using Internal JavaScript. So, let's start!

First, we get the values in the result id in <input> tag as a variable in JavaScript.

const result = document.getElementById('result');

Now, let's add new functions for each button action. For the above HTML code, 3 functions have to be added:

append() - Append values in the result
calculate() - Evaluate the values in the result
clearall() - Clears the values in the result

1. Append()

We have to take an input variable as a parameter and then, append (or specifically just add) the values to the existing items in the result

function append(value){
    result.value += value;
}

2. Calculate()

Now, we need to calculate the values that are existing in the result or input tag.

We then have to evaluate the values. But if the values cause an error, we display the result as an Error

function calculate() {
    try {
        result.value = eval(result.value);
    } catch(error) {
        result.value = "Error";
    }
}

3. Clearall()

Now, if there's an error or if you want to reset the values, you can use this function to clear the values existing in the display result.

function clearall() {
    result.value = "";
}

Make sure the naming of functions is not conflicting with built-in JS functions or existing functions. (So, clear won't work)

If you did, as followed above, you will have the script tag similar to one below.

<body>
    <main>...</main>
    <script>
    const result = document.getElementById('result');
    function append(value){
        result.value += value;
    }

    function calculate() {
        try {
            result.value = eval(result.value);
        } catch(error) {
            result.value = "Error";
        }
    }

    function clearall(){
        result.value = "";
    }
    </script>
</body>

Done!

You can now, run the website or host it anywhere else. You can also deploy this code at codepen to check how it works.

Below is the basic functional calculator that you created using HTML and JavaScript.

If you like the hands-on guide, make sure to give us a like to support us further. Also, consider reading the blogs I usually write at:

Complete Source Code: GitHub

Examples: Codepen

GitHub as a Time Traveler

Abel Roy — Tue, 23 Apr 2024 19:52:58 +0000

GitHub and Git are popular keywords that you probably have heard if you have been in the developer community/underworld for long enough. And if you've searched about them yourself, you probably have been confused by the underlying concepts associated with them. Well, to be honest, I was. And at that time, I was able to learn about these concepts with the guidance of my friends and colleagues who had already been pretty familiar with version control.

Before understanding what is GitHub and Git, we first have to imagine. ✨

Let's Imagine "Git"

Imagine you're a time traveler, who wants to document everything that has happened in the "sacred" timeline, including the past, present and future. To accomplish this, you have a time machine which helps you jump between different points in time, so that you can view them, make changes and discover alternate paths without losing track of where you're supposed to be.

The Time Machine is the Version Control, where each point in time are different version, and each branch is a different reality.

Git is an open-sourced version control system that does everything.

Open Source Code

Being freely available to everyone, to use, study, modify and distribute. Usually, the software is open-sourced, so anyone can see how it works and make changes to it if they want to. This makes open-source software very versatile and adaptable

Inside "Git"

// RECAP //

Git acts as your time machine. It keeps track of all the changes you make to your code over time and allows you to revisit any point in its history.

Your codebase is now basically a timeline, that extends from the beginning of your project to the present. Each point in the timeline refers to a specific version or state of code

From the image, v1.0 , v1.1 and v1.2 are versions of code saved in the timeline [shown as blue]

Now, you can make changes and get them out as new versions, v1.3

You could also create a branch, by making changes to a previous version, building better software. These will be discussed later on.

Why "Git"?

Advantages include:

Performance
Security
Flexibility

And most importantly, its OPEN SOURCE, making it well-managed and considered a de facto standard by large organizations and individuals.

What's "GitHub"?

It's the largest, most complete developer platform in the world.

GitHub is a cloud-based platform that hosts code for various purposes. These include collaboration, version control, open sourcing, etc...

As a time-traveler, you store different versions accessible to all, in a single codebase around the world, called "GitHub" and a GitHub Repository is the folder in which you store all this stuff.

To be precise, GitHub Repository acts as a remote storage space for your code's timeline. Each update is stored inside this repository as a vault, only giving access to who you define.

Branch "Git"

Imagine as a time traveler, you can create your own parallel timelines or branches, different from the main timeline. Each branch represents a separate path or idea that you want to explore without affecting the original. This space where you can experiment freely, is what truly the advantage of "Git" and other version control systems (VCS).

Merge "Git"

At some point in time, you may want to integrate these changes to your code from a branch back into the main timeline. This process is called merging, where we are combining the changes made in one branch with another. It allows you to bring different versions together and reconcile any conflicts.

More to "Git"

Similar to how a time traveler wants to share his experiences with his/her fellow time travelers. GitHub allows the features to collaborate your code with others so that they can view it, make changes to it and update parts of your code. These updates are done by making a pull request!

These changes can then be viewed or moderated by you, or the maintainer, and then be pushed as a commit. Anyone can clone your repository or "fork it", and make changes to it. Licenses play a part when it comes to the distribution of software at different levels, but that's for later on.

Conclusion

We have reached the end of our time traveler quest, but the possibilities with Git and GitHub are seemingly limitless. There is a lot these bad boys can do. You can learn from various articles and books like Git for dummies. You can learn more about how to use them in a real project scenario further in this series, where I blog on how to learn GitHub efficiently.

Thanks for reading, drop a like, and till the next time, keep on experimentin'

Create a simple HTML website with Postgres Database

Abel Roy — Thu, 18 May 2023 20:58:08 +0000

Get Ready, Future Web Developers! Let's create a simple HTML website that connects to a Postgres Database. For this example, we will be using JavaScript (Node JS, and Express JS) for it's middleware functionalities.

Whether you want to showcase your portfolio, run a blog or complete a due mini project on web development, web development is a skill that's still in demand.

Learning Path Ahead

We'll dive in to the process of building a simple HTML website from scratch. We'll explore how to integrate a Postgres database, using JavaScript as middleware to handle API requests. To spice things up, we can also be using Bootstrap5 to design the webpage! But that will be covered in a different blog.

Technologies Used:

HTML5
Postgres (Database)
Express JS (Backend)

Prerequisites

Make sure Postgres is downloaded and ready to use. Also, download Node JS for installing npm packages like Express JS, Body Parser and Postgres APIs.
Download Postgres here
Download NodeJS here

Step 1 : Setup Postgres Database

Create a new Postgres Database either using psql, which is the CLI for running SQL commands or a graphical user interface like pgAdmin (which comes pre-installed). For this demonstration, we will be using psql for creating the database.

Open psql and enter the credentials to get started.

Create a database called webapp and connect to it!
(You can use any name you want for your project!)



CREATE database webapp;



\c webapp

Start building your table in this database by CREATE TABLE command. You can use Postgres docs to guide you with the commands.
For this demonstration, we are creating a student database that stores Name, Year and Branch. (Add more attributes if you want)



CREATE TABLE student 
(name varchar(20), semester int, branch varchar(20));



\d student

Now, we can start uploading some dummy data to the table via INSERT command



INSERT INTO student VALUES
('Abel', 4, 'CE'), 
('John', 6, 'ME'), 
('Doe', 2, 'ETC');

Once we are done, adding the dummy data, we can view the Student table with the below command



SELECT * FROM student;

If you followed the steps till now, you would get the below student table!

Step 2 : Create a simple HTML Website

Below is the Boilerplate HTML code for a simple website



<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title> Student Management System </title>
</head>
<body>
  <h1> Student Management System </h1>
</body>
</html>

Let's start adding the custom div blocks as per our needs



...
<body>
  <h1> Student Management System </h1>
  <p> Here, are the student details as below: </p>
  <div id='students_list'></div>
...

students_list div block is for showing the list of students that have been registered to the database. We will be using Express JS to fetch the data from Postgres and showcase it in the block.

Step 3 : Connecting HTML to Postgres via Express JS

Install the necessary libraries first in your Command Prompt or Terminal



npm install express body-parser pg

Let's start building the script.js file for connecting HTML and PostgreSQL.

Firstly, we require importing the necessary libraries for handling requests and establishing a connection



// Import required modules
const express = require('express');
const { Pool } = require('pg');
const path = require('path');
const bodyParser = require('body-parser');

express works as a backend service, for parsing requests from the HTML webapp
pg is a Postgres API for establishing the connection
path provides utilities for managing directory paths
body-parser is a middle-ware for extracting data from POST requests
(We will be understanding them in depth as we move along)

Let's now create an express application connection and also, define the port at which the server will be listening to.



// Connect and Create an Express Application
const app = express();
const port = 3000; // By default, its 3000, you can customize

Establish a connection to Postgres by creating an instance of the Pool object. Add the necessary values to match your Postgres setup.



// Create a Postgres Connection
const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'webapp',
  password: 'password', // Change to your password
  port: 5432, // Default Port
});

Add functionalities to register static files via express.static() middleware. It specifies the root directory from which to serve static files



app.use(express.static(path.join('')));

Now, we have to parse HTML requests sent from the app. In simple words, it's a middleware used to recieve data from users, such as forms or uploads



app.use(bodyParser.urlencoded({ extended: false }));

(Don't add the above line if you are not planning to take input from users. We will be adding a registeration form in the next blog and that's why we require body-parser)

Setup a Route handler for the root URL ('/'). So that, when a GET request is made to the root URL, the server responds by sending the "index.html" file located in same directory



// Setup Route handler
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '', 'index.html'));
});

Now, comes the main part!
We will now be setting up a route handler for '/students' URL with the HTTP GET method. This handler retrieves student data (from query) from the Postgres Database



// Route handler for GET student data
app.get('/students', (req, res) => {
  const query = 'SELECT * FROM student;';

  pool.query(query, (error, result) => {
    if (error) {
      console.error('Error occurred:', error);
      res.status(500).send('An error occurred while retrieving data from the database.');
    } else {
      const students = result.rows;
      res.json(students);
    }
  });
});

(Make sure the brackets are closed properly)

Now, let's specify the line that listens to the server and when the time is due, it responds with its requests. As the below command listens, it logs a message to console.



// Listening to Requests
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

(Good for debugging purposes)

Done! script.js is finally complete. Let's make the changes in the index.html file for showcasing the necessary details.



...
  <div id='students_list'></div>
  <script>
  // Fetch data via requests
  fetch('/students')
    .then(response => response.json())
    .then(data => {
    const studentList = data.map(
      student => `<li> About ${student.name} : ${student.branch} - ${student.semester}th Sem</li>`
    ).join('');
    document.getElementById('students_list').innerHTML = `<ul>${studentList}</ul>`;
  })
    .catch(error => console.error('Error occurred:', error));
  </script>
...

Run the Website

Open Terminal and go the directory where index.html and script.js is stored and run the following command



node script.js

If everything works alright, it should display the contents "Server listening on port 3000"

Now, you need to go to http://localhost:3000/
where you can see a simple HTML website showcasing the data you had entered!

Voila! That's it!

Now, use your creativity and knowledge to explore these web development concepts and create more interesting websites!

I will also be adding another blog on how to create a registration system and how to design, which will be coming soon. Follow for more and stay tuned!
Until then, Keep Coding!

7 UX Design principles you should know

Abel Roy — Sun, 09 Apr 2023 14:34:29 +0000

User Experience is how users interact with your product and how satisfied they are with the experience. Better the UX Design, More customers will you acquire. Over the years, we've come across many different principles, that have often played a key role in the way we interpret design✨🤌. Here are some design principles to create effective and enjoyable digital experiences:-

1. ✅ Simplicity

Simplicity is key to good UX design. Users should be able to navigate your product easily and quickly. Avoid cluttered designs, confusing layouts and unnecessary features and Keep it Simple!

2. ⚖️ Law of Proximity

Objects that are near, or proximate to each other, tend to be grouped together. This proximity helps to establish relationships with the nearby objects. Elements in close proximity share similar traits, whereas elements far away, have different purposes.

3. 🏃🏼 Goal Gradient Effect

This effect is based upon the idea, that more the user is to completing a task, the faster they is to completing it. This will provide a clear indication about the progress and help users strive towards its completion.

4. 👬🏼 Law of Common Region

Elements that are put into groups of the same region, tend to share the same properties and traits. It gives a clear understanding to users regarding the structure and the relationship between each element.

5. 👌🏼 Usability Effect

A Simple aesthetic design showcases the usability of the design. More simple aesthetic the design looks, more usable it is.

6. 🙋🏻‍♂️ Von Restorff Effect

When multiple similar objects are grouped together, the most different or "isolated" one is the one the user most likely to choose.

7. 😶‍🌫️ Tesler's Law

The law states that for any system, a certain amount of complexity cannot be reduced. The complexity should be assumed by either the user or the system.

The above listed design principles are the ones that you should keep in mind, as you create interactive designs meant for fulfilling their own unique tasks.
Stay connected for more interesting content!

Branching Out: Trees 101

Abel Roy — Thu, 23 Feb 2023 08:00:49 +0000

What all you will learn ?

Trees: Definition
Types of Trees
Applications of Trees
Getting Started with Tree Programming

Getting Started

If you're interested in Computer Science, you've probably heard of trees. Trees are an important data structure that represents hierarchical relationship between data. They have a ton of applications, including in computer science, mathematics and biology.

What is a Tree?

A tree is a data structure that consists of nodes connected by edges. Each node represents some kind of data, and each edge represents a relationship between that data. The topmost node in a tree is called the root node, and each node in the tree can have zero or more child nodes.

Types of Trees

There are many different types of trees, each with their own unique properties. Here are some of the most common types of trees:

Binary trees: Binary trees are trees where each node has at most two child nodes. They are commonly used in computer science to represent data structures such as binary search trees and heaps.
AVL trees: AVL trees are a type of binary search tree that is self-balancing. They are commonly used in computer science to optimize the performance of search and insertion operations.
Red-black trees: Red-black trees are a type of self-balancing binary search tree. They are commonly used in computer science to implement data structures such as sets and maps.

Applications of Trees

Trees have a wide variety of applications in computer science. Here are a few common ones:

Storing hierarchical data, such as file systems and XML documents
Implementing search algorithms, such as binary search
Optimizing the performance of database operations, such as searching and sorting

Getting started with Programming

If you're interested in learning more about trees, there are a few things you can do to get started. First, read up on the different types of trees and their properties. Next, try implementing a few different types of trees yourself. Finally, explore the different applications of trees to get a better understanding of how they can be used in real-world scenarios.

Conclusion

Trees are an important data structure in computer science with a wide range of applications. Whether you're a computer scientist, mathematician, or biologist, understanding trees is an important part of your toolkit. So, start exploring the world of trees today and see what you can discover!