• Heres a live demo of the project
• And here's the Github Repo Link

Objectives

The topics we'll cover while building this project are:

• React Functional Components
• Material UI
• User Inputs
• Handling Props
• props destructuring
• useState Hook

And much more! This course is excellent for beginners who want to learn ReactJs by building a real world project.

You can watch this tutorial on YouTube as well if you like:

Table of Contents

• Project Setup
• Folder Structure
• Material UI Theme
• How to Build the Navbar
• Material UI Grid System
• How to Build the Slider Component
• Take a Break
• How to Use the useState Hook
• How to Build the SliderSelect component
• How to Build the TenureSelect component
• How to Build the Result Component
• Conclusion
• My Social Media Links

Project Setup

In order to setup the project we need to install react, material-ui, and other necessary packages.

First create a folder named mortgage-calculator, open it on VS Code, and then run the following command in the terminal:

npx create-react-app .
npm install @mui/material @emotion/react @emotion/styled
npm install --save chart.js react-chartjs-2

App.js

We will remove all the boilerplate code from app.js and keep up to this portion 👇

import React from "react";

function App() {
  return <div className="App">Hello everyone</div>;
}

export default App;

Then run this command in the terminal to start the server:

npm start

The project should look totally blank on the web browser now.

Let's start coding

Everything is setup and ready to go. Now we will start building the project :)

Folder Structure

Our folder structure should look like this so that we can easily manage and maintain our files & folders:

mortgage-calculator/
├── src/
│   ├── Components/
│   │   ├── Common/
│   │   │   └── SliderComponent.js
│   │   ├── Navbar.js
│   │   ├── Result.js
│   │   ├── SliderSelect.js
│   │   ├── TenureSelect.js
│   ├── theme.js
│   ├── App.js
│   ├── index.js
├── .gitignore
├── package.json
└── package-lock.json

Here's an image of our project folder structure if you're feeling confused:

Material UI Theme

We will be using the dark theme of Material UI. For that we need to create a file named theme.js in the src folder and add the following code:

theme.js

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  palette: {
    mode: 'dark',
  },
})

index.js

Next up, we need to import the theme in the index.js file and wrap the app with the ThemeProvider. Follow along below: 👇

import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { theme } from "./theme";

<React.StrictMode>
  <ThemeProvider theme={theme}>
    <App />
    <CssBaseline />
  </ThemeProvider>
</React.StrictMode>

Note: If you don't pass the CssBaseline component we will not be able to see the MUI dark theme.

This is the result so far: 👇

The entire screen will be dark. This means that dark mode has been applied to our project from Material UI.

How to Build the Navbar

Next up, we will be creating a very simple Navbar to show the Logo. For that we need to create a file named Navbar.js in the src/Components folder and add the following code:

Navbar.js

import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { Container } from "@mui/system";

const Navbar = () => {
  return (
    <AppBar position="static">
      <Container maxWidth='xl'>
        <Toolbar>
          <Typography variant="h5">
            Bank of React
          </Typography>
        </Toolbar>
      </Container>
    </AppBar>
  );
};

export default Navbar;

Here's a quick explanation of the components used from Material UI:

• AppBar : The Appbar component of Material UI is used for creating a top navigation bar in the user interface. Read more about it here
• Container : The Container component of Material UI is used for creating a container element that can be used to create a responsive layout, and center and contain other elements in a user interface. Read more about it here
• ToolBar : The Toolbar component can contain elements such as buttons, text, and icons, and can also be used for creating a responsive layout that adapts to different screen sizes. Read more about it here
• Typography : Material UI's typography component is used for applying pre-defined typographic styles to text elements. It helps create a consistent and visually pleasing layout with customizable font family, size, weight and spacing. Read more about it here

App.js

Finally, import it to App.js and write the code like this: 👇

import React from "react";
import Navbar from "./Components/Navbar";

function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

export default App;

This is the result so far: 👇

Material UI Grid System

In the finalized project, we can see that our content is divided into 2 portions. On the left we have the slider components and on the right we have the pie chart. This is made possible using the Grid system of material UI.

Not only that, we can also see that the content is responsive on smaller screen sizes. This is also made possible using the Grid system of material UI.

To replicate this, we need to write these things on our App.js file. You can follow along here. 👇

First of all, we need to import all of our required components from Material UI and our components folder:

import React, { useState } from "react";
import { Grid } from "@mui/material";
import { Container } from "@mui/system";
import Navbar from "./Components/Navbar";
import Result from "./Components/Result";
import SliderSelect from "./Components/SliderSelect";
import TenureSelect from "./Components/TenureSelect";

Next up, we write this code inside the return statement like this: 👇

<div className="App">
  <Navbar />
  <Container maxWidth="xl" sx={{marginTop:4}}>
    <Grid container spacing={5} alignItems="center">
      <Grid item xs={12} md={6}>
        <SliderSelect />
        <TenureSelect />
      </Grid>
      <Grid item xs={12} md={6}>
        <Result/>
      </Grid>
    </Grid>
  </Container>
</div>

Explanation of the code:

• Container: On the Container we wrote something called sx={{marginTop:4}}. This is the way to add inline-style to a component in Material UI.
• Grid: The Grid component is used to create a responsive layout that adapts to different screen sizes. Grid container represents the parent element and Grid item represents the child element.
• On the Grid component we wrote something called spacing={5}. This is the way to add spacing between the grid items.
• On the Grid component we also wrote xs={12} which means that the grid item will take up the entire width of the screen on extra small screens. Similarly, md={6} means that the grid item will take up half of the screen on medium and bigger screens. That's how we made our components responsive.

This is the result so far: 👇

How to Build the Slider Component

Next up, we will be creating a slider component to get the input amount from the user. It will look something like this: 👇

For that we need to create a file named SliderComponent.js in the src/Components/Common folder. First let's list out all the props we need to pass to our re-usable slider component:

• label
• min
• max
• defaultValue
• unit
• value
• steps
• amount
• onChange

SliderComponent.js

Let's get going. First of all, import the following components from MUI inside the SliderComponent.js file:

import React from "react";
import Slider from "@mui/material/Slider";
import { Typography } from "@mui/material";
import { Stack } from "@mui/system";

We will be using the Stack component from MUI to stack the components vertically. my is the shorthand for marginY [margin-top & margin-bottom]. We will be using the Typography component from MUI to display the label, unit, and other data. We will be using the Slider component from MUI to display the slider.

Write this small amount of code first, with our props destructured:

const SliderComponent = ({
  defaultValue,
  min,
  max,
  label,
  unit,
  onChange,
  amount,
  value,
  steps
}) => {
  return (
    <Stack my={1.4}>

    </Stack>
  )
}

export default SliderComponent

We will write this code to display the label, unit, and amount.

<Stack gap={1}>
  <Typography variant="subtitle2">{label}</Typography>
  <Typography variant="h5">
    {unit} {amount}
  </Typography>
</Stack>

We will write this code to display the slider. We will be passing the props to the slider component like this: 👇

<Slider
  min={min}
  max={max}
  defaultValue={defaultValue}
  aria-label="Default"
  valueLabelDisplay="auto"
  onChange={onChange}
  value={value}
  marks
  step={steps}
/>

We will write this code to display the min and max values of the slider. We will be using the Stack component from MUI to stack the components horizontally. direction="row" is the shorthand for flex-direction: row. justifyContent="space-between" is the shorthand for justify-content: space-between.

<Stack direction="row" justifyContent="space-between">
  <Typography variant="caption" color="text.secondary">
    {unit} {min}
  </Typography>
  <Typography variant="caption" color="text.secondary">
    {unit} {max}
  </Typography>
</Stack>

Good Job so far!

Take a break

Take a break – you deserve it! 🎉

How to Use the useState Hook

We need to use the useState hook from React in our project. But before that, we need to understand what this hook is and why we need to use it.

The useState hook is a built-in React function that allows you to add state to functional components. It returns an array containing two elements: the current state value and a function to update that value. The general syntax of the useState hook is as follows:

const [state, setState] = useState(initialState);

Here's what's going on: 👇

• state: The name of the constant or variable that will store the state.
• setState: A function to update the state.
• initialState: The initial value of the state.

Example of the useState hook

We will create a toggle button that changes its text between "ON" and "OFF" when clicked.

import React, { useState } from 'react';

const ToggleButton = () => {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => setIsOn(!isOn)

  return (
      <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>
  );
};

export default ToggleButton;

Here, we initialize the isOn state with an initial value of false. The toggle function updates the isOn state to its opposite value when the user clicks the button. We use a ternary operator to render the text inside the button based on the current value of isOn.

App.js

Now lets come back to our project. First, come over to the App.js file and import the useState hook from React.

import React, { useState } from 'react';

Next up, we will declare a state to store the value of the sliders using the useState hook. We will be passing the initial value of the state as {} inside the useState hook, because we are storing our data as an object.

function App() {
  const [data, setData] = useState({})

  // other codes are here
}

We're using the useState hook to create a new state variable called data and a function called setData that we can use to update the state.

Next up, we will pass these values as default values for our slider component.

function App() {
  const [data, setData] = useState({
    homeValue: 3000,
    downPayment: 3000 * 0.2,
    loanAmount: 3000 * 0.8,
    loanTerm: 5,
    interestRate: 5,
  })

  // other codes are here
}

Then, we will be passing the data and setData state as a prop to the SliderSelect component like this: 👇

<div className="App">
  <Navbar />
  <Container maxWidth="xl" sx={{marginTop:4}}>
    <Grid container spacing={5} alignItems="center">
      <Grid item xs={12} md={6}>

        {/* this is where we write the code  👇 */}
        <SliderSelect data={data} setData={setData}/>

        <TenureSelect />
      </Grid>
      <Grid item xs={12} md={6}>
        <Result/>
      </Grid>
    </Grid>
  </Container>
</div>

How to Build the SliderSelect Component

So now that we have our re-usable SliderComponent ready, let's use it in our SliderSelect.js component. First of all, import the SliderComponent component from the Common folder.

SliderSelect.js

import SliderComponent from "./Common/SliderComponent";

Next up, we will destructure our props that we are receiveing from App.js. And also, we'll create a variable called bank_limit and assign it a value of 10000. This represents the maximum amount of money a person can borrow from our bank.

import React from "react";
import SliderComponent from "./Common/SliderComponent";

const SliderSelect = ({ data, setData }) => {
  const bank_limit = 10000;
  return (
    <div>

    </div>
  );
};

export default SliderSelect;

Next up, we will use our SliderComponent to display the slider named Home Value. Here we will pass the props like this to the SliderComponent component.

const SliderSelect = ({ data, setData }) => {
  const bank_limit = 10000;
  return (
    <div>
      <SliderComponent
        onChange={(e, value) => {
          setData({
            ...data,
            homeValue: value.toFixed(0),
            downPayment: (0.2 * value).toFixed(0),
            loanAmount: (0.8 * value).toFixed(0),
          });
        }}
        defaultValue={data.homeValue}
        min={1000}
        max={bank_limit}
        steps={100}
        unit="$"
        amount={data.homeValue}
        label="Home Value"
        value={data.homeValue}
      />
    </div>
  );
};

Here's the result so far: 👇

In the same way, we will create the sliders for Down Payment and Loan Amount like this: 👇

  return (
    <div>
      {/* other codes are here */}

      <SliderComponent
        onChange={(e, value) =>
          setData({
            ...data,
            downPayment: value.toFixed(0),
            loanAmount: (data.homeValue - value).toFixed(0),
          })
        }
        defaultValue={data.downPayment}
        min={0}
        max={data.homeValue}
        steps={100}
        unit="$"
        amount={data.downPayment}
        label="Down Payment"
        value={data.downPayment}
      />

      <SliderComponent
        onChange={(e, value) =>
          setData({
            ...data,
            loanAmount: value.toFixed(0),
            downPayment: (data.homeValue - value).toFixed(0),
          })
        }
        defaultValue={data.loanAmount}
        min={0}
        max={data.homeValue}
        steps={100}
        unit="$"
        amount={data.loanAmount}
        label="Loan Amount"
        value={data.loanAmount}
      />
    </div>
  );

Again, here's the result so far: 👇

Finally we will create the slider for our Interest Rate. You can follow along here: 👇

return (
    <div>
      {/* other codes are here */}

      <SliderComponent
        onChange={(e, value) =>
          setData({
            ...data,
            interestRate: value,
          })
        }
        defaultValue={data.interestRate}
        min={2}
        max={18}
        steps={0.5}
        unit="%"
        amount={data.interestRate}
        label="Interest Rate"
        value={data.interestRate}
      />
    </div>
  );

Here's the result so far: 👇

How to Build the TenureSelect Component

Next up, we will build the TenureSelect component. This component will be used to select the tenure of the loan. It will look like this: 👇

App.js

First of all, pass the data and setData state as a prop to the TenureSelect component like this: 👇

return (
  <div className="App">
    <Navbar />
    <Container maxWidth="xl" sx={{marginTop:4}}>
      <Grid container spacing={5} alignItems="center">
        <Grid item xs={12} md={6}>
          <SliderSelect data={data} setData={setData} />

          {/* this is where we write the code  👇 */}
          <TenureSelect data={data} setData={setData}/>

        </Grid>
        <Grid item xs={12} md={6}>
          <Result data={data}/>
        </Grid>
      </Grid>
    </Container>
  </div>
);

TenureSelect.js

Then, import these required components from the MUI library:

import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

Then destructure the props that we are receiving from App.js. Also create a function named handleChange that will be used to set the tenure state, like this: 👇

const TenureSelect = ({ data, setData }) => {

  const handleChange = (event) => {
    setData({...data, loanTerm: event.target.value});
  };

  return ()
};

export default TenureSelect;

Next up, we will build the TenureSelect component. It will look like this: 👇

