DEV Community: Adam Nagy

Creating a Memory Card Game with HTML, CSS, and JavaScript

Adam Nagy — Fri, 10 Feb 2023 19:48:41 +0000

In this tutorial, we will learn how to build a beginner-friendly memory card game using HTML, CSS, and JavaScript. The game will have a grid of cards, where each card will have an image and a score system to keep track of the player's progress. The game will be restarted when all cards have been matched.

Video tutorial

If you would prefer to watch a beginner-friendly step-by-step video tutorial instead, here is the video tutorial that I made.

Project Set-Up

Before we jump into anything, check out my repository on GitHub for this project, where I prepared an assets folder with the fruit icons that we'll use for the cards, and also created a json file with all the card data that we'll need to implement this game.

To start, let's create a new directory for our project and set up the file structure. In your code editor, create a new folder called "memory-card-game". Inside the folder, create three files: index.html, style.css, and script.js.

HTML Structure

The HTML structure for our memory card game will consist of a main container for the cards and a restart button. Don't forget to add the link tag for the stylesheet in the head tag. This is a really simple HTML structure as we will create all the cards dynamically in javascript.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Memory Card Game</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Memory Cards</h1>
    <div class="grid-container">
    </div>
    <p>Score: <span class="score"></span></p>
    <div class="actions">
        <button onclick="restart()">Restart</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

CSS Styles

In css we'll start with some general styling. The body tag should be as big as the viewport so I'll add a minimum of 100% width and height for the viewport.We'll set a dark background and a white color for the texts that appear on the page.

body {
  min-height: 100vh;
  min-width: 100vw;
  background-color: #12181f;
  color: white;
}

h1 {
    text-align: center;
    font-weight: 700;
    font-size: 50px;
}

p {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

The action area will be really simple, we'll center the .actions container using flexbox, then apply some basic nice styles to the button.

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

.actions button {
    padding: 8px 16px;
    font-size: 30px;
    border-radius: 10px;
    background-color: #27ae60;
    color: white;
}

For the card container I'll use a centered CSS grid with 16px of grid-gap. I'll create 6 140px wide coulmns and 3 rows. I'll calculate the height of the rows by dividing the width with two and multiply it by 3. I do this to have the perfect aspect ratio of 2 by 3 (which is the standard playing card aspect ratio) for the cards. For the cards I'll apply the same dimensions and add a little bit of border-radius. The important part is that we need to set position: relative, so we can later position the back fo the card absolutely. I'll apply a transform style of preserve-3d and apply a little eased transition so our flipping animations will be really smooth.

.grid-container {
  display: grid;
  justify-content: center;
  grid-gap: 16px;
  grid-template-columns: repeat(6, 140px);
  grid-template-rows: repeat(2, calc(140px / 2 * 3));
}

.card {
  height: calc(140px / 2 * 3);
  width: 140px;
  border-radius: 10px;
  background-color: white;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.5s ease-in-out;
}

For the fruit icons I'll use a fix width of 60px by 60px. Then I'll create a css rule to rotates (flips) the card by 180 degrees when the .flipped class is applied to the card. I'll center the front face layout of the card both vertically and horizontally using flexbox. Will center everything on both the back and front using absolute positioning. It is also important to set backface-visibility: hidden;, because otherwise the back-face content of the card would still be visible when the card is flipped.

.front-image {
  width: 60px;
  height: 60px;
}

.card.flipped {
  transform: rotateY(180deg);
}

.front, .back {
    backface-visibility: hidden;
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.card .front {
  display: flex;
  justify-content: center;
  align-items: center;
}

For the back of the card I'll use and SVG pattern, feel free to use the one you like the most from Pattern Monster. Also center the background image with background-position, and make it cover the full card by adding background-size: cover;

.card .back {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='25' height='25' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M25 30a5 5 0 110-10 5 5 0 010 10zm0-25a5 5 0 110-10 5 5 0 010 10zM0 30a5 5 0 110-10 5 5 0 010 10zM0 5A5 5 0 110-5 5 5 0 010 5zm12.5 12.5a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1' stroke='none' fill='hsla(174, 100%, 29%, 1)'/><path d='M0 15a2.5 2.5 0 110-5 2.5 2.5 0 010 5zm25 0a2.5 2.5 0 110-5 2.5 2.5 0 010 5zM12.5 2.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5zm0 25a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'  stroke-width='1' stroke='none' fill='hsla(187, 100%, 42%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  background-position: center center;
  background-size: cover;
}

Javascript implementation

Let's make this game interactive! We'll start by saving a reference to our grid container which will hold the cards using querySelector. Then we will create the global variables that we will use throughout the game. The cards variable will be an array holding all of our cards, we will have two card variables that will be used for comparison. The lockboard variable will be responsible for locking the board up while the comparison and the animations runs. Also we will keep track of the user's score and initialise it with zero.

const gridContainer = document.querySelector(".grid-container");
let cards = [];
let firstCard, secondCard;
let lockBoard = false;
let score = 0;

document.querySelector(".score").textContent = score;

We use the fetch method to get the card information from the JSON file located at "./data/cards.json". This returns a promise that we convert into JSON using "res.json()".
Finally, we create a new array of cards by spreading the JSON data twice (as we need 2 of each card to be able to find duplicates) and shuffling it with the "shuffleCards" function. And voila! The cards are generated on the page with the help of the "generateCards" function.

fetch("./data/cards.json")
  .then((res) => res.json())
  .then((data) => {
    cards = [...data, ...data];
    shuffleCards();
    generateCards();
  });

Now let's write the function that shuffles the card data so that the game is different every time it's played. It's an essential part of making your memory card game fun and unpredictable.

The function starts by setting the "currentIndex" to the length of the "cards" array. This allows us to shuffle all the cards in the array. Then, using a "while" loop, we swap the current card with a random card until all cards have been shuffled.

The "randomIndex" is generated using Math.floor and Math.random, which returns a random whole number between 0 and the length of the "cards" array. We store the current card value in a temporary variable, "temporaryValue", and then swap it with the random card.

This process continues until the "currentIndex" reaches 0, at which point all the cards will have been shuffled. This is called the 9Fisher-Yates algorithm. With this simple but effective function, you can ensure that your memory card game is never the same twice!

function shuffleCards() {
  let currentIndex = cards.length,
    randomIndex,
    temporaryValue;
  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = cards[currentIndex];
    cards[currentIndex] = cards[randomIndex];
    cards[randomIndex] = temporaryValue;
  }

Let's write a function that will generate the cards for us.The function uses a for loop to iterate over the cards array and create a div element for each card. The cardElement is then given the class card and a data-name attribute with the card's name. We will use this data attribute for the comparsion. The innerHTML property is used to define the front and back of the card, including the card's image.

Finally, the cardElement is appended to the gridContainer and an event listener is added to listen for a click event. When the card is clicked, the flipCard function is called, allowing the player to flip the card and reveal its image.

function generateCards() {
  for (let card of cards) {
    const cardElement = document.createElement("div");
    cardElement.classList.add("card");
    cardElement.setAttribute("data-name", card.name);
    cardElement.innerHTML = `
      <div class="front">
        <img class="front-image" src=${card.image} />
      </div>
      <div class="back"></div>
    `;
    gridContainer.appendChild(cardElement);
    cardElement.addEventListener("click", flipCard);
  }
}

Now we'll write the flipcard function. The function starts by checking if the "lockBoard" variable is true. If it is, the function returns, preventing any cards from being flipped. If the player clicks on the same card twice, the function also returns, avoiding any unwanted behavior.

The card that was clicked is then given the class "flipped", which causes it to flip over and reveal its image. If this is the first card being flipped, the "firstCard" variable is set to the card that was clicked. If a second card is being flipped, the "secondCard" variable is set, and the score is increased by one. The score is displayed on the page by updating the text content of the ".score" element.

Finally, the "lockBoard" variable is set to true, preventing any additional cards from being flipped. The "checkForMatch" function is then called to see if the two flipped cards match.

function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;

  this.classList.add("flipped");

  if (!firstCard) {
    firstCard = this;
    return;
  }

  secondCard = this;
  score++;
  document.querySelector(".score").textContent = score;
  lockBoard = true;

  checkForMatch();
}

In checkForMatch the first line, let isMatch = firstCard.dataset.name === secondCard.dataset.name; compares the data-name attribute of the first and second cards to see if they match. If they do match, the isMatch variable is set to true.

Next, the isMatch ? disableCards() : unflipCards(); line uses a ternary operator to call either the "disableCards" or unflipCards function, depending on the result of the comparison.

The disableCards function removes the click event listener from the first and second cards, effectively disabling them. The resetBoard function is then called to reset the game for the next round.

The unflipCards function uses the setTimeout function to wait for 1 second before removing the flipped class from the first and second cards. This causes the cards to flip back over, allowing the player to try again. The resetBoard function is then called to reset the game for the next round.

function checkForMatch() {
  let isMatch = firstCard.dataset.name === secondCard.dataset.name;

  isMatch ? disableCards() : unflipCards();
}

function disableCards() {
  firstCard.removeEventListener("click", flipCard);
  secondCard.removeEventListener("click", flipCard);

  resetBoard();
}

function unflipCards() {
  setTimeout(() => {
    firstCard.classList.remove("flipped");
    secondCard.classList.remove("flipped");
    resetBoard();
  }, 1000);
}

This resetBoard function is called to reset the state of the game after each match attempt. It sets the values of firstCard, secondCard, and lockBoard back to their default state, allowing for a new round to begin.

function resetBoard() {
  firstCard = null;
  secondCard = null;
  lockBoard = false;
}

The restart function is used to start the game from scratch. It calls the resetBoard function, shuffles the cards, resets the score back to 0, clears the grid container and generates new cards for the game. This function makes it easy to play the game multiple times without having to refresh the page.

function restart() {
  resetBoard();
  shuffleCards();
  score = 0;
  document.querySelector(".score").textContent = score;
  gridContainer.innerHTML = "";
  generateCards();
}

That is all you need to create a memory card game! Feel free to implement new features to it, like a scoreboard, and make it responsive!

Where can you learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Create parallax scrolling effect with vanilla Javascript

Adam Nagy — Sun, 22 May 2022 10:16:34 +0000

Parallax scrolling is a really cool visual effect that is widely used in animation movies, and it can really make an outstanding, immersive experience for the users of your website.

Demo:

Some prepared images are needed for this tutorial you can find those in the GitHub repository.

Video tutorial

If you would watch a detailed step-by-step video instead you can check out the video I made covering this project on my Youtube Channel:

HTML markup

In this tutorial I'll use a Google font ("Roboto") so if you want to use it don't forget to include it in the head section of the HTML document. I'll aslo include the stylesheet that we will create later.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet"> 
    <title>Document</title>
</head>

In the body of the document we will have two main sections. The first one will be the actual parallax scrolling effect and the second one will be mock page content.

Let's first create the HTML needed for the parallax scrolling effect. In this section we will add all the images that we prepared. Make sure that you give them a unique and meaningful id, because we will use these later. I'll also add a title with an id too.

<section>
        <img src="./images/road.png" id="road"alt="">
        <img src="./images/mountains.png" id="mountain" alt="">
        <img src="./images/moon.png" id="moon" alt="">
        <img src="./images/sky.jpg" id="sky" alt="">
        <h1 id="midnight">Midnight</h1>
    </section>

Now it's time to add the mock page section. This one will be pretty simple it only contains a heading and a paragraph. In the paragraph I only have some placeholder text (lorem ipsum).

<section class="welcome">
        <h1>Midnight</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum ante ante. Donec sagittis ultricies venenatis. Proin non neque ex. Suspendisse tristique lorem ac laoreet laoreet. Maecenas viverra, erat at laoreet convallis, felis leo gravida est, nec ullamcorper nibh metus ac magna. Etiam pretium eu purus et congue. Nullam placerat nisi a pellentesque aliquam. Quisque consequat placerat arcu id dapibus. Curabitur odio ligula, accumsan nec velit ac, accumsan tempor justo.

            Nulla sit amet nisl in purus viverra maximus quis et nunc. Fusce rhoncus justo a posuere aliquam. Nam fringilla mauris vitae enim mattis, non ullamcorper massa facilisis. Cras eu erat nisl. Aliquam tempus nulla ex. Aliquam tristique a nisi ac mollis. Mauris condimentum lobortis nisi eu sagittis. Aenean pharetra fringilla varius. Phasellus id nulla eget massa bibendum pellentesque et quis ligula. Suspendisse potenti. Ut rutrum, nisi at maximus suscipit, ipsum ligula egestas tellus, quis lobortis ligula mauris a erat. Duis placerat dui at neque commodo laoreet. Aenean molestie quam id nunc aliquam aliquam. Donec sed hendrerit ipsum. Phasellus vitae metus in quam iaculis tincidunt.

            Nam ac ligula ac nulla rutrum convallis. Duis ac magna ex. Vestibulum efficitur justo sit amet ex finibus tempor. Aliquam nibh risus, ultrices id turpis eu, dapibus tempus eros. Nam consectetur lobortis felis. Morbi ac congue augue. Aliquam gravida magna ut nunc pretium, non accumsan justo aliquet. Morbi mauris leo, consequat non odio ut, dignissim dictum nisi. Maecenas eget neque ipsum. Phasellus condimentum risus eu cursus vestibulum.

            Integer efficitur fringilla nunc id volutpat. Morbi vel mauris vitae lectus scelerisque blandit. Fusce ut libero justo. Vivamus vitae finibus nulla. Nulla at enim vulputate diam dignissim ullamcorper sollicitudin ut nunc. Vestibulum ultrices hendrerit urna, vel tincidunt leo faucibus sit amet. Morbi vel leo ac diam euismod commodo. Nulla a interdum lectus, eu laoreet tellus. In tempus, nisl id posuere mattis, erat odio vestibulum elit, in consectetur magna massa at libero. Integer dapibus vulputate convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in risus maximus tortor commodo aliquet id ac quam. Cras ac venenatis ipsum. Fusce sit amet hendrerit lorem.

            Quisque leo dui, cursus at nisi scelerisque, ultrices iaculis augue. Morbi dapibus tellus sem, sed maximus eros scelerisque sit amet. Sed eget leo viverra, dictum neque at, posuere urna. Aliquam laoreet quam ac est malesuada, eu blandit dolor sollicitudin. Aliquam erat volutpat. Duis mi erat, semper ac finibus sit amet, consequat a augue. Curabitur diam diam, malesuada quis aliquam ut, laoreet nec augue. Donec non ipsum a turpis sollicitudin rhoncus in id arcu.</p>
    </section>
    <script src="index.js"></script>

Don't forget to add the index.js file at the last line of the body. And this is all the HTML markup that we need for this project.

CSS implementation

First I'll remove any browser default paddings and margins and make the website take the full width and height of the viewport. I'll also set the font to be the included Roboto Google Font.

* {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    max-width: 100vw;
    font-family: 'Roboto', sans-serif;
}

Next I'll set the positioning of the sections to be relative, so we can position our images absolutely relative to the section. I'll center the content using flexbox, remove the scrollbar with the overflow: hidden; and make it 100% wide and high.

Regarding the images, we'll set absolute positioning and place them on top of each other and make them full width.

body section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

section img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

For better visual outline I'll add a bluish overlay to the page to hide the color differences between the images. Make sure it has a high z-index value as it has to be top of everything else, and has 100% width and height.

section:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:  #051b61;
    z-index: 5;
    mix-blend-mode: color;
}

Next we'll make sure that the visual hierarchy is in place. We can do that by aligning the z-index values. The higher value means that the image has to be on the top of lower z-indexed images.

#road {
    z-index: 3;
}

