Forem: Adesile Emmanuel

How to flatten a nested array in Javascript

Adesile Emmanuel — Sat, 22 Aug 2020 14:13:25 +0000

Today, I'll show you two ways to flaten a nested array regardless of how deeply nested it is.

1. Using Array `flat` method

function flatten(arr) {
  return arr.flat(Infinity)
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten(numArr) // [1, 2, 3, 4, 5, 6, 7]

2. Using Recursion and Reduce

function flatten(arr) {
  const newArr = arr.reduce((acc, item) => {
    if (Array.isArray(item)) {
      acc = acc.concat(flatten(item));
    } else {
     acc.push(item);
    }

    return acc;
  }, []);

  return newArr;
}

const numArr = [1, [2, [3], 4, [5, 6, [7]]]];

flatten(numArr) // [1, 2, 3, 4, 5, 6, 7]

Build a Timer with React Hooks

Adesile Emmanuel — Sat, 22 Aug 2020 12:19:04 +0000

In this tutorial, you will learn how to build a timer using react hooks. React hooks is the new way of building react apps and its been available since v16.8.0. More about hooks here

Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props. - Dan Abramov

Let's dive right in.

Requirements

For this tutorial, you'd need a basic understanding of React and Javascript.

Getting started

You can use create-react-app to quickly scaffold a new react app.

npx create-react-app react-timer

Building the timer

Create a Timer.js component and style.css file in the /src directory.

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

const Timer = () => {
  return (
    <div className="container">
      <div className="time">
        <span className="minute">00</span>
        <span>:</span>
        <span className="second">00</span>
      </div>
      <div className="buttons">
        <button onClick={() => null} className="start">Start</button>
        <button onClick={() => null} className="reset">Reset</button>
      </div>
    </div>
  )
}

export default Timer;

This is the barebones Timer component. It has the minute and second values which are hardcoded for now, and two buttons to start and reset the timer.

Styles

Add these styles to style.css file to make the Timer visually appealing. 😎

.container {
  width: 600px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  margin-top: 5rem;
  background: rgb(66,4,53);
  background: linear-gradient(90deg, rgba(66,4,53,1) 0%, rgba(81,22,111,1) 35%, rgba(12,29,84,1) 100%);
  padding: 3rem 5rem;
  border-radius: 10px;
}

.time {
  font-size: 8rem;
  margin-bottom: 1rem;
  color: white;
}

.buttons button {
  padding: 0.8rem 2rem;
  border: none;
  margin-left: 0.2rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  transition: all 300ms ease-in-out;
  transform: translateY(0);
}

.buttons button:hover {
  transform: translateY(-2px);
}


.start {
  background: #3ed927;
  color: white;
}

.pause {
  background: #e4e446;
}

.reset {
  background: #fd7171;
  color: white;
}

Managing State with `useState`

We make our Timer a stateful component by using useState.

import React, { useState } from 'react';

const [second, setSecond] = useState('00');
const [minute, setMinute] = useState('00');
const [isActive, setIsActive] = useState(false);
const [counter, setCounter] = useState(0);

const Timer = () => {
  return (
    <div className="container">
      <div className="time">
        <span className="minute">{minute}</span>
        <span>:</span>
        <span className="second">{second}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setActive(true)} className="start">Start</button>
        <button onClick={() => null} className="reset">Reset</button>
      </div>
   </div>
  )
}

We now have the second, minute, isActive and counter values in state. isActive will be used to toggle the active and inactive states of the timer. We start the timer by adding an onClick handler to the start button which sets the isActive state to true.

Adding effects with `useEffect`

To trigger the timer which is a side effect, we need to use useEffect.

import React, { useState, useEffect } from 'react';

const [second, setSecond] = useState('00');
const [minute, setMinute] = useState('00');
const [isActive, setIsActive] = useState(false);
const [counter, setCounter] = useState(0);

const Timer = () => {
  useEffect(() => {
    let intervalId;

    if (isActive) {
      intervalId = setInterval(() => {
        const secondCounter = counter % 60;
        const minuteCounter = Math.floor(counter / 60);

        const computedSecond = String(secondCounter).length === 1 ? `0${secondCounter}`: secondCounter;
        const computedMinute = String(minuteCounter).length === 1 ? `0${minuteCounter}`: minuteCounter;

        setSecond(computedSecond);
        setMinute(computedMinute);

        setCounter(counter => counter + 1);
      }, 1000)
    }

    return () => clearInterval(intervalId);
  }, [isActive, counter])

  return (
    <div className="container">
      <div className="time">
        <span className="minute">{minute}</span>
        <span>:</span>
        <span className="second">{second}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setIsActive(!isActive)} className="start">
          {isActive ? "Pause": "Start"}
        </button>
        <button onClick={() => null} className="reset">Reset</button>
      </div>
   </div>
  )
}

