DEV Community: Jakob Klamser

Dockerize your Development Environment for NodeJS

Jakob Klamser — Tue, 06 Oct 2020 11:05:23 +0000

Using Docker in your development workflow has a positive impact on your productivity. It eliminates the typical "It worked on my machine" type of bugs and the setup on a different machine only requires a running Docker daemon and nothing else.
Before we get started implementing we will go over Docker real quick.

What is Docker?

Docker is a platform that can run containers, packages of software. To run these containers Docker uses OS-level virtualization. You can think of a container as a lightweight version of a virtual machine.

All containers you run on your Docker platform are isolated from one another. For example, the host, on which Docker runs, and one container running on the host, do not share the same filesystem except to explicitly tell them to.

To start a container you need a Docker image. This image is the blueprint for your container. You can take already predefined images from Docker-Hub or configure your own ones by writing a so-called Dockerfile.

This is just a quick overview of Docker if you want to dig deeper I encourage you to start here.

Why would you dockerize your development workflow?

In the introduction, I already touched on one benefit of using Docker in your development environment. This being the fact that it gets rid of the typical "It works on my machine" issue. Some other benefits are:

Standardize development workflow between team members even more
Reduction of production-only bugs if you use Docker for deployment too (Configurations between production and development can be quite similar)
Getting rid of the forementioned "Works on my machine" type of bugs

Getting started

We start out by creating a new folder in which we place our project, and we create our Dockerfile like this:

$ mkdir node-docker && cd node-docker
$ touch Dockerfile

Dockerfile

The container that we will use for our express application will be configured in the Dockerfile. For that, we need to give it some life:

FROM node:latest

WORKDIR /usr/src/app
COPY package*.json ./
ENV PORT 5000

RUN npm cache clear --force && npm install

ENTRYPOINT ["npm", "start"]

FROM tells Docker to get an image called node (version: latest) from the docker hub.

WORKDIR sets the directory in which all the upcoming commands will be executed.

COPY does exactly what it says, it gets the package.json and package-lock.json and copies it to the WORKDIR.

ENV sets an environment variable inside the container with the name PORT and the value 5000

RUN executes the commands we pass in. In this case, clearing the npm cache and then installing all the dependencies from package.json.

ENTRYPOINT executes the command you insert here, right when the docker container is started

Simple Express App

Now that we have our Dockerfile ready to go we need a simple express application that we can run inside a container. For that, we create two new files like this:

$ touch server.js package.json

package.json will get two dependencies, first express, and second nodemon:

{
  "name": "node-docker",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "nodemon server.js"
  },
  "author": "Jakob Klamser",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

The express application will just return simple HTML when hitting the main page. Therefore server.js should look like this:

const express = require('express');

const app = express();

const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {
  res.send(`
    <h1>Express + Docker</h1>
    <span>This projects runs inside a Docker container</span>
  `);
});

app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}!`);
});

.dockerignore

Before we start setting up a MongoDB container together with our express container, we want to exclude some files from the running container. The syntax of a .dockerignore files is exactly the same as for a .gitignore file:

# Git
.git
.gitignore

# Docker
Dockerfile
docker-compose.yml

# NPM dependencies
node_modules

docker-compose.yml

Last but not least we want to define a docker-compose.yml. This file will contain all the information needed to run the express application and the MongoDB at the same time in two different containers. Let's go ahead and create the file.

$ touch docker-compose.yml

Now we configure it like this:

version: '3'
services:
  api:
    build: .
    ports:
      - "5000:5000"
    depends_on:
      - mongo
    volumes:
      - "./:/usr/src/app"
      - "reserved:/usr/src/app/node_modules"
  mongo:
    image: "mongo" 
    ports:
      - "27017:27017"
volumes:
  reserved:

version: First we define the version of the docker-compose we want to use. There are quite a lot of differences between version 3 and 2, so be careful when picking a version!

services: This is the section in which we define our express API (api) and the MongoDB (mongo)

build & image: build tells Docker to build an image out of a Dockerfile. In our case we want it to use the Dockerfile in the current directory. That's why we put . as a parameter because this defines the current directory. image tells Docker to pull an already existing image from docker hub.

ports & volumes: As the name of ports suggests we define the ports here. The colon is a mapping operator. We map the port 5000 of the container to the port 5000 of our host system, in this case, our local machine so that we can access the application outside of the container. The same goes for the port mapping of the MongoDB. volumes do something similar but this time with volumes. We map our local directory in which we write our code into the WORKDIR of the container. This way the container immediately reacts if we change anything in the source code.

reserved: This is a special volume that the local node_modules folder if existing, won't override the node_modules folder inside the container.

If you run the following command Docker will create an image from our Dockerfile and then run both containers (api and mongo):

$ docker-compose up

If you want to stop the containers just use this command:

$ docker-compose down

Conclusion

This is a simple Docker development environment setup that can easily be extended. If you want to change the database or add an Nginx to render your frontend, just go ahead and add a new service to docker-compose.yml or change an existing one.

You can also dockerize .NET Core, Java, or GoLang applications if you want to. Tell me about your experience with Docker in the comment section down below, I'd love to hear it!

The code for this is up on my GitHub as usual.

Photo by Dominik Lückmann on Unsplash

6 Tools I use for Web Development

Jakob Klamser — Fri, 02 Oct 2020 06:38:53 +0000

All of the six tools I will discuss in this article are used by me on a daily basis. Some of them you may already use, some of them you maybe don't even know about but all of them make me a more productive and organized developer. So let's jump right into it with the first tool!

Notion

I tried out a lot of different tools (Trello, OneNote, etc.), but none of them had the flexibility and customizability I wished for. Then I found out about Notion, so what is Notion?

It calls itself an "All-in-one workspace". You can use it as a Kanban-Board, for taking notes, scheduling your day, using it as a wiki, and a lot of other tasks.
I use it mainly for organizing my articles and projects. Writing down when I published an article to which platform and in which state it is currently in (Published, Idea, Research, In Progress, etc.).
I am also linking all my research to my articles and projects and writing down ideas for future projects and articles. Setting deadlines for myself and even sharing data with friends and co-workers is really easy using Notion.
The mobile app as well as the desktop app is really user friendly and customizable to your needs. I highly recommend checking this tool out.

Source

GitHub Desktop

I stumbled across GitHub Desktop roughly a year ago and it made my life that much easier when dealing with git repositories. It has a nice and clean user interface and it lets you import an existing repository with just a click of a button.

If you are a git CLI veteran than this might not be for you. But if you had enough of the CLI and want to have a nice user experience using git, then this application is made for you.

Source

Docker

Docker is a staple in the development process of a lot of companies since its release in March 2013. I am using it on my private projects not only for containerizing my finished applications but for containerizing my local development.

For example, developing an Express API with a MongoDB containerizing it at the beginning helps you get rid of the normal "It works on my machine" issues. You can dockerize frontend applications, like React, Angular, etc., too.

Give it a try if you haven't yet. It makes your life that much easier when developing!

Source

That's it for this article, I hope this will help you pick the right tools for your job out of this vast amount of different tools that are out there.
Let me know what you think about these six and which tools you use on a daily basis.

Photo by Todd Quackenbush on Unsplash

Setting up a REST-API using Express

Jakob Klamser — Sun, 27 Sep 2020 15:03:25 +0000

In this article, I want to show you a quick and solid way to set up a REST-API with ExpressJS. This does not include any kind of authentication or authorization. We will just be setting up one single route and define some standards that will help us expand this API if we chose to do so.

Prerequisites

Before we can start coding we need to get a version of NodeJS and NPM installed on our system. Just head over to the official website linked here and download the LTS (long time support) version of NodeJS. This will automatically install NPM alongside it as its package manager.

Next, we generate our project by creating a folder called express_api_template and then using npm to initialize a NodeJS project.

$ mkdir express_api_template
$ cd express_api_template/
$ npm init

npm, init will walk you through a process for setting up a new project. I usually use the default settings except for entry point. I like to call my main javascript file server.js instead of the default index.js and then fill out the author.
After this is done we need to install ExpressJS by adding it to our package.json. We will use the following command for this.

$ npm install express

After it is finished downloading we should have a node_modules folder and the two files package.json and package-lock.json.

The Basics

First, we need to create two new folders and two new files, and some new dependencies.

$ mkdir src
$ mkdir src/config
$ touch src/server.js src/config/config.env
$ npm install colors dotenv
$ npm install nodemon --save-dev

The difference between the plain install and the --save-dev install is that the plain one installs dependencies needed for production. --save-dev installs dependencies only needed for development.
But what did we actually install here?

colors: This package is used to make the console outputs colorful.
dotenv: This package loads environment variables from .env files into process.env.{variable_name}
nodemon: This is used in development for reloading your server every time you save changes.

Installing all this won't make the application run. For that we need to do two more things:

Configuring our package.json to start server.js
Implementing a basic Express server in server.js

Let's start by configuring package.json like this:

{
  "name": "express_api_template",
  "version": "1.0.0",
  "description": "",
  "main": "src/server.js",
  "scripts": {
    "start": "NODE_ENV=production node src/server.js",
    "dev": "NODE_ENV=development nodemon src/server.js"
  },
  "author": "Jakob Klamser",
  "license": "ISC",
  "dependencies": {
    "colors": "^1.4.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

We defined two commands to use with npm.
The first one is for production. It sets the NODE_ENV variable to production and then starts the server by using the node-command.
The second one is for development and is setting the NODE_ENV to development and then using nodemon instead of node so that we can make use of the reload-on-save functionality while we are in development.

NOTE: If you are using Windows as an operating system you need to install cross-env as a development dependency to set the NODE_ENV.

$ npm install cross-env --save-dev

And then edit the two scripts like this:

"scripts": {
  "start": "cross-env NODE_ENV=production node src/server.js",
  "dev": "cross-env NODE_ENV=development nodemon src/server.js"
},

For all of this to work, we need to finish up step two first. We have to create an express application and then start it by using a port that we define in our config.env.
Add the port to the file like this:

PORT=5000

Now we can go ahead and begin with writing some code on server.js.

const express = require('express');
const dotenv = require('dotenv');
const colors = require('colors');

dotenv.config({ path: 'src/config/config.env' });

const app = express();

const PORT = process.env.PORT || 5001;

app.listen(PORT,
  console.log(`Server up and running in ${process.env.NODE_ENV} mode on port ${PORT}`.yellow.bold));

This is really straight forward, we set the path to our config.env and then initialize the express app. After that, we start listening at the port we just set in our config.env.
If we run the following command:

$ npm run dev

You should see the following output:

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node src/server.js`
Server up and running in development mode on port 5000