#mountain {
    z-index: 1;
    top: 150px;
}

#sky {
    z-index: 0;
}

#moon {
    z-index: 1;
}

Next we will add some basic styling to the texts and their containers. As it is not closely connected to the main goal of the project I won't explain it in details, but here is the code:

#midnight {
    top: 120px;
    position: relative;
    color: #ffffff;
    font-size: 12rem;
    z-index: 2;
    text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.welcome {
    color: #fff;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.welcome h1 {
    font-size: 10rem;
    margin-top: 10%;
    padding-left: 70px; 
    padding-right: 70px; 
}

.welcome p {
    margin-top: 50px;
    font-weight: normal;
    line-height: 1.6;
    padding-left: 70px; 
    padding-right: 70px; 
}

Adding JavaScript

The first thing we have to do in javascript is to save references into variables for all the elements that you want to add parallax effect to. For me it will be the road, mountain, sky, moon, midnight. Just make sure that you used these ids in the HTML markup.

let road = document.getElementById('road');
let mountain = document.getElementById('mountain');
let sky = document.getElementById('sky');
let moon = document.getElementById('moon');
let midnight = document.getElementById('midnight');

Now we have reference for all the needed DOM elements. It's time to add an event listener to the scroll event of the page. We can do that with the addEventListener method of the window object. Be sure that you provide 'scroll' as the first parameter.

Also we will save the scrollY value of the window object in the callback function. This will tell us how many pixels the site is currently scrolled down from its original position. More information about window.scrollY.

Note:
We are using object destructuring to retrieve the data from the window object. If you are unfamiliar with modern javascript this destructuring assignment is the same as we would write let scrollY = window.scrollY.
More info about destructuring.

window.addEventListener('scroll', () => {
    let { scrollY } = window;
});

Now to make the parallax effect work we will play around with the top and left values of the selected elements. If you modify the top (or bottom) value it will affect the vertical scrolling of the element, if you modify the left (or right) value it'll affect the horizontal scrolling of the element.

We have two options: we can play with the initial offset and adjust the scrolling speed of the element.

Let's take a look at what we did with the road element. As you can see the we multiply the scrollY value with 0.5. This will make the road scroll 2 times slower than it would normally scroll.

We can add a fix offset to alter the starting position of an element. We just have to get the sum of the offset and the multiplied value of the scrollY. Just we did with the mountain or the midnight. Feel free to play around with these numbers and see what works best for you.

window.addEventListener('scroll', () => {
    let { scrollY } = window;

    road.style.top = 0.5 * scrollY + 'px';
    mountain.style.top = (150 +0.05 * scrollY) + 'px'; 
    moon.style.left = 1.1 * scrollY + 'px';
    sky.style.top = -1.2 * scrollY + 'px';
    midnight.style.top = (120 + -1.5 * scrollY) + 'px';
});

And now the parallax scrolling effect is working flawlessly. Thanks for reading!

Where can you learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Create a drawing app using JavaScript and canvas

Adam Nagy — Sun, 21 Nov 2021 11:30:27 +0000

In this tutorial we will create a simple drawing app in the browser. To do that we will use vanilla JS and the Canvas API.
After this tutorial you'll have a great overview of the canvas API and event handling in javascript.

Video tutorial

If you would watch a detailed step-by-step video instead you can check out the video I made covering this project on my Youtube Channel:

HTML markup

We'll start by wrapping the whole app into a section with the class of container. This will be used to align the toolbar and the drawing board.

Inside that we create a div which will hold our toolbar. I also set an id of toolbar for it so it will be easier to work with it in javascript.

Inside the toolbar we'll add a title for our app in an h1. Below that we'll add two input fields: one for color and one for the with of the line. For the color input I add the id of stroke as it will define the color of the stroke and for the number input I'll add the id of lineWidth. Don't forget to add the corresponding labels for these input fields. Lastly I'll add a button with the id of clear and this will be used to clear the drawing board.