return (
  <FormControl fullWidth>
    <InputLabel id="demo-simple-select-label">Tenure</InputLabel>
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={data.loanTerm}
      label="Tenure"
      defaultValue={5}
      onChange={handleChange}
    >
      <MenuItem value={5}>5 years</MenuItem>
      <MenuItem value={10}>10 years</MenuItem>
      <MenuItem value={15}>15 years</MenuItem>
      <MenuItem value={20}>20 years</MenuItem>
      <MenuItem value={25}>25 years</MenuItem>
    </Select>
  </FormControl>
);

The result so far: 👇

How to Build the Result Component

Finally we will build the Result component. This component will be used to display the loan installment per month and the pie chart. It will look like this: 👇

App.js

First of all, pass the data state as a prop to the Result component like this: 👇

return (
  <div className="App">
    <Navbar />
    <Container maxWidth="xl" sx={{marginTop:4}}>
      <Grid container spacing={5} alignItems="center">
        <Grid item xs={12} md={6}>
          <SliderSelect data={data} setData={setData} />
          <TenureSelect data={data} setData={setData}/>
        </Grid>
        <Grid item xs={12} md={6}>

          {/* this is where we write the code  👇 */}
          <Result data={data}/>

        </Grid>
      </Grid>
    </Container>
  </div>
);

Result.js

Next up, import the required components like this: 👇

import React from "react";
import { Stack, Typography } from "@mui/material";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

Then destruct the data state that we are receiving from App.js like this: 👇

const Result = ({ data }) => {
  const { homeValue, loanAmount, loanTerm, interestRate } = data;
  return ();
};

export default Result;

Next up we will write all of these things that will help us do the calculation: 👇

  const totalLoanMonths = loanTerm * 12;
  const interestPerMonth = interestRate / 100 / 12;
  const monthlyPayment =
    (loanAmount *
      interestPerMonth *
      (1 + interestPerMonth) ** totalLoanMonths) /
    ((1 + interestPerMonth) ** totalLoanMonths - 1);

  const totalInterestGenerated = monthlyPayment * totalLoanMonths - loanAmount;

Then we need this variable to store all the data for our pie chart, like this: 👇

const pieChartData = {
  labels: ["Principle", "Interest"],
  datasets: [
    {
      label: "Ratio of Principle and Interest",
      data: [homeValue, totalInterestGenerated],
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)"],
      borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)"],
      borderWidth: 1,
    },
  ],
};

Finally, we will build the Result component. It will look like this: 👇

return (
  <Stack gap={3}>
    <Typography textAlign="center" variant="h5">
      Monthly Payment: $ {monthlyPayment.toFixed(2)}
    </Typography>
    <Stack direction="row" justifyContent="center">
      <div>
        <Pie data={pieChartData} />
      </div>
    </Stack>
  </Stack>
);

Here's the final result: 👇

Conclusion

Congratulations for reading until the end! Now you can confidently and efficiently use React JS and Material UI to build cool projects.

You have also learned how to use React's useState hook and how to handle props. I hope you enjoyed this tutorial.

Mentorship Program

If you are interested in learning more about React JS and web development, I am offering a mentorship program. You can check out the details here 👉 Mentor Labs Academy

My Social Media Links

• LinkedIn/ JoyShaheb
• YouTube / JoyShaheb
• Twitter / JoyShaheb
• Instagram / JoyShaheb

This is the app we're making today:

• Live preview
• GitHub Repository

You can watch this tutorial on YouTube as well if you like 🎥

Table of Contents

• What is CRUD?
• Understanding CRUD Principles
• How to Make a To-Do App using CRUD Operations

What is CRUD?

CRUD stands for -

• C: Create
• R: Read
• U: Update
• D: Delete

CRUD is a type of mechanism that allows you to create data, read data, edit it, and delete those data. In our case, we're gonna make a Todo app, so we will have 4 options to create tasks, read tasks, update tasks, or delete tasks.

Understanding CRUD Principles

Before starting the tutorial, first, let's understand the CRUD principles. For that, let's create a very very simple Social Media Application.

Setup

For this project, we will be following these steps below:

• Create 3 files named index.html, style.css, and main.js
• Link the JavaScript and CSS file to index.html
• Start your live server

HTML

Inside the body tag, create a div with a class name .container. There, we will have 2 sections, .left and .right 👇

<body>
  <h1>Social Media App</h1>
  <div class="container">

    <div class="left"></div>
    <div class="right"></div>

  </div>
</body>

On the left side, we will create our posts. On the right side, we can see, update, and delete our posts. Now, create a form inside the .left div tag 👇

<div class="left">
  <form id="form">
    <label for="post"> Write your post here</label>
    <br><br>
    <textarea name="post" id="input" cols="30" rows="10"></textarea>
    <br> <br>
    <div id="msg"></div>
    <button type="submit">Post</button>
  </form>
</div>

Write this code inside the HTML so that we can display our post on the right side 👇

<div class="right">
  <h3>Your posts here</h3>
  <div id="posts"></div>
</div>

Next, we'll insert the font-awesome CDN inside the head tag to use its fonts in our project 👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Now, we're gonna make some sample posts with delete and edit icons. Write this code inside the div with the id #posts: 👇

<div id="posts">
  <div>
    <p>Hello world post 1</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>

  <div >
    <p>Hello world post 2</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>
</div>

The result so far looks like this:

CSS

Let's keep it simple. Write these styles inside your stylesheet: 👇

body {
  font-family: sans-serif;
  margin: 0 50px;
}

.container {
  display: flex;
  gap: 50px;
}

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

Now, write these styles for the post div and option icons: 👇

#posts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  display: flex;
  gap: 25px;
}

#msg {
  color: red;
}

The results so far look like this:👇

JavaScript Part

According to this flow chart, we will go forward with the project. Don't worry, I'll explain everything along the way. 👇

Form Validation

First, let's target all the ID selectors from the HTML in JavaScript. Like this: 👇

let form = document.getElementById("form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");

Then, build a submit event listener for the form so that it can prevent the default behaviour of our App. At the same time, we will create a function named formValidation. 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("button clicked");

  formValidation();
});

let formValidation = () => {};

Now, we're gonna make an if else statement inside our formValidation function. This will help us prevent users from submitting blank input fields. 👇

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "Post cannot be blank";
    console.log("failure");
  } else {
    console.log("successs");
    msg.innerHTML = "";
  }
};

Here's the result so far: 👇

As you can see, a message will also show up if the user tries to submit the form blank.

How to accept data from input fields

Whatever data we get from the input fields, we will store them in an object. Let's create an object named data. And, create a function named acceptData: 👇

let data = {};

let acceptData = () => {};

The main idea is that, using the function, we collect data from the inputs and store them in our object named data. Now let's finish building our acceptData function.

let acceptData = () => {
  data["text"] = input.value;
  console.log(data);
};

Also, we need the acceptData function to work when the user clicks the submit button. For that, we will fire this function in the else statement of our formValidation function. 👇

let formValidation = () => {
  if (input.value === "") {
    // Other codes are here
  } else {
    // Other codes are here
    acceptData();
  }
};

When we input data and submit the form, on the console we can see an object holding our user's input values. Like this: 👇

How to create posts using JavaScript template literals

In order to post our input data on the right side, we need to create a div element and append it to the posts div. First, let's create a function and write these lines: 👇

let createPost = () => {
  posts.innerHTML += ``;
};

The backticks are template literals. It will work as a template for us. Here, we need 3 things: a parent div, the input itself, and the options div which carries the edit and delete icons. Let's finish our function 👇

let createPost = () => {
  posts.innerHTML += `
  <div>
    <p>${data.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class="fas fa-edit"></i>
      <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
    </span>
  </div>
  `;
  input.value = "";
};

In our acceptdata function, we will fire our createPost function. Like this: 👇

let acceptData = () => {
  // Other codes are here

  createPost();
};

The result so far: 👇

So far so good guys, we're almost done with project 1.

How to delete a post

In order to delete a post, first of all, let's create a function inside our javascript file:

let deletePost = (e) => {};

Next up, we fire this deletePost function inside all of our delete icons using an onClick attribute. You'll write these lines in HTML and on the template literal. 👇

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

The this keyword will refer to the element that fired the event. in our case, the this refers to the delete button.

Look carefully, the parent of the delete button is the span with class name options. The parent of the span is the div. So, we write parentElement twice so that we can jump from the delete icon to the div and target it directly to remove it.

Let's finish our function. 👇

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
};

The result so far: 👇

How to edit a post

In order to edit a post, first of all, let's create a function inside our JavaScript file:

let editPost = (e) => {};

Next up, we fire this editPost function inside all of our edit icons using an onClick attribute. You'll write these lines in HTML and on the template literal. 👇

<i onClick="editPost(this)" class="fas fa-edit"></i>

The this keyword will refer to the element that fired the event. In our case, the this refers to the edit button.

Look carefully, the parent of the edit button is the span with class name options. The parent of the span is the div. So, we write parentElement twice so that we can jump from the edit icon to the div and target it directly to remove it.

Then, whatever data is inside the post, we bring it back on the input field to edit it.

Let's finish our function. 👇

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
};

The result so far: 👇

Take a Break!

Congratulations everyone for completing project 1. Now, take a small break!

How to Make a To-Do App using CRUD Operations

Let's start making project 2, which is a To-Do App.

Project Setup

For this project, we will be following these steps below:

• Create 3 files named index.html, style.css, and main.js
• Link the JavaScript and CSS files to index.html
• Start our live server

HTML

Write this starter code inside the HTML file: 👇

<div class="app">
  <h4 class="mb-3">TODO App</h4>

  <div id="addNew" data-bs-toggle="modal" data-bs-target="#form">
    <span>Add New Task</span>
    <i class="fas fa-plus"></i>
  </div>
</div>

The div with an id addNew is the button that will open the modal. The span will be displayed on the button. The i is the icon from font-awesome.

We're going to use bootstrap to make our modal. We'll use the modal to add new tasks. For that, add the bootstrap CDN link inside the head tag. 👇

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

To see the created tasks, we'll use a div with an id tasks, inside the div with the classname app. 👇

<h5 class="text-center my-3">Tasks</h5>

<div id="tasks"></div>

Insert the font-awesome CDN inside the head tag to use fonts in our project 👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Copy and paste the code below which are from the bootstrap modal. It carries a form with 3 input fields and a submit button. If you want then you can search Bootstrap's website by writing 'modal' in the search bar.

<!-- Modal -->
<form
  class="modal fade"
  id="form"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Task Title</p>
        <input type="text" class="form-control" name="" id="textInput" />
        <div id="msg"></div>
        <br />
        <p>Due Date</p>
        <input type="date" class="form-control" name="" id="dateInput" />
        <br />
        <p>Description</p>
        <textarea
          name=""
          class="form-control"
          id="textarea"
          cols="30"
          rows="5"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" id="add" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</form>

The result so far: 👇

We're done with the HTML file setup. Let's start the CSS.

CSS

Add these styles in the body so that we can keep our app at the exact center of the screen.

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Let's style the div with the classname app. 👇

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
}

The result so far: 👇

Now, let's style the button with the id addNew. 👇

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

The result so far: 👇

If you click on the button, the modal pops up like this: 👇

Add the JS

In the JavaScript file, first of all, select all the selectors from the HTML that we need to use. 👇

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

Form Validations

We cannot let a user submit blank input fields. So, we need to validate the input fields. 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (textInput.value === "") {
    console.log("failure");
    msg.innerHTML = "Task cannot be blank";
  } else {
    console.log("success");
    msg.innerHTML = "";
  }
};

Also, add this line inside the CSS:

#msg {
  color: red;
}

The result so far: 👇

As you can see, the validation is working. The JavaScript code doesn't let the user submit blank input fields, otherwise you're gonna see an error message.

How to collect data and use local storage

Whatever inputs the user writes, we need to collect them and store them in local storage.

First, we collect the data from the input fields, using the function named acceptData and an array named data. Then we push them inside the local storage like this: 👇

let data = [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Also note that this will never work unless you invoke the function acceptData inside the else statement of the form validation. Follow along here: 👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

You may have noticed that the modal doesn't close automatically. To solve this, write this small function inside the else statement of the form validation: 👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
    add.setAttribute("data-bs-dismiss", "modal");
    add.click();

    (() => {
      add.setAttribute("data-bs-dismiss", "");
    })();
  }
};

If you open Chrome dev tools, go to the application and open the local storage. You can see this result: 👇

How to create new tasks

In order to create a new task, we need to create a function, use template literals to create the HTML elements, and use a map to push the data collected from the user inside the template. Follow along here: 👇