Now we got a really basic setup going. Now let's make this a template for a REST-API in the next section.

Debug and Security

Our goal is to add some more features like logging more information to the console for debugging purposes and securing the API.

To achieve the aforementioned goals we need to add a few more dependencies.

$ npm install helmet cors
$ npm install morgan  --save-dev

What do these three new dependencies do?

helmet: This package is a middleware that helps to secure your API by adding multiple HTTP headers.
cors: This middleware helps us implementing CORS.
morgan: This is a simple HTTP request logger, it outputs the incoming requests to the node console.

After installing all these middlewares we need to go ahead and add them to our express application.

// After the other require statements:
const helmet = require('helmet');
const cors = require('cors');

// Between const app and const PORT:
// Development Setup
if (process.env.NODE_ENV === 'development') {
  // require morgan if in development mode
  // setting morgan to dev: https://www.npmjs.com/package/morgan#dev
  app.use(require('morgan')('dev'));
}

// Put all the server-wide middleware here
app.use(cors({
  origin: process.env.CORS_ORIGIN,
}));
app.use(helmet());

Most notably is the new check on the current NODE_ENV. We do that because we only require morgan if we are in development mode. If you later want to add in something like a data seeding script for a database in development then you can do it right there.

After that new check, we connect the middlewares to our express application. For cors, we configure an origin. This means only requests from this origin are allowed to communicate with our API. For example a frontend application you built. We just need to add the address to our config.env file like this:

CORS_ORIGIN=http://localhost:8000

The port might be different depending on your web applications development set up. If that's the case just go ahead and change it.

Endpoint and Custom Middleware

Now that we are done securing the API we will implement two basic middlewares and one example route. To keep the project clean and maintainable we will add three more folders and four new files.

$ mkdir src/routes src/middleware src/controllers
$ touch src/middleware/notFound.js src/middleware/errorHandler.js src/routes/post.js src/controllers/postsController.js

Middleware

We start by creating our first middleware function in notFound.js that handles requests that don't hit an API endpoint by throwing a 404 Not Found Error.

const notFound = (req, res, next) => {
  const error = new Error(`Not Found - ${req.originalUrl}`);
  res.status(404);
  next(error);
};

module.exports = notFound;

It is simply a function that takes in the request, response, and next. We create an error and set the HTTP status code to 404 and pass in the error to next.

This middleware alone won't help us at all. We need something to handle incoming errors, such as the Not Found Error we just created. For that, we implement our next middleware function called errorHandler.

const errorHandler = (error, req, res, next) => {
  const statusCode = res.statusCode === 200 ? 500 : res.statusCode;
  res.status(statusCode);
  res.json({
    message: error.message,
    stack: process.env.NODE_ENV === 'production' ? ':(' : error.stack,
  });
};

module.exports = errorHandler;

If someone hits a route that has no endpoint our API will return a JSON object that contains the error message and if we are running in development it also returns the stack.

The last step is to add the middlewares to our server.js.

// After the other require statements:
const notFound = require('./middleware/notFound');
const errorHandler = require('./middleware/errorHandler');
// Custom middleware here
app.use(notFound);
app.use(errorHandler);

Router

We are getting closer to the finish line. There are just two steps left. We are focusing on one of them now: Adding a route. For that, we need to ask ourselves what route we want to add. In this article, I want to add two different GET routes one that gets all posts and one that gets an article by its ID. Let's get started by implementing our route in the file post.js.

const express = require('express');

const router = express.Router();

// Controller Methods
const { getPosts, getPostById } = require('../controllers/postsController');

router.route('/')
  .get(getPosts);

router.route('/:id')
  .get(getPostById);

module.exports = router;

The express router lets us define routes based on HTTP verbs like GET, POST, etc. We just need to add our controller methods, that we will implement later, to the HTTP verb, and the router will do his magic.
In server.js we need to add the router like this:

// Between helmet and custom middleware:
// All routes here
app.use('/api/posts', require('./routes/post'));

This will throw an error because we did not implement the controller functions yet.

Controllers

Now we are at the last step for our REST-API template. The controller functions. We will need to create two of them, getPosts and getPostById. Let's get to work by implementing these methods in postsController.js.

const postsArray = [
  {
    id: 1,
    title: 'React from scratch',
    content: 'In this article we will create a ToDo App in React from scratch.... etc.etc.etc.',
    author: 'Jakob Klamser'
  },
  {
    id: 2,
    title: 'Vanilla JavaScript Basics',
    content: 'Today we will discuss some basic JavaScript fundamentals like array manipulation, currying etc.',
    author: 'Jakob Klamser'
  },
  {
    id: 3,
    title: 'VS Code Extensions',
    content: 'I wanted to show you some of my favorite VS Code Extensions.... Bracket Pair Colorizer etc.etc.',
    author: 'Jakob Klamser'
  },
  {
    id: 4,
    title: 'ExpressJS REST API',
    content: 'Is this the current article?',
    author: 'Jakob Klamser'
  },
];


// @route   GET api/posts
// @desc    Get All Posts
// @access  Public
exports.getPosts = (req, res) => {
  const posts = postsArray;
  return res.status(200).json({
    success: true,
    count: posts.length,
    data: posts,
  });
};

// @route   GET api/posts/:id
// @desc    Gets a post by ID
// @access  Private
exports.getPostById = (req, res) => {
  const post = postsArray.filter(post => post.id === Number(req.params.id));
  console.log(post);
  if (post[0] !== undefined) {
    return res.status(200).json({
      success: true,
      data: post[0],
    });
  }
  return res.status(404).json({
    success: false,
    error: 'No post found',
  })
};

At the top of the file, we have some static data. After that, we export two functions. The first one, getPosts, returns the whole list of static data. The second method, getPostById, returns one object from the array if the id matches or it returns an error if no post matches the id provided in the request.

The last thing we need to do is enable JSON for our application by adding another middleware.

// Right below helmet:
app.use(express.json());

Conclusion

You can now type in http://localhost:5000/api/posts or http://localhost:5000/api/posts/2 to access the API (while it is running).
I hope you enjoyed this quick guide for setting up a template express API.
You can build on that by adding a database, authentication and authorization, more endpoints, and so on.
Let me know what you think about it and if you build something on top of this template.
The whole project can be found on my GitHub.

Photo by Brian McGowan on Unsplash

These are two small plugins for your VS Code that helps you maintain your HTML files by auto renaming and closing your tags. This also works in React's very own JSX syntax. Give it a try if you want to save you some time.

Source Auto Close Tag

Source Auto Rename Tag

Marketplace: Auto Close Tag and Auto Rename Tag

Markdown Preview Enhanced

I use Markdown for a lot of things. For example, writing articles on hashnode.com or dev.to, writing documentation for my private projects, or organizing myself by writing notes down in markdown. Most of the time I do that using VS Code and I was lacking a good markdown preview tool until I found Markdown preview Enhanced. It does not only provide you with a preview, but it also features synchronized scrolling, PDF export, and PlantUML. I really like this tool and can highly recommend it to everyone that works regularly with Markdown.

Source

Marketplace: Link

Conclusion

These are my most used extensions for VS Code that I use on a daily basis. I hope you found something new and useful for your workflow. Let me know what extensions you use.

Photo by Blake Connally on Unsplash

Building a Quiz App in JavaScript

Jakob Klamser — Tue, 22 Sep 2020 13:25:41 +0000

My goal is to take you on a trip from planning to building a quiz application. For that, we will use vanilla JavaScript, CSS, and HTML. No additional libraries or packages. Let’s get started by defining what our quiz app can do.

Defining the specification

The quiz will be split into two main classes. The first one will be a settings area in which the player can choose the difficulty, the category, and the number of questions he wants to answer. For that, we will create a settings-class to track all of this information. After doing that he can start the quiz.

The second area will be a quiz. The quiz-class tracks the progress of the player and decides whether or not to display the next question of the final screen.

Furthermore, the quiz-class has two other components, first of an array of question-classes that hold the data of a question, display it, and checks if the answer was right or not. The other one is the final-class that displays the last page with the player’s score.

We will be using the Open Trivia DB API for the questions so that we don’t have to come up with our own questions.

As you might already guess, because I am talking a lot about classes, we will use Object-Oriented-Programming to implement this quiz app and not Functional-Programming. If you are interested in the difference between these two paradigms go an check out my article “Functional Programming vs OOP in JavaScript”.

Prerequisites

Before we can start implementing the quiz we need to create our folder structure and the HTML and CSS. In this article, we will be focusing on the JavaScript part of the application. Therefore I will be providing the necessary HTML and CSS in this section. Let’s start by creating the folder structure like this:

$ mkdir vanilla-quiz
$ cd ./vanilla-quiz
$ mkdir quiz
$ touch index.html index.js styles.css