The next thing we have to add in our html is the actual drawing board. It will be a canvas element, but for layouting purposes we'll wrap it into a div.

Lastly we need to add the script tag for our script at the bottom of the body.

<section class="container">
  <div id="toolbar">
        <h1>Draw.</h1>
        <label for="stroke">Stroke</label>
        <input id="stroke" name='stroke' type="color">
        <label for="lineWidth">Line Width</label>
        <input id="lineWidth" name='lineWidth' type="number" value="5">
        <button id="clear">Clear</button>
    </div>
    <div>
        <canvas id="drawing-board"></canvas>
    </div>
</section>
<script src="./index.js"></script>

Add styles with CSS

I'll start by removing any browser defined paddings and margins. Also set the height of the body to 100% and remove the scrollbar with overflow: hidden.

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    color: white;
}

For the title I'll add a gradient text color.

h1 {
    background: #7F7FD5;
    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

We'll also make the container 100% height, set the display to flex.

.container {
    height: 100%;
    display: flex;
}

For the toolbar we will use flexbox with column direction. The width of the toolbar will have a fixed width of 70px. We'll add some spacing with 5px of padding and set a dark background for it.

For the toolbar elements I apply some basic styling. Feel free to copy these styles 👇

#toolbar {
    display: flex;
    flex-direction: column;
    padding: 5px;
    width: 70px;
    background-color: #202020;
}

#toolbar * {
    margin-bottom: 6px;
}

#toolbar label {
    font-size: 12px;
}

#toolbar input {
    width: 100%;
}

#toolbar button {
    background-color: #1565c0;
    border: none;
    border-radius: 4px;
    color:white;
    padding: 2px;
}

Implementing the javascript part.

First we'll save references for the toolbar and the drawing board (canvas).

const canvas = document.getElementById('drawing-board');
const toolbar = document.getElementById('toolbar');

Next we have to get the context of the canvas. We'll use this context to draw on the canvas. We can do that by calling the getContext method of the canvas. We'll draw in 2D so we have to provide that as a parameter.

const ctx = canvas.getContext('2d');

In the next step we'll gather the offsets (distance between the canvas edges to the edge of the viewport) and save them. In this case the top offset will be 0px as the canvas takes the full height of the viewport and the left offset will be 70px as we have a fixed width sidebar on the left. Next we will calculate and set the height and the width of the canvas by subtracting the offsets from the viewport's width and height.

const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;

canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;

Now we will set some global variables. The isPainting variable will reflect whether we are currently drawing or not. We'll set a basic line width of 5 px. Lastly we'll declare two variables (startX & startY) which will hold the coordinates of the point which we started the drawing from.

let isPainting = false;
let lineWidth = 5;
let startX;
let startY;

Let's start to add event listeners now. First we will add a click event listener to the toolbar. If the e.target.id is clear (so the clear button was clicked) then we'll call the clearRect function and provide it the width and height of the canvas. What this method will do is esentially set every pixel of the canvas to white inside the provided width and height values (so in this case the whole canvas).

toolbar.addEventListener('click', e => {
    if (e.target.id === 'clear') {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
});

Next we will handle the input changes for the line width and the drawing color. We'll use event delegation in this case. So instead of defining separate event handlers for each input field, we'll add only one event listener to the parent element and handle the events from there. We can differentiate which input field was changed by checking the value of e.target. If the color was changed we'll set the strokeStyle of the canvas context, if the lineWidth was changed then we update the value of the global lineWidth variable with the new value.

toolbar.addEventListener('change', e => {
    if(e.target.id === 'stroke') {
        ctx.strokeStyle = e.target.value;
    }

    if(e.target.id === 'lineWidth') {
        lineWidth = e.target.value;
    }
});

Next we'll implement the drawing controls. When the mousedown event happens (the user clicks and holds the mouse button down) we'll set the isPainting variable to true and set the current mouse position's coordinates into startX and startY.

If the user releases the mouse button, then we'll set isPainting to false and call the stroke method of the context to colorize the already drawn path. We also have to call the beginPath method to close the path that the user drawn so far. We have to do this because if the user wants to draw another line it would start from this position, and this is not something that we want.

Lastly we'll add an event listener to the mousemove event. When the user moves the mouse we'll call the draw function which we'll implement next.

canvas.addEventListener('mousedown', (e) => {
    isPainting = true;
    startX = e.clientX;
    startY = e.clientY;
});

canvas.addEventListener('mouseup', e => {
    isPainting = false;
    ctx.stroke();
    ctx.beginPath();
});

canvas.addEventListener('mousemove', draw);

In the draw function we'll first check the value of the isPainting variable if it is false we are not drawing so we'll just simply call return.

Next we'll set the line width to take the value from the global variable and set the lineCap to round. After this we'll draw a line by calling the lineTo method with the current mouse position's coordinates. One thing you have to be careful is to subtract the offset from the X coordinate because otherwise the drawn line would be offsetted with the width of the sidebar (70px). Lastly we only have to call the stroke method to give the line the color that we selected.

const draw = (e) => {
    if(!isPainting) {
        return;
    }

    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
    ctx.stroke();
}

And this is it now you have a working drawing app!

If you stuck at any point you can watch the video or you can take a look at the source code on Codepen.

Where can you learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Create a simple Tic-Tac-Toe game using HTML, CSS, JavaScript

Adam Nagy — Sat, 13 Nov 2021 18:48:26 +0000

Creating a game with javascript is the most fun way to learn. It will keep you motivated and that is crucial for learning complex skills like web development. Furthermore, you can play with your friends, or just show them what you created and they'll be blown away. In today's blogpost we'll create a tic-tac-toe game using only HTML, CSS and Javascript.

Video tutorial

If you would watch a detailed step-by-step video instead you can check out the video I made covering this project on my Youtube Channel:

Implementing the HTML

First in the head section I'll include our css and javascript files that we'll create later. I'll also add a Google font called Itim, which I think is a perfect fit for this game.

    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
    <script src="./index.js"></script>

The body of the HTML will be fairly simple. To wrap everything I'll use a main tag, and apply a class of background to it. Inside the main wrapper we'll have five sections.

The first section will only contain our title within a h1.

The second section will display whose turn it is currently. Inside the display we have a span which will contain X or O depending on the current user. We'll apply classes to this span to colorize the text.

The third section is the one that holds the board for the game. It has a container class so we can properly place our tiles. Inside this section we have nine divs which will act as the tiles inside the board.

The fourth section will be responsible to announce the end game result. By default it is empty and we'll modify its content from javascript.

The last section will hold our controls, which contains a reset button.

<main class="background">
        <section class="title">
            <h1>Tic Tac Toe</h1>
        </section>
        <section class="display">
            Player <span class="display-player playerX">X</span>'s turn
        </section>
        <section class="container">
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
        </section>
        <section class="display announcer hide"></section>
        <section class="controls">
            <button id="reset">Reset</button>
        </section>
    </main>

Adding the CSS

I won't go over every single line of CSS, but you can watch the video, or check the source in the project's GitHub repository.

First I'll create the style.css file and remove any browser defined margins and paddings, and set the Google font I included in the HTML for the whole document.

* {
    padding: 0;
    margin: 0;
    font-family: 'Itim', cursive;
}

The next important thing we have to add is the style for our board. We'll use CSS grid to create the board. we can divide the container equally in three by providing 3 times 33% fo r both the columns and the rows. We'll center the container in the middle by setting a maximum width and apply margin: 0 auto;.

.container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    max-width: 300px;
}

Next we'll add the style fot the tiles inside the board. We'll apply a little white border, and set a minimum width and height of 100 pixels. We'll center the content using flexbox and setting the justify-content and the align-items to center. We'll give it a large font size and apply cursor: pointer so the user will know that this field is clickable.

.tile {
    border: 1px solid white;
    min-width: 100px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    cursor: pointer;
}

I'll use two separate colors to better differentiate between the two players. To do this I'll create two utility classes. Player X will have a green color while Player O will have a blue color.

.playerX {
    color: #09C372;
}

.playerO {
    color: #498AFB;
}

These are the key aspects for this project regarding CSS. This is not all the styles that the project uses, so please refer to the project's GitHub repository

Implement the Javascript part

Since we included our javascript file in the <head>, we have to wrap everything in our code between this event handler. This is needed because our script will load before out HTML body will be parsed bythe browser. If you dont want to wrap everything inside this function feel free to add defer into the script tag or move the script tag to the bottom of the body.

window.addEventListener('DOMContentLoaded', () => {
  // everything goes here
});

First we'll save references to our DOM nodes. We'll grap all the tiles using document.querySelectorAll(). We want an array but this function returns a NodeList so we have to convert it to a proper array with Array.from(). We'll also grab a reference to the player display, reset button and the announcer.