let createTasks = () => {
  tasks.innerHTML = "";
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>

          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

Also note that the function will never run unless you invoke it inside the acceptData function, like this: 👇

let acceptData = () => {
  // Other codes are here

  createTasks();
};

Once we're done collecting and accepting data from the user, we need to clear the input fields. For that we create a function called resetForm. Follow along: 👇

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

The result so far: 👇

As you can see, there's no styles with the card. Let's add some styles: 👇

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

Style the edit and delete buttons with this code: 👇

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

The result so far: 👇

Function to delete a task

Look here carefully, I added 3 lines of code inside the function.

• The first line will delete the HTML element from the screen,
• the second line will remove the targetted Task from the data array,
• and the third line will update the local storage with the new data.

let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

  data.splice(e.parentElement.parentElement.id, 1);

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Now create a dummy task and try to delete it. The result so far looks like this: 👇

Function to edit tasks

Look here carefully, I added 5 lines of code inside the function.

• Line 1 is targetting the task that we selected to edit
• Lines 2, 3, and 4, are targetting the values [task, date, description] of the task that we selected to edit
• line 5 is running the delete function to remove the selected data both from the local storage, HTML element, and data array.

let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

Now, try to create a dummy task and edit it. The result so far: 👇

How to get data from local storage

If you refresh the page, you'll note that all of your data is gone. In order to solve that issue, we run a IIFE (Immediately invoked function expression) to retrieve the data from local storage. Follow along: 👇

(() => {
  data = JSON.parse(localStorage.getItem("data")) || [];
  console.log(data);
  createTasks();
})();

Now the data will show up even if you refresh the page.

Conclusion

Congratulations for successfully completing this tutorial. You've learned how to create a todo list application using CRUD operations. Now, you can create your own CRUD application using this tutorial.

Here's your medal for reading until the end. ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

• LinkedIn/ JoyShaheb
• YouTube / JoyShaheb
• Twitter / JoyShaheb
• Instagram / JoyShaheb

Here's what we'll build today:

Here's a [live demo of the project] 👇 https://react-projects-psi.vercel.app/.

And here's the GitHub Repository.

The topics we'll cover while building this project are:

• React Hooks (useState, useEffect)
• React Components
• Fetch API
• Bootstrap - for styling
• Pagination
• Search bar
• Data Filtering
• Dynamic Routing

You can watch this tutorial on YouTube as well if you like:

Features of the project

Let's look at a demo of all the features that we will be building during the entire course of this article.

This project is filled with cool features so that you can get the most out of this tutorial and become really good at writing ReactJS code.

Search bar

We will be building this cool search bar so that we can search for our favourite characters.

Pagination

In total there are 800+ characters. In order to display and manage all of these characters, we will be implementing a pagination system where each page will display 20 characters.

Filters

There are lots of labels present in the API. Using them, we can filter our data and search for exactly what we need. Here's the demo:

Routing

We will implement this component to change our pages and create a navbar. We will use the library called react-router-dom to do this.

Dynamic Routing

Using react-router-dom, we will also add dynamic routing so that we can learn more about a character when we click on it.

Table of Contents

• Setup
• Folder structure
• Data Fetching
• Character Cards
• Search bar
• React-paginate
• Filters
• React Router
• Episodes
• Location
• Dynamic Pages

Project Setup

Before starting the project, follow these steps to get it set up:

• Create a folder named 'react-wiki'
• open that folder in VS code
• open your terminal and run these commands one by one: 👇

npx create-react-app .

npm install bootstrap

npm install @popperjs/core --save

npm install sass

npm install react-router-dom

npm install react-paginate --save

npm start

To make your dev experience easier, download these VS code extensions:

• ES7 React/Redux/GraphQL/React-Native snippets
• ESLint

Folder structure

We will divide our entire project into 5 components:

• Card
• Pagination
• Search
• Filter
• Navbar

Create a folder named 'components' inside your 'src' folder and make 5 folders like this: 👇

And then, create these files according to the names of our components. 👇

App.js

Some other changes you need to do:

• Remove everything from the App.css file
• import React hooks and Bootstrap at the top in App.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";
import React, { useState, useEffect } from "react";

Next, import all your modules from components:

import Search from "./components/Search/Search";
import Card from "./components/Card/Card";
import Pagination from "./components/Pagination/Pagination";
import Filter from "./components/Filter/Filter";
import Navbar from "./components/Navbar/Navbar";

Inside the return statement, remove everything and add this code: 👇

<div className="App">
  <h1 className="text-center mb-3">Characters</h1>
  <div className="container">
  <div className="row">
    Filter component will be placed here
    <div className="col-lg-8 col-12">
      <div className="row">
        Card component will be placed here
      </div>
    </div>
  </div>
  </div>
</div>

index.css

Add these default styles: 👇

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ubuntu {
  font-family: "Ubuntu" !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

This is the result so far:

Congratulations! We're done with the setup process. So now let's start coding.

How to Fetch Data from the API

To fetch data from our API, we're gonna be using the rick and morty characters API. We'll need to add a few things.

App.js 👇

 let api = `https://rickandmortyapi.com/api/character/?page=1`

Note : don't use quotes or double quotes around the URL, use backticks (like this) instead. ☝

To fetch data from this API, we're gonna use our useEffects hook like this: 👇

  useEffect(() => { }, [api]);

We're writing the useEffect hook and putting the watch on api. This means that, in case the api variable changes, we want to load fresh new data. Let's continue. 👇

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    console.log(data);
  })();
}, [api]);

We're using an async function to fetch our raw data and then we convert that to JSON format. Let's check the console to see what we have so far: 👇

Wanna test it yourself? Change the page number to 2 inside the API, and you'll find new data in your console: 👇

let api = `https://rickandmortyapi.com/api/character/?page=1`

Instead of storing the data in the console, let's use the useState Hook. This will store the data in a variable, and we will have a function key to change the variable data whenever the useEffect hook fetches new data. 👇

let [fetchedData, updateFetchedData] = useState([]);
let { info, results } = fetchedData;

Also, we are destructuring the info and results from the fetchedData variable to make our lives easier. 👆

The fetchedData variable will store the data we got from the api. We'll use the updateFetchedData function to change the data whenever we want.

Let's change our useEffect hook: 👇

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    updateFetchedData(data);
  })();
}, [api]);

How to Make the Character Cards

Let's start to build our character cards. 👇

First of all, import the card component by replacing the text where its written Card component will be placed here. Then, pass the fetched data from our App.js component to our Card component like this: 👇

<Card results={results} />

Card.js

Now, first destructure the data we got from our App.js component. 👇

const Card = ({ results }) => {}

Then create a variable named display. This will hold all of our cards. Along with this, we will create an if else statement to check if the data we got from our API is empty or not. 👇

const Card = ({ results }) => {
  let display;

  if (results) {}
  else{
    display = "No Characters Found :/";
  }

  return <>{display}</>;
}

Now, we're gonna map our results to our cards component in a way that it'll create cards for us automatically. But first, we need to destructure the data we got from our API. 👇

if (results) {
  display = results.map((x) => {
  let { id, image, name, status, location } = x;

    return (
      <div
        key={id}
        className="col-lg-4 col-md-6 col-sm-6 col-12 mb-4 position-relative text-dark"
      >
      </div>
  );
});
}

Create a file named Card.module.scss and add this code: 👇

$radius: 10px;
.card {
  border: 2px solid #0b5ed7;
  border-radius: $radius;
}
.content {
  padding: 10px;
}
.img {
  border-radius: $radius $radius 0 0;
}
.badge {
  top: 10px; right: 20px;
  font-size: 17px;
}

Also, import it inside the Card.js component: 👇

import styles from "./Card.module.scss";

Now, its time to create our card template and put the data in their respective places. 👇

<div
  className={`${styles.card} d-flex flex-column justify-content-center`}
>
  <img className={`${styles.img} img-fluid`} src={image} alt="" />
  <div className={`${styles.content}`}>
    <div className="fs-5 fw-bold mb-4">{name}</div>
    <div className="">
      <div className="fs-6 fw-normal">Last Location</div>
      <div className="fs-5">{location.name}</div>
    </div>
  </div>
</div>

The results so far look like this: 👇

At the very last, we're gonna use this code 👇 to let the users know whether the character is dead, alive, or unknown:

{
(() => {
  if (status === "Dead") {
    return (
      <div className={`${styles.badge} position-absolute badge bg-danger`}>
        {status}
      </div>
    );
  } else if (status === "Alive") {
    return (
      <div className={`${styles.badge} position-absolute badge bg-success`}>
        {status}
      </div>
    );
  } else {
    return (
      <div
        className={`${styles.badge} position-absolute badge bg-secondary`}
      >
        {status}
      </div>
    );
  }
})()}

The reults so far: 👇

How to Build the Search Bar

Here's a demo video of our search bar component: 👇

Now, let's built our character search bar. But first, we need to create two useState hooks to hold our search keywords and current page number. 👇

App.js

let [pageNumber, updatePageNumber] = useState(1);
let [search, setSearch] = useState("");

Then, we need to update our API with variables. This means that whenever our API changes, our useEffect hook will fetch new data from our database. 👇

let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}`;

Now, we're gonna import our search bar component inside the return statement. And along with that, we're gonna pass our newly created state variables inside that component. 👇

  <h1 className="text-center mb-3">Characters</h1>
  <Search setSearch={setSearch} updatePageNumber={updatePageNumber} />

Create a file named Search.module.scss to hold the styles of this specific module. Then, make these adjustments: 👇

Search.module.scss

.input {
  width: 40%; border-radius: 8px;
  border: 2px solid #0b5ed7;
  box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25);
  padding: 10px 15px;
  &:focus { outline: none; }
}
.btn {
  box-shadow: 1px 3px 9px rgba($color: #000000, $alpha: 0.25);
}
@media (max-width: 576px) {
  .input { width: 80%; }
}

Search.js

First of all, we need to destructure our props. Then, we'll create a function named searchBtn to prevent the default behaviour of our app, like this: 👇

import React from "react";
import styles from "./Search.module.scss";

const Search = ({ setSearch, updatePageNumber }) => {
  let searchBtn = (e) => {
    e.preventDefault();
  };
};

Then, let's write inside our return statement. First of all, let's write the form tag to hold our input and button tags. 👇

return (
  <form
    className={`${styles.search} d-flex flex-sm-row flex-column align-items-center justify-content-center gap-4 mb-5`}
  >
  </form>
);

Then, we create the button and input tags inside our form tag. 👇

<input
  onChange={(e) => {
    updatePageNumber(1);
    setSearch(e.target.value);
  }}
  placeholder="Search for characters"
  className={styles.input}
  type="text"
/>
<button
  onClick={searchBtn}
  className={`${styles.btn} btn btn-primary fs-5`}
>
  Search
</button>

The results so far: 👇

How to Set Up Pagination with React-paginate

Here's a demo of our React-paginate component: 👇

We're gonna use this package to paginate our data. So, let's import it at the very bottom: 👇

App.js

<Pagination
  info={info}
  pageNumber={pageNumber}
  updatePageNumber={updatePageNumber}
/>

Pagination.js

Here, we're gonna destructure our props, and then write in some JSX styles: 👇

import React, { useState, useEffect } from "react";
import ReactPaginate from "react-paginate";

const Pagination = ({ pageNumber, info, updatePageNumber }) => {}

Inside the return statement, we write the styles in JSX like this: 👇

return (
<>
<style jsx>
{`
  a {
    color: white; text-decoration: none;
  }
  @media (max-width: 768px) {
    .pagination {font-size: 12px}

    .next,
    .prev {display: none}
  }
  @media (max-width: 768px) {
    .pagination {font-size: 14px}
  }
`}
</style>
</>
);

Now, create this function to handle the page change function: 👇

let pageChange = (data) => {
  updatePageNumber(data.selected + 1);
};

In order to make our pagination component responsive, we need to write this little component:

const [width, setWidth] = useState(window.innerWidth);
const updateDimensions = () => {
  setWidth(window.innerWidth);
};
useEffect(() => {
  window.addEventListener("resize", updateDimensions);
  return () => window.removeEventListener("resize", updateDimensions);
}, []);

Alright everyone, excellent! Now we're gonna be using the react-paginate package.

First, let's style everything using the built-in props of react-paginate to style basic elements: 👇

<ReactPaginate
  className="pagination justify-content-center my-4 gap-4"
  nextLabel="Next"
  previousLabel="Prev"
  previousClassName="btn btn-primary fs-5 prev"
  nextClassName="btn btn-primary fs-5 next"
  activeClassName="active"
  pageClassName="page-item"
  pageLinkClassName="page-link"
/>

Here's the main sauce: we're gonna be adding the functionalities to our component so that it works properly. 👇

<ReactPaginate
  forcePage={pageNumber === 1 ? 0 : pageNumber - 1}
  marginPagesDisplayed={width < 576 ? 1 : 2}
  pageRangeDisplayed={width < 576 ? 1 : 2}
  pageCount={info?.pages}
  onPageChange={pageChange}
  //.... other props here
/>

The results so far: 👇

How to Make the Filters Component

Here's a demo of our filters component: 👇

The very first thing we need to do is create a folder structure to hold all the little components we're gonna use. Create these components inside the Filter folder: 👇

App.js

Now, create these useState hooks to store our status, gender, and species.

let [status, updateStatus] = useState("");
let [gender, updateGender] = useState("");
let [species, updateSpecies] = useState("");

Also, we need to modify our api variable according to our useState hook variables. 👇

  let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}&status=${status}&gender=${gender}&species=${species}`;

Now, we'll import our filter component inside our App where its written Filter component will be placed here. Also, pass all of these required props: 👇

<Filter
  pageNumber={pageNumber}
  status={status}
  updateStatus={updateStatus}
  updateGender={updateGender}
  updateSpecies={updateSpecies}
  updatePageNumber={updatePageNumber}
/>

Filter.js

Let's make these changes in our Filter component so that we can achieve the desired results. First, import all of our category components like this: 👇

import React from "react";
import Gender from "./category/Gender";
import Species from "./category/Species";
import Status from "./category/Status";

Then, destructure the passed props and place an accordion including a clear button:

const Filter = ({
  pageNumber, updatePageNumber,
  updateStatus, updateGender,
  updateSpecies,
}) => {

return (
<div className="col-lg-3 col-12 mb-5">
  <div className="text-center fw-bold fs-4 mb-2">Filters</div>
  <div
    style={{ cursor: "pointer" }} onClick={clear}
    className="text-primary text-decoration-underline text-center mb-3"
  > Clear Filters </div>
  <div className="accordion" id="accordionExample">
    {/* Category components will be placed here */}
  </div>
</div>
);
};

Make this function so that we can clear our filters and refresh the page: 👇

let clear = () => {
  updateStatus("");
  updateGender("");
  updateSpecies("");
  updatePageNumber(1);
  window.location.reload(false);
};

The results so far look like this: 👇

FilterBTN.js

First, let's create these filter buttons. We will also destructure the required props. 👇

const FilterBTN = ({ input, task, updatePageNumber, index, name }) => {
return (
<div>
  <style jsx>
    {`
      .x:checked + label {
        background-color: #0b5ed7;
        color: white }
      input[type="radio"] { display: none; }
    `}
  </style>
</div>
);
};