Go ahead and copy and paste the index.html and styles.css from these sources:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vanilla Quiz</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
</head>
<body>
  <main>
    <div class="header">
      <h2>Vanilla Quiz</h2>
    </div>
    <div class="main">
      <div class="final">
        <h3>You answered all of the questions!</h3>
        <p>Score: </p><p class="score"></p>
        <h4>Want to try it again?</h4>
        <button id="again" class="submit">Again</button>
      </div>
      <div class="quiz">
        <div class="count">
          <p class="current">0</p><p style="margin-left:40px"> / </p><p class="total"></p>
        </div>
        <h3 id="question"></h3>
        <label id="a1" class="container">
          <input type="radio" checked="checked" name="radio">
          <span class="checkmark"></span>
        </label>
        <label id="a2" class="container">
          <input type="radio" name="radio">
          <span class="checkmark"></span>
        </label>
        <label id="a3" class="container">
          <input type="radio" name="radio">
          <span class="checkmark"></span>
        </label>
        <label id="a4" class="container">
          <input type="radio" name="radio">
          <span class="checkmark"></span>
        </label>
        <button id="next" class="submit">Submit</button>
      </div>
      <div class="settings">
        <h3 style="text-align: center;">Set up your Quiz!</h3>
        <label for="category">Category</label>
        <select name="category" id="category">
          <option value="9">General Knowledge</option>
          <option value="27">Animals</option>
          <option value="15">Video Games</option>
          <option value="23">History</option>
          <option value="21">Sports</option>
        </select>
        <div class="mt30">
          <label for="difficulty">Difficulty</label>
          <label class="container" style="display: inline; margin-left: 30px;">Easy
            <input type="radio" name="radio" id="easy">
            <span class="checkmark" style="margin-top: 2px;"></span>
          </label>
          <label class="container" style="display: inline; margin-left: 30px;">Medium
            <input type="radio" name="radio" id="medium">
            <span class="checkmark" style="margin-top: 2px;"></span>
          </label>
          <label  class="container" style="display: inline; margin-left: 30px;">Hard
            <input type="radio" name="radio" id="hard">
            <span class="checkmark" style="margin-top: 2px;"></span>
          </label>
        </div>
        <div class="mt30">
          <label for="questions">Number of questions</label>
          <input name="questions" id="questions" type="text" pattern="[0-9]*" />
        </div>  
        <button id="start" class="submit">Start</button>
      </div>  
    </div>
  </main>
  <script type="module" src="index.js"></script>
</body>
</html>

:root {
  --primary-color: #5D737E;
  --secondary-color: #D6F8D6;
  --tertiary-color: #7FC6A4;
  --quaternary-color: #55505C;
  --hover-color: #4e616b;
  --shadow-color:rgba(57, 127, 93, 0.4);
  --font-style: 'Questrial';
}

body {
  font-family: var(--font-style), 'Ranchers', cursive;
  background-color: var(--secondary-color);
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

h2 {
  font-size: 3.5rem;
  text-align: center;
  color: var(--primary-color);
}

.mt30 {
  margin-top: 30px;
}

.header {
  padding: 15px;
}

.main {
  display: flex;
  justify-content: center;
}

.settings {

  z-index: 1;
}

.final {
  visibility: hidden;
  z-index: 2;
}

.final p {
  font-size: 30px;
  text-align: center;
}

.final h4 {
  font-size: 33px;
  text-align: center;
}

.quiz  {
  visibility: hidden;
  z-index: 0;
}

#questions {
  font-size: 20px;
  font-family: var(--font-style), 'Ranchers', cursive;
  font-weight: 600;
  line-height: 1.3;
  color: white;
  background-color: var(--primary-color);
  appearance: none;
  border: none;
  padding: 5px;
  border-radius: 5px;
  margin-left: 30px;
  outline: none;
  text-align: center;
  width: 120px;
}
.settings select {
  font-size: 20px;
  font-family: var(--font-style), 'Ranchers', cursive;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1px;
  color: white;
  background-color: var(--primary-color);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 5px;
  border-radius: 5px;
  margin-left: 20px;
  outline: none;
  text-align: center;
}

.settings select::-ms-expand {
  display: none;
}

.settings select:hover {
  border-color: var(--hover-color);
}

.settings select:focus {
  border-color: var(--hover-color);
}

.settings select option {
  /* font-weight: bolder; */
  font-family: var(--font-style), 'Ranchers', sans-serif;
}

.settings label {
  font-size: 25px;
  margin-right: 16px;
}


.quiz, .settings, .final {
  position: absolute;
  padding: 0px 35px 35px 35px;
  max-width: 560px;
  background-color: var(--tertiary-color);
  border-radius: 7px;
  -webkit-box-shadow: 10px 10px 3px -4px var(--shadow-color);
  -moz-box-shadow: 10px 10px 3px -4px var(--shadow-color);
  box-shadow: 10px 10px 5px -4px var(--shadow-color);
}

h3 {
  display: block;
  width: 550px;
  font-size: 35px;
  font-weight: 350;
  word-wrap: break-word;
}

.submit {
  width: 100%;
  color: white;
  background-color: var(--primary-color);
  font-family: var(--font-style), 'Ranchers', cursive;
  outline: none;
  border: none;
  height: 50px;
  font-size: 1.8rem;
  margin-top: 20px;
  border-radius: 5px;
  letter-spacing: 2px;
}

.submit:hover {
  background-color: var(--hover-color);
  cursor: pointer;
  color: #FAF33E;
}

/* The container */
.count {
  display: block;
  left: 75%;
  position: relative;
  padding-left: 35px;
  margin-bottom: 100px;
  cursor: pointer;
}

.count p {
  position: absolute;
  font-size: 35px;

}