const tiles = Array.from(document.querySelectorAll('.tile'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
const announcer = document.querySelector('.announcer');

Next we'll add the global variables that we need to control our game. We'll initialize a board with an Array of nine empty strings. This will hold the X abd O values for every tile on the board. We'll have a currentPlayer that holds the sign of the player whose active in the current turn. The isGameActive variable will be true until someone wins or the game ends in a tie. In these cases we'll set it to false so the remaining tiles will be inactive until a reset. We have three constants which represent end game states. We use these constans to avoid typos.

let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
let isGameActive = true;

const PLAYERX_WON = 'PLAYERX_WON';
const PLAYERO_WON = 'PLAYERO_WON';
const TIE = 'TIE';

In the next step we'll store all the winning positions on the board. In each sub array we'll store the indexes of the three position that can win the game. So the [0, 1, 2] will represent a case where the first horizontal line is occupied by a player. We'll use this array to decide whether we have a winner or not.

/*
   Indexes within the board
   [0] [1] [2]
   [3] [4] [5]
   [6] [7] [8]
*/

const winningConditions = [
   [0, 1, 2],
   [3, 4, 5],
   [6, 7, 8],
   [0, 3, 6],
   [1, 4, 7],
   [2, 5, 8],
   [0, 4, 8],
   [2, 4, 6]
];

Now we'll write a few utility functions. In the isValidAction function we'll decide wether the user wants to perform a valid action or not. If the inner text of the tile is X or O we return false as the action is invalid, otherwise the tile is empty so the action is valid.

const isValidAction = (tile) => {
    if (tile.innerText === 'X' || tile.innerText === 'O'){
        return false;
    }

    return true;
};

The next utility function will be really simple. In this fucntion we'll receive an index as a parameter and set the corresponding element in the board array to be the sign of our current player.

const updateBoard =  (index) => {
   board[index] = currentPlayer;
}

We'll write a little function which will handle the player change. In this function we'll first remove the current player's class from the playerDisplay. The string template literal player${currentPlayer} will become either playerX or playerO depending on the current player. Next we'll use a ternary expression to change the current player's value. If it was X it will be O otherwise it'll be X. Now that we changed the value of our user we need to update the innerText of the playerDisplay and apply the new player class to it.

const changePlayer = () => {
    playerDisplay.classList.remove(`player${currentPlayer}`);
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    playerDisplay.innerText = currentPlayer;
    playerDisplay.classList.add(`player${currentPlayer}`);
}

Now we'll write the announer funtion which will announce the end game result. It will receive an end game type and update the innerText of the announcer DOM node based on the result. In the last line we have to remove the hide class, as the announcer is hidden by default until the game ends.

const announce = (type) => {
    switch(type){
       case PLAYERO_WON:
            announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
            break;
       case PLAYERX_WON:
            announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
            break;
       case TIE:
            announcer.innerText = 'Tie';
        }
    announcer.classList.remove('hide');
};

Next we'll write one of the most interesting part of this project the result evaluation. First we'll create a roundWon variable and initialise it with false. Then we'll loop through the winConditions array and check the board for each winning condition. So for example in the second iteration we'll check these values: board[3] (a), board[4] (b), board[5] (c).

We'll also make some optimizations, if any of the fields are empty we'll call continue and skip to the next iteration, because you can't win if there is an empty tile in the win condition. If all the fields are equal then we have a winner, so we set the roundWon to true and break the for loop, because any further iterations would be a wasted computation.

After the loop we'll check the value of the roundWon variable, and if it is true we'll announce a winner and set the game to inactive. If we don't have a winner we'll check wether we have empty tiles on the board and if we don't have a winner and there are no empty tiles left, we announce a tie.

function handleResultValidation() {
  let roundWon = false;
  for (let i = 0; i <= 7; i++) {
    const winCondition = winningConditions[i];
    const a = board[winCondition[0]];
    const b = board[winCondition[1]];
    const c = board[winCondition[2]];
    if (a === "" || b === "" || c === "") {
      continue;
    }
    if (a === b && b === c) {
      roundWon = true;
      break;
    }
  }

  if (roundWon) {
    announce(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
    isGameActive = false;
    return;
  }

  if (!board.includes("")) announce(TIE);
}

Next we'll handle the user's action. This function will receive a tile and an index as a parameter. This function will be called when the user clicks a tile. First we need to check if it is a valid action or not and we'll also check if the game is active currently or not. If both of them are true, we update the innerText of the tile with the sign of the current player, add the corresponding class and update the board array. Now that everything is updated we have to check whether the game hase ended or not so we call handleResultValidation(). Lastly we have to call the changePlayer method to pass the turn to the other player.

const userAction = (tile, index) => {
  if (isValidAction(tile) && isGameActive) {
    tile.innerText = currentPlayer;
    tile.classList.add(`player${currentPlayer}`);
    updateBoard(index);
    handleResultValidation();
    changePlayer();
  }
};

To get the game working we have to add event listeners to the tiles. We can do that by looping through the array of tiles and add an event listener for each. (For more optimal performace we could only add one event listener to the container and use event bubbling to capture the tile clicks on the parent, but I think for beginners this is easier to understand.)

tiles.forEach( (tile, index) => {
    tile.addEventListener('click', () => userAction(tile, index));
});

There is only one functionality that we miss: resetting the game. For that purpose we'll write a resetBoard function. In this function we set the board to consist of nine empty strings, set the game to active, remove the announcer and change the player back to X (by definition X starts always).

The last thing we have to do is to loop through the tiles and set the innerText back to an empty string, and remove any player specific classes from the tiles.

const resetBoard = () => {
    board = ['', '', '', '', '', '', '', '', ''];
    isGameActive = true;
    announcer.classList.add('hide');

    if (currentPlayer === 'O') {
        changePlayer();
    }

    tiles.forEach(tile => {
        tile.innerText = '';
        tile.classList.remove('playerX');
        tile.classList.remove('playerO');
    });
}

Now we just only have to register this function as a click event handler for the reset button.

resetButton.addEventListener('click', resetBoard);

And this is it, we have a fully functional Tic-Tac-Toe game that you can play with your friend and have a fun time.

If you stuck at any point please watch the video, send a DM to me on Twitter or check the project's GitHub repository.

Happy hacking!

Where can you learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Responsive Navigation Bar with mobile menu using HTML & CSS

Adam Nagy — Sun, 07 Nov 2021 12:35:56 +0000

Any website on the web should be responsive in the modern web era. One of the must-do task is to create a navigation bar which is usable on both huge 4K monitors and small mobile devices. And this is exatly what we'll create in this tutorial.

Video tutorial

If you prefer to watch a a step-by-step, beginner friendly video instead, you can check out the video that I made on my YouTube channel:

Implementing the HTML

The HTMl markup will be really simple and will consist of two separate sections. We'll first create the markup that will be used for the desktop version, and after that we will implement the markup required for the mobile menu.

HTML markup for the desktop version

We wrap everything inside of header tags, and it will make our site more accessible as it helps screen readers. Inside the header we'll place a logo. For the sake of this example this will be a simple text wrapped inside an a tag, which navigates to the homepage. Below the brand div, we will have a nav wrapper. It also helps screen readers to understand the page. Inside our nav we'll have an unordered list, which will hold all of our navigation links. Every navigation link will have the same basic structure. Each of them will be a list item (li), and inside that we will have an a tag which links to separate pages. I'll also give an id to the login and signup navigation for further styling.

<header>
   <div id="brand"><a href="/">MyCompany</a></div>
   <nav>
     <ul>
       <li><a href="/home">Home</a></li>
       <li><a href="/products">Products</a></li>
       <li><a href="/about">About</a></li>
       <li id="login"><a href="/login" >Login</a></li>
       <li id="signup"><a href="/signup">Signup</a></li>
     </ul>
   </nav>
</header>

HTML markup for the mobile version

At small screen sizes, we will use a hamburger menu to toggle the navigation menu. For the hamburger icon you can use any external icon libraries, like FontAwesome, but in this tutorial, I'll create my own hamburger icon using HTML and CSS.

The hamburger icon 🍔

The html structure of the icon will be really simple. First we'll add a container div with the id of hamburger-icon. We will use this wrapper div to style and positions the bars inside the hamburger icon. We'll also add an onclick event handler, which will toggle our mobile menu. We'll implement this later in javascript. Inside our container we'll add three divs. They have separate classnames, and we'll use those for makeing our micro animation which will fade away the middle bar and form an X from the bottom and top one.

<div id="hamburger-icon" onclick="toggleMobileMenu(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

In CSS, we'll center the icon vertically using margin: auto 0, and hide it by default using display: none. We'll make it visible through a media query if the screen is less than 600px wide. (You can also do it in a mobile first approach and show it by default and hide it if the screen is wider than 600px). We'Ll give the divs inside the wrapper a fixed width and height and give them a little vertical spacing with margin. When the mobile menu is open (open class is added to the mobile menu), we'll rotate the first bar by -45 degrees and adjust it with translate. We'll hide the second bar by setting the opacity to zero, and we'll also do the same transformations to the last element as we did for the first, but in the opposite direction.

#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

Mobile HTML markup

Below the bars that we created for the hamburger icon in the previous section, we'll add the same navigation menu that we had in the desktop HTML markup section. The only important difference is that the unordered list has a class mobile-menu. We will use this class to apply all the mobile related styles.

<div id="hamburger-icon" onclick="toggleMobileMenu(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <ul class="mobile-menu">
    <li><a href="/home">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li id="login"><a href="/login" >Login</a></li>
    <li id="signup"><a href="/signup">Signup</a></li>
  </ul>
</div>

Finishing up the HTML.

There is two things we have to add:

A link to the css stylesheet in the head section that we'll create:

<link rel="stylesheet" href="styles.css" />

Importing our javascript file at the end of the body:

<script src="index.js"></script>

Implement the CSS part

First I'll import a Google font called Poppins, then reset every browser default margins and paddings and also set the box-siting to border-box. Then for the body we'll set out brand new font and set a dark background and white text color.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #353836;
  color: white;
  font-family: "Poppins", sans-serif;
}

Next we'll focus on the header wrapper and the logo. We'll remove all text decoration (underline) from any links inside the header. For the header we'll set a little bit of left and right padding, give it a dark background color, and a fixed height. We'll also set the display to flex, and to have the logo on the right and the navigation links on the left we'll add justify-content: space-between;. For the brand, we'll set the desired font size and weight, and also center it vertically using flexbox.

header a {
  text-decoration: none;
}

header {
  padding: 0 20px;
  background-color: #1d1f1d;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

#brand {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
}

#brand a {
  color: #09c372;
}

Regarding the navigation links we'll remove any bullet points from the list, make the container full width and center it vertically using flexbox. We'll set a white color for the links and add some spacing using paddings and margins to the list items. I'll also add a hover effect to scale the links up a bit when they are hovered.

ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

ul a {
  color: white;
}

ul li {
  padding: 5px;
  margin-left: 10px;
}

ul li:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

The login and signup links will have a different button-like styling. We'll give them more spacing and round borders and use blue and red colors to differentiate them from the other links.

#login,
#signup {
  border-radius: 5px;
  padding: 5px 8px;
}