Lets break down what's going on in the useEffect.

Toggle the start button value(Start or Pause) based on isActive state.
We only run the setInterval function if isActive is true.
secondCounter is calculated by getting the remainder of counter divided by 60 - using the modulo operator (%).
minuteCounter is calculated by dividing the counter by 60 and rounding it down using Math.floor.
We append an extra zero to the second and minute values so that we always have 2 digits.
We update the second and minute states using the computedMinute and computedSecond values.
count is also increased by 1 every second the effect runs.
We return a cleanup function to clear the interval when the effect stops running.
Lastly, we add the isActive and counter state to the dependency array. This ensures that the effect only runs when either of them changes.

To stop the timer and reset all state values, we add a stopTimer function which runs when the reset button is clicked.

import React, { useState, useEffect } from 'react';

 // state values are here ......

  // useEffect runs here .......

const Timer = () => {
  function stopTimer() {
    setIsActive(false);
    setCounter(0);
    setSecond('00');
    setMinute('00')
  }

  return (
    <div className="container">
      <div className="time">
        <span className="minute">{minute}</span>
        <span>:</span>
        <span className="second">{second}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setIsActive(!isActive)} className="start">
          {isActive ? "Pause": "Start"}
        </button>
        <button onClick={stopTimer} className="reset">Reset</button>
      </div>
   </div>
  )
}

Conclusion

In this article, we learnt how to build a timer using React Hooks. The preview of the finished timer is below. Please like and share.

How to create a hamburger menu icon with CSS and JavaScript

Adesile Emmanuel — Sat, 18 Apr 2020 16:47:52 +0000

Photo by Devin Edwards on Unsplash

Recently, I've been investing a lot of time in improving my frontend skills, especially in CSS and animation. As they say, if you want to be good at something, you have to put in a lot of practice. While working on my portfolio, I needed a hamburger menu icon, and because I didn't want to use any of the existing ones out there, I decided to create my own.

Prerequisites

All you need to follow along is basic HTML, CSS, and Javascript knowledge.

Writing the HTML

The HTML is pretty straightforward; we have the container for the icon, the menu-icon and three lines nested within it.

<div class="container">
  <div class="menu-icon">
    <span class="line-1"></span>
    <span class="line-2"></span>
    <span class="line-3"></span>
  </div>
</div>

Basic styles for the page

This is just to centre the icon and make everything look nice.

body {
  background: #09182F;
}

.container {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Styling the menu-icon

Using grid, we can easily position the menu-icon and the nested lines within. place-items: center is the swiss army knife that performs two functions; align-items: center and justify-items: center.

.menu-icon {
  display: grid;
  place-items: center;
  height: 55px;
  width: 50px;
  cursor: pointer;
}

Styling the 3 lines

Add the following to style the nested lines. We're giving the first and second lines different widths to make the icon look less conventional.

.menu-icon {
...

  & > span {
    width: 50px;
    height: 3px;
    background: red;
    display: block;
    transition: all 0.3s ease-in-out;
  }
}

.line-1 {
  width: 42px;
  justify-self: end;
}

.line-2 {
  width: 35px;
  justify-self: end;
}

Hover effect

On hover effect, we change the widths of the first and second lines. The transition makes the switch between the widths smooth and seamless.

.menu-icon {
...

  &:hover span:nth-child(1) {
    width: 35px;
  }

  &:hover span:nth-child(2) {    
    width: 40px;
  }
}

Animating the icon onClick

Here comes the fun part. We want to make the first and third lines rotate to form an X when clicked and make the second line disappear.

.menu-icon {
...

  &.active span:nth-child(1) {
    transform-origin: center center;
    transform: rotate(-45deg) translate(-12px, 12px);
    width: 55px;
  }

  &.active span:nth-child(2) {
    transform: translateX(10px);
    opacity: 0;
  }

  &.active span:nth-child(3) {
    transform-origin: center center;
    transform: rotate(45deg) translate(-15px, -14px);
    width: 55px;
  }
}

When the menu-icon is clicked, the active class is added, the 1st and 2nd lines are targeted, and we use the rotate & translate properties to form an X. Also, we hide the 2nd line by moving it using translateX and setting the opacity to 0.

Adding JavaScript

The only thing left is to add a little Js to toggle the active class.

const menuIcon = document.querySelector('.menu-icon');

function toggleMenuIcon() {
  menuIcon.classList.toggle('active')
}

menuIcon.addEventListener('click', toggleMenuIcon);

And there you go. Our own custom-made hamburger menu icon. The final result is below.

Kindly like and leave a comment if you learnt something new.