.total {
  margin-left: 50px;
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: -2px;
  left: 0px;
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 30%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #FAF33E;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--quaternary-color);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

Now we are ready to start working on our app. The first class we will be working on is Settings.

How to get the questions?

The goal of the settings-class is that the player can choose their category, difficulty, and the number of questions they want to answer. We need to create a request to the Open Trivia DB API out of these three parameters to get the questions for the player’s playthrough.

Before we start creating our class we need to create an instance of it in the index.js like this:

import Settings from ‘./quiz/settings.js’;

new Settings();

This will give an error because the file settings.js does not exist yet, so let’s go ahead and create it.

$ touch ./quiz/settings.js

Next up we create the skeleton for our settings-class. For that, we need the class with a constructor and a startQuiz-method plus the export-statement. Without an export-statement, we could not import the class in index.js. This is how it should look like:

class Settings {
  constructor() {
  }

  startQuiz() {
  }
}

export default Settings;

In the constructor, we want to get all the DOM-Elements we need to start a quiz. For that, we need to grab the two div’s, quiz, and settings to toggle their visibility when the player wants to start the quiz. Next up we need all the parameters so that we can create the request for getting the questions. Last but not least we need to get the button to add the startQuiz-method to the click-event.

constructor() {
  this.quizElement = document.querySelector('.quiz');
  this.settingsElement = document.querySelector('.settings');
  this.category = document.querySelector('#category');
  this.numberOfQuestions = document.querySelector('#questions');
  this.difficulty = [
    document.querySelector('#easy'),
    document.querySelector('#medium'),
    document.querySelector('#hard'),
  ];
  this.startButton = document.querySelector('#start');

  this.quiz = { };  
  this.startButton.addEventListener('click', this.startQuiz.bind(this));
}

In the first segment, we get all the DOM-Elements, note that we store the elements for the difficulty in an array to filter them later on. After that, we initialize the quiz-property and add the startQuiz-method to the startButton. Be sure to bind this to the startQuiz-method. If you don’t do that you won’t have this available inside the method.

For the quiz to start we need to collect all the parameters and create the request dynamically. Because we are dealing with an API-call I decided to use async/await to handle the asynchronous call. To make sure no error gets lost we will wrap the whole call in a try-catch-block. So the startQuiz-method should look something like this:

async startQuiz() {
  try {
    const amount = this.getAmount();
    const categoryId = this.category.value;
    const difficulty = this.getCurrentDifficulty();

    const url = `https://opentdb.com/api.php?amount=${amount}&category=${categoryId}&difficulty=${difficulty}&type=multiple`;
    let data = await this.fetchData(url);
    this.toggleVisibility();
    this.quiz = new Quiz(this.quizElement, amount, data.results);
  } catch (error) {
    alert(error);
  }
}

What are we doing here?

First, we get all three values, for the amount and difficulty we use methods that are not yet implemented. In these methods, we will be handling errors e.g. not choosing any difficulty or entering a negative number for the number of questions.

After that, we create the URL with the parameters we just got. This URL is passed in the fetchData-method which will send the request and returns the data. After that, we call toggleVisibility and initialize a new quiz-object by passing in the result, amount, and the quizElement.

If at any point an error is thrown we will catch it and display it by using the alert-method.

The final settings-class should look like this:

import Quiz from './quiz.js';

class Settings {
  constructor() {
    this.quizElement = document.querySelector('.quiz');
    this.settingsElement = document.querySelector('.settings');
    this.category = document.querySelector('#category');
    this.numberOfQuestions = document.querySelector('#questions');
    this.difficulty = [
      document.querySelector('#easy'),
      document.querySelector('#medium'),
      document.querySelector('#hard'),
    ];
    this.startButton = document.querySelector('#start');

    this.quiz = { };

    this.startButton.addEventListener('click', this.startQuiz.bind(this));
  }

  async startQuiz() {
    try {
      const amount = this.getAmount();
      const categoryId = this.category.value;
      const difficulty = this.getCurrentDifficulty();

      const url = `https://opentdb.com/api.php?amount=${amount}&category=${categoryId}&difficulty=${difficulty}&type=multiple`;

      let data = await this.fetchData(url);
      this.toggleVisibility();
      this.quiz = new Quiz(this.quizElement, amount, data.results);
    } catch (error) {
      alert(error);
    }
  }

  toggleVisibility() {
    this.settingsElement.style.visibility = 'hidden';
    this.quizElement.style.visibility = 'visible';
  }

  async fetchData(url) {
    const response = await fetch(url);
    const result = await response.json();

    return result;
  }

  getCurrentDifficulty() {
    const checkedDifficulty = this.difficulty.filter(element => element.checked);

    if (checkedDifficulty.length === 1) {
      return checkedDifficulty[0].id;
    } else {
      throw new Error('Please select a difficulty!');
    }
  }

  getAmount() {
    const amount = this.numberOfQuestions.value;
    // Not negative, not 0 and not over 50
    if (amount > 0 && amount < 51) {
      return amount;
    }
    throw new Error('Please enter a number of questions between 1 and 50!');
  }
}

export default Settings;

Both methods getAmount and getCurrentDifficulty are returning an error if the player did not select anything or the selected value is out of bounds (for the number of questions). We also added the import-statement for the quiz-class at the top of this file. The other two methods (fetchData and toggleVisibility) do exactly what their names suggest. Now we can focus on the quiz-class next.

It's Quiz Time!

Before we start thinking about the quiz-class we need to create a file that will contain it.

$ touch ./quiz/quiz.js

We start as we did with settings.js by creating a skeleton.

class Quiz {
  constructor(quizElement, amount, questions) {
    this.quizElement = quizElement;
    this.totalAmount = amount;
    this.questions = this.setQuestions(questions);
  }
  setQuestions(questions) {
    return questions.map(question => new Question(question));
  }
  nextQuestion() {
  }
  endQuiz() {
  }
}
export default Settings;

This time we have some arguments that got passed in by the settings-object that we need to deal with. For the questions, we create a single question-object for each question that got passed in by the settings-object. The constructor needs some more set up so we will add some more DOM-Elements and an event-listener to the nextButton too. So let’s go ahead and do this!

constructor(quizElement, amount, questions) {
  this.quizElement = quizElement;
  this.currentElement = document.querySelector('.current');
  this.totalElement = document.querySelector('.total');
  this.nextButton = document.querySelector('#next');
  this.finalElement = document.querySelector('.final')
  this.totalAmount = amount;
  this.answeredAmount = 0;
  this.questions = this.setQuestions(questions);
  this.nextButton.addEventListener('click',
  this.nextQuestion.bind(this));
  this.renderQuestion();
}

As you can see it almost looks like the constructor in settings.js. One major difference is the call of renderQuestion at the end. The purpose of this call is that we want to render the first question immediately.

Between setQuestions and nextQuestion we create the method renderQuestion and implement it like this:

renderQuestion() {
  this.questions[this.answeredAmount].render();
  this.currentElement.innerHTML = this.answeredAmount;
  this.totalElement.innerHTML = this.totalAmount;
}

At the start of the quiz, the answeredAmount is 0 so we call the render-method on the first question in the questions-array. After that, we set the current progress of the player. Because we did not implement the question-class yet this code throws an error, but we will fix this soon.

Let’s implement the nextQuestion-method. For that, if the player checked an answer and if so, which answer was checked. Next up we need to show the result to the player and increment the answeredAmount by one. Finally, we have to check if there is another question left and if so display it. If this was the last one we need to proceed to the result screen.

nextQuestion() {
  const checkedElement = this.questions[this.answeredAmount].answerElements.filter(el => el.firstChild.checked);
  if (checkedElement.length === 0) {
    alert(‘You need to select an answer’);
  } else {
    this.questions[this.answeredAmount].answer(checkedElement)
    this.showResult();
    this.answeredAmount++;
    (this.answeredAmount < this.totalAmount) ? this.renderQuestion() : this.endQuiz();
  }
}

The only methods that are missing in this class are showResult, endQuiz, and a method to sum up all the correct answers for the result screen. The final quiz.js should look like this:

import Final from './final.js';
import Question from './question.js'

class Quiz {
  constructor(quizElement, amount, questions) {
    this.quizElement = quizElement;
    this.currentElement = document.querySelector('.current');
    this.totalElement = document.querySelector('.total');
    this.nextButton = document.querySelector('#next');
    this.finalElement = document.querySelector('.final')

    this.totalAmount = amount;
    this.answeredAmount = 0;
    this.questions = this.setQuestions(questions);

    this.nextButton.addEventListener('click', this.nextQuestion.bind(this));
    this.renderQuestion();
  }

  setQuestions(questions) {
    return questions.map(question => new Question(question));
  }

  renderQuestion() {
    this.questions[this.answeredAmount].render();
    this.currentElement.innerHTML = this.answeredAmount;
    this.totalElement.innerHTML = this.totalAmount;
  }

  nextQuestion() {
    const checkedElement = this.questions[this.answeredAmount].answerElements.filter(el => el.firstChild.checked);
    if (checkedElement.length === 0) {
      alert('You need to select an answer');
    } else {
      this.questions[this.answeredAmount].answer(checkedElement)
      this.showResult();
      this.answeredAmount++;
      (this.answeredAmount < this.totalAmount) ? this.renderQuestion() : this.endQuiz();
    }
  }

  showResult() {
    this.questions[this.answeredAmount].isCorrect ? alert('Correct answer :)') : alert('Wrong answer :(');
  }

  endQuiz() {
    this.quizElement.style.visibility = 'hidden';
    this.finalElement.style.visibility = 'visible';
    const correctAnswersTotal = this.calculateCorrectAnswers();
    this.final = new Final(correctAnswersTotal, this.totalAmount);
  }

  calculateCorrectAnswers() {
    let count = 0;
    this.questions.forEach(el => {
      if (el.isCorrect) {
        count++;
      }
    });
    return count;
  }
}

export default Quiz;

We added the two imports at the top for question.js and final.js. Additionally, we implemented showResult by checking if the question was correctly answered with the ternary operator.

The endQuiz-method looks a little bit like the toggleVisibility-method from our settings.js, except that it sums up all the correct answers by calling calculateCorrectAnswers and then passing it to a new instance of the final-class (we still need to implement that class).

Displaying a Question and the Result

Our quiz-class does not work at the moment because two dependencies do not exist yet. Let’s change this by adding the two files like this:

$ touch ./quiz/question.js ./quiz/final.js

We start by implementing the question-class. First of all, we add a skeleton to the file like this:

class Question {
  constructor(question) {
    this.correctAnswer = question.correct_answer;
    this.question = question.question;
    this.answers = this.shuffleAnswers([
      question.correct_answer,
      ...question.incorrect_answers
    ]);
  }
  shuffleAnswers(answers) {
  }

  answer(checkedElement) {
  }
  render() {
  }
}
export default Question;

So what did we do here?

We save the question, correct answer, and an array of answers that we shuffle before we store it.

The next step is to implement the shuffleAnswers, answer, and render methods. For the shuffling of the array, we will use the Fisher-Yates-Shuffle-Algorithm.

The answer-method will just compare the choice of the player with the correctAnswer property and the render method will display the question and all the possible answers. For this to work, we need to get the respective DOM-Elements and end up with this question.js:

class Question {
  constructor(question) {
    this.questionElement = document.querySelector('#question');
    this.answerElements = [
      document.querySelector('#a1'),
      document.querySelector('#a2'),
      document.querySelector('#a3'),
      document.querySelector('#a4'),
    ];

    this.correctAnswer = question.correct_answer;
    this.question = question.question;
    this.isCorrect = false;

    this.answers = this.shuffleAnswers([
      question.correct_answer, 
      ...question.incorrect_answers
    ]);
  }

  shuffleAnswers(answers) {
    for (let i = answers.length - 1; i > 0; i--){
      const j = Math.floor(Math.random() * i)
      const temp = answers[i]
      answers[i] = answers[j]
      answers[j] = temp
    }
    return answers;
  }

  answer(checkedElement) {
     this.isCorrect = (checkedElement[0].textContent === this.correctAnswer) ? true : false;
  }

  render() {
    this.questionElement.innerHTML = this.question;
    this.answerElements.forEach((el, index) => {
      el.innerHTML = '<input type="radio" name="radio"><span class="checkmark"></span>' + this.answers[index];
    });
  }
}

export default Question;

Now the only thing missing is the final-class. This class is really simple we just need to get the DOM-Elements to display the final result to the player. To add some convenience we can add an again-button that reloads the page so the player can start again. This is how it should look like:

class Final {
  constructor(count, totalAmount) {
    this.scoreElement = document.querySelector('.score');
    this.againButton = document.querySelector('#again');

    this.render(count, totalAmount);
    this.againButton.addEventListener('click', location.reload.bind(location));
  }

  render(count, totalAmount) {
    this.scoreElement.innerHTML = `You answered ${count} out of ${totalAmount} correct!`;
  }
}

export default Final;

Conclusion

The quiz app is now complete. We implemented this with just plain old JavaScript and used the concept of Object-Oriented-Programming. I hope you enjoyed this and as always you can find the code on my GitHub.

Screenshots

The players can choose a category, difficulty, and the number of questions they want to answer and then start the quiz.

When started the multiple-choice questions show up like this.

And at the end of all questions, you get to see this final page.

I hope you had fun following along. Try and improve this version if you want to.

Photo by Emily Morter on Unsplash

Your own Component-based JavaScript Library

Jakob Klamser — Mon, 14 Sep 2020 08:28:42 +0000

What do React and Angular have in common besides being two of the biggest frontend web development frameworks/libraries out there?

They both are component-based!

In this article, we will create a simple frontend library that uses components with good old plain JavaScript. This may help us understand components a bit more and also sharpens our skills in plain JavaScript.

Prerequisites

Before we can dive into the JavaScript part of this article we need to set up our project structure. For that we create a new folder called component-library and some more subfolders and files:

$ mkdir component-library
$ cd ./component-library
$ mkdir lib style components
$ touch index.html index.js ./style/styles.css

Next up we need to fill out our HTML and CSS files like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style/styles.css">
</head>
<body>
  <main id="app"></main>
  <script type="module" src="index.js"></script>
</body>
</html>

body {
  background-color: cornflowerblue
}

a {
  text-decoration: none;
  color: white;
}

.article {
  border: 1px solid cornflowerblue;
  margin: 0px 2px 5px 2px;
  padding: 10px 15px 15px 15px;
  background-color: white;
}

Now we are all set up and ready to write some JavaScript.

The library called Eszett

I like to start by pretending the library already exists. Because of that, the first thing we need to focus on is index.js.

At the very top of the file we need to import our library and then instantiate a new application:

// All our imports are here
import ß from ‘./lib/Eszett.js’;
// Initialize app
const app = new ß('app');

This code will throw an error because we did not export anything from our Eszett.js. In this file, we need a class called ß with a constructor that takes in a selector as a string and export it. So first of all we need to create a file like this:

$ touch ./lib/Eszett.js

The content of this file should look like this:

class ß {
  constructor(selector) {
    this.eszettElement = document.querySelector(`#${selector}`);
    console.log(‘Eszett initialized!’);
  }
}
export default ß;

If you run your application now we won’t get an error anymore and the text ‘Eszett initialized’ should appear in your browser’s console. But so far we don’t do that much with our code. Let’s change that by implementing the possibility to register components in our application.

Components

For this to work we need to implement two things:
a field to store all the registered components
a registerComponent method
First of we add the following line in the constructor right above the console.log:

this.components = {};

The plan is to register all the components in this field as key-value-pairs. To do that we need to add the following method below the constructor:

registerComponent(component {
  this.components[component.name] = component;
}

Now we can register components in our application. The registration will take place in the index.js right below the initialization of our app. Our first component will be a MenuComponent. This will be a two-step process, first, we import the component and then we register it after the initialization of the app.

After doing that our index.js should look like this:

// All our imports are here
import ß from ‘./lib/Eszett.js’;
import MenuComponent from ‘./components/MenuComponent.js’;
// Initialize app
const app = new ß(‘app’);
// Adding our Components to the App
app.registerComponent(MenuComponent)

At the moment our application will throw an error because we don’t have the MenuComponent yet, now we go ahead and create that by adding a new file like this:

$ touch ./components/MenuComponent.js

In this file, we will import our not yet existing Component.js, so that we can create a new component. After that, we need an HTML-Template and last but not least the component itself. This is how it should look like:

// Import statements
import Component from '../lib/Component.js';

// HTML-Template
const menuTemplate = (state) =>`
  <header>
    <h1>
      <a href="#/posts">${state.name}'s Blog</a>
    </h1>
  </header>
`;

// Component
const MenuComponent = new Component(
  'menu', 
  {
    name: 'Jakob'
  },
  menuTemplate);

export default MenuComponent;

Let’s take a closer look at the HTML-Template first. It is a function that returns a template literal (template string) and gets the state of the component passed in as a parameter. In line 8 we see that this state gets used to dynamically render the name of the blog.

Taking a look at the component itself we see that it gets passed in three parameters. The first parameter is the name of the component itself, the second parameter is an object with a single attribute called name. This is the state object we pass on to our menuTemplate which is also our last parameter.

For all of this to work, we need to implement our component.js. First, we need to create a file like this:

$ touch ./lib/Component.js

The implementation of our component is straight forward. We need a constructor that takes in three parameters and we need a function that calls our HTML-Template-Function and returns its result. At the end it should look like this:

class Component {
  constructor(name, state, template) {
    this.name = name;
    this.state = state;
    this.template = template;
  }

  view() {
    return this.template(this.state);
  }
}

export default Component;

Now our page won’t show any error but it won’t display our MenuComponent either.

Rendering

We can create a component and register it in our application but we can’t display the components HTML. Before we tackle this problem I want to add a PostsComponent to our application so that we can render two components at the same time.

For that we need to register it like this:

// All our imports are here
import ß from './lib/Eszett.js';
import MenuComponent from './components/MenuComponent.js';
import PostsComponent from './components/PostsComponent.js';

// Initialize app
const app = new ß('app');

// Adding our Components to the App
app.registerComponent(MenuComponent);
app.registerComponent(PostsComponent);

Create it:

$ touch ./components/PostsComponent.js

And implement it like that:

import Component from '../lib/Component.js';

const postsTemplate = (state) => `
  ${state.posts.map(post => `
    <li>
      <div class="article">
        <h3>${post.title}</h3>
        <p>${post.text}</p>
      </div>
    </li>`).join('')}
`;

const PostsComponent = new Component(
  'posts', 
  {
    posts: [{
      title: 'My first blog post',
      text: 'This is my first blog post EVER, its awesome!'
    },
    {
      title: 'Writing my own component library',
      text: 'In this article I want to share with you my experience on how to write a component library!'
    }],
  },
  postsTemplate
);

export default PostsComponent;

For the rendering to work we need to update the DOM by calling the view method of our components and inserting the returned HTML into the already defined eszettElement. The described behavior should be one method of our ß class and be called inside our registerComponent method. This is the final implementation of our class:

class ß {
  constructor(selector) {
    this.eszettElement = document.querySelector(`#${selector}`);
    this.components = {};
    console.log('Eszett initialized!');
  }

  registerComponent(component) {
    this.components[component.name] = component;
    this.updateView();
  }

  updateView() {
    if (this.components) {  
      let mergedViews = '';
      Object.keys(this.components).forEach(key => {
        mergedViews += this.components[key].view()
      });
      this.eszettElement.innerHTML = mergedViews;
    }
  }
}

export default ß;

The updateView method first checks if there are any components registered. If that is the case it iterates over all the components and calls the view method of every single one of them. The returned HTML will be merged and set to the innerHTML of the eszettElement. If everything worked out your final page should look like this:

What could be next?

We just created our small library called Eszett. We can create components that contain isolated state and their own HTML-Templates. These components can be registered and rendered at the application level.

There are a few more features we could add. For example, a Router that displays certain components on certain routes or the possibility to nest a component inside another component and pass down the state.

Just try out adding new features to this to sharpen your JavaScript skill and while you are at it, have fun!

As always you can find the code for this project on my GitHub.

Photo by Susan Yin on Unsplash

React from scratch Part 3

Jakob Klamser — Mon, 31 Aug 2020 08:13:46 +0000

In the third and final part of the series "React from scratch" we will implement a statemanagement by adding Redux to our application.

Prerequisites

Part 3 will start where we left off in part 2. If you didn't already, go ahead and finish part 1 and part 2 or just clone part 2 from my repo and start from there.

New dependencies

Let's get started by adding redux and some more new dependencies to our project.

$ npm i redux react-redux redux-thunk

redux: A javascript library for state containers.
react-redux: React bindings for redux.
redux-thunk: Thunk middleware for redux.

If you want to know more about thunk I recommend reading this.

Global Store

Our goal is to create a, so called, store which holds all the post data of our application.
This store will also provide access to methods for handling with the store data, e.g. adding or removing posts from the store.
After we created that store we want to get rid of the state inside our Todo-Component.

So first let's start with creating new folders:

$ mkdir store
$ mkdir actions
$ mkdir reducers

Next up we will create a new file inside the store folder:

$ cd store/
$ touch configureStore.js

This file will contain all the configuration of our global store, such as adding the thunk middleware.
The content should look like this:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

With the createStore method we can create a Redux Store. This store needs a reducer, the initial state of the application and the so called enhancers.
The enhancers are middleware that add functionality to our store. In our case we enable the Redux Developer Tools and added redux-thunk.

Now we need to pass this store to our application. This is done by using a Provider from the react-redux library we installed earlier.
We need to provide the store to our main component. So let's open up our Root.js and implement it:

import React from 'react';
import Routes from '../Routes';
import { Provider } from 'react-redux';

const Root = ({ store }) => (
    <Provider store={store}>
        <Routes />
    </Provider>
);

export default Root;

Our Root Component can accept the store now, we just need to pass it in. We do this in our index.js file:

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import store from './store/configureStore';
import Root from './containers/Root';
import './index.scss';

ReactDOM.render(
  <StrictMode>
    <Root store={store} />
  </StrictMode>,
  document.querySelector('#root'),
);

Reducers

For this code to work we need to create the rootReducer next:

$ cd ../reducers/
$ touch index.js
$ touch todoReducer.js

Let's open the index.js and add the following:

import { combineReducers } from 'redux';
import todoReducer from './todoReducer';

export default combineReducers({
  todo: todoReducer,
});

The method combineReducers takes an object with all the reducers of your application.
From that it creates a single reducer which we can pass to our store, like we did in the configureStore.js.
Now we switch into the todoReducer to give it some life!

import { ADD_TODO, DELETE_TODO } from '../actions/types';
const initialState = {
  todos: localStorage.getItem('todos') ? 
    JSON.parse(localStorage.getItem('todos')) : [],
  error: null,
}

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      const newTodos = [action.payload, ...state.todos]
      localStorage.setItem('todos', JSON.stringify(newTodos))
      return {
        ...state,
        todos: newTodos,
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(todo => todo._id !== action.payload)
      };

    default:
      return state;
  }
}