#login {
  border: 1px solid #498afb;
}

#signup {
  border: 1px solid #ff3860;
}

#signup a {
  color: #ff3860;
}

#login a {
  color: #498afb;
}

Now it's time to implement the styles for the mobile menu. By default the menu will be hidden so we'll apply display: none;. We'll position the mobile menu absolutely, and place it right below the header, to do that we have to set a top offset of 50px, as it is the fixed height of the header. We want the mobile menu to take the full remaning space of the site (besides the header), so will make it full width, and we'll set the high to be 100% and substract the height of the header from it.

When the mobile menu is open, we want to display it, and we'll use flexbox to overrode the display:none. We'll use flex-direction column to stack the links below each other, center them horizontally and make them start from the beginning of the flex container. We'll also add a little bottom margin to the links to amke them a little space to breath.

.mobile-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  height: calc(100vh - 50px);
  width: 100%;
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mobile-menu li {
  margin-bottom: 10px;
}

Lastly we have to add the media query to hide the desktop menu, when we are on mobile size and display the hamburger icon when we are on mobile screen size. I'll use 600px as the breakpoint for mobile.

@media only screen and (max-width: 600px) {
  header nav {
    display: none;
  }

  #hamburger-icon {
    display: block;
  }
}

A little bit of javascript

We will have one lonely javascript function in our index.js file that will toggle the mobile menu between open and closed states. We already added this event handler in the HTML section. We will use the reference that we passed from the HTML and modify its classList using it. The toggle function will check wether the provided class is present on the element and if it is then it will remove it and if it's not then it will add it.

function toggleMobileMenu(menu) {
    menu.classList.toggle('open');
}

Links for the full source code

You can check the full source code here:

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

☕️ Support free education and my work, buy me a coffee
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

React interview questions answered and explained #1

Adam Nagy — Tue, 02 Nov 2021 17:41:16 +0000

Video

If you'd prefer a video with animated examples, you can check out the video that I made on this topic on my YouTube channel:

What is React?

React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It uses a component based approach to create reusable UI pieces. It was developed at facebook, and published to open-source in 2013.

What are the major features of React?

React uses a virtual DOM to track changes in the document object model, and only updates the changed parts in the real DOM. It supports both client-side and server-side rendering and it uses unidirectional data flow with props. We can create composable or reusable UI elements with it.

What is JSX?

The acronym itself stands for JavaScript XML. It is an extension to the JavaScript language syntax. It has a similar appearance like HTML, we can use html tags in it, and we can also use javascript expressions, and read javascript variables, if we put them into curly braces. JSX provides a good way to structure component rendering. We typically write React components using JSX, however it is not necessary at all. You can write React components using pure JavaScript.
React component without jsx, only javascript:

React component with JSX:

What is the difference between React Elements and Components?

An Element is a plain object describing DOM nodes or other components. They describe what you want to render in the browser. Elements can contain other Elements in their props. Creating a React element is cheap. After its creation, it is never mutated.

A component on the other hand can be declared in several different ways. It can be an ES6 class with a render method or a simple function. Components can have an inner state unlike elements.In both cases it takes its input object called props and returns a JSX tree.

What are the two main ways to create components?

We can create components using functions or ES6 classes. If we choose to use the ES6 class approach we need to extend the Component or PureComponent classes provided by React.

The other approach, which is getting more and more popular, is to create a component by using a function. We can create it with the function keyword or by creating a function expression, even with arrow functions.

When to use a Class Component over a Function Component?

The short answer is if you are using a fresh version of React, it is up to you. However before the release of version 16.8, if your component needed state or you wanted to do something in a specific life cycle of the component you had to use class based components. Hooks came with version 16.8 and they started to conquer the world at a fast pace. Now you can do everything using hooks, no need for class based components.

What are Pure Components?

A React component is considered pure if it renders the same output for the same state and props. If we declare Pure components, React will only re-render the component when the state or the props change, which results in rendering and performance boost.

When using class based components we can create Pure components by extending the PureComponent class instead of the Component. This way React will implement the shouldComponentUpdate lifecycle method, and will do a shallow comparison of the props and state to determine if it should re-render.

As of today we can also create pure components using functional components. We can do so by wrapping our component into the Memo Higher Order Component provided by React.

What is ‘state’ in React?

The state is private data of the component, which can change during its lifetime. If the state of the component changes the component re-renders.
While using class based components, state is represented by an object, and we can modify it with the setState method.

In functional components we can use the useState Hook. It gives back 2 variables in an array, the first one is the stateful data and the second one is the setter for it. We can set the default state, by providing it in the useState function call.

What are props in React?

Props are input data to components, they can be primitive values or objects. They are unidirectional, which means props can only be passed down from parent to child. Props are passed to components on creation. We can provide them in JSX with a naming convention similar to HTML tag attributes. The child components receive all the provided props in the props object. In class based components we can reach them in this.props, in functional components they are passed as parameters, and we can extract them from there.

What is the difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to components. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

Why should we not update the state directly using class based components?

By directly modifying the state, the component won’t be aware of the state change, and therefore won’t re-render. We should use the setState method instead, it schedules an update to a component's state object, and when the state changes the component will re-render.
🚨 Bad way of updating state, directly:

✅ Setting state asynchronously:

What is the purpose of the callback function in setState()?

The setState method is asynchronous, and the callback we provide in the arguments gets invoked when the state modification is done and the component gets re-rendered. It is used to make any post-modification changes, but we should use the componentDidUpdate lifecycle method instead.

What is the difference between HTML and React event handling?

In HTML, event names are all lowercase by convention, but in React, more precisely in JSX, event names are written in camelCase. Also note that the callback function is provided between doublequotes in HTML, but within curly braces in React.
<button onclick="handleClick()"></button>
In HTML, false can be returned to prevent default behavior, whereas in React preventDefault has to be called explicitly.
The last difference is that in HTML, the callback function has to be called, so you have to write the parentheses at the end, while in react we only pass the reference of the callback function.

Event handling in HTML:

Event handling in React:

How to pass a parameter to an event handler?

You can pass an arrow function which returns the desired function call with the parameters provided.

Or you can achieve the same behavior by calling the bind method on the passed callback function. The first value is the desired ‘this’ value, but starting from the second parameter, all further parameters will be passed to the function.

What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser's native event. It's API is the same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

What are inline conditional expressions?

You can use inline conditional expressions to conditionally render React components or elements. You can use the ternary operator, which is a simplified if else statement that always returns a value. If you choose this approach, you need to provide the condition first, then after a question mark you have to provide what should be returned when the condition evaluates to true, and you can define what should be returned otherwise after a colon.

If you don’t need the else branch of the if statement you can use the short circuit evaluation of the AND operator. If the left side of the AND operator evaluates to true it returns its left side operand. We can use this behavior if we want to render something when a specific condition is true and we don’t want to render anything if the condition evaluates to false.

What is the key prop and why do we use it?

When we render multiple components based on arrays, we use key props. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. You shouldn’t use indexes for keys if the order of items may change.
List with keys:

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Form validation using javascript

Adam Nagy — Sun, 31 Oct 2021 13:51:03 +0000

Working with forms is an every day task for almost every web developer. No matter what site you'll create it will use forms. Validating the form data on the client side is a nice-to-have feature when it comes to user experience. In this tutorial we'll create a simple form validation using javascript.

While client-side form validation gives a nice user experience, it can be tricked and bypassed really easily. To prevent malicious use, you should always validate form data on the server side

Video Tutorial

If you would watch a detailed step-by-step video instead you can check out the video I made covering this project on my Youtube Channel:

HTML

Let's start with the HTML markup. We'll have a container div, that we'll use to position and style our form. Inside that, not surprisingly, we'll create a form, we also set an id for it, and set the action to / since we don't really want to submit this form.

We'll create four input fields, for the username, email, password, and password confirmation. For styling and control purposes we'll wrap these input tags into divs with the class input control. Each of these input controls will contain a label, an input, and a div with the class error. Every input should have an id and name attribute. The label's should have a matching for property with the corresponding input tag's name attribute. For the input type we will use text for the username and email, and use password for the password and the password confirmation. The div with the error class will hold the error messages for the specific input field. It will be empty for now, we will modify it from javascript.

Lastly, we have to add a button to "submit" our form. In this example we won't really submit the form just simulate it. For the submit button I'll use a button with a type of submit.

<div class="container">
        <form id="form" action="/">
            <h1>Registration</h1>
            <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Password again</label>
                <input id="password2"name="password2" type="password">
                <div class="error"></div>
            </div>
            <button type="submit">Sign Up</button>
        </form>
    </div>

That is the HTML markup that we need for our form. Let's style it a bit with CSS.

CSS

We'll give a simple clean spacious design for this tutorial. I'll set a linear gradient as the background and I'll use a custom google font, that you can install from here.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

We'll give a fix width to our form, and center it with margins, also I'll give it a top margin to move it down a bit vertically. To have more space we apply 20px of padding. We'll set a fixed font size, a light background color and also set a border radius to have rounded corners.

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

For the form title, we'll use a dark text color, and center it horizontally using text-align: center. The submit button should stand out so we'll use a blue background color, and white text color. We also remove the browser default borders and give it a little border-radius. We'll give it a little spacing with paddings and margins, and make it full-width by applying 100% width.