Now, we place the main input component with labels below the style jsx: 👇

<div className="form-check">
  <input
    className="form-check-input x" type="radio"
    name={name} id={`${name}-${index}`}
  />
  <label
    onClick={(x) => {
      task(input); updatePageNumber(1);
    }}
    className="btn btn-outline-primary"
    for={`${name}-${index}`}
  > {input} </label>
</div>

Status.js

Write this starter code inside Status.js:

import FilterBTN from "../FilterBTN";

const Status = ({ updateStatus, updatePageNumber }) => {
  let status = ["Alive", "Dead", "Unknown"];
  return (
    <div className="accordion-item">
      <h2 className="accordion-header" id="headingOne">
        <button
          className="accordion-button" type="button"
          data-bs-toggle="collapse" data-bs-target="#collapseOne"
          aria-expanded="true" aria-controls="collapseOne"
        > Status </button>
      </h2>
    </div>
  );
};

Then let's create the status buttons by mapping our array of data. 👇

Below the ending h2 tag, put these inside 👇 which will help us automatically map data and make our Status buttons:

<div
  id="collapseOne" className="accordion-collapse collapse show"
  aria-labelledby="headingOne" data-bs-parent="#accordionExample"
>
<div className="accordion-body d-flex flex-wrap gap-3">
  {status.map((item, index) => (
    <FilterBTN
      key={index}
      index={index}
      name="status"
      task={updateStatus}
      updatePageNumber={updatePageNumber}
      input={item}
    />
  ))}
</div>
</div>

time to test in Filter.js

Write these lines inside Filter.js to check whether the component works or not: 👇

<Status
  updatePageNumber={updatePageNumber}
  updateStatus={updateStatus}
/>

The results so far: 👇

Species.js

Write thes starter codes inside Species.js:

import FilterBTN from "../FilterBTN";

const Species = ({ updateSpecies, updatePageNumber }) => {
return (
<div className="accordion-item ">
  <h2 className="accordion-header" id="headingTwo">
    <button
      className="accordion-button collapsed" type="button"
      data-bs-toggle="collapse" data-bs-target="#collapseTwo"
      aria-expanded="false" aria-controls="collapseTwo"
    > Species </button>
  </h2>
</div>
)}

Now, create an array to hold all of our possible species data: 👇

  let species = [
    "Human", "Alien", "Humanoid",
    "Poopybutthole", "Mythological", "Unknown",
    "Animal", "Disease","Robot","Cronenberg","Planet",
  ];

And then, let's create the Species buttons by mapping our array data like this: 👇

<div
    id="collapseTwo" className="accordion-collapse collapse"
    aria-labelledby="headingTwo"
    data-bs-parent="#accordionExample"
  >
  <div className="accordion-body d-flex flex-wrap gap-3">
    {species.map((item, index) => {
      return (
        <FilterBTN
          name="species" index={index} key={index}
          updatePageNumber={updatePageNumber}
          task={updateSpecies} input={item}
        />
      );
    })}
  </div>
</div>

time to test in Filter.js

Write these lines inside Filter.js to check whether the component works or not: 👇

<Species
  updatePageNumber={updatePageNumber}
  updateSpecies={updateSpecies}
/>

The results so far: 👇

Gender.js

Write this starter code: 👇

import FilterBTN from "../FilterBTN";

const Gender = ({ updateGender, updatePageNumber }) => {
let genders = ["female", "male", "genderless", "unknown"];
return (
  <div className="accordion-item">
    <h2 className="accordion-header" id="headingThree">
      <button
        className="accordion-button collapsed" type="button"
        data-bs-toggle="collapse" data-bs-target="#collapseThree"
        aria-expanded="false" aria-controls="collapseThree"
      > Gender </button>
    </h2>
  </div>
);
};

Below the final h2 tag, put this code inside 👇 which will help us automatically map data and make our gender buttons:

<div id="collapseThree" className="accordion-collapse collapse"
  aria-labelledby="headingThree" data-bs-parent="#accordionExample"
>
<div className="accordion-body d-flex flex-wrap gap-3">
  {genders.map((items, index) => {
    return (
      <FilterBTN
        name="gender" index={index} key={index}
        updatePageNumber={updatePageNumber}
        task={updateGender} input={items}
      />
      );
    })}
  </div>
</div>

time to test in Filter.js

Write these lines inside Filter.js to check whether the component works or not: 👇

<Gender
  updatePageNumber={updatePageNumber}
  updateGender={updateGender}
/>

The results so far: 👇

How to Set Up React Router

Here's a demo of our Navigation component: 👇

Let's start coding!

First, create a folder named Pages inside the src folder. It will hold 2 files - Episodes.js and Location.js. Something like this: 👇

App.js

Import your newly created pages component in App.js: 👇

import Episodes from "./Pages/Episodes";
import Location from "./Pages/Location";

In order to declare the Router and to define all sorts of file paths, we need to import react-router-dom in App.js including its core components. 👇

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

Now, create a new functional component called Home inside the App.js file. Then, cut everything from the App component and put it inside the Home component: 👇

const Home = () => {
  // Everything you've written so far
}

Inside your App component function, create a new Router component and put it inside the Navbar component. 👇

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
      </div>
    </Router>
  );
}

Now, we need to define all our routes. Remember, Routes is a collection of Routes. Route is the actual file path.

Each route requires 2 things: The path where the app will actually lead to and the element which will get loaded. 👇

<Routes>
  <Route path="/" element={<Home />} />

  <Route path="/episodes" element={<Episodes />} />

  <Route path="/location" element={<Location />} />
</Routes>

Navbar.js

So far so good! Now, let's make the navbar component. First, import 2 components from react-router-dom. Then, write this bootstrap parent class including the brand name to hold our navbar pages component: 👇

import { NavLink, Link } from "react-router-dom";

const Navbar = () => {
return (
  <nav className="navbar navbar-expand-lg navbar-light bg-light mb-4">
    <div className="container">
      <Link to="/" className="navbar-brand fs-3 ubuntu">
        Rick & Morty <span className="text-primary">WiKi</span>
      </Link>
      <style jsx>{`
        button[aria-expanded="false"] > .close {
          display: none;
        }
        button[aria-expanded="true"] > .open {
          display: none;
        }
      `}</style>
    </div>
  </nav>
);
};

Write this code to generate our responsive hamburger menu: 👇

<button
  className="navbar-toggler border-0"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#navbarNavAltMarkup"
  aria-controls="navbarNavAltMarkup"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span class="fas fa-bars open text-dark"></span>
  <span class="fas fa-times close text-dark"></span>
</button>

Write this code to generate our clickable navbar links. Notice that we are using the component from 'react-router-dom' to link to our page's component URL: 👇

<div
  className="collapse navbar-collapse justify-content-end"
  id="navbarNavAltMarkup"
> <div className="navbar-nav fs-5">
    <NavLink to="/" className="nav-link">
      Characters
    </NavLink>
    <NavLink to="/episodes" className="nav-link">
      Episode
    </NavLink>
    <NavLink
      activeClassName="active" className="nav-link"
      to="/location" >Location</NavLink>
  </div>
</div>

App.css

Also, write these styles if you want to make the navbar look nice and let your users know exactly which page they are on currently: 👇

.active {
  color: #0b5ed7 !important;
  font-weight: bold;
  border-bottom: 3px solid #0b5ed7;
}

Then, inside Navbar.js, import the styles like this: 👇

import "../../App.css";

The result so far: 👇

Episodes

For creating this page, we need 2 components: the first one is the card component, which is already built, and the second one is the Input Group component through which we can change our episode number.

InputGroup.js

Our input groups will only be available in the Episodes & Location component so that we can change the episode number and location to search for characters. Let's start! 👇

Inside the category folder of Filter folder, create a new file named InputGroup.js and write this starter code including the props destructuring system: 👇

const InputGroup = ({ name, changeID, total }) => {
return <div className="input-group mb-3">
  <select
  onChange={(e) => changeID(e.target.value)}
  className="form-select"
  id={name}
  ></select>
</div>
};

Then, let's create our input group option. Write this code inside your select tag: 👇

<option value="1">Choose...</option>
{[...Array(total).keys()].map((x, index) => {
  return (
    <option value={x + 1}>
      {name} - {x + 1}
    </option>
  );
})}

Episodes.js

Inside this file, import these components: 👇

import React, { useEffect, useState } from "react";
import Card from "../components/Card/Card";
import InputGroup from "../components/Filter/category/InputGroup";

Now, create these states so that we can hold and change crucial information to fetch data from our api: 👇

const Episodes = () => {
  let [results, setResults] = React.useState([]);
  let [info, setInfo] = useState([]);
  let { air_date, episode, name } = info;
  let [id, setID] = useState(1);

let api = `https://rickandmortyapi.com/api/episode/${id}`;
}

Write this code to fetch data from our API: 👇

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    setInfo(data);

    let a = await Promise.all(
      data.characters.map((x) => {
        return fetch(x).then((res) => res.json());
      })
    );
    setResults(a);
  })();
}, [api]);

Now, let's write the code to render the results on our screen. First, let's display the Episode name and air date like this: 👇

return (
<div className="container">
  <div className="row mb-3">
    <h1 className="text-center mb-3">
      Episode name :{" "}
      <span className="text-primary">{name === "" ? "Unknown" : name}</span>
    </h1>
    <h5 className="text-center">
      Air Date: {air_date === "" ? "Unknown" : air_date}
    </h5>
  </div>
</div>
);

The results so far look like this: 👇

Now, let's display the character cards and input groups: 👇

<div className="row">
  <div className="col-lg-3 col-12 mb-4">
    <h4 className="text-center mb-4">Pick Episode</h4>
    <InputGroup name="Episode" changeID={setID} total={51} />
  </div>
  <div className="col-lg-8 col-12">
    <div className="row">
      <Card results={results} />
    </div>
  </div>
</div>

The results so far: 👇

Location

Making this component is similar to making episodes page. First, copy everything from the episodes page and make these few changes: 👇

  let [results, setResults] = useState([]);
  let [info, setInfo] = useState([]);
  let { dimension, type, name } = info;
  let [number, setNumber] = useState(1);

  let api = `https://rickandmortyapi.com/api/location/${number}`;

Now change only one keyword in the useEffect hook, from characters to residents, like this: 👇

useEffect(() => {
      // Other codes are here
      data.residents.map((x) => {
      })
    // Other codes are here
}, [api]);

In the return statement, make these changes: 👇

return (
<h1 className="text-center mb-3">
  Location :
  <span className="text-primary">
    {name === "" ? "Unknown" : name}
  </span>
</h1>
<h5 className="text-center">
  Dimension: {dimension === "" ? "Unknown" : dimension}
</h5>
<h6 className="text-center">Type: {type === "" ? "Unknown" : type}</h6>
);

And finally, make these changes for our InputGroup component: 👇

<InputGroup name="Location" changeID={setNumber} total={126} />

The results so far 👇

Dynamic Pages

This is the last step of our project. Our main gioal is to know more about a specific character when we click on the card. We're gonna be using the dynamic module system of react-router-dom – something like this: 👇

CardDetails.js

To accomplish our goals, we need to create a seperate component to display more details about the character. We will create a new file named CardDetails.js inside the Card folder.abs.

First, let's import the essential components:

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

Then, we need to store our api and use some useState hooks. We will use the useParams hook to get the id from the URL: 👇

const CardDetails = () => {
let { id } = useParams();
let [fetchedData, updateFetchedData] = useState([]);
let { name, location, origin, gender, image, status, species } = fetchedData;

let api = `https://rickandmortyapi.com/api/character/${id}`;
}

We'll use this useEffect hook to fetch data from our API: 👇

useEffect(() => {
  (async function () {
    let data = await fetch(api).then((res) => res.json());
    updateFetchedData(data);
  })();
}, [api]);

Now, let's write this code which will output the name and image of our character: 👇

return (
<div className="container d-flex justify-content-center mb-5">
  <div className="d-flex flex-column gap-3">
    <h1 className="text-center">{name}</h1>
    <img className="img-fluid" src={image} alt="" />
  </div>
</div>
)

Now, write this code in case you want to display the current status of every character: 👇

{(() => {
if (status === "Dead") {
  return <div className="badge bg-danger fs-5">{status}</div>;
} else if (status === "Alive") {
  return <div className=" badge bg-success fs-5">{status}</div>;
} else {
  return <div className="badge bg-secondary fs-5">{status}</div>;
}
})()}

Next up, write this code to display all the information about the character: 👇

<div className="content">
  <div className="">
    <span className="fw-bold">Gender : </span>
    {gender}
  </div>
  <div className="">
    <span className="fw-bold">Location: </span>
    {location?.name}
  </div>
  <div className="">
    <span className="fw-bold">Origin: </span>
    {origin?.name}
  </div>
  <div className="">
    <span className="fw-bold">Species: </span>
    {species}
  </div>
</div>

App.js

Next up, we need to define our paths so that our dynamic router component works properly. First, import and then add this code: 👇

import CardDetails from "./components/Card/CardDetails";
// other codes are here

<Routes>
  <Route path="/:id" element={<CardDetails />} />
  <Route path="/episodes/:id" element={<CardDetails />} />
  <Route path="/location/:id" element={<CardDetails />} />
</Routes>

Now, scroll down inside your App.js and make this small modification 👇 so that it refers to the home page:

<Card page="/" results={results} />

Card.js

Go to your card component and make these changes: 👇

• First, destructure the new props and import Link from react-router-dom

import { Link } from "react-router-dom";

const Card = ({ page, results }) => {}

• Next up, wrap everything inside the return statement inside a Link tag:

<Link
  style={{ textDecoration: "none" }}
  to={`${page}${id}`}
  key={id}
  className="col-lg-4 col-md-6 col-sm-6 col-12 mb-4 position-relative text-dark"