The reducer has the initial state for all the todos. We store all the todos in the localStorage of the browser.
We do that, so we can still have access to our todos after reloading the page.
The switch case creates a new state depending on the action called and the current state.
It does not modify the current state because redux implements the concept of immutability.

Actions

Next up we create the actions that the reducer listens to.

$ cd ../actions/
$ touch types.js
$ touch todoActions.js

First of we create the constants in types.js, that we already used in our todoReducer.

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';

Now we start implementing our two actions ADD and DELETE in todoActions.js:

import { ADD_TODO, DELETE_TODO } from './types';

export const addTodo = (todo) => (dispatch) => {
  dispatch({
    type: ADD_TODO,
    payload: todo,
  });
};

If we would store our todos in some kind of backend we could send it there via axios.js or some other framework.
But for now we just dispatch the todo we pass in and the type ADD_TODO to our todoReducer.
Right below the addTodo we implement the deleteTodo like that:

export const deleteTodo = (id) => (dispatch) => {
  dispatch({
    type: DELETE_TODO,
    payload: id,
  })
};

It works nearly the same as the addTodo action, except we don't pass in the whole todo.
We just pass in the id of the todo we want to delete.

Connect Redux with React

At this point in time, our Todo App still works the same as before. To utilize the Redux Store we need to connect it to our Todo component.