#form h1 {
    color: #0f2027;
    text-align: center;
}

#form button {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: rgb(41, 57, 194);
    border: none;
    border-radius: 4px;
}

To have the inputs stacked below each other we'll use flexbox. To do that we'll set display: flex; and flex-direction: column. For the inputs we'll set a grey border, with a little border-radius. We'll set the display property to block, and make them full-width, by applying width 100%. We'll also set a little padding, so it'll be more spacious. I'll also remove the outline when the input is in focus, by setting outline: 0.

.input-control {
    display: flex;
    flex-direction: column;
}

.input-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    padding: 10px;
    width: 100%;
}

.input-control input:focus {
    outline: 0;
}

We'll use two classes ("success" and "error") to give visual feedback to the user on whether the input's value is valid or not. We'll apply these classes from javascript to the input-control div which contains the specific input field. When the success class is present we will set a green border color, otherwise if error is present we'll use a red border color instead. For the error div we'll use a smaller font-size and a red color to show the error messages.

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}

Let's do the validation in javascript next!

Javascript

The first thing we have to do is to save references for the form, and the input fields. As we gave id for every input and the form we can easily to do by using getElementById.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

To prevent the form for automatically submit we have to attach and event listener to our form's submit event. In this event handler function we have to call preventDefault() function to prevent the form from submitting automatically. Instead of submitting we'll call the validateInputs function, which will validate the inputs and if we want to we can submit the form in there after every check passes, but we won't do that in this tutorial. We'll create this validateInputs shortly.

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

We'll also create two helper functions: setError, setSuccess. We'll use these helper functions to set the error or success states of the input controls. Let's start with the setError one. It receives two parameters: element, and message. The element will be the input element that is in the specific input-control. So first we have to get the input control parent div. We'll save it into the inputControl variable, and get the input control div by using the parent property of the input element. Next we have to gather the error div, and save it into a variable. We can do that by querying the input control with the error class.
Now we have to set the error div's innerText to be the message that we got in parameters, and remove the success class from the input control (if it exists) and add the error class.

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

The setSuccess method will be really similar. The first difference is that it won't receive a message as a parameter. We have to clear the error display by setting its innerText to an empty string. Lastly we have to reverse the class application. We'll add the success class to the inputControl and remove the error class (if present).

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

We will create one last helper function to validate emails. This is an optional step, if you don't want to use regular expressions, feel free to just set the input type of the email field to email. The isValidEmail function will take a string as a parameter and use this weird looking regular expression to check whether it is a valid email or not. We'll use String.test() function to test the string against the regex. We'll also convert the email to a string and make it lowercase.

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Now we should create the validator validateInputs function. First we will get the value of all the input fields. We can do that by getting the value property's value of the input field references. We'll call the String.trim() function to remove the trailing empty spaces (if any) from the start and end of the values.
Then we can start validating inputs. We'll use if, else statements to do the validation. For the username we will check whether if it is empty or not, by comparing the value with an empty string. If it empty, we'll call the setError function and provide the username element to it, with our error message. Otherwise we'll call the setSuccess method with the username element. Now we have to do this for the other input fields, but the approach will be the same.

const validateInputs = () => {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else {
        setSuccess(username);
    }
};

For the email we'll check if it is provided or not, and set an error if it is empty. If it is not empty we'll check whether it is a valid email address, and if not we'll set an error, otherwise we set success for the field.

if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }
}

For the password we'll check whether it is empty or not, and if it is not empty we'll check if it is longer than 7 characters. If not, well set an error, otherwise we'll set it as success.

if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }
}

For the password confirmation we'll check if it is empty, and we should also check if the password confirmation's value is equal to the password's value.

if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }
}

Now we have every input validated, if we wanted to we could submit our form now to a specific endpoint.

Good job now you have a working form validation Javascript. Please note that you always have to validate the form inputs on the server-side as client-side validation can be easily bypassed. There are way more advanced form validation methods and libraries that we use in modern web development, but this project is a really good way to start and learn the fundamentals.

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Create a simple calculator using HTML, CSS and Javascript

Adam Nagy — Tue, 26 Oct 2021 14:18:20 +0000

In this tutorial we will create a fully working calculator using only HTML, CSS and vanilla Javascript. You'll learn about event handling, and DOM manipulations throughout the project. In my opinion this is a really good beginner project for those who want to become web developers.

Video Tutorial

If you would watch a detailed step-by-step video instead you can check out the video I made covering this project on my Youtube Channel:

HTML

The html will be pretty simple for this project. We'll start out with a standard HTML5 boilerplate. At the bottom of our body I included the index.js script that we will create later. This needs to be at the bottom, because this way, when our javascript runs, the html elements required for the calculator will be in the DOM.
In the body we have a section and inside that a div with a container class. We will use these wrappers to position our calculator on the page. Inside our container we have an empty div with the id of display, and this will be the display of our calculator. It is empty, because we will modify its content from Javascript. Then we have a div with the class of buttons which will represent the keypad of the calculator.

<body>
    <section>
        <div class="container">
            <div id="display"></div>
            <div class="buttons">

            </div>
        </div>
    </section>
    <script src="index.js"></script>
</body>

The buttons container will hold all of the buttons. Each button will be a div with a class of button. This will make the styling easy, and also will help us to gather the user input. Here we have a div for every button that we want on our keypad. You can notice that we have a weird looking label between the buttons: ←. This is a HTML entity and it renders a back arrow (←), and we'll use this as a backspace. Also please not that for the equal sign button we have a separate id equal. We will use this Id to distinguish this special button, and evaluate the expression provided to the calculator.

 <div class="buttons">
    <div class="button">C</div>
    <div class="button">/</div>
    <div class="button">*</div>
    <div class="button">&larr;</div>
    <div class="button">7</div>
    <div class="button">8</div>
    <div class="button">9</div>
    <div class="button">-</div>
    <div class="button">4</div>
    <div class="button">5</div>
    <div class="button">6</div>
    <div class="button">+</div>
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">.</div>
    <div class="button">(</div>
    <div class="button">0</div>
    <div class="button">)</div>
    <div id="equal" class="button">=</div>
 </div>

And this is all of the HTML markup that we need for this project, let's jump into CSS.

Don't forget to link the CSS styleshead in the head of the HTML file:

<link rel="stylesheet" href="style.css">

CSS

Let's create a style.css file.
We set a width for the container and center it using margin (also give it a decent top margin of 10vh), and apply a little box shadow.

.container {
    max-width: 400px;
    margin: 10vh auto 0 auto;
    box-shadow: 0px 0px 43px 17px rgba(153,153,153,1);
}

For the display we set a fixed height, and to center the text vertically we need to set the line-height to the exact same amount. The text should be right align, because this is how most calculator displays work. Also set the font-size and give a decent amount paddings.

#display {
    text-align: right;
    height: 70px;
    line-height: 70px;
    padding: 16px 8px;
    font-size: 25px;
}

To position the buttons we use CSS grid. By setting 4 x 1fr in-grid-template-coloumns we'll have 4 equally sized buttons in each row. We only set bottom and left borders, so we won't get double borders. We'll set the other two sides in the next CSS rule.

.buttons {
    display: grid;
    border-bottom: 1px solid #999;
    border-left: 1px solid#999;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

Apply the missing two sides of the borders for every button:

.buttons > div {
    border-top: 1px solid #999;
    border-right: 1px solid#999;
}

For the button we'll set borders, font-size and 100px of line height to center it vertically, and set text-align: center to center the button labels horizontally. To have a better user experience set cursor to pointer, so the user will know that this is a clickable element.

.button {
    border: 0.5px solid #999;
    line-height: 100px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
}

We want the equal button to stand out so, we'll set a blue background color and white text to it. Also to have a nice hover effect we'll set a darker background color and white text color on hover. To make the transition smoot set: transition: 0.5s ease-in-out;.

#equal {
    background-color: rgb(85, 85, 255);
    color: white;
}

.button:hover {
    background-color: #323330;
    color: white;
    transition: 0.5s ease-in-out;
}

Javascript

This will be the heart of our application. Let's create the index.js file. The first thing we need to do is to save a reference to our display dom element. We can easily do that because it has an id of display.

let display = document.getElementById('display');

Next we have to get references for the buttons. We'll store the button references in an array. To gather the buttons we can select them by document.getElementsByClassName('button'), but this function gives back a NodeCollection instead of an array so we have to convert it to an array using Array.from().

let buttons = Array.from(document.getElementsByClassName('button'));

The next and last step we have to make is to add event listener to the buttons and build the functionalities. To add event listeners for the buttons, we'll map through the buttons array and add a click event listener for each. (An advanced solution would be to only add event listener to the buttons container and use event bubbling but this is a more beginner-friendly solution.)

To determine what should we do, we'll use e.target.innerText, which will simply give back the label of the button that was clicked.

In the first case, when the user hits the "C" button we'd like to clear the display. To do that we can access our display reference and set the innerText to an empty string. Don't forget to add break; at the end, because it is needed to prevent the execution of the code defined in other case blocks.

For the equal button we'll use javascript built in eval function. We need to provide the display's content to eval and it will evaluate and return the result, so we should set the result of the eval call to the display's innerText. We need to wrap this into a try catch block to handle errors. Erros can happen when we have syntactically wrong math expressions, for example //(9(, ine these cases we'll set the display's innerText to display 'Error'.

⚠️ You should not use eval in user facing applications, because it can be abused and external code can be run with it. More details If you want to replace eval I suggest using Math.js lib.

If the user hits the back arrow we need to remove the last character from the display's innerText. To do that we'll use the String.slice() method, but we only want to do that if the display has any value.

In the default case, so whenever the user don't hit these special symbols we just want to append the clicked button's innerText to the display's innerText. We can use the += operator to do that.