>
{/* Other codes are here */}
</Link>

Episodes.js

In this file, just adjust this small line: 👇

<Card page="/episodes/" results={results} />

Location.js

Just like in Episodes.js, just adjust this small line: 👇

<Card page="/location/" results={results} />

The results: ✨✨✨

Conclusion

Congratulations for reading until the end! Now you can easily and efficiently use React JS and Bootstrap to handle projects.

You have also learned how to fetch data from an API and map the results. Not only that, you also have a project to show your local recruiter.

Here's your medal for reading until the end ❤️

Suggestions and criticisms are highly appreciated ❤️

• LinkedIn/ JoyShaheb
• YouTube / JoyShaheb
• Twitter / JoyShaheb
• Instagram / JoyShaheb

Here's the project demo that we're gonna build 👇

Desktop design

Here's a small sample of how the form will work 👇

project sample

You can watch this tutorial on YouTube as well if you like:

Source code

You can get the source code, including the images, from here:

• CodePen
• GitHub

How to Setup the Project

Follow these steps to set up our project: 👇

• Create a new folder named "Project" and open VS Code
• Create index.html, style.css, and main.js files
• Link the files inside the HTML
• Download the images from my GitHub repository
• Paste this font-awesome link inside the head tag. Then, we can access Font Awesome icons 👇👇

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      crossorigin="anonymous"
    />

Here's what we'll cover:

• Writing the HTML
• Adding the CSS
• Writing the JavaScript
• Adding a social media button
• Adding the images
• Media queries for the mobile version (responsive)

Table of contents

How to Write the HTML

Create a class named .container inside the body tag and host the form tag which will have an id of form 👇

<div class="container">

    <form id="form"></form>

</div>

And inside the form tag, create 4 divs, like this 👇

<form id="form">

    <div class="title">Get Started</div>

    <div></div>
    <div></div>
    <div></div>

</form>

Inside those 3 empty div tags, let's create 3 inputs [Username, Email, and Password] along with the icons and labels.

Note: we are creating an .error class name. We will inject the error message here using JavaScript.

Username Input

<!-- User Name input -->

<div>
    <label for="username">User Name</label>
    <i class="fas fa-user"></i>

    <input
        type="text"
        name="username"
        id="username"
        placeholder="Joy Shaheb"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

Email Input

<!-- Email input -->

<div>
    <label for="email">Email</label>
    <i class="far fa-envelope"></i>

    <input
        type="email"
        name="email"
        id="email"
        placeholder="abc@gmail.com"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

Password Input

<!--   Password input -->

<div>
    <label for="password">Password</label>
    <i class="fas fa-lock"></i>

    <input
        type="password"
        name="password"
        id="password"
        placeholder="Password here"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

How to make the button

Finally, add the button before the form closing tag like this:

<form>
    <!-- other codes are here -->

    <button id="btn" type="submit">Submit</button>

</form>

Here's the result so far 👇

Result So far

Congrats on completing the HTML part! 🍾🎉🥂

How to Add the CSS

Let's add the CSS to style our form. First, let's remove the default styles of our browser including the font-family👇

/**
* ! changing default styles of brower
**/

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

body {
  font-family: sans-serif;
}

Now, apply these styles for the form tag:

/**
* ! style rules for form section
**/

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}

Next, make these changes for our title text: 👇👇

.title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

Your result so far 👇👇

Result so far

Now, add a margin to the bottom of our label text like this:

label {
  display: block;
  margin-bottom: 5px;
}

And add these styles to change the look and feel of our input tags 👇👇

form div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

Add this code to add some space and color changing effects:

form div {
  position: relative;
  margin-bottom: 15px;
}

input:focus {
  border: 2px solid #f2796e;
}

The result so far 👇👇

Result so far

How to Style the Icons

Now we're gonna style the icons which we imported from font-awesome. Follow along with the code: ✨✨

/**
* ! style rules for form icons
**/

form div i {
  position: absolute;
  padding: 10px;
}

Here's the result of adding those two lines 👇👇

Result so far

Now, add these styles to style the error class, along with the success and failure icons 👇👇

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}

Here's the result so far 👇👇

Result so far

Look, the success and failure icons are overlapping each other. Don't worry, we will manipulate those in JavaScript. For now, you can hide them like this👇👇

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}

Now, let's style our submit button, like this 👇

/* Style rules for submit btn */

button {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #f2796e;
  border: 2px solid #f2796e;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

If you want to add a hover effect, then sure, add these styles 👇👇

button:hover {
  opacity: 0.8;
}

Take a Break!

So far so good. Take a break – you deserve it.

How to Add the JavaScript

First, we need to target all our classes and id from the HTML inside the JavaScript. To do this task efficiently, make these two functions 👇👇

let id = (id) => document.getElementById(id);

let classes = (classes) => document.getElementsByClassName(classes);

Then, store the classes and id inside these variables 👇

Note: Try not to make spelling mistakes. Otherwise, your JavaScript will not work.

let username = id("username"),
  email = id("email"),
  password = id("password"),
  form = id("form"),

  errorMsg = classes("error"),
  successIcon = classes("success-icon"),
  failureIcon = classes("failure-icon");

Now, we're gonna target our form and add the submit event listener 👇

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

Now, we will create a function named engine which will do all sorts of form validation work for us. It will have three arguments – follow along here: 👇

let engine = (id, serial, message) => {}

The arguments represent the following:

• id will target our id
• serial will target our classes [error class, success and failure icons]
• message will print a message inside our .error class

Now create an if, else statement like this 👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
  } 

  else {
  }
}

Note: the id.value.trim() will remove all the extra white spaces from the value which the user inputs. You can get an idea of how it works by looking at this illustration 👇

trim() used to remove extra spaces

Now, look at our objectives 👇

• We want the JavaScript to print a message inside the error class whenever the user submits a blank form. At the same time, we want the failure icons to highlight as well.
• But, if the user fills in all the inputs and submits it, we want the success icon to be visible.

To accomplish this, write this logic 👇 to print the message:

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
  } 

  else {
    errorMsg[serial].innerHTML = "";
  }
}

For the icons to work properly, add this code: 👇👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.style.border = "2px solid red";

    // icons
    failureIcon[serial].style.opacity = "1";
    successIcon[serial].style.opacity = "0";
  } 

  else {
    errorMsg[serial].innerHTML = "";
    id.style.border = "2px solid green";

    // icons
    failureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
  }
}

Time to implement our newly created function. Write these inside the place where we added the submit event listener 👇

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

  engine(username, 0, "Username cannot be blank");
  engine(email, 1, "Email cannot be blank");
  engine(password, 2, "Password cannot be blank");
});

Here, we are passing the id names, serials of our class names, and passing the message which should be printed when we find an error when the user submits the form.

Here are the results so far 👇

The Result so far

How to Add the Social Media Buttons

So far so good, let's add social media sign up options. Follow along here. 👇

Inside the form tag, create a new div with the class name social:

<form id="form">

    <div class="social">

      <div class="title">Get Started</div>

      <div class="question">
        Already Have an Account? <br />
        <span>Sign In</span>
      </div>

      <div class="btn"></div>

      <div class="or">Or</div>
    </div>

    <!-- other codes are here-->
</form>

Inside the .btn class, we create two more divs with class names .btn-1 and .btn-2 with the images and text as well

<div class="btn">
  <div class="btn-1">
     <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
     Sign Up
  </div>

  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
     Sign Up
   </div>
</div>

Here are the results so far 👇👇

The Result so far

Now, let's style the .btn-1 and .btn-2 first. We'll change the alignment of the buttons to row from column 👇

/**
* ! style rules for social section
**/

.btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}

Here's what it looks like now:

The Result so far

Now, add styles for the button like this: 👇

.btn-1,
.btn-2 {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 2px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

Change the icon color and text color of .btn-2 like this: 👇

.btn-2 {
  background-color: #4f70b5;
  color: white;
}

Then add these small changes to make the component look better:

.or {
  text-align: center;
}

.question {
  font-size: 15px;
}

span {
  color: #f2796e;
  cursor: pointer;
}

The result so far:

Result so far

How to Add the Images

Now, let's add images to our project. First, let's write the HTML 👇

<div class="container">

      <div class="content">
        <div class="logo">
          <img src="https://svgshare.com/i/_go.svg" alt="" />
        </div>

        <div class="image"></div>

        <div class="text">
          Start for free & get <br />
          attractive offers today !
        </div>  
      </div>

   <form id="form">
   <!--other codes are here -->
   </form>

</div>

The result so far 👇

Result so far

Now we need to change the orientation of our content from column to row. Follow along 👇

.container {
  display: flex;
  flex-direction: row;
}

Add these style rules for the content section:

/**
* ! style rules for content section
**/

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f2796e;
  width: 55%;
  min-height: 100vh;
  padding: 10px 20px;
}

form {
   width: 45%;
   max-width: none;
}

The result so far 👇

Result so far

Add the main illustration in CSS:

.image {
  background-image: url("https://svgshare.com/i/_gZ.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* border: 2px solid black; */
  height: 65%;
}

And add these styles for the .text class:

.text {
  text-align: center;
  color: white;
  font-size: 18px;
}

form {
   width: 45%;
   max-width: none;
}

The result so far 👇

Result so far

How to Add Media Queries for the Mobile Version

We want to make this responsive. So we'll add media queries to help us with that.

For screens with a width from 900px, we will add these styles. Follow along 👇👇

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  form,
  .content {
    width: 100%;
  }

  .btn {
    flex-direction: column;
  }
  .image {
    height: 70vh;
  }
}

For screens with a width from 425px, we will make these minor changes 👇

@media (max-width: 425px) {
  form {
    padding: 20px;
  }
}

Here's the final result 👇👇

The final result

Conclusion

Congratulations !

Congratulations for reading until the end. Now you can easily and efficiently use JavaScript to handle form validation. Not only that, you also have a project to show your local recruiter!

Here's your medal for reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

• LinkedIn/ JoyShaheb
• YouTube / JoyShaheb
• Twitter / JoyShaheb
• Instagram/ JoyShaheb

Let's start. 💖

Table of Contents

• Why learn relative units?
• What are REM Units?
• How to make responsive websites with REM units
• What are EM Units?
• What are VW units?
• What are VH units?
• Additional Resources

Topics covered

You can watch this tutorial on YouTube as well if you like:

Why Learn CSS Relative Units?

If you want to make responsive websites very easily, quickly, and efficiently, then you should definitely learn the relative units of CSS.

REM, EM, VW, VH are relative units. If you Combine these with media queries, then you can make perfectly scalable layouts. Look at this GIF 👇 The text is responsive on desktop, tablet, and mobile screens!

Font using the REM unit

Keep in mind that pixels are absolute units. They won't change when you resize the window. Look at this GIF 👇 Notice that the font size of 50px doesn't change when we resize the window.

Font using the Pixel unit

Tip: Before starting the tutorial, I suggest that you don't think of EM and REM as units. Think them as multipliers of a base number.

Project Setup

First, copy the code from this Code Pen link and paste it into VS Code or your code editor of choice. Then follow these steps:👇

• create a folder named project-1
• create HTML, CSS, JS files and link them together
• install the plugins we'll need – px to rem and Live server
• Run live server

Testing starter files

As you can see in the gif above, 👆 the JavaScript is doing all the calculations, so we just need to focus on the tutorial. We will just change the CSS and experiment with different values.

Let's start coding!

What are REM Units?

The REM unit depends on the root element [the HTML element]. Here's an image to show you how it works:👇

Default font size of root element

The default font-size of the root element [in HTML] is 16px. So, 1 REM = 16px.

If we write 3 rem, it will show us [ 3*16px = 48px ]. So as you can see, it works like a multiplier.

experimenting with 3 rem

But, if we change the root element font size, the REM unit changes – like this: 👇

changed font size of root element

We're setting the HTML font-size to 50px.

Now, if we write 3 rem, it will show us [ 3*50px = 150px ] like this: 👇

experimenting with 3 rem

Let's recreate the results with code and see their use cases in practice. 👇

First, let's experiment with the default font-size of every website, which is 16 pixels. And we'll set the .text class font-size to 1 rem.

html {
  font-size: 16px;
}

.text {
  font-size: 1rem;
}

/** Calculations 
 1 rem * 16px = 16px
**/

Here's what the result looks like:👇

Font-size is 1rem, root is 16px

Now, let's increase the .text font-size to 2 rem:

html {
  font-size: 16px;
}

.text {
  font-size: 2rem;
}

/** Calculations
 2 rem * 16px = 32px
**/

And here's the result: 👇

Font-size is 2 rem, root is 16px

As you can see, the font size gets bigger but the width stays the same (1536px).

How to change the root font-size

Now, let's experiment by changing the root font-size, which is inside the html. First write this code to get the default result: 👇

html {
  font-size: 16px;
}

.text {
  font-size: 1rem;
}

/** Calculations
 1 rem * 16px = 16px
**/

Here's what that looks like:👇

Default setting

Now, change the root font-size to 40px like this:

html {
  font-size: 40px;
}

.text {
  font-size: 1rem;
}

/** Calculations
 1 rem * 40px = 40px
**/

Here's the result:👇

root element is 40px

Now, change the .text font size to 2 rem: 👇

html {
  font-size: 40px;
}

.text {
  font-size: 2rem;
}

/** Calculations
 2 rem * 40px = 80px
**/

And you can see the result: 👇

The result

Since we changed the root font size to 40px, when we change the .text font size to 2 rem, we get 2*40 = 80px.

How to Make Responsive Websites with REM Units

Making responsive websites with the REM unit is very easy. Just write your styles in rem units instead of the pixels and change the root elements at different breakpoints using media queries.

Here's a demo that shows you how it's done👇 and how to add the media queries:

// large screen 

@media (max-width: 1400px) {
  html {
    font-size: 25px;
  }
}

// Tablet screen 

@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}

// Mobile screen 