import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addTodo, deleteTodo } from '../actions/todoActions';
import TodoListContainer from '../containers/TodoList';
import NewTodoContainer from '../containers/NewTodo';

export class Todo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      showNewTodo: false,
      title: '',
      text: '',
    };
  }

  static propTypes = {
    todos: PropTypes.array.isRequired,
    addTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  };

  toggleNewTodo() {
    this.setState({
      showNewTodo: !this.state.showNewTodo
    });
  }

  onChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onSubmit(event) {
    event.preventDefault();
    const { text, title } = this.state;
    const newTodo = { id: this.props.todos.length + 1, title, text };
    this.props.addTodo(newTodo);
    this.setState({
      showNewTodo: false,
      title: '',
      text: '',
    });
  }

  render() {
    const { showNewTodo } = this.state;
    return (
      <Fragment>
        <div className="container-fluid">
          <div className="col w-25 mt-4 mx-auto">
            { showNewTodo ? 
              (<Fragment>
                <button className="mb-2 w-100 btn btn-danger" onClick={this.toggleNewTodo.bind(this)}>Cancel</button> 
                <NewTodoContainer 
                  onChange={this.onChange.bind(this)}
                  onSubmit={this.onSubmit.bind(this)} />
              </Fragment>)
              : (<button className="mb-2 w-100 btn btn-success" onClick={this.toggleNewTodo.bind(this)}>Add Todo</button>)
              }
            <TodoListContainer 
              todos={this.props.todos}
            />
          </div>
        </div>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  todos: state.todo.todos,
});

const mapDispatchToProps = (dispatch) => ({
  addTodo(todo) {
    dispatch(addTodo(todo));
  },
  deleteTodo(id) {
    dispatch(deleteTodo(id));
  },
});


export default connect(mapStateToProps, mapDispatchToProps)(Todo);

There is a lot of stuff happening here at once so let's break it down from top to bottom:

We imported the connect function from react-redux. Then we imported the PropTypes and the two new actions we implemented before, addTodo and deleteTodo.
The constructor needed some cleanup so we removed all the todos because we keep them in our store from now on.
We added static propTypes to ensure that the todos from the store and the two actions we imported earlier get the right types and are required for this component.
In the onSubmit method we create a newTodo that we pass on to our addTodo action by accessing it via this.props. We did remove the todos from the setState method because the component-state does not contain the list of todos anymore.
Right below the component-class we added two arrow functions. mapStateToProps gets the redux state passed in and return our todos by adding it to this.props of our component. mapDispatchToProps maps our actions, addTodo and deleteTodo, to this.props of our component.
Finally we used the react-redux method connect to map the two arrow functions to our Todo component, so that we can access all the state and actions via this.props.

Conclusion

That's it for part 3 of this series.
We implemented a redux store, reducer and actions into our application. After we did that we connected this new feature to our Todo-component by using react-redux.
By doing all this we got a quick introduction to localStorage and can now write and read data from the browsers localStorage.

As you may have noticed we did not use the deleteTodo method anywhere. I did this on purpose so that you can add the delete functionality to this component by yourself.
I hope you enjoyed it!

If you got any question just contact me via Twitter.

All the code for this multipart series can be found in this GitHub-Repository.

React from scratch Part 2

Jakob Klamser — Sun, 30 Aug 2020 07:26:06 +0000

This is the second part of the series "React from scratch". This time we will start creating a To-Do-Application with the setup we did in part 1!

Prerequisites

Part 2 will start where we left off in part 1. If you didn't already, go ahead and finish part 1 or just clone it from my repo and start from there.

New depdendencies

Before we start creating the To-Do-Application, we will add bootstrap as a css library to make our life easier and our routing-tools:

$ npm i bootstrap react-router react-router-dom

bootstraps: A css library for building responsive web apps.
react-router: Core routing functionality for react.
react-router-dom: DOM bindings for react-router.

Next we will import bootstrap into our index.scss by adding the following line at the top of the file:

@import "~bootstrap/scss/bootstrap";

After that we create two new directories in our src-folder, one for our components and one for our containers:

$ mkdir containers
$ mkdir components

Containers & components

I like to make a clear distinction between containers and components.

Container are only there for displaying our UI using the functionality we provide for them. They don't implement functions.
Components contain the logic for our application and "decide" which containers to display at which time. They provide the functionality for the containers, by passing it to them.

Now let's start writing our first container:

import React from 'react';
import Routes from '../Routes';

const Root = () => (
    <Routes />
);

export default Root;

This containers only job is to return our application routes. These Routes will keep track of all different routes-component-pairs.
Create a new file in the src-folder called Routes.js with the following content:

import React from 'react';
import { Switch, HashRouter } from 'react-router-dom';
import { Route } from 'react-router';
import TodoPage from './components/Todo';

export function Routes() {
  return (
    <HashRouter>
      <Switch>
        <Route path='/' component={TodoPage} />
      </Switch>
    </HashRouter>
  );
}

export default Routes;

As you can see we used our newly added dependencies in this function.
Switch contains all our routes that we will declare in this application.
Currently we only declared one route which points to this address "http://localhost:8000/".
The component TodoPage will be rendered at this address.

Next up we need to implement TodoPage. Therefore we will create a new file called Todo.js in the components folder.
The file should look like this:

import React, { Component, Fragment } from 'react'
import TodoListContainer from '../containers/TodoList';

export class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        {
          id: 1,
          title: 'Create Part 1',
          text: 'Starting with project setup'
        },
        {
          id: 2,
          title: 'Create Part 2',
          text: 'creating the UI with components and containers'
        },
        {
          id: 3,
          title: 'Create Part 3',
          text: 'To be decided'
        }
      ],
    };
  }

  render() {
    return (
      <Fragment>
        <div className="container-fluid">          
          <TodoListContainer 
            todos={this.state.todos}
          />
        </div>
      </Fragment>
    );
  }
}

export default Todo;

In this file we create some dummy-todo's.
After that we pass the todo's to our TodoListContainer that we write next.
For that we need to create a file in the containers-folder called TodoList and add the following content:

import React, { Fragment } from 'react';

const TodoListContainer = ({todos}) => (
  <Fragment>
    {
      todos.map(({id, title, text}) => (
          <div className="mb-3 card" key={id}>
            <div className="card-header">
              <h5>{title}</h5>
            </div>
            <div className="card-body">
              <p className="card-text">{text}</p>
            </div>
            <div className="card-footer">
              <button className="btn btn-primary w-25">Edit</button>
              <button className="btn btn-success ml-2 w-25">Check</button>
            </div>
          </div>
        )
      )
    }
  </Fragment>
);

export default TodoListContainer;

In this container we loop over all the todo's we passed down from our Todo-component.
While looping through them we create a bootstrap card for each todo, to display the title and the text.
Next we change our background color to something more suitable than red.
For that we open our index.scss and change the background-color as follows:

@import "~bootstrap/scss/bootstrap";

body {
  background-color: #d7dfdb;
}

Now we clean up our index.js by getting rid of the App-function and implementing our Root-container like this:

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import Root from './containers/Root';
import './index.scss';

ReactDOM.render(
  <StrictMode>
    <Root />
  </StrictMode>,
  document.querySelector('#root'),
);

Let's startup our project via npm start and look at the layout we just build. It should look like this:

More functionality

Now we will add the functionality to add a new todo to our list.
First thing we have to do is to setup our Todo-Component to display an add-button.
Furthermore we need to implement the functionality to add a new todo to our todos-array.

For that we have to modify our Todo.js as follows:

import React, { Component, Fragment } from 'react'
import TodoListContainer from '../containers/TodoList';
import NewTodoContainer from '../containers/NewTodo';

export class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showNewTodo: false,
      title: '',
      text: '',
      todos: [
        {
          id: 1,
          title: 'Create Part 1',
          text: 'Starting with project setup'
        },
        {
          id: 2,
          title: 'Create Part 2',
          text: 'creating the UI with components and containers'
        },
        {
          id: 3,
          title: 'Create Part 3',
          text: 'To be decided'
        }
      ],
    };
  }

  toggleNewTodo() {
    this.setState({
      showNewTodo: !this.state.showNewTodo
    });
  }

  onChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onSubmit(event) {
    event.preventDefault();
    const { text, title } = this.state;
    this.setState({
      todos: [{ id: this.state.todos.length + 1, title, text }, ...this.state.todos],
      showNewTodo: false,
      title: '',
      text: '',
    });
  }

  render() {
    const { showNewTodo } = this.state;
    return (
      <Fragment>
        <div className="container-fluid">
          <div className="col w-25 mt-4 mx-auto">
            { showNewTodo ? 
              (<Fragment>
                <button className="mb-2 w-100 btn btn-danger" onClick={this.toggleNewTodo.bind(this)}>Cancel</button> 
                <NewTodoContainer 
                  onChange={this.onChange.bind(this)}
                  onSubmit={this.onSubmit.bind(this)} />
              </Fragment>)
              : (<button className="mb-2 w-100 btn btn-success" onClick={this.toggleNewTodo.bind(this)}>Add Todo</button>)
              }
            <TodoListContainer 
              todos={this.state.todos}
            />
          </div>
        </div>
      </Fragment>
    );
  }
}

export default Todo;

First of all I added three new properties to our state.

showNewTodo is a boolean that helps us to toggle between the add-button and the add new todo form.

title and text will contain the title and text for the new todo.

Next up I added two new function. onChange writes the title and text of our new todo into the state.

onSubmit creates a new todo-object and adds it to the front of our todos array.

And last but not least we added the necessary HTML to show the add-button or the NewTodoContainer depending on our showNewTodo boolean.

Now we just need to create a new file in the containers-folder called NewTodo.js and add the following content:

import React from 'react';