buttons.map( button => {
    button.addEventListener('click', (e) => {
        switch(e.target.innerText){
            case 'C':
                display.innerText = '';
                break;
            case '=':
                try{
                    display.innerText = eval(display.innerText);
                } catch {
                    display.innerText = "Error"
                }
                break;
            case '←':
                if (display.innerText){
                   display.innerText = display.innerText.slice(0, -1);
                }
                break;
            default:
                display.innerText += e.target.innerText;
        }
    });
});

The whole project is available on GitHub
And that's it you have a working calculator.

Thanks for reading.

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Create a digital clock using Javascript

Adam Nagy — Sat, 23 Oct 2021 13:47:26 +0000

In today's tutorial we will create a digital clock that will show us the current time and it will also have a nice alarm feature. By the end of this tutorial you'll be familiar with working with the Javascript Date object, and also you'll have a minimal understanding of asynchronous code execution and the setTimeout API.

Video tutorial

If you prefer a detailed video tutorial instead, feel free to check out the tutorial that I created on my YouTube channel:

HTML

The html markup for this project is pretty simple. But before we implement that, let's add the custom font from Google that we will use in the head section of the HTML document. I'll also include the stylesheet that we will create later.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">

We will have a section with a class of container which will hold our clock. Below that we need to create an empty div, which will be used to display the current time. I give it an id of clock, so it will be easier to target.

<section class="container">
  <div id="clock"></div>
</section>

Next we will add the input field, so the user will be able to select a date and time to set the alarm. The important thing here is, that the input type should be "datetime-local". We'll also give it a name attribute and an onchange event handler. When the onchange event happens (so the value of the input field changes), we will fire this function setAlarmTime(this.value) that we will implement in our js file just in a bit. We pass this.value to the function which will give is the new, updated value of the input field.

<input onchange="setAlarmTime(this.value)" name="alarmTime" type="datetime-local">

Next we have to add the control buttons. We will wrap these two buttons into a wrapper div, and give it a css class of controls. Inside that we'll add two buttons, "Set alarm" and "Clear alarm". Besides the css classes, we add click event hanler functions. We will create the functions: setAlarm() and clearAlarm() in javascript later.

<div class="controls">
  <button onclick="setAlarm()" class="button set-alarm">Set alarm</button>
  <button onclick="clearAlarm()" class="button clear-alarm">Clear alarm</button>
</div>

Lastly, we have to include our javascript file at the bottom of our HTML document's body. We need to import it at the end of the document, so when our script will run, the DOM tree will be ready. (You could also include it in the head with the defer keyword).

<script src="index.js"></script>

CSS

In our styles.css file I'll start with clearing every browser defined paddings and margins, and also set a dark background color.

body,html {
    margin: 0;
    padding: 0;
    background-color: #12181B;
}

* {
    box-sizing: border-box;
}

Using flexbox we'll make the container take the full viewport, and center its content.

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

For the clock we will set the font that we included earlier in the HTML, and set the desired font size. I'll also add a gradient color to the clock. To do that we will set a gradient as a background image, then we will color the font with the background gradient using the background-clip: text CSS rule.