@media (max-width: 450px) {
  html {
    font-size: 12px;
  }
}

Now, set the .text class to 3 rem units, like this:

.text{
    font-size : 3rem;
}

And here's the result: 👇

Here are the calculations:

• For the large screen -> 3 rem * 25px = 75px
• For tablet screen -> 3 rem * 18px = 54px
• For mobile screen -> 3 rem * 12px = 36px
• Default setting -> 3rem * 16px = 48px

What are EM Units?

The EM unit is the same as the REM unit but it depends on the parent font size. Here's a demo. 👇

Note: make sure you remove all the media queries.

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
}

/** Calculations
  font-size should be 
  3 em * 16px = 48px
**/

Here's the result: 👇

Now, let's try adding 3em padding to the .text class.

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
  padding: 3em;
}

/** Calculations
text    => 3em * 16px = 48px
padding => 3em * 3em * 16px = 144px
**/

Instead of being 48px of padding, we are getting 144px padding. As you can see, it is getting multiplied by the previous number.

result of 3em padding

Here's the computed part from the developer console: 👇

3em padding to our text

Don't use the EM unit 😵❌

Using the EM unit is not worth the effort because:

• you have a high chance of making a calculation error
• you have to write a lot of code in media queries while trying to make the website responsive on all screen sizes
• it's too time-consuming.

What are VW Units?

The full form of VW is viewport width. It works like the percentage unit. Specifying 10vw is equivalent to occupying 10% of entire visible screen width.

To experiment with the results, make these changes in your CSS👇

Note: comment the last line on the .box class.

.text {
  display: none;
}

.box {
  width: 50vw;

  height: 300px;
  /* display: none; */
}

If you look carefully, you can see that 50vw means 50%, which will cover half of the entire screen width.

In the JavaScript part, uncomment this line at the very end: 👇

  // Box Width & height

  box.innerHTML = "Width : " + Box_width;

  // box.innerHTML = "Height : " + Box_height;

The result looks like this:👇

50vw occupies 50% of screen width

As you can see, that element will always cover that much space even if we resize the window

resizing box which is 50vw in size

What are VH Units?

The full form of VH is viewport height. It works like the percentage unit as well. Specifying 10vh is equivalent to occupying 10% of entire visible screen height.

Look at this demo to see how it works:👇

.text {
  display: none;
}

.box {
  width: 300px;

  height: 50vh;
   /* display: none; */
}

If you look carefully, you can see that 50vh means 50%, which will cover half of the entire screen height.

In the JavaScript part, uncomment this line at the very end: 👇

  // Box Width & height

  // box.innerHTML = "Width : " + Box_width;

  box.innerHTML = "Height : " + Box_height;

Also, make these changes:👇

  // Screen Size (Width & height)

  // size.innerHTML = "Width : " + Width + " px";
  size.innerHTML = "Height : " + Height + " px";

And here's the result: 👇

50vh occupies 50% of screen Height

As you can see, it will always cover that much space even if we resize the window.

resizing box which is 50vh in size

That's it!

Conclusion

Congratulations! Now, can confidently use the REM, EM, VW, and VH units to make perfectly responsive websites.

Here's your medal 🎖️ for successfully reading till the end. ❤️

Additional Resources

• Complete Media query tutorial

Credits

• Images from Freepik

Suggestions & Criticisms are Highly Appreciated ❤️️

• YouTube / JoyShaheb
• LinkedIn / JoyShaheb
• Twitter / JoyShaheb
• Instagram / JoyShaheb

We're also going to see some practical use cases for these properties. Let's get started 💖

Table of Contents

• Why learn CSS Box Model?
• CSS Box-Model Diagram
• The Padding Property
• The Border Property
• The Margin Property
• The box-sizing Property.
• Content-box VS Border-box

Topics covered

You can watch this tutorial on YouTube as well if you like:

Why learn CSS Box Model?

The CSS box model comprises the box-sizing, padding and margin properties. If you don't use them, your website will look like this 👇

A website with no margin or padding

But if you use the box model properties correctly, your website will look like this 👇

A website using box model properties

Much more visually appealing, right? If you want to make your website with accurate calculations, like the one above 👆 then this topic is for you. Learning about the CSS box model is one of many ways that will help you make pixel perfect websites.

This article will talk about how to use these properties:

• Padding
• Margin
• Border
• box-sizing

How to Use CSS box-model Properties

Let's look at some examples of where we can use the properties of the CSS box-model. We're gonna dissect the website shown above. 👆

Let's have a closer look at the navbar. You can notice the difference between the example that uses the padding property and the one that doesn't:

Navbar items using the padding property

Now let's have a closer look to the content section along with the buttons. Again, you'll notice the difference – the right one is also using the padding property.

A content section using the padding property

CSS Box-Model Diagram

Think of the CSS box-model like an onion. It has 4 Layers:

• 1st layer: Content
• 2nd layer: Padding
• 3rd layer: Border
• 4th layer: Margin

1st box-model layer: Content

In HTML, everything behaves like a box. Let's insert some content with a kitty image. 👇

1st layer of the box model: content

2nd box-model layer: Padding

The next layer of the CSS box model is the padding layer. It wraps our content like this 👇

2nd layer of the box model: padding

3rd box-model layer: Border

The next layer of the CSS box model is the border layer. It wraps our content + padding like this 👇

The black dashed line is the border

4th box-model layer: Margin

The next and final layer of the CSS box model is the margin layer. It wraps our content + padding + border like this 👇

Grey Region is The Margin

Alright, let's see how these properties work in a project.

How to Setup the Project

This tutorial is good for everyone including beginners. If you want to code along, then follow these steps.

HTML

Open VS Code or Codepen.io and write this code 👇 inside the body tag:

<div class="box-1"> Box-1 </div>

CSS

Clear the default styles of our browser 👇

* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

Now, let's style our box 👇

.box-1 {
  width: 300px;
  background-color: skyblue;
  font-size: 50px;
}

We're all set, let's start coding! ✨

The Padding Property

But first, let's discuss the practical uses of the padding property. Then, we'll see how to use this property.

Generally, I use padding to put some space between contents. Look at this navbar 👇

Navbar items using padding property

Here's another example for you – look at the below content, with two buttons👇

content section using padding property

How to use the padding property in CSS

This is the shorthand of the four padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

Shorthand of padding property

And remember, padding is the space you add on top of your main content:

2nd Layer of Box-Model : Padding

Let's add some padding to our content. The red colored area is the padding 👇

The red colored area is padding

In order to recreate the results above, ☝ write this code in your CSS: 👇

// Padding added on top, right, left, bottom of .box-1

.box-1{
   padding : 100px;
}

Let's open our developer console and go to the computed section:

Computed CSS Box model

At the very middle is our content which is 300px in width. Look around our content, we have added 100px padding all around it.

Let's try adding padding to just 1 side of our content (only the right side):

padding-right property

In order to recreate the results above, ☝ write this code in your CSS: 👇

.box-1{
   padding: 0 100px 0 0;
}

// Or you can use 👇

.box-1{
   padding-right: 100px;
}

Now, open the computed section on your developer console 👇

Computed CSS Box model

Look – the padding of 100px has only been added on the right side of our content as we specified.

The Border Property

You'll commonly use the border property while making buttons. Here's a GIF demo 👇

Buttons using the border property

Notice how a white colored border shows around the button when I hover the mouse over the button.

How to use the border property in CSS

And remember, the border is the space added on top of our main content + padding: 👇

The black dashed line is the border

There are three crucial inputs of the border property:

• border size
• border style : solid / dotted/ dashed
• border color

Border property syntax

There are three styles of border property as I listed above. In this example, we'll use the dashed style:

To recreate the results above, write this code in your CSS: 👇

.box-1 {
  width: 300px;
  font-size: 50px;
  padding: 50px;
  border: 10px dashed black;
}

Let's open our console and see the box model calculations:

Computed CSS box model

Now look at the above image☝ – a 10px border is added all around our content + padding.

The Margin Property

Generally, I use the margin property to put some whitespace between my content and the main screen on the desktop layout (large screens). Look at this GIF: 👇

Adding margin to a website

Notice that I'm adding the margin to the left and right edges of my website above 👆

Here's another sample GIF of a use case of the margin property: 👇

Adding margin to a website

How to use margin property in CSS

This is the shorthand for the four properties of the margin property:

• margin-top
• margin-right
• margin-bottom
• margin-left

Shorthand of the margin property

And remember, margin is the space added on top of our main content + padding + border:

The grey region is the margin

Let's add a margin to our content. The content is getting pushed due to the Margin in this GIF:👇

Content getting pushed due to margin

To recreate the results above, write this code in your CSS: 👇

.box-1 {
  padding: 50px;
  border: 10px dashed black;

  margin: 50px;
}

We can check the calculations again: 👇

Computed CSS box model

Look, a 50px margin has been added all around our content + padding + border.

Let's try adding a margin to just 1 side of our content (only the left side):

The margin-left property

To recreate the results above, write this code in your CSS 👇

.box-1 {
  padding: 50px;
  border: 10px dashed black;

  margin-left: 50px;
}

On the console, we can see that a 50px margin got applied only on the left side 👇

Computed CSS Box Model

Take a Break!

So far so good – take a break! You deserve it 💖

The Box-sizing Property

This property defines how our margin, padding, and borders will be calculated. There are three types of calculations (you can call them values):

• border-box
• padding-box
• content box

Note:

We're not gonna discus box-sizing: padding-box, as only Firefox supports it and it isn't used very often.

What is the difference between content-box and border-box in CSS?

Both border-box and content-box work in the same way. Look at these images:👇

Boxes using the border-box value

Boxes using the content-box value

So, what's the main difference here? The difference is noticeable when we are adding margin, border, or padding to our boxes.

When we are using the box-sizing: content-box, which is the default value, it will add a margin, padding, and borders outside the box, like this: 👇

Padding getting applied outside the box

You can see the calculations here as well: 👇

Calculations with content-box

Which means that things can get out of control and you'll see unexpected calculations. This means that it's hard to make responsive websites. Always use the box-sizing: border-box property instead.

But when we are using the box-sizing: border-box property, it will add a margin, padding, and borders inside the box, like this:👇

Padding getting applied inside the box

The box-sizing: border-box property shows us the EXACT calculations of our HTML elements, which means that this value is ideal for making responsive websites.

You can experiment with the values as well – just follow along with this code: 👇

* {
  box-sizing: border-box;
}

/* Or, Write 👇 */

* {
  box-sizing: content-box;
}

Conclusion

Congratulations! You can now make pixel perfect websites. Not only that, but when you're coding, you can figure out why your content is behaving strangely.

Here's your medal for reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Credits

• Images from Freepik

Table of Contents

• Why you should use the CSS box-shadow property
• The syntax of the box-shadow property
• How to make a button using the box-shadow property
• Additional Resources
• What is inset in CSS Box shadow property?

You can watch this tutorial on YouTube as well if you like:

Why Should You Use The CSS box-shadow Property?

Attention to small details separates a good website from an excellent looking website. If you want to add those small details to your website, you should definitely use this property along with many other properties.

Let's took at some examples. 👇

A Website Design

Pay close attention to the button components in the image above. You'll see that we have some drop shadows. ☝

Let's examine these buttons even further: 👇

Button with no box-shadow property

Button using the box-shadow property

You can tell that the latter one looks more dynamic and interesting, as it has more attention to detail. This is called a drop shadow effect. Let's see how we can implement it in our code.

Project Setup

HTML

Write this code inside the body tag: 👇

<div class="box-1"> A Button </div>

CSS

Clear your default browser settings like this:

*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-family: sans-serif;
}

Now, let's create a button with the following code:👇

.box-1{
   margin: 100px 0 0 100px;
   height: 80px;
   width: 200px;
   border: 2px solid black;
   border-radius: 8px;
   font-size: 40px;

   display: grid;
   place-content: center;
}

We're all set, now let's start coding!

The Syntax of the box-shadow Property

All the inputs of box-shadow property

Here's the syntax for the box-shadow property: 👇

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color ;

Let's look at each part in more detail.

How to Use Offset-x in the box-shadow Property

You'll use the offset-x property to move the shadow left and right along the X-Axis. Here's a demo to show you how that looks:👇

We can move the shadow left & right

The recreate these results, write the following code in your CSS: 👇

/* offset-x | offset-y | color */
.box-1{
   box-shadow: -50px 0px rgba(0,0,0,0.5);
}

/*Or, you can write*/

.box-1{
   box-shadow: 50px 0px rgba(0,0,0,0.5);
}

How to Use Offset-y in the box-shadow Property

You'll use the offset-y property to move the shadow up and down along the Y-Axis. Here's a demo of how that looks:👇

We can move the shadow top & bottom

To recreate these results write the following in your CSS: 👇

/* offset-x | offset-y | color */
.box-1{
   box-shadow: 0px -50px rgba(0,0,0,0.5);
}

/*Or, you can write*/

.box-1{
   box-shadow: 0px -50px rgba(0,0,0,0.5);
}

How to Combine Both offset-x and offset-y

Write the following code in your CSS: 👇

.box-1{
   box-shadow: 10px 10px rgba(0,0,0,0.5);
}

Here's the result with the box shadow showing on the right and bottom of the button: 👇

Our button with box shadow

How to Use blur-radius in the box-shadow Property

The blur-radius property will blur the color around our button, like this:👇

Experimenting w/ blur radius

To duplicate the results, write the following in your CSS: 👇

/* offset-x | offset-y | blur-radius | color */