const NewTodoContainer = ({onChange, onSubmit}) => (
  <form className="mb-4">
    <fieldset>
      <legend>New Todo</legend>
    </fieldset>
    <div className="form-group">
      <label htmlFor="title">Title</label>
      <input type="text" name="title" className="form-control" id="title" placeholder="Enter title" onChange={onChange} />
    </div>
    <div className="form-group">
      <label htmlFor="text">Text</label>
      <input type="text" id="text" name="text" className="form-control" placeholder="Enter text..." onChange={onChange} />
    </div>
    <button type="submit" className="btn btn-primary" onClick={onSubmit}>Submit</button>
  </form>
);

export default NewTodoContainer;

This is just a simple form with two input fields, that both implement our onChange-function and a submit-button that implements our onSubmit-function.
Now that this is done, we can restart our development server by hitting npm start.

You should see this:

And after hitting the "Add Todo"-button it should look like this:

Conclusion

That's it for part 2 of this series.
We implemented some basic routing and a component that handles everything regarding our todos.
Furthermore we implemented some UI-Elements like a add-todo-form and a list of all todos.
I hope you enjoyed it!
For the next part we will finally be tackling redux and statemanagement in react and adding some more features to our application.

All the code for this multipart series can be found in this GitHub-Repository.

React from scratch Part 1

Jakob Klamser — Sat, 29 Aug 2020 10:35:41 +0000

In this series we will get to know React, Webpack, Babel and Redux. For the first part of this series we will begin with a basic setup. Let's get started!

Prerequisites

In this guide we will be using npm to install all the dependencies and kick start the project.
So make sure you got npm installed on your machine!

Basic setup

First of all we create a folder to store our project in and go into it to initialize npm:

$ mkdir getting-started-react
$ cd ./getting-started-react
$ npm init -y

Now we are gonna add some of our dependencies and a new folder called src:

$ mkdir src
$ npm i react react-dom

Inside that src directory we need to create a file called index.js with the following content:

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <div>Hello World!</div>;
};

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.querySelector('#root'),
);

The function App returns a div with the content Hello World.
After that we call the render method of ReactDOM to insert our div into the HTML document.
The div will be inserted into the HTML-Element with the id of root.

For the code above to work we need to create such an HTML document.
So let's create a file called index.html with this content:

<!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>Getting Started: React</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app!</noscript>
    <div id="root"></div>
</body>
</html>

In this file you see the HTML-Element with the id root!

Webpack and Babel

The next step is to setup our development server and bundle our files, so we can actually see what we just created.
For that we need to add some more dependencies to our project and a new folder:

$ mkdir webpack
$ npm i webpack webpack-cli
$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime babel-plugin-transform-class-properties html-webpack-plugin webpack-dev-server

What exactly did we install here? Here is a small overview, for more information click the links:

webpack: Webpacks purpose is to bundle JavaScript files for the usage in the browser. It is highly configurable.
webpack-cli: A command line interface for the bundler Webpack.
html-webpack-plugin: A plugin for webpack to simplify the generation of HTML files.
webpack-dev-server: A webpack dev server with live reloading mechanism.
@babel/core: Babel takes your ECMAScript 2015 and onwards and makes it backwards compatible for older browsers.
babel-loader: To use babel in conjunction with webpack you need this loader for webpack.
@babel/preset-env: Handles backwards compatibility for older browsers.
@babel/preset-react: Handles React plugin in babel.
@babel/plugin-transform-runtime: Reduces code size.
babel-plugin-transform-class-properties: Transforms static class properties in babel.

Now that we have all our dependencies installed it is time to configure webpack, babel and our webpack-dev-server.
First of all we start with configuring babel by creating a new file in our root directory called .babelrc with the following configuration:

{
  "presets": 
  [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties",
    ["@babel/plugin-transform-runtime", {
      "regenerator": true
    }]
  ]
}

With that we configured which presets and plugins babel should use.

After that we create our webpack configuration. For that we need a new file called webpack.config.js in our webpack directory.
The configuration is as follows:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const baseURL = path.resolve(__dirname, '..');

module.exports = {
  entry: path.resolve(baseURL, 'src', 'index.js'),
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: `${baseURL}/src/index.html`,
      filename: './index.html',
      inject: 'body',
    })
  ]
};

We added the babel-loader to our webpack config and configured our HtmlWebPackPlugin to find the index.html we created earlier.
For that we used path to get the correct path at any time.

Now it is time to get the webpack-dev-server started. To do that we modify our scripts in our package.json:

  "scripts": {
    "start": "webpack-dev-server --mode development --open --config ./webpack/webpack.config.js",
    "build": "webpack --mode production --config ./webpack/webpack.config.js"
  },

If you run the following command now, a browser window should open and display Hello World!

$ npm start

More Loaders

Next we will be adding more loaders to our webpack configuration. We need loaders for our stylesheets and for our assets, e.g. PNG-, JPG-Files.
First we go ahead and add the necessary loaders as dependencies to our package.json.

$ npm i -D sass sass-loader style-loader css-loader file-loader

For this project I chose to use SASS instead of CSS, that's why we need to install the npm package sass too.
Next we install all the loaders necessary to break down our SASS to CSS and then load it into our HTML.
To use these loaders we need to modify our webpack.config.js like that:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const baseURL = path.resolve(__dirname, '..');

module.exports = {
  entry: path.resolve(baseURL, 'src', 'index.js'),
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: `${baseURL}/src/index.html`,
      filename: './index.html',
      inject: 'body',
    })
  ]
};

Important to note is that the style-loader needs to be the first in the use-array, as webpack loads him as last.
So first we collect all sass and css files and then we load them via the style-loader into the DOM.
The file-loader resolves files into a url that you can use in your js-files.

Styles and assets

Last but not least we will add a scss-file and an image to our project, to see if our loaders work as expected.
For that we create a file called index.scss in the src-folder and add the following content:

body {
  background-color: red;
}

To use this file we simply add the following line to the import-statements of index.js:

import './index.scss';

If you start your development server now, our project should have a red background color.

Next up we will add a new subfolder to the src-folder called assets.
Just put in some random image inside the assets folder.
To display this image we have to change up our index.js like this:

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import img from './assets/your-image-name.png';

const App = () => {
  return (
    <div>
      <img src={img} />
      <div>Hello World!</div>
    </div>
  );
};

ReactDOM.render(
  <StrictMode>
    <App/>
  </StrictMode>,
  document.querySelector('#root'),
);

We import the image at the top of the file and then use it as the src-attribute in the HTML-img-tag.
If you restart your webpack-dev-server via npm start, you should be able to see the image you put into the assets-folder.

Conclusion

So we are done for part 1 of this series. We setup a basic react-app with webpack as our bundler and babel for the backwards-compatibility.
We configured webpack to accept SCSS, HTML, JavaScript and image files.
And we added webpack-dev-server as our development server, to quickly see what we changed in the browser.

In the next part we start with creating a real application with react.

All the code for this multipart series can be found in this GitHub-Repository.

OOP vs functional programming

Jakob Klamser — Fri, 28 Aug 2020 06:59:27 +0000

Introduction

Before we get started with coding I want to give you a quick introduction to object-oriented and functional programming.
Both are programming paradigms differing in the techniques they allow and forbid.
There are programming languages that only support one paradigm e.g. Haskell (purely functional).
Aswell as languages that support multiple paradigms such as JavaScript, you can use JavaScript to write object-oriented or functional code or even a mixture of both.

Setup

Before we can dive deep into the differences between these two paradigms we need to setup the project.
For that we first create all the files and folders we need like this:

$ mkdir func-vs-oop
$ cd ./func-vs-oop
$ cat index.html
$ cat functional.js
$ cat oop.js

I'm using the cat command because it works both on Linux-systems and Windows Powershell.

Next up we need to create a simple form for the factorial calculator inside the index.html.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="functional.js" defer></script>
</head>
<body>
  <div class="container mt-5">
    <div class="container mt-3 mb-5 text-center">
      <h2>Functional vs OOP</h2>
    </div>
    <form id="factorial-form">
      <div class="form-group">
        <label for="factorial">Factorial</label>
        <input class="form-control" type="number" name="factorial" id="factorial" />
      </div>
      <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
    <div class="container mt-3">
      <div class="row mt-4 text-center">
        <h3>Result:</h3>
        <h3 class="ml-5" id="factorial-result"></h3>
      </div>
    </div>
  </div>
</body>
</html>

To give this form a better look and feel we use bootstrap as a CSS-Framework.
If you display this HTML in the browser it should look like this:

Currently this form won't do anything.
Our goal is to implement a logic where you can enter a number up to 100. After clicking the "Calculate"-button it should show the result in the result-div.
We will implement this both in the object-oriented way and the functional way.

Functional implementation

First off we will create a file for the functional programming approach.

$ cat functional.js

To get started we need a function that get's called when loading this file into the browser.
This function should get the form and then add the functionality we need to the submit-event of the form.

function addSubmitHandler(tag, handler) {
  const form = getElement(tag);
  form.addEventListener('submit', handler);
}

addSubmitHandler("#factorial-form", factorialHandler);

First we declare the function called addSubmitHandler.
This function takes in two parameters, the first one being the tag we want to look for in our HTML, the second one being the function we want to bind to the submit-event of our Element.

Next we call this function by passing in #factorial-form and the function name factorialHandler.
The hashtag in front of the tag indicates that we are looking for the id-attribute in the HTML.

This code will throw an error if you try to run it now, because neither the function getElement nor factorialHandler are defined anywhere.
So let's first define getElement above our addSubmitHandler function like this:

function getElement(tag) {
  return document.querySelector(tag);
}

This function is really simple and only returns the HTML-Element we found by the tag we passed in.
But we will reuse this function later on.

Now let's start creating the core logic by adding the factorialHandler function above the addSubmitHandler.

function factorialHandler(event) {
  event.preventDefault();

  const inputNumber = getValueFromElement('#factorial');

  try {
    const result = calculateFactorial(inputNumber);
    displayResult(result);
  } catch (error) {
    alert(error.message);
  } 
}

We pass in the event and instantly call preventDefault.
This will prevent the default behavior of the submit event, you can try out what happens on the button click without calling preventDefault.