#clock {
    font-family: 'Orbitron', sans-serif;
    font-size: 15vw;
    background-image: linear-gradient(180deg,
        rgba(99,253,136,1) 0%,
        rgba(51,197,142,1) 50%,
        rgba(39,97,116,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

Lastly, we make some styling to the control buttons and the wrapper div.

.controls {
    margin-top: 16px;
}

.button {
    font-weight: bold;
    border-radius: 5px;
    border: none;
    color: white;
    padding: 4px 8px;
    margin-left: 4px;
    cursor: pointer;
}

.set-alarm {
    background-color: #498AFB;
}

.clear-alarm {
    background-color: #FF3860;
}

Javascript

This will be the hearth of our clock application. First, we will save a reference to our clock display (the div with the clock id) into a display variable. We'll also set up the audio for the alarm. To do that I'll use a free alarm sound form Mixkit, feel free to use any music/sound of your choice.
We will create a new Audio object and save it to the audio variable. We'll also set the loop property of the audio object to true, as we want to play the sound, till the alarm is turned off manually. As you can see we have an alarmTime and alarmTimeout variables, that we initialise with null. We will use these variables to implement the alarm functionality.

const display = document.getElementById('clock');
const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
audio.loop = true;
let alarmTime = null;
let alarmTimeout = null;

Now we'll implement the clock functionality. In the updateTime function we create a new Date object. As we didn't provide any parameter to it it will create an object with the current time. Then we create 3 variables to get the hour, minute and second values from the Date object. We can do it easily using the API of the javascript Date object.
To have a nice digital display, we'll create a function which format's the time values. It places a leading zero if the number is only one digit, otherwise it uses the number. So for example if the time value provided is 9, it returns 09 instead.

function formatTime(time) {
    if ( time < 10 ) {
        return '0' + time;
    }
    return time;
}

Lastly we have to override the display DOM node's innerText to represent the current time. I used string template literals here, so anything between ${} will be replaced with the value of that variable.

function updateTime() {
    const date = new Date();

    const hour = formatTime(date.getHours());
    const minutes = formatTime(date.getMinutes());
    const seconds = formatTime(date.getSeconds());



    display.innerText=`${hour} : ${minutes} : ${seconds}`
}

Now we just have to call this function every second to update the displayed time. We can do that by using the setInterval API, pass the updateTime function to it and pass 1000 (it is in ms) as it's second parameter.

setInterval(updateTime, 1000);

Now we have a working clock. It's time to implement the alarm feature. The first thing is that we have to collect and save the date and time selected by the user. We already attached an onchange event listener in the HTMl, now we just have to implement that in javascript. We will simply get the value from the event handler and save it to the alarmTime variable.

function setAlarmTime(value) {
    alarmTime = value;
}

Now we should implement the setAlarm function. This will be responsible for setting the alarm to the desired time and play the sound. If an alarmTime is set we create two Date objects, one with the current time (empty parameters), and one using the user selected alarm time and date. If the time of the alarm is in the future, we will set the alarm. To calculate the time left till the alarm, we convert both dates to time in ms (this will give us pack time in ms since unix epoch, more details here) and subtract the future value from the current. This ways we know, how much ms is left till the alarm shall play. We just have to set a timeout to call the play method of the audio object. We'll also save the return result of the setTimeout function into the global alarmTimeout variable. We will use this reference to clear the timeout if needed.

function setAlarm() {
    if(alarmTime) {
        const current = new Date();
        const timeToAlarm = new Date(alarmTime);

        if (timeToAlarm > current) {
            const timeout = timeToAlarm.getTime() - current.getTime();
            alarmTimeout = setTimeout(() => audio.play(), timeout);
            alert('Alarm set');
        }
    }
}

The last thing that we have to implement is the clear functionality of the alarm. We will stop the alarm sound if it already playing, and we will cancel the set alarm if it is in the future. So in our clearAlarm function we will call the pause method of our audio object. Then if we have a scheduled alarm (so the alarmTimeout has a value), we will use the built in clearTimeout function to cancel that future function call.

function clearAlarm() {
    audio.pause();
    if (alarmTimeout) {
        clearTimeout(alarmTimeout);
        alert('Alarm cleared');
    }
}

The whole project is available on GitHub.

Conclusion

So this is how you can create a digital clock with alarm features in a beginner-friendly way using javascript. I think that this is an interesting project that you can build, and you also practice some fundamental javascript topics, like Dates, DOM modification and asynchronous API-s like setInterval and setTimeout.

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Master CSS positioning in 5 minutes

Adam Nagy — Tue, 19 Oct 2021 18:10:35 +0000

The ability to position elements on a page is must-have for every web developer. And still, I see even experienced developers often times struggle with this a bit or google instantly. But if you take your time and get this right, you will be a CSS-positioning ninja ⚔️ by the end of this post.

Video tutorial

If you prefer to watch it in a video format instead I created a tutorial on my YouTube channel, where I explain this on a living example:

The position CSS property

The position property tells the browser how an element should be positioned on the page. By default the value of position is static, but we can modify it to be any of the following values: relative, absolute, fixed, sticky. In this post I will go over each of them.

The base example

We will use a simple HTML markup which is really simple for better understanding. It contains a container div, and 3 child divs, that we will position throughout the examples.
I also added different colors to these child divs, so it will be easier to see the difference.



<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <title>CSS positions</title>
    <style>
      .container {
        background-color: lightblue;
        padding: 20px;
      }

      .container > div {
        padding: 15px;
      }

      .container span {
        margin-bottom: 20px;
      }

      .first {
        background-color: lightgreen;
      }

      .second {
        background-color: lightcoral;
      }

      .third {
        background-color: lightgoldenrodyellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span>Container</span>
      <div class="first">First</div>
      <div class="second">Second</div>
      <div class="third">Third</div>
    </div>
  </body>
</html>

ℹ️ If you want to play around with the code, feel free to use this CodeSandbox link.

Static

This is the default value of the position property. If the position of an element is static, the element will render in order, based on the position of it in the original document flow.

This is how it looks like:

Relative

If we set the position of an element to relative, it will appear in the document as it would by default using static. The trick is that by setting position relative, we gain access to the following CSS properties: top, left, right, bottom. With these we can add an offset to the specific direction. So for example if we set left: 20px. The element will be placed 20 pixel to the right. If we would have provided -20px it would push the content to the left with 20px.

Make the following changes:



.second {
        background-color: lightcoral;
        position: relative;
        left: 20px;
      }

We get this result:

Fixed

With fixed positioning we also have access to top, left, right, bottom properties. In this case the element is positioned relative to the browser window's viewport.

So if we set top 70px and left 20px on a fixed positioned element it will appear 70 pixels from the top of the viewport and 20px from the left edge of the viewport. Fixed positioning also removes the document from the normal document flow.

Modify the CSS:



.second {
        background-color: lightcoral;
        position: fixed;
        left: 20px;
        top: 70px;
      }

We get this result:

Absolute

Absolute positioning is the one which can trick developers. It is working like the fixed positioning, but it is not positioned relatively to the viewport, but instead it is positioned based on the closest positioned element (which has position other than static). If there are no positioned parents it will be positioned relative to the viewport (Same result as it would be with fixed).

Make these changes to the CSS:



.second {
        background-color: lightcoral;
        position: absolute;
        left: 20px;
        top: 70px;
      }

And we get the same result as with position fixed:

If we add a position value to a parent, in this case we will add it to the container div, the absolutely positioned child will be positioned relatively to that. We often use relative position for the parent as it won't remove it from the standard document flow, and the parent will be placed in the site where it would have been without position: relative.

Add position relative to the container:



.container {
        background-color: lightblue;
        padding: 20px;
        position: relative;
      }

This is the result:

Sticky

Using sticky will position our element based on the user's scroll position. It toggles between position relative and fixed. We can provide the offsets using top, left, right, bottom. Until the specified offsets are met the element acts like a relatively psoitioned element, but when the scroll position is greater than the offset it "swithces" to position fixed and be positioned relatively to the viewport. It stays fixed until the user scrolls back to the opposite direction and the distance will be less than the offset, then it goes back to act like a relative positioned element again.

To be able to scroll add 3 times the height of the viewport to our container:



.container {
        background-color: lightblue;
        padding: 20px;
        height: 300vh;
      }

Add the sticky position and the top offset to the element:



.second {
        background-color: lightcoral;
        position: sticky;
        top: 0;
      }

The result:

Now, by default the page looks like as we haven't done anything. But if we scroll down, below the second div, it sticks to the top directly (because of the 0px offset, add more if you need), and scrolls with the content in that fixed position. If we scroll back to the top it will be placed in its original position.

And this is everything you'll ever need to position elements on a webpage like a pro.

If you want to learn more, consider following me on other platforms too 👇.

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

TOP 10 VsCode Extensions for web developers

Adam Nagy — Sat, 16 Oct 2021 17:42:41 +0000

Advantages of extensions

Visual Studio Code is widely used nowadays for writing software. It is highly extensible and there are a lot of contributors that create useful extensions for it, to give this editor superpowers. It’s not a joke, you can really speed up your development with these tools and enhance the contribution with teammates.
Here is my top 10 extension that you should try in Vs Code:

Video

If you prefer to watch a video instead of reading, you can check out the video that I made on the topic on my YouTube channel:

The toplist of VsCode extensions

10. Gitlens

GitLens is an open-source extension that combines the capabilities of Git and VsCode. One of the best features of this extension, is the ability to visualize code authorship via Git blame annotations and code lens. You can also navigate in the history of a file back and forth to see the changes that were made on it. With the current-line blame you have the ability to click on a single line in the code and you can see the last commit that modified it and you also get a link to the pull request that introduced that change. Overall a really useful tool if you use git as your version control system.

9. Live Server

Oh I really wish this extension existed when I started to learn web development. It spins up a light nodejs server and serves your html file and all assets from the given directory. On top of that any saved changes you make to your website will be reflected immediately in the browser, which gives a really fast and enjoyable developer experience. You can find this functionality in tools for modern frameworks and libraries like Angular and React, but with this extension you can have the same functionality in any web development project.

8. Import Cost

You know that feeling when you look at npm’s website and see a cool package, install it immediately and import it into your project. So do I, the problem is that we often don’t think of the overhead that it can cause. This is why this little extension is so important. It enables you to track the size of the imported packages and libraries, so you can control the amount of code size that you import. Especially in web development, you should mind every single byte you import as they will negatively affect the load speed of your site, may harm user experience and even SEO rankings.

7. Prettier

Prettier is an opinionated code formatter, which you can set up according to your preferences. It just simply formats your code, and it is really beneficial to have a consistent formatting and styling across your code, because it can save you a lot of time, especially when you collaborate with other developers. You can use Prettier plugins to further enhance the capabilities of this extension, and you can also make it format your code automatically when you save a file.

6. Icons

This is not a specific extension rather a collection of extensions. If you install an icon extension VsCode will show little icons before your directory names and filenames. Every file extension will have it’s custom icon which makes it 10 times easier to navigate in the code and find the file or folder that you searched for. Even directories can have their specific icons based on their names and purpose. My go-to option is Material Icon Theme, but there are other really cool ones like vscode-icons, Simple Icons, Material Theme Icons. Find out which one suits you the most.

5. MarkDown all in one

Writing documentation is part of the developer job, whether you like it or not. The most commonly used markup to write documentations or even blog posts is markdown. Markdown all in one makes this process more enjoyable by providing useful shortcuts, autocomplete and live-preview features. It really speeds up documentation writing, so you can get back to developing new features much faster.

4. Better Comments

Better comments help you write more human-friendly, readable comments. Comments help you understand your own and others' code. This extension helps to visually organize your comments, so it will be much more digestible. You can categorize your annotations to highlighted text, errors and warnings, questions, strikethrough and TODO. With these formatted annotations being visually separated you won’t miss out on any must-read comments.

3. Snippets

This is again not a single extension but a collection of extensions. Using code snippets is a really good way to save time during development and increase productivity. For example if you use react and install the ES7/React/redux/GraphQL/React-native snippet you can simply type “rfc” and hit enter to import React and create a functional component. You can also find code snippet extensions for angular, vue, python, html and so on.

2. Path intellisense

Path intellisense is a great tool which makes it easier to work with files. It autocompletes filenames, and can be really useful if you work with lots of node modules or files in general.

1. Auto Rename Tag

This is a must-have extension for web developers. As the name suggests, it automatically renames the second tag if the first one is modified and vice versa. In bigger projects where you have nested tags and elements manual update can be difficult and tedious. And the great thing is that it works with JSX so you can use it with React too!

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy

Matrix raining code effect using JavaScript

Adam Nagy — Mon, 11 Oct 2021 07:51:10 +0000

Motivation

The new Matrix movie is coming this year, and I'm so hyped for it that I had to create this iconic effect with my tools. The implementation itself is really simple and I only used HTML, CSS and vanilla javascript for it.

If you prefer a video format, you can check my tutorial on it on YouTube:

Implementation

I'll use HTML canvas to create the "Digital rain" effect, and we will have all the login in javascript.

HTML

The HTML file will be really simple. In the body we will only have a <canvas>, and I also included the javascript file here at the bottom, you can also include it in the head with the defer attribute.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <title>Matrix digital rain</title>
</head>
<body>
    <canvas id="Matrix"></canvas>
    <script src="./index.js"></script>
</body>
</html>

CSS

This will be really short too. In CSS I just basically make the body fill the whole viewport and set a black background color for it.

html {
    background: black;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

Javascript

This implementation will be the 🦁 lionshare of the project.
First we have to initialise our canvas with a 2D context. I also set the canvas to take up the whole viewport by setting it's width and height:

const canvas = document.getElementById('Matrix');
const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Next I create the alphabet from which we will pick our characters for the rain. I'll use katakana characters (A variation of Katakana symbols was used in the Matrix movie itself.), the latin alphabet and arabic numbers. The concatenation of these will create the alphabet.

const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';

const alphabet = katakana + latin + nums;

We have to calculate how many "rain columns" will fit on the screen and to do that I'll set a fixed fontsize and divide the width on the window's innerWidth to get the exact column count.

const fontSize = 16;
const columns = canvas.width/fontSize;

I'll use an array to store and render the raindrops. The index of a given element will be the coordinate of the raindrop on the X axis, and the value of a given element will hold it's coordinate on the Y axis. This way we don't need a 2D array. To initialise the array I fill it up with with ones, so aftert the initialization we will have the same exact height for every column: 1.

const rainDrops = [];

for( let x = 0; x < columns; x++ ) {
    rainDrops[x] = 1;
}

Now it's time to implement the hearth of our effect the draw function. First we will paint the whole canvas with a transparent black color. This will give us the trail effect on the raindrops, when the drop falls the already drown characters will slowly fade out. Next I'll set the fontsize and the color (of course it is green 😎). And now comes the 🔑 key. I'll loop through the raindrop array, and for every element I'll pick a random character from our alphabet and render that in the next position of the column. The important thing here is that you have to multiply the coordinates (elemnt value and index) with the font size to get the perfect spacing. Lastly we have to move our raindrops which dropped below the viewport height, to the top of that column. To get the raining effect I don't put it to the top right away, but add a little randomness by adding a random chance to do that.

const draw = () => {
    context.fillStyle = 'rgba(0, 0, 0, 0.05)';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#0F0';
    context.font = fontSize + 'px monospace';

    for(let i = 0; i < rainDrops.length; i++)
    {
        const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
        context.fillText(text, i*fontSize, rainDrops[i]*fontSize);

        if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
            rainDrops[i] = 0;
        }
        rainDrops[i]++;
    }
};

As a last step I need to call the draw function in an interval and this will call the draw function in every 30ms.

setInterval(draw, 30);

Conclusion

This is a really fun project to create and I tried to keep the implementation as beginner friendly as I could. Hope you enjoyed it, if you seek educational content on web development follow me, I create educational YouTube videos, and Instagram posts too.

Happy Hacking!

Where can you learn more from me?

I create education content covering web-development on several platforms, feel free to 👀 check them out.

I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.

🔗 Links:

🍺 Support free education and buy me a beer
💬 Join our community on Discord
📧 Newsletter Subscribe here
🎥 YouTube Javascript Academy
🐦 Twitter: @dev_adamnagy
📷 Instagram @javascriptacademy