.box-1{
/* play around with 👇 this */
   box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

How to Use spread-radius in the box-shadow Property

This value spreads our shadow around our button, like this: 👇

Experimenting w/ spread radius

Let's recreate the results with the following CSS code:

/* offset-x | offset-y | blur-radius | spread-radius | color */

.box-1{
/*  play around with 👇 this */
   box-shadow: 0 0 0 50px rgba(0,0,0,0.5);
}

How to Add a Drop Shadow to a Button

Let's put together what we've learned so far and add a drop shadow effect to our button: 👇

.box-1{
   box-shadow: 8px 10px 10px 1px rgba(0,0,0,0.5);
}

The result looks like this: 👇

The result

Additional Resources

• [GetCssScan] - To get readymade box shadows
• [keyframes.app] - to test and practice these properties in real time
• flatuicolors - Beautiful color palettes

✨ Bonus Tip ✨

What is Inset in the CSS box-shadow Property?

There's a keyword named inset that you can use with the box-shadow property. This puts the shadow inside our button instead of spreading it around the outside. Write this CSS code to experiment with it:👇

.box-1{
   box-shadow: inset 8px 10px 10px 1px rgba(0,0,0,0.5);
}

Here's the result: 👇

Effect of the inset keyword

Conclusion

Now you can confidently use the box-shadow property to add not only drop shadows but also to add more attention to detail to your projects.

Here's your medal for reading till the end. ❤️

Suggestions and criticisms are highly appreciated ❤️

• YouTube / Joy Shaheb
• LinkedIn / JoyShaheb
• Twitter / JoyShaheb
• Instagram / JoyShaheb

Credits

• Young Girl
• Cute Kat, Unicorn cat

Table of contents

• What is CSS Position Property?
• What is the Static Position in CSS?
• What are the Relative and Absolute Positions in CSS?
• What is the Fixed Position in CSS?
• What is the Sticky Position in CSS?

You can watch this tutorial on YouTube as well if you like:

What is the position property in CSS?

If you want to make stunning websites that looks artistic, unique, and beautiful, then you should definitely learn how to use the CSS position property. Let's see how it works.

Using Flexbox or Grid, you can make a symmetrical website like this: 👇

Website made w/ Flexbox

With the position property, you can make an asymmetrical website like this:👇

Website made w/ Grid & position properties

You can't place your content anywhere you wish using Flexbox and Grid. You're limited around the X and Y Axis. Look at this drawing to see what I mean: 👇

Symmetrical content layout showing elements placed respective to the x and y axis

Your boxes will follow these exact measurements. 👆

But, using the position property, you can place your content anywhere you wish by detaching each element from the other elements.

Asymmetrical content layout showing elements placed irrespective of x and y axis.

You can place your boxes anywhere you wish with this sort of layout. 👆 In other words, you will have free movement around your screen.

Here's another example of what you can make using the position property:

An Asymmetrical Website

You can place or move those little dots and waves patterns and donut image all around the page ☝ anywhere you wish using the position property.

Project Setup

For this project, you can use any code editor that has the emmet plugin installed. I'm gonna use CodePen.io.

HTML

Inside the body tag, write this code: 👇

<div class="box-1"> </div>

CSS

Clear your default browser settings and add this CSS:👇

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

Style the box-1 class like this:👇

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Our position property has 5 values:

1. relative
2. absolute
3. static
4. fixed
5. sticky

To move our box, we'll use 4 properties:

• Top, Bottom
• Left, Right

What is the Static Position in CSS?

This has no use cases. This is the default value of every element.

Default position of every element

What are the Relative and Absolute Positions in CSS?

Both the relative position and absolute position work in the same way except in one field. We use relative to identify the parent class. And we use absolute to identify the children classes.

Position VS relative position

Let's look at 2 examples 👇

First, let's experiment with the relative value. Try out this code:

.box-1{
/* Other codes are here*/

   position: relative;
   left: 100px;
}

This is the result you'll get:👇

We can duplicate the same result using the absolute value like this: 👇

.box-1{
/* Other codes are here*/

   position: absolute;
   left: 100px;
}

Let's investigate the main difference between relative and absolute positions.

Relative vs Absolute Position in CSS

HTML

Write this code inside your HTML: 👇

<body>
   <div class="box-1">

       <div class="box-2"> </div>    

   </div>
</body>

CSS

Style the boxes with the following CSS:👇

.box-1{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    border: 2px solid black;
    margin: auto;
}

.box-2{
    width: 100px;
    height:100px;
    background-color: pink;
    border: 2px solid black;
}

It should look like this:👇

The result is a blue box with a smaller pink box in the upper left

Now, we'll select our classes like this: 👇

body{ }

.box-1{ }

.box-2{ }

Now, write this code in your CSS: 👇

body{

}

.box-1{
/* This is the  👇 parent */
    position: relative;
}
.box-2{
/* This is the  👇 child */
    position: absolute;
    left: 100px;
}

Here's the result: 👇

The result is that the pink box has moved right 100px

Notice that .box-2 has moved 100px from .box-1.

This is because .box-1 is the parent and .box-2 is the child.

Let's change it again. Write this code in your CSS:

body{
/* This is the  👇 parent */
   position: relative;    
}

.box-1{

}
.box-2{
/* This is the  👇 child */
   position: absolute;
    left: 100px;
}

Now here's the result: 👇

The result is that the pink box has moved 100px from the body

Notice that .box-2 has moved 100px from the body element.

This is because the body is the parent and .box-2 is the child.

What is the Fixed Position in CSS?

This value will fix the position of your element on the screen even when you scroll in the browser. Let's look at some examples to see how it works.

Fixed position example

Write this code in your HTML. 👇 Once you write lorem200, make sure to hit the Tab key on your keyboard:

<div class="container">

    <p>lorem200</p>

    <div class="box-1"> fixed </div>

    <p>lorem200</p>        

</div>

And here's the CSS:

.container{
    height: 3000px;
}

.box-1{
    height: 120px;
    width: 120px;
    background-color: skyblue;
    border: 2px solid black;

    display: grid;
    place-content: center;
}

Then add this CSS at the bottom:

.box-1{

    position: fixed;
    top: 100px;
    left: 200px;
}

Here's the result:👇

You can see that the element remains fixed even when we scroll our browser.

What is the Sticky Position in CSS?

After scrolling to a certain point on our screen, this value will fix the position of our element on the screen so it doesn't move.

Sticky position example

Don't change anything in your current HTML and CSS except this one value:

.box-1{
/*  Play with  👇 this value */
   position: sticky;
   top: 30px;
   left: 200px;
}

Here's the result: 👇

You can see that after a certain scroll point, the element remains fixed at the exact top of our browser screen.

You can check out these websites to see how the sticky position works on actual websites.

• AwakeBoards
• Ferme
• LATORRE

Conclusion

Now, you can confidently make beautiful websites and solve simple layout problems using the position property.

Here's your medal for reading till the end. ❤️

Suggestions and Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Credits

• Cute Girl Illustration
• Kitty Avatar

#

Table of Contents ->

• How to Use Flexbox to
  • center anything horizontally
  • center anything vertically
  • center both horizontally & Vertically
• How to Use Grid to
  • center anything horizontally
  • center anything vertically
  • center both horizontally & Vertically
• The Transform & position property
• The Margin Property
• Additional resources
• Conclusion

Methods

You can watch this tutorial on YouTube as well if you like:

But.... Wait A Minute!

First of all, let's understand:

• Main Axis
• Cross Axis

What is the Main Axis in CSS?

You can also call it the:

• X-Axis
• Main Axis
• Horizontal Line

The line from left to right is the Main-Axis.

Main Axis

What is the Cross Axis in CSS?

You can also call it the:

• Y-Axis
• Cross Axis
• Vertical Line

The line from top to bottom is the Cross-Axis.

Cross Axis

Project Setup

To experiment with all the properties and values, write the following code in your code editor.

HTML

Write this code inside the body tag:

<div class="container">

   <div class="box-1"> </div>

</div>

CSS

Clear the default browser styles so that we can work more accurately:

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

Select the .container class and set it to 100vh. Otherwise, we can't see our result on the Vertical Axis:

.container{
   height: 100vh;
}

Style the .box-1 class like this:

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

We're all set, now let's start coding!

How to use Flexbox to center anything

We can use Flexbox to align our content div both along the X and Y Axis. To do that, we need to write the display: flex; property inside the .container class:

.container{
   display: flex;

   height: 100vh;
}

We'll experiment with these 2 properties:

• justify-content
• align-items

How to center anything horizontally using Flexbox

We can use the justify-content property to do this using these values 👇

values of flexbox justify-content property

To experiment with the values, write the following code👇

.container{
   display: flex;
   height: 100vh;

 /* Change values to  👇 experiment*/
   justify-content: center;
}

The result will look like this👇

result of justify-content flexbox

How to center anything vertically using Flexbox

We can use the align-items property to do this using these values 👇

values of Flexbox align-items property

To experiment with the values, write the following code👇

.container{
   height: 100vh;
   display: flex;

 /* Change values 👇 to experiment*/
   align-items: center;
}

The result looks like this👇

Result of align-items flexbox

How to center a div horizontally & vertically using Flexbox

Here, we can combine both the justify-content and align-items properties to align a div both horizontally and vertically.

Write the following codes👇

.container{
   height: 100vh;
   display: flex;

/* Change values 👇 to experiment*/
   align-items: center;
   justify-content: center;
}

The result looks like this 👇

Centering a div Horizontally & vertically

You can check out this cheatsheet to learn more about various Flexbox properties.

How to use CSS Grid to center anything

We can use grid to align our content div both along the X and Y Axis. To do that, we need to write the display: grid; property inside the .container class:

.container{
   display: grid;

   height: 100vh;
}

We'll experiment with these 2 properties:

• justify-content
• align-content

Alternatively, you can use these 2 properties:

• justify-items
• align-items

How to center anything horizontally using CSS Grid

We can use the justify-content property to do this using these values 👇

values of Grid justify-content property

Write the following code 👇

.container{
   height: 100vh;
   display: grid;

  /* Change  values   👇 to experiment*/
   justify-content: center;
}

The result looks like this👇

result of justify-content grid

How to center anything vertically using CSS Grid

We can use the align-content property to do this using these values 👇

Values of CSS grid align-content property

Write the following code 👇

.container{
   height: 100vh;
   display: grid;

  /*  Change values 👇 to experiment*/
   align-content: center;
}

The result will look like this👇

result of align-content grid

How to center a div horizontally & vertically using CSS Grid

Here, we can combine both the justify-content and align-content properties to align a div both horizontally and vertically.

Write the following code 👇

.container{
   height: 100vh;
   display: grid;

/* Change  values  👇 to experiment*/
   align-content: center;
   justify-content: center;
}

The result looks like this👇

Centering a div Horizontally & vertically with Grid

Alternative way

You can also use the justify-items and align-items properties to duplicate the same results:

.container{
   height: 100vh;
   display: grid;

/* Change  values  👇 to experiment*/
   align-items: center;
   justify-items: center;
}

The place-content Property in CSS Grid

This is the shorthand of 2 properties of CSS Grid->

• justify-content
• align-content

Follow along 👇

.container{
   height: 100vh;
   display: grid;

   place-content: center;
}

We get the same result 👇

Centering a div Horizontally & vertically

Check out this cheatsheet to find out the difference between various Grid properties.

Take a break!

So far so good – take a break.

How to use the CSS Position Property to center anything

This is a combination of these properties ->

• position
• top, left
• transform, translate

Write the following code 👇

.container{
   height: 100vh;
   position: relative;
}

Along with this:

.box-1{
   position: absolute;

   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

First... Understand the center point of a div

By default, this is the center point of a div 👇

Default Center point of a div

That's why we see this odd behavior 👇

Box is not at exact center

Notice that the box is not at the exact center in the image above. 👆

By writing this line 👇

transform: translate(-50%,-50%);

We fix the problem 👇

New Center point of our div

And we get this result 👇

Box is at exact center point

What is the Translate property in CSS?

Translate is the shorthand of 3 properties ->

• translateX
• translateY
• translateZ

How to center a div horizontally using CSS Position property

We're gonna use the left property inside the.box- class. Follow along 👇

.box-1{
/* other codes are here*/    

   left: 50%;
   transform: translate(-50%);
}

And we get this result 👇

result of left & transform property

How to center a div vertically using CSS Position property

We're gonna use the top property inside thebox- class. Follow along 👇

.box-1{
/* Other codes are here*/    

   top: 50%;
   transform: translate(0,-50%);
}

And we get this result 👇

result of top & transform property

How to center a div horizontally & vertically using CSS position property

To achieve this result, we're gonna combine these properties together ->

• top, left
• transform, translate

Follow along 👇

.box-1{
/*Other codes are here */    

   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

And we get this result 👇

result of position & transform property

How to use the margin Property to center anything

The margin property is the shorthand of 4 properties

• margin-**top**, margin-**bottom**
• margin-**left**, margin-**right**

Write this code to set it up 👇

.container{
   height: 100vh;

   display: flex;
}

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

How to center a div horizontally using CSS margin property

We're gonna use the margin property inside the .box-1 class. Write the following code 👇

.box-1{
 //Other codes are here 

  margin: 0px auto;    
}

The result looks like this👇

**result of CSS margin Property**

How to center a div vertically using CSS margin property

We're gonna use the margin property inside the .box-1 class. Write the following code 👇

.box-1{
 //Other codes are here 

  margin: auto 0px;    
}

The result looks like this 👇

**result of CSS margin property**

How to center a div horizontally & vertically using CSS margin property

We're gonna use the margin property inside the.box- class. Write the following code 👇

.box-1{
 //Other codes are here 

  margin: auto auto;    
}

The result looks like this👇

Result of CSS margin property

Additional Resources

• Complete Flexbox Tutorial W/ CheatSheet
• Complete CSS Grid Tutorial W/ CheatSheet

Credits

• uncorns, kitty
• artist, kat

Conclusion

Now, you can confidently align or center your content using any of these four methods in CSS.

Here's your medal for reading until the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Table of Contents:

• CSS Grid Architecture
• CSS Grid Chart
• Grid Parent Properties
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • How to create column and row gaps in Grid
  • How to justify items and align items with Grid
  • How to justify content and align-content with Grid
• Child Properties in CSS Grid
  • grid-column : start/end
  • grid-row : start/end
  • grid-area
  • justify-self || align-self
• Shorthand for Grid
• Conclusion

You can watch this tutorial on YouTube as well if you like:

First, What is CSS Grid?

Grid is a blueprint for making websites.

The Grid model allows you to layout the content of your website. Not only that, it helps you create the structures you need for building responsive websites for multiple devices. This means your site will look good on desktop, mobile, and tablet.

Here's a simple demo which I created using Grid as the main blueprint.

Desktop View

Mobile View

CSS Grid Architecture

So how does Grid architecture work? The Grid items [Contents] are distributed along the main axis and cross axis. Using various Grid properties, you can manipulate the items to create your website layouts.

grid architecture

By the way, you can join multiple rows and columns, just like in Excel software, which gives you more flexibility and options than Flexbox.

By the way, here's a CheatSheet I made for Flexbox if you want to learn more about that.

CSS Grid Chart

This chart contains every possible property you can use when using grid. Grid properties are divided into:

• Parent properties
• Child Properties

Note: The red colored text denotes the shorthand properties:

By the end of this tutorial, you'll have a clear understanding of how to use all of those properties.

How to Set Up the Project

For this project, you need to know little bit of HTML, CSS, and how to work with VS code. Follow along with me as we complete the following tasks:

1. Create a folder named "Project-1" and Open VS Code
2. Create index.html and style.css files
3. Install Live Server and run it.

Or, you can just open Codepen and start coding.

At the end of this tutorial, you will be able to make accurate and beautiful website layouts.

And...we're all set! Let's start coding. 😊

HTML

Create three boxes inside the body tag, like this 👇

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
</div>

CSS

Step 1

Let's clear out our default browser styles. Follow me 👇

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

Step 2

Inside the body selector, do these adjustments:

body {
  font-family: sans-serif;
  font-size: 40px;
  width: 100%;
  min-height: 100vh;
}

Step 3

Now, let's style our boxes by selecting all of them together ->

[class^="box-"] {
  background-color: skyblue;

/* To place the letter at the center */
  display: grid;
  place-items: center;
}

Note: Don't worry, we'll discuss those grid properties in detail later.

Step 4

Now, place some gaps between our boxes like this 👇

.container {
  display: grid;
  gap: 20px;
}

But Wait....

Before starting, you need to understand the relationship between parent and child classes.

For the Grid parent property, we will write inside the .container class. For the Grid child property, we will write in the .box-* classes.

CSS Grid Parent Properties

First, let's learn about CSS Grid's parent properties!

The grid-template-columns property

You use this property to define the number and width of columns. You can either individually set the width of each column, or set a uniform width for all columns using the repeat() function.

grid-template-columns

To recreate these results, write the following CSS lines ->

.container {
  display: grid;
  gap: 20px;

/*  Change the values     👇 to experiment */
  grid-template-columns: 200px auto 100px;
}

Note:

• The pixel values will be an exact measurement. The "auto" keyword will cover the available space.
• If you use fr (fraction unit) as a unit of measurement, all the boxes will be equal in size.

The grid-template-rows property

You use this property to define the number and height of rows. You can either individually set the height of each row, or set a uniform height for all rows using the repeat() function.

grid-template-rows

To test these results, write the following CSS code ->

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

/* Change the values  👇 to experiment */
  grid-template-rows: 200px auto 100px;
}

The grid-template-areas property

You use this property to specify the amount of space a grid cell should carry in terms of columns and rows across the parent container. Life's much easier with this property as it allows us to see visually what we're doing.

Standard 12X12 layout

Call it the blueprint(template) of our layout👇

The blueprint

To experiment with this, you need to understand both the parent and child properties:

• grid-template-areas: The parent property that will create the blueprint
• grid-area: the child property that will follow the blueprint.

First, create the blueprint

Like this 👇 inside the parent .container class:

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Implement the blueprint

Target all our child .box-* classes and set the values like this ->

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

Note: I'll discuss the grid-area property again in the grid child property section.

The column-gap property

You use this property to place a gap between Columns inside the grid 👇

column-gap

To test this, write the following in CSS 👇

.container {
  display: grid;
  height: 100vh;

  grid-template-columns: 100px 100px 100px;
//Change values👇 to experiment
  column-gap:  50px;
}

Note: column-gap works with grid-template-columns.

The row-gap property

You use this property to place a gap between Rows inside the grid 👇

row gap

Let's test this 👇

.container {
  display: grid;
  height: 100vh;

  grid-template-rows: 100px 100px 100px;
// Change   👇  values to experiment
  row-gap:  50px;
}

Note: row-gap works with grid-template-rows.

The justify-items property

You use this property to position grid-items (children) inside grid containers along the X-Axis [Main Axis]. The 4 values are 👇

justify-items

If you want to test this, then add 1 more box inside the HTML ->

<div class="container">

  <!--Other boxes - A, B, C are here-->

  <div class="box-4"> D </div>
</div>

and in the CSS ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values 👇  to experiment
  justify-items : end;
}

The align-items property

You use this property to position grid-items (children) inside the grid container along the Y-Axis [Cross Axis]. The 4 values are 👇

align-items

Don't change anything in the HTML, but in the CSS write ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values 👇  to experiment
  align-items: center;
}