After that we get the value entered by the user from the input-field by calling the getValueFromElement function.
Upon getting the number we try to calculate the factorial by using the function calculateFactorial and then render the result to the page by passing the result to the function displayResult.

If the value is not in the correct format or the number is higher than 100, we will throw an error and display that as and alert.
This is the reason for using a try-catch-block in this particular case.

In the next step we create two more helper functions, getValueFromElement and displayResult.
Let's add them below the getElement function.

function getValueFromElement(tag) {
  return getElement(tag).value;
}

function displayResult(result) {
  getElement('#factorial-result').innerHTML = result
}

Both of these functions use our getElement function. This reusablility is one part why functional programming is so effective.
To make this even more reusable we could potentially add a second argument to displayResult, called tag.
So that we can dynamically set the element that should display the result.
But in this example I went with the hard-coded way.

Next up we create our calculateFactorial function right above factorialHandler.

function calculateFactorial(number) {
  if (validate(number, REQUIRED) && validate(number, MAX_LENGTH, 100) && validate(number, IS_TYPE, 'number')) {
    return factorial(number);
  } else {
    throw new Error(
      'Invalid input - either the number is to big or it is not a number'
    );
  }
}

We validate if the argument 'number' is not empty, not above 100 and of type number.
For that we use a function called validate that we will need to create next.
If the checks pass we call the function factorial and return it's result.
If these checks don't pass we throw the error we catched in the factorialHandler function.

First let's create the validate function right below displayResult and the three constants MAX_LENGTH, IS_TYPE and REQUIRED.

const MAX_LENGTH = 'MAX_LENGTH';
const IS_TYPE = 'IS_TYPE';
const REQUIRED = 'REQUIRED';

function validate(value, flag, compareValue) {
  switch (flag) {
    case REQUIRED:
      return value.trim().length > 0;
    case MAX_LENGTH:
      return value <= compareValue;
    case IS_TYPE:
      if (compareValue === 'number') {
        return !isNaN(value);
      } else if (compareValue === 'string') {
        return isNaN(value);
      }
    default:
      break;
  }
}

In this function we use a switch to determine which kind of validation we are going to perform.
After determining that, it is just a simple value validation.

Now we are going to add the actual factorial function right above the calculateFactorial declaration.
This will be our last function for this approach.

function factorial(number) {
  let returnValue = 1;
  for (let i = 2; i <= number; i++) {
    returnValue = returnValue * i;
  }
  return returnValue;
}

There are many different ways to perform a factorial calculation, I went with the iterative approach.
If you want to learn more about the different approaches I recommend you check out this article on geeksforgeeks:

https://www.geeksforgeeks.org/program-for-factorial-of-a-number/

The final functional.js file should look like this:

const MAX_LENGTH = 'MAX_LENGTH';
const IS_TYPE = 'IS_TYPE';
const REQUIRED = 'REQUIRED';

function getElement(tag) {
  return document.querySelector(tag);
}

function getValueFromElement(tag) {
  return getElement(tag).value;
}

function displayResult(result) {
  getElement('#factorial-result').innerHTML = result
}

function validate(value, flag, compareValue) {
  switch (flag) {
    case REQUIRED:
      return value.trim().length > 0;
    case MAX_LENGTH:
      return value <= compareValue;
    case IS_TYPE:
      if (compareValue === 'number') {
        return !isNaN(value);
      } else if (compareValue === 'string') {
        return isNaN(value);
      }
    default:
      break;
  }
}

function factorial(number) {
  let returnValue = 1;
  for (let i = 2; i <= number; i++) {
    returnValue = returnValue * i;
  }
  return returnValue;
}

function calculateFactorial(number) {
  if (validate(number, REQUIRED) && validate(number, MAX_LENGTH, 100) && validate(number, IS_TYPE, 'number')) {
    return factorial(number);
  } else {
    throw new Error(
      'Invalid input - either the number is to big or it is not a number'
    );
  }
}

function factorialHandler(event) {
  event.preventDefault();

  const inputNumber = getValueFromElement('#factorial');

  try {
    const result = calculateFactorial(inputNumber);
    displayResult(result);
  } catch (error) {
    alert(error.message);
  } 
}

function addSubmitHandler(tag, handler) {
  const form = getElement(tag);
  form.addEventListener('submit', handler);
}

addSubmitHandler("#factorial-form", factorialHandler);

In this approach we worked exclusively with functions. Every function got a single purpose and most of them are reusable in other parts of the application.
For this simple web application the functional approach is a bit of an overkill. Next we will code the same functionality but this time object-oriented.

Object-oriented implementation

First of all we need to change the src in the script-tag of our index.html file to the following.

<script src="oop.js" defer></script>

Now we create the oop.js file.

$ cat oop.js

For the OOP approach we want to create three different classes, one for validation, one for the factorial calculation and one for handling the form.
We get started with creating the class that handles the form.

class InputForm {
  constructor() {
    this.form = document.getElementById('factorial-form');
    this.numberInput = document.getElementById('factorial');

    this.form.addEventListener('submit', this.factorialHandler.bind(this));
  }

  factorialHandler(event) {
    event.preventDefault();

    const number = this.numberInput.value;

    if (!Validator.validate(number, Validator.REQUIRED) 
      || !Validator.validate(number, Validator.MAX_LENGTH, 100)
      || !Validator.validate(number, Validator.IS_TYPE, 'number'))
      {
        alert('Invalid input - either the number is to big or it is not a number');
        return;
      }

      const factorial = new Factorial(number);
      factorial.display();
  }
}

new InputForm();

In the constructor we get the form-element and the input-element and store it in class variables, also called properties.
After that we add the method factorialHandler to the submit-event.
In this case we need to bind 'this' of the class to the method.
If we don't do that we will get reference errors, e.g. calling this.numberInput.value will be undefined.
After that we create the class method factorialHandler with the event as an argument.

The code of this method should look somewhat familiar, for example the if-statement checks if the inputvalue is valid or not, like we did in the calculateFactorial function.
Validator.validate is a call to a static method inside the class Validator that we still need to create.
We don't need to initialize a new instance of an object if we work with static methods.
After the validations pass we create a new instance of the Factorial class, pass in the inputvalue and then display the calculated result to the user.

Next up we are going to create the Validator class right above the InputForm class.

class Validator {
  static MAX_LENGTH = 'MAX_LENGTH';
  static IS_TYPE = 'IS_TYPE';
  static REQUIRED = 'REQUIRED';

  static validate(value, flag, compareValue) {
    switch (flag) {
      case this.REQUIRED:
        return value.trim().length > 0;
      case this.MAX_LENGTH:
        return value <= compareValue;
      case this.IS_TYPE:
        if (compareValue === 'number') {
          return !isNaN(value);
        } else if (compareValue === 'string') {
          return isNaN(value);
        }
      default:
        break;
    }
  }
}

As you can see everything inside of this class is static, the method validate aswell as the three properties.
Therefor we do not need any constructor.
The advantage of this is that we do not need to initialize this class everytime we want to use it.
validate is mostly the same as the validate function is our functional.js except that we do this.REQUIRED, this.MAX_LENGTH and this.IS_TYPE instead of just the variable name.

Next up we create our Factorial class right below the Validator class.

class Factorial {
  constructor(number) {
    this.resultElement = document.getElementById('factorial-result');
    this.number = number;
    this.factorial = this.calculate();
  }

  calculate() {
    let returnValue = 1;
    for (let i = 2; i <= this.number; i++) {
      returnValue = returnValue * i;
    }
    return returnValue;
  }

  display() {
    this.resultElement.innerHTML = this.factorial;
  }
}

Upon initializing an instance of this class we get the resultelement and store it as a property aswell as the number we pass in.
After that we call the method calculate and store it's return value in a property.
The calculate method contains the same code as the factorial function in functional.js.
Last but not least we got the display method that sets the innerHTML of our resultelement to the calculated factorial number.

The complete oop.js file should look like this.

class Validator {
  static MAX_LENGTH = 'MAX_LENGTH';
  static IS_TYPE = 'IS_TYPE';
  static REQUIRED = 'REQUIRED';

  static validate(value, flag, compareValue) {
    switch (flag) {
      case this.REQUIRED:
        return value.trim().length > 0;
      case this.MAX_LENGTH:
        return value <= compareValue;
      case this.IS_TYPE:
        if (compareValue === 'number') {
          return !isNaN(value);
        } else if (compareValue === 'string') {
          return isNaN(value);
        }
      default:
        break;
    }
  }
}

class Factorial {
  constructor(number) {
    this.resultElement = document.getElementById('factorial-result');
    this.number = number;
    this.factorial = this.calculate();
  }

  calculate() {
    let returnValue = 1;
    for (let i = 2; i <= this.number; i++) {
      returnValue = returnValue * i;
    }
    return returnValue;
  }

  display() {
    this.resultElement.innerHTML = this.factorial;
  }
}

class InputForm {
  constructor() {
    this.form = document.getElementById('factorial-form');
    this.numberInput = document.getElementById('factorial');

    this.form.addEventListener('submit', this.factorialHandler.bind(this));
  }

  factorialHandler(event) {
    event.preventDefault();

    const number = this.numberInput.value;

    if (!Validator.validate(number, Validator.REQUIRED) 
      || !Validator.validate(number, Validator.MAX_LENGTH, 100)
      || !Validator.validate(number, Validator.IS_TYPE, 'number'))
      {
        alert('Invalid input - either the number is to big or it is not a number');
        return;
      }

      const factorial = new Factorial(number);
      factorial.display();
  }
}

new InputForm();

We created three different classes handling three different aspects of our application:

Validation: Validation class
Factorial Handling: Factorial class
Form Handling: InputForm class

Conclusion

Both approaches are valid ways of structuring your code.
Personally I like to try out what works best in the different projects I work on.
Most of the time it is not even possible to seperate both paradigms so clearly.
I hope this little comparison gave you a fundamental understanding of what the different approaches look like.

As always you can find the code for this project on my github.