The justify-content property

You use this property to position your grid [Basically everything] inside the grid container along the X-Axis [Main Axis]. The 7 values are 👇

justify-content

Don't change anything in the HTML, but in the CSS write ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values  👇  to experiment
  justify-content: center;
}

The align-content property

You use this property to position our grid [Basically everything] inside the grid container along the Y-Axis [Cross Axis]. The 7 values are 👇

align-content

Don't change anything in the HTML, but in the CSS write ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values 👇  to experiment
  align-content : center;
}

Take a Break

So far so good! Take a break, you deserve it.

CSS Grid Child Properties

Now, let's look at Grid child properties.

The CSS Grid Scale

I made this grid scale to demonstrate the calculations of how rows and columns are joined together. We can use any 1 of the 2 types of measurement:

• The digit [1,2,3,4, etc...]
• The span keyword

The Grid Scale

You'll get a clear picture of how this guide works ☝️ when we write code in just a short moment.

The illustration below 👇 shows the start and end points of rows and columns of a single cell.

Grid column & row -> start & end points

HTML

To experiment with the grid scale and understand the following properties, make 4 boxes inside body tag:

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
  <div class="box-4"> D </div>
</div>

We're gonna utilize the repeat() function. It repeats our code a certain number of times. Here's an example 👇

grid-template-columns : repeat(5,1fr);

This ☝️ is the equivalent to writing this:👇

grid-template-columns : 1fr 1fr 1fr 1fr 1fr ;

A Quick Note

When we use the fr [ Fraction ] unit, we are dividing the screen area into equal proportions.

  grid-template-columns: repeat(5, 1fr);

This ☝️ code is dividing our screen width into 5 equal parts.

We're set, let's start!

The grid-column: start/end properties

You use these two properties to join multiple COLUMNS together. It is a shorthand of 2 properties:

• grid-column-start
• grid-column-end

Write this code in your CSS:

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

The result looks like this:

Here, we are dividing our screen [ both width and height ] into 12 equal parts. 1 box is occupying 1 part, or you can call it 1fr [ 1 fraction ]. The remaining 8 fractions along the width are empty.

As we are dealing with child properties, we need to target our .box-* classes like this:

.box-1{}
.box-2{}
.box-3{}
.box-4{}

You can experiment with any or all of these boxes, I'll stick with .box-1.

Let's bring our grid scale. We are dealing with columns – just focus on the columns, not rows.

The Grid Scale

The default scale of every .box-* class is:

grid-column-start : 1;
grid-column-end : 2;

/* The shorthand -> */
 grid-column : 1 / 2

We can write this ☝️ in the span unit as well, like this 👇

grid-column : span 1;

Let's assign the empty 8 fractions to .box-1 like this 👇

.box-1{
grid-column : 1/10
}

The result looks like this:👇

A quick note

How did I do the calculation? The box-1 occupies 1 box itself. And over that, we are adding more 8 boxes. At the last, you must add 1 to indicate the end so, 8+1+1 = 10.

How to use the span keyword

If you're confused by the first property, you can use the span keyword as it is easier to understand.

We need to add 8 boxes to .box-1 which already occupies one box. So, we have to do 8+1 = 9.

.box-1{
  grid-column : span 9;
}

This is gonna output the same result.

The grid-row: start/end properties

You use these two properties to join multiple ROWS together. It is shorthand of 2 properties:

• grid-row-start
• grid-row-end

Let's experiment with it! Here, I'll stick with .box-1, and here's our grid guide. Now, only focus on the row scale, not the column.

The Grid Scale

Let's join 9 boxes to .box-1 along the row.

Write this code: 👇

.box-1{
  grid-row : 1/11;
}

The calculation looks like this -> .box-1 holds 1 box, and you add 9 more boxes, plus a mandatory 1 at the last position to indicate the end which gives you 9+1+1=11.

Here's the alternative 👇 using the span keyword:

.box-1{
  grid-row : span 10;
}

And here's that calculation -> .box-1 holds 1 box, and you add 9 more boxes
9+1=10.

Here's the result so far: 👇

The grid-area property

First, we need to set up grid-template-areas ☝️ Once we've done that, we have to specify the names used in parent class inside the children classes, like this:👇

Standard 12X12 layout

Then we need to specify grid-template-areas inside parent container: 👇

Like this 👇 inside the parent class:

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Then we specify the names used in the parent container inside the child classes with grid-areas👇

Like this 👇 inside the children classes:

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

The justify-self property

You use this property to position 1 individual grid-item (child) inside a grid container along the X-Axis [Main Axis]. The 4 values are 👇

Justify-self

Write this code to experiment with the values 👇

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Remember! This only works on the child classes. So, target any .box-* class. I'll target the first box:

.box-1 {
/*  Change values 👇  to experiment */
  justify-self : start;  
}

The align-self property

You use this property to position 1 individual grid-item (child) inside a grid container along the Y-Axis [Cross Axis]. The 4 values are 👇

align-self

Let's experiment with the values 👇

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Remember! This only works on the child classes. So, target any .box-* class. I'll target the 1st box:

.box-1 {
/*  Change values 👇  to experiment */
  align-self : start;  
}

Shorthand for CSS Grid Properties

Let's look at these Grid shorthand properties:

• place-content
• place-items
• place-self
• grid-template
• gap / grid-gap

place-content

place-content

This is the shorthand of 2 properties:

• align-content
• justify-content

An example

align-content : center;
justify-content : end;

/* The shorthand */
place-content : center / end ;

place-items

place-items

This is the shorthand of 2 properties:

• align-items
• justify-items

An example

align-items : end;
justify-items : center;

/* The shorthand */
place-items : end / center ;

place-self

place-self

This is the shorthand of 2 properties:

• align-self
• justify-self

An example

align-self : start ;
justify-self : end ;

/* The shorthand */
place-self : start / end ;

grid-template

grid-template

This is the shorthand of 2 properties:

• grid-template-rows
• grid-template-columns

An example

grid-template-rows : 100px 100px;
grid-template-columns : 200px 200px;

/* The shorthand */
grid-template : 100px 100px / 200px 200px;

gap/grid-gap

Gap and grid-gap are the same thing and do the same work. You can use either of them.

gap

This is the shorthand of 2 properties:

• row-gap
• column-gap

An example

row-gap : 20px ; 
column-gap : 30px ;

/* The shorthand */
gap : 20px  30px;

Credits

• Unicorns
• Corgis, kat

Conclusion

Now, you can confidently make responsive website layouts using your grid knowledge!

Here's your medal for reading until the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

• Callbacks
• Promises
• Async / Await

Here's what we'll cover in this article:

• What is Asynchronous JavaScript?
• Synchronous vs Asynchronous JavaScript
• How Callbacks Work in JavaScript
• How Promises Work in JavaScript
• How Async / Await Works in JavaScript

So let's dive in!

You can watch this tutorial on YouTube as well if you like:

What is Asynchronous JavaScript?

If you want to build projects efficiently, then this concept is for you.

The theory of async JavaScript helps you break down big complex projects into smaller tasks.

Then you can use any of these three techniques – callbacks, promises or Async/await – to run those small tasks in a way that you get the best results.

Let's dive in!🎖️

Synchronous vs Asynchronous JavaScript

What is a Synchronous System?

In a synchronous system, tasks are completed one after another.

Think of this as if you have just one hand to accomplish 10 tasks. So, you have to complete one task at a time.

Take a look at the GIF 👇 – one thing is happening at a time here:

You'll see that until the first image is loaded completely, the second image doesn't start loading.

Well, JavaScript is by default Synchronous [single threaded]. Think about it like this – one thread means one hand with which to do stuff.

What is an Asynchronous System?

In this system, tasks are completed independently.

Here, imagine that for 10 tasks, you have 10 hands. So, each hand can do each task independently and at the same time.

Take a look at the GIF 👇 – you can see that each image loads at the same time.

Again, all the images are loading at their own pace. None of them is waiting for any of the others.

To Summarize Synchronous vs Asynchronous JS:

When three images are on a marathon, in a:

• Synchronous system, three images are in the same lane. One can't overtake the other. The race is finished one by one. If image number 2 stops, the following image stops.

• Asynchronous system, the three images are in different lanes. They'll finish the race on their own pace. Nobody stops for anybody:

Synchronous and Asynchronous Code Examples

Before starting our project, let's look at some examples and clear up any doubts.

Synchronous Code Example

To test a synchronous system, write this code in JavaScript:

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

Here's the result in the console: 👇

Asynchronous code example

Let's say it takes two seconds to eat some ice cream. Now, let's test out an asynchronous system. Write the below code in JavaScript.

Note: Don't worry, we'll discuss the setTimeout() function later in this article.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")