Forem: Adetutu Oluwasanmi

Running a JSON Server in the Terminal using Process Manager (PM2): A Step-by-Step Guide

Adetutu Oluwasanmi — Tue, 25 Jul 2023 20:08:43 +0000

OUTLINE

Introduction
Prerequisite
How to run a JSON Server in the terminal using Process Manager (PM2)
Conclusion

Introduction

Process manager (PM2) is a tool that is used to manage and monitor processes that are running on a system. It allows developers to start, stop, monitor, and automatically restart processes when needed. It is mostly used when working with server applications that should be kept running continuously.

A JSON server allows us to create API endpoints that can be used during testing or development then there is no available backend server. In simple terms, it allows us to create a RESTful API using a simple JSON file.

In this step-by-step guide, we will explain the process of running a JSON server in the terminal using Process Manager(PM2). Let's get started.

Prerequisite

Make sure you have Node.js and NPM installed on your computer. You can check if they are installed by running these commands in your terminal:



node -v
npm -v

If you don't see the version numbers, you'll need to download and install Node.js from the official website.

How to run a JSON Server in the Terminal using Process Manager

STEP 1: Install JSON Server and PM2

Open your terminal or command prompt and install both json-server and pm2 globally using npm.



npm install json-server



npm install pm2@latest -g

STEP 2: Create a JSON file

Create a JSON file named db.json within a folder named data. This JSON file will function as your database for the JSON Server.



data/
│  db.json/

The data inside your db.json file should be formatted this way:



{
  "blogs": [
 { 
"id": 1, 
"title": "Fundamentals of JavaScript", 
"author": "John Doe" 
},
{ 
"id": 2, 
"title": "Props drilling in React", 
"author": "Jane Smith"
}
 ]
}

STEP 3: Create a server.js file

Create the server.js file in the project directory. This file will contain the script to start the JSON server.

In the server.js file, add the following code:




import pkg from 'json-server';
const { create, router: _router, defaults } = pkg;

const server = create();
const router = _router('./data/db.json');
const middlewares = defaults();

server.use(middlewares);
server.use(router);

const PORT = 3000; // Change the port if needed

server.listen(PORT, () => {
  console.log(`JSON Server is running on port ${PORT}`);
});

STEP 4: Start the JSON Server with PM2

In your terminal, navigate to the directory containing the db.json file, and start the JSON Server using PM2:



pm2 start server.js --watch ./data/db.json --name json-server

In the above command, pm2 start server.js starts the JSON server script (server.js) using pm2. --watch db.json tells JSON Server to watch the db.json file for changes and update the data accordingly. --name json-server sets the name of the PM2 process as json-server.

The JSON server will now run continuously in the background, managed by PM2.

STEP 5: Access the JSON Server

To see the list of running processes managed by PM2, use the following command:



pm2 list

You can access your JSON Server's endpoints at http://localhost:3000/blogs in your browser.

To check the status or manage the JSON server process, you can use various pm2 commands. Here are some examples:

To save the JSON server process:



pm2 save json-server

The pm2 save command in PM2 is used to save the currently running processes into a process file. This process file is known as the PM2 ecosystem file or ecosystem.config.js by default.

To stop the JSON server process:



pm2 stop json-server

To start the JSON server process if it's stopped:



pm2 start json-server

To restart the JSON server process:



pm2 restart json-server

To delete the JSON server process from pm2:



pm2 delete json-server

This will stop the JSON Server and remove it from PM2's process list.

Resources

JSON-Server Documentation

Process Manager Documentation

Conclusion

In conclusion, process manager (PM2) makes it easy to manage server processes, especially in Node.js applications. When used alongside the JSON Server, it allows developers to set up a mock API server using a simple JSON file, providing a way to test frontend applications without the need for a fully functional backend server. By following the step-by-step guide provided above, you can effortlessly run a JSON Server using PM2.

How to Create Dynamic Pages with Route Parameters and the useParams Hook in React

Adetutu Oluwasanmi — Wed, 12 Jul 2023 12:27:21 +0000

OUTLINE

Introduction
Prerequisite
Creating Dynamic Pages with Route Parameters and the useParams Hook in React
Conclusion

Introduction

In React, route parameters and the useParams hook are used to render dynamic pages based on the provided URL. Dynamic pages are web pages that change their content based on the route parameter. Route parameters are parts of the URL that can change and act as placeholders for dynamic values.

For instance, in an e-commerce website, route parameters can be used to fetch and display specific product details on a product listing page.

The useParams hook is a built-in hook in React Router that allows us to easily get the values of route parameters inside a React component. This helps us display and fetch data dynamically based on the parameter values in the URL.

In this article, we will explore how to create dynamic pages with route parameters and the useParams hook in React.

Prerequisite

HTML
CSS
JavaScript
React

Creating Dynamic Pages with Route Parameters and the useParams Hook in React

STEP 1: Setting up your React project

For setting up a new React project, it would be helpful to follow the process described in the blog post Setting your React project with Vite. In the new React project, remove the pre-existing code and styles in the index.css, App.jsx, and App.css files.

Within the src directory, create a pages folder and add the following files along with their corresponding CSS files: Home.jsx and Recipe.jsx and also create the RecipeList.jsx and RecipeList.css files within the components folder.



data/
│  db.json/
src/
│  components/
     │  RecipeList/
          RecipeList.jsx
          RecipeList.css
│  hooks/
     │  useFetch.jsx
│  pages/
     │ Home/
          Home.jsx
          Home.css
     │  Recipe/
          Recipe.jsx
          Recipe.css
│  App.css/
│  App.jsx/
│  index.css/
│  main.jsx/
index.html/

The above file structure demonstrates how you can structure your code for this project with separate directories for data, components, hooks, and pages.

STEP 2: Setting up a JSON server

We would be using the JSON Server in this project because it allows us to generate API endpoints using a JSON file as a database. This allows us to integrate this API into our front-end project. Follow the steps outlined below to setup the JSON server for your project:

Install JSON server



npm install -g json-server

Create a new folder named data and a new file in your project directory called db.json which will act as the JSON database.



data/
│  db.json/

Open the db.json file in a text editor and define your JSON data structure.



{
    "recipes": [
    {
        "id": "1",
        "title": "Spaghetti Bolognese",
        "author": "John Smith",
        "ingredients": [
            "1 pound ground beef",
            "1 onion, chopped",
            "2 cloves garlic, minced",
            "1 can crushed tomatoes",
            "1/4 cup tomato paste",
            "1/2 cup beef broth",
            "1 teaspoon dried oregano",
            "1 teaspoon dried basil",
            "Salt and pepper to taste",
            "8 ounces spaghetti"
        ],
        "instructions": [
            "In a large skillet, cook ground beef over medium heat until browned.",
            "Add onion and garlic to the skillet and cook until softened.",
            "Stir in crushed tomatoes, tomato paste, beef broth, oregano, basil.",
            "Simmer the sauce for 20 minutes, stirring occasionally.",
            "Cook spaghetti according to package instructions.",
            "Serve the sauce over cooked spaghetti."
        ],
        "cookingTime": 30,
        "tags": ["pasta", "Italian", "dinner"]
    }
 ]
}

In the terminal, run the following command to start the JSON server:



json-server –watch ./data/db.json

The server will be running locally on port 3000, and you can access the data in the db.json file via the provided API endpoints.



  json-server --watch ./data/db.json

  Loading ./data/db.json
  Done

  Resources
  http://localhost:3000/recipes

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Once the JSON Server is running, you can send HTTP requests to the defined API endpoints to interact with the data stored in the JSON file.



http://localhost:3000/recipes

STEP 3: Create the useFetch hook for data fetching

In this project, we will use the useFetch hook to fetch data from the JSON server API. We would achieve this by passing the API as an argument into the useFetch hook and The hook will return the data, isLoading, and error states.

In order to create the useFetch Hook, you can follow the steps outlined in this article How to Create a Custom useFetch Hook in React.

STEP 4: Setup React Router in the App.jsx file

Firstly, we install React Router in the project by using the command below:



npm install react-router-dom

Then we import imports the required components from the react-router-dom library, including Route and Routes.



import { Route, Routes } from "react-router-dom"

Next, we declare the App component and wrap the project components with the Router component.



import './App.css' 
import { Route, Routes } from "react-router-dom"
import Home from './pages/Home/Home'
import Recipe from './pages/Recipe/Recipe'

function App() {

  return (
    <div className='App'> 
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/recipes/:id" element={<Recipe />} />
        </Routes>
    </div>
  )
}

export default App

In the above code, the root route ("/") renders the Home component while the /receipes/:idroute renders the Recipe component. "/recipes/:id" represents the dynamic path and :id represents a route parameter.

STEP 5: Create the Home component

We import the necessary dependencies: RecipeList component, useFetch hook, and the CSS file for styling the Home component. Then we declare the home component.



import RecipeList from '../../components/RecipeList/RecipeList'
import useFetch from '../../hooks/useFetch';
import './Home.css'

function Home() {

const { data, isLoading, error } = useFetch('http://localhost:3000/recipes')

  return (
    <div className='home-container'>
      <h1 className="home-title">Recipe List</h1>  
       {error && <p className='error'>{error}</p>}
       {isLoading && <p className='loading'>Loading Recipies...</p>}
      <RecipeList recipes={data}/>
    </div>
  )
}

export default Home

In the above code, we import the useFetch hook and use it to fetch data from the JSON server API. We pass in the API endpoint of the JSON server into the useFetch Hook and get the following states data, isLoading, and error in return using object destructuring.

We also import and render the RecipeList component and data is passed as the recipes prop into this component.

We display a loading message while the data is being fetched and an error message if an error occurs. Once the data is fetched successfully, it renders the RecipeList component to display the list of the recipes.

STEP 6: Add the CSS styles to the Home Component



.home-container {
    max-width: 1200px;
    margin: 30px auto;
    text-align: center;
}

.home-title{
    font-size: 50px;
}

STEP 7: Create the RecipeList component

Firstly, we import the Link component from the react-router-dom library and the CSS file for styling the RecipeList component, then we declare the RecipeList component.



import './RecipeList.css' 
import { Link } from 'react-router-dom'

function RecipeList({ recipes }) {

  if (!recipes) {
    return <p>No recipes available.</p>;
  }

  return (

    <div className='recipe-list'> 
      {recipes.map(recipe => (
        <div key={recipe.id} className='card'>  
            <h3 className='recipelist-title'>{recipe.title}</h3>
            <h4 className='recipelist-subtitle'>By {recipe.author}</h4>
            <p className='recipe-cooking-time'>Cook Time - {recipe.cookingTime} Minutes</p>
            <Link to={`/recipes/${recipe.id}`}>Cook Now</Link>
        </div> 
      ))}
    </div>
  )
}

export default RecipeList

In the above code, the RecipeList accepts a prop named recipes that contains an array of recipe objects. We check if the recipes prop is falsy (e.g., null or undefined). If there are no recipes available, it returns a paragraph element displaying the message "No recipes available."

Next, we map over the recipes array using the map function. For each recipe in the array, a div with a className of 'card' is rendered. It has a key attribute set to the id of the recipe object.

Lastly we declare the Link component which is used to create links to other routes within the application and it is set to /recipes/${recipe.id}. We use this to navigate to a specific recipe page based on the recipe's ID. We use recipe.id as a route parameter to fetch and display the details of the specific recipe.

STEP 8: Add the CSS styles to the RecipeList Component



.recipe-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    max-width: 1200px;
    margin: 50px 20px;
    text-align: center;
  }

  .recipe-list .card {
    box-shadow: 4px 4px 6px rgba(0,0,0,0.05);
    background: #fff;
    padding: 50px 0;
    border-radius: 8px;
  }

  .recipelist-title {  
    margin-bottom: 4px;
    font-size: 26px;
  }

  .recipelist-subtitle {
    color: #555;
    font-size: 18px;
  }

  .recipe-cooking-time {
    color: #999;
    font-size: 16px;
    margin-bottom: 30px;
  }

  .recipe-list .card a {
    color: #555;
    text-decoration: none;
    background: #f4f0ec;
    font-size: 20px;
    text-align: center;
    padding: 12px 20px;
    border-radius: 4px;
  }

  @media screen and (max-width: 900px) { 
    .recipe-list {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media screen and (max-width: 650px) { 
  .recipe-list {
    grid-template-columns: 1fr;
  }

}

STEP 9: Create the Recipe component

We import the useParams hook, Link component from the react-router-dom library, useFetch hook, and the CSS file for styling the Recipe component.



import { useParams, Link} from 'react-router-dom'
import useFetch from '../../hooks/useFetch';
import './Recipe.css'

export default function Recipe() {
  const { id } = useParams();
  const url = `http://localhost:3000/recipes/${id}`;
  const { error, isLoading, data: recipe } = useFetch(url)

  return (
    <div className="recipe-container">

      {error && <p className="error">{error}</p>}
      {isLoading && <p className="loading">Loading Recipe...</p>}

      {recipe && (
        <div className='recipe'>
          <h2 className="recipe-title">{recipe.title}</h2>
          <h3 className='recipe-author'> Recipe By {recipe.author}</h3>


          <div className="ingredients">
              <h3 className='recipe-ingredients recipe-subtitle'>Ingredients</h3>
              <ul>
                {recipe.ingredients.map(ing => <li key={ing}>{ing}</li>)}
              </ul>
          </div>

          <div className="instructions">
              <h3 className='recipe-instructions recipe-subtitle'>Instructions</h3>
              <ul>
                {recipe.instructions.map(ing => <li key={ing}>{ing}</li>)}
              </ul>
          </div>


        </div>
      )}

        <Link to="/" >Return to main page</Link>
    </div>
  )
}

In the above code, we call and destructure the useParams hook to obtain the id parameter which is used to identify a particular resource.

We fetch and display the details of a specific recipe based on the id provided in the URL. The id is used to construct the URL for fetching the recipe data and we also make use of the useFetch custom hook to fetch recipe data from that specific URL.

We display a loading message while the data is being fetched and an error message if an error occurs. If the recipe data is available, the recipe details are rendered.

STEP 10:Add the CSS styles to the Recipe Component



.recipe-container {
  max-width: 800px;
  margin: 40px auto;
  text-align: center;
  background: #fff;
  padding: 40px;
}

.recipe {
   padding: 30px 0;
}

.recipe-title {
  font-size: 40px;
}

.recipe-author {
  color: #555;
  font-size: 20px;
  padding: 15px 0;
}

.recipe-subtitle {
  font-size: 30px;
  padding-top: 20px;
}

.recipe li {
  margin-left: 30px;
  font-size: 20px;
  line-height: 1.9;
  text-align: left;
}

.recipe-container a {
  color: #000;
  text-decoration: none;
  background: #f4f0ec;
  font-size: 20px;
  text-align: center;
  padding: 12px 20px;
  border-radius: 4px;
}

@media screen and (max-width: 540px) { 

.recipe-container {
  max-width: 800px;
  margin: 40px auto;
  text-align: center;
  background: #fff;
  padding: 40px 30px;
}

.recipe-title {
  font-size: 35px;
}

.recipe-author {
  padding: 25px 0;
  font-size: 18px;
}

.recipe-subtitle {
  text-align: left;
}

.recipe li {
  margin-left: 0px;
  font-size: 16px;
}

}

NOTE:

To run this application on your desktop:

Open the project and in the terminal, run the following command to start the JSON server



json-server --watch ./data/db.json

Next, start the development server by running



npm run dev

Link

GitHub Link

Conclusion

We can leverage route parameters and utilize the useParams hook in React to build dynamic web pages where content and functionality can be customized based on specific parameters in the URL.

Instead of creating separate pages for each variation, dynamic pages allow us to reuse a single component or by updating its content based on the route parameters.

By utilizing route parameters, we can pass variable values in the URL, such as the product IDs. These parameters can then be extracted using the useParams hook in React, which provides access to the parameter values within a component.

How to Design a CSS Card Flip Animation: Creating Flipping Cards on Hover

Adetutu Oluwasanmi — Thu, 29 Jun 2023 12:31:43 +0000

OUTLINE

Introduction
Prerequisite
Step-by-step guide on how to design a CSS card flip animation on hover
Conclusion

Introduction

CSS animations are used for adding interactivity and visual effects to elements on a web page. It provides a way to improve the user experience and aesthetics of a website.

In this article, we will explore how to design a CSS card flip animation that allows cards to flip and show additional content on hover.

Prerequisite

HTML
CSS

Step-by-step guide on how to design a CSS card flip animation on hover

STEP 1: Create the HTML structure

In this step, we will start by setting up the basic HTML structure for the flipping cards, each card consists of the front side and back side.

Here is the code example:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flipping Cards on Hover</title>

    <!-- Google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="./src/styles.css">

    <!-- Font awesome -->
    <script src="https://kit.fontawesome.com/8ea8d3b22a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="card-section">

        <div>
            <h1 class="card-title">Meet Our Exceptional Team Members</h1>
            <p class="card-subtitle">Discover the dedicated individuals who collaborate seamlessly, leveraging their diverse skills and experience to drive our company's growth. </p>
         </div>

        <div class="flipping-cards">

            <div class="profile-card first-profile-card">

                <div class="profile-card-front profile-card-face">      
                    <img src="./images/olivia-johnson.jpg" alt="profile-picture" class="profile-picture"/>

                    <h2 class="name">Olivia Johnson</h2>
                    <h3 class="role">Software Engineer</h3>

                    <div class="expertise-section">
                        <p class="expertise-title">Areas of Expertise</p>
                        <ul>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">JavaScript</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">React Ecosystem</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Web Accessibility</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Performance Optimization</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Agile Methodologies</li>
                        </ul>
                    </div>
                </div>

                <div class="profile-card-back profile-card-face">
                    <div class="about-section">
                        <h2 class="about-title">About</h2>
                        <p class="about-text">
                            Olivia Johnson is a senior software engineer with over 6 years of experience in the technology industry.
                            Throughout her career, Oivia has successfully led numerous complex projects from inception to completion. 
                            She specializes in designing architectures that are scalable, efficient, and aligned with business goals.
                        </p>
                    </div>

                    <div class="interests-section">
                        <p class="interests-title">Key Interests</p>
                        <ul>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Open-source Contribution</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Technology Conferences and Meetups</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Technical Blogging</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Professional Development</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Mentorship and Teaching</li>
                        </ul>
                    </div>

                    <footer>
                        <div class="icons"> 
                            <a href="#"><i class="fa-solid fa-envelope email-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-linkedin linkedin-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-twitter social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-github social-icon"></i></a>
                        </div>
                    </footer>
                </div>

            </div>

            <div class="profile-card second-profile-card">

                <div class="profile-card-front profile-card-face">      
                    <img src="./images/james-ethan.jpg" alt="profile-picture" class="profile-picture"/>

                    <h2 class="name">Samuel Ethan</h2>
                    <h3 class="role">Product Manager</h3>

                    <div class="expertise-section">
                        <p class="expertise-title">Areas of Expertise</p>
                        <ul>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Product Strategy and Roadmap Development</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Market Research and Analysis</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Agile Product Development</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Product Performance Evaluation</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Product Launch</li>
                        </ul>
                    </div>
                </div>

                <div class="profile-card-back profile-card-face">
                    <div class="about-section">
                        <h2 class="about-title">About</h2>
                        <p class="about-text">
                            James Ethan has a wealth of experience in leading cross-functional teams and a track record of delivering successful products. 
                            He has a unique blend of technical expertise, and user-centric mindset.
                            He is dedicated to driving product excellence and empowering teams to surpass expectations, shaping the future of digital innovation.
                        </p>
                    </div>

                    <div class="interests-section">
                        <p class="interests-title">Key Interests</p>
                        <ul>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Technology and Innovation</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">User Experience</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Product Development</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Customer Advocacy</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Project Management</li>
                        </ul>
                    </div>

                    <footer>
                        <div class="icons"> 
                            <a href="#"><i class="fa-solid fa-envelope email-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-linkedin linkedin-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-twitter social-icon"></i></a>
                        </div>
                    </footer>
                </div>

            </div>

            <div class="profile-card third-profile-card">

                <div class="profile-card-front profile-card-face">      
                    <img src="./images/grace-victoria.png" alt="profile-picture" class="profile-picture"/>

                    <h2 class="name">Grace Victoria</h2>
                    <h3 class="role">Data Scientist</h3>

                    <div class="expertise-section">
                        <p class="expertise-title">Areas of Expertise</p>
                        <ul>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Statistical Modeling and Analysis</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Data Mining and Data Extraction</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Data Visualization</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Big Data Processing</li>
                            <li class="expertise"><img src="./images/check-circle.svg" alt="check-circle">Machine Learning</li>
                        </ul>
                    </div>
                </div>

                <div class="profile-card-back profile-card-face">
                    <div class="about-section">
                        <h2 class="about-title">About</h2>
                        <p class="about-text">
                            Grace Victoria is a data scientist with over 5 years of experience extracting valuable insights from complex datasets.
                            She has a profound knowledge of advanced statistical modeling, machine learning algorithms, and data visualization 
                            techniques has enabled her to drive transformative solutions for complex business challenges.
                        </p>
                    </div>

                    <div class="interests-section">
                        <p class="interests-title">Key Interests</p>
                        <ul>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Artificial Intelligence</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Data Analysis</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Data Ethics</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Natural Language Processing</li>
                            <li class="interest"><img src="./images/check-circle.svg" alt="check-circle">Business Strategy and Impact</li>
                        </ul>
                    </div>

                    <footer>
                        <div class="icons"> 
                            <a href="#"><i class="fa-solid fa-envelope email-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-linkedin linkedin-icon social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-twitter social-icon"></i></a>
                            <a href="#"><i class="fa-brands fa-square-github social-icon"></i></a>
                        </div>
                    </footer>
                </div>

            </div>

        </div>

    </div>

</body>
</html>

STEP 2: Add the CSS styles

In this step, we'll style the cards using CSS.



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

 html{
    font-size: 62.5%;
 }

 body{
    font-family: 'Inter', sans-serif;
    background-color: #23252C; 
    color: #ffff;
 } 

 ul,
 li {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.card-section {
    padding-top: 3rem;
}

.card-title {
    font-size: 3.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
 }

 .card-subtitle {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
 }

 .flipping-cards {
   padding: 2rem 0;
   margin: 0 auto;
   width: 100%;
   max-width: 1100px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 60px;
 }


/* Profile card front */

.profile-card {
   height: 52rem;
   position: relative;
   perspective: 150rem;
   -moz-perspective: 150rem;
 }

.profile-card-face {
   background-color: #1A1B21;
   color: #FFFFFF;
   width: 320px;
   margin: 30px auto;
   border-radius: 10px;
   transition: all .8s ease;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   overflow: hidden;
}

.profile-card-back{
   transform: rotateY(180deg);
}

.profile-card:hover .profile-card-front {
   transform: rotateY(-180deg);
}

.profile-card:hover .profile-card-back {
   transform: rotateY(0);
}

/* Profile card front */

.profile-picture {
   width: 320px;
   max-height: 210px;
   border-radius: 10px 10px 0 0;
}

.name{
   font-weight: 700;
   font-size: 2.2rem;
   text-align: center;
   color: #FFFFFF;
   padding-top: 2rem;
   padding-bottom: 0.6rem;
 }

 .role{
   font-weight: 400;
   font-size: 1.4rem;
   text-align: center;
   color: #F3BF99;
   margin: 0px
 }

 .expertise-section {
    padding: 0 3.5rem 2rem;
 }

 .expertise-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: #FFFFFF;
    margin-top: 2.8rem;
    margin-bottom: 2rem;
 }

 .expertise {
   font-size: 1rem;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 1rem;
 }


/* Profile card back */ 

.about-section{
   padding: 0 4rem;
}

.about-title {
   font-weight: 700;
   font-size: 1.6rem;
   color: #ffff;
   padding-top: 3rem;
   padding-bottom: 0.8rem;
}

.about-text {
   font-style: normal;
   text-align: justify;
   font-weight: 400;
   font-size: 1.2rem;
   line-height: 1.6;
   color: #ffff;
}

.interests-section {
   padding: 0 3.5rem 2rem;
}

.interests-title {
   font-weight: 700;
   font-size: 1.5rem;
   color: #FFFFFF;
   margin-top: 2.5rem;
   margin-bottom: 2rem;
}

.interest {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

 footer{
    width: 320px;
    height: 55px;
    background: #161619;
    border-radius: 0px 0px 10px 10px;
    padding: 18px 72px 22px;
 }

 .icons{
     display: flex;
     justify-content: space-between;
 }

 .social-icon{
    font-size: 20px;
    color: #918E9B;
    align-items: center;
 }

 .social-icon:hover{
   color: #FFFFFF;
 }

@media screen and (max-width: 1200px) { 

.card-subtitle {
   font-size: 1.4rem;
   padding: 0 10rem;
}

.flipping-cards {
   margin-bottom: 5rem;
   width: 100%;
   max-width: 700px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 1fr;
   grid-column-gap: 60px;
   grid-row-gap: 30px;
}

.third-profile-card {
   justify-items: center;
   align-items: center;
}
}

@media screen and (max-width: 700px) { 

.card-title {
   font-size: 3rem;
   padding-left: 2rem;
   padding-right: 2rem;
 }

 .card-subtitle {
    font-size: 1.4rem;
    padding: 0 6rem;
 }

 .flipping-cards {
   margin-bottom: 5rem;
   width: 100%;
   max-width: 300px;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(3, 1fr);
   grid-column-gap: 60px;
   grid-row-gap: 30px;
 }

 }

 @media screen and (max-width: 450px) { 

.card-title {
   font-size: 3rem;
   padding-left: 2rem;
   padding-right: 2rem;
}

.card-subtitle {
   font-size: 1.2rem;
   padding: 0 3rem;
}

.flipping-cards {
   margin-bottom: 5rem;
   width: 100%;
   max-width: 320px;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(3, 1fr);
   grid-column-gap: 60px;
   grid-row-gap: 30px;
}

}

In the above code, we set the perspective property on the .profile-card container to create a 3D space for the flipping animation. We also ensure that the front and back faces are absolutely positioned within the card container, and stacked on top of each other.

We set the backface-visibility property to hidden to ensure the card's back face is not visible until it is flipped. We will use the .profile-card:hover pseudo-class to trigger the flip animation on hover. When hovering over a card, we'll apply a transform property to rotate the card along the Y-axis.

We create a card flip animation effect where the card's front face is initially visible, and when hovered over, it smoothly rotates and reveals the card's back face. When the hover state is removed, the card returns to its original front-face display.

Links

GitHub Link

Live Link

Conclusion

In this article, we explored how to design a CSS card flip animation which allows the cards to flip on hover. We achieved this by using CSS transitions, transforms, and pseudo-classes to add interactivity and visual appeal to our design.

How to Implement a Custom Modal with CSS

Adetutu Oluwasanmi — Sat, 24 Jun 2023 13:46:17 +0000

OUTLINE

Introduction
Prerequisite
Step-by-step process on how to implement a custom modal with CSS
Conclusion

Introduction

Modal (also known as dialog boxes or popups) is a UI (User Interface) component that is displayed on top of the main content on a web page. In this article, we will explore how to implement a custom modal using CSS.

Prerequisite

HTML
CSS
Basic JavaScript

Step-by-step process on how to implement a custom modal with CSS

STEP 1: Create the HTML structure

In this step, we will start by setting up the basic HTML structure for the main page and the modal.



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- CSS stylesheet -->
        <link rel="stylesheet" href="src/styles.css">

        <title>How to implement a custom modal with CSS</title>
    </head>
<body>  

    <div class="main">

        <nav class="navbar">
            <ul>
                <li class="navbrand">QuantaCore Labs</li>
                <li class="navitem">About</li>
                <li class="navitem">Products</li>
                <li class="navitem">Pricing</li>
                <li class="navitem">Request Demo</li>
            </ul>
        </nav>

        <div class="hero-content">
            <h1 class="content-heading">Innovative and data-driven <br/> solutions for your business</h1>
            <p class="content-subheading">
                We are a cutting-edge technology company dedicated to delivering innovative solutions for complex data processing and analysis. <br/>
                We empower organizations to gain actionable insights and make smarter, data-backed decisions faster than ever before.
            </p>

            <div>
             <button id="open-modal" class="open-modal-btn">Read More</button>
           </div>
        </div>
    </div>

    <div id="modal-overlay">
        <div class="modal">
            <div>
                <div class="modal-close-button close-icon">&times;</div>
            </div>
            <div class="modal-content">
               <h2 class="modal-content-heading">Privacy Policy</h2>
               <p class="modal-content-subheading">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
                labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                qui officia deserunt mollit anim id est laborum.
               </p>
               <button class="close-button modal-accept-button">Okay, I understand</button>
            </div>
        </div>
    </div>

    <script src="src/script.js"></script>
</body>
</html>

STEP 2: Style the page and the modal

Next, we will use CSS to style the main page, modal, and add features such as a close button, animations, and responsive styles.




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

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

 html{
    font-size: 62.5%;
 }

 body{
    font-family: 'Raleway', sans-serif;
    background-color: #eff0f9;
 }

 .navbrand {
   margin-right: auto;
   font-weight: bold;
   letter-spacing: 1px; 
   font-size: 2em;
}

 .navbar {
   width: 100%;
   padding: 20px 10px;
   background-color: #4E56EE;
   color: #ffff;
}

.navbar ul {
   list-style-type: none;
   display: flex;
   margin: 0 auto;
   max-width: 1200px;
   align-items: center;
}

li {
   margin: 0 2rem;
   font-size: 1.5rem;
}

.hero-content {
   margin: 12rem auto;
   text-align: center;
}

.content-heading {
   font-size: 4.5rem;
}

.content-subheading {
   font-size: 1.5rem;
   padding: 1rem 5rem 4rem;
   line-height: 1.8; 
}

 /* Modal */

#modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    animation: slide-down 0.3s ease;
    animation-fill-mode: forwards;
    transform: translateY(-100%);
  }

@keyframes slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal { 
    max-width: 480px;
    height: 300px;
    margin: 200px auto;
    background-color: #ffff;
    border-radius: 5px;
    padding: 0rem 2rem;
    animation:scale-up-center .4s cubic-bezier(.39,.575,.565,1.000) both
  }

  @keyframes scale-up-center {
    0% {
      transform: scale(.5)
    }
    100% {
      transform: scale(1)
    }
  } 

.close-icon {
   font-size: 4rem;
   text-align: right;
   cursor: pointer;
}

.modal-content {
   text-align: center;
   padding-top: 2rem;
}

.modal-content-heading {
    color: #4E56EE;
    font-size: 2rem;
    margin-top: 0;
}

.modal-content-subheading {
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 1.3rem 1.5rem;
}

.close-button,
.open-modal-btn {
    background-color: #4E56EE;
    color: #ffff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 1.2rem 2rem;
    margin-top: 1rem;
    outline: none;
    border: none;
    text-transform: uppercase;
    font-weight: 600;
  }

  .open-modal-btn:hover,
  .open-modal-btn:focus{
    background-color: #ffff;
    color: #4E56EE;
    border: 1px solid #4E56EE;
  }

  @media screen and (max-width: 540px) { 

    .navbrand {
      font-size: 1.5rem;
    }

    .navitem {
      display: none;
    }

    .hero-content {
      margin: 6rem auto;
    }

    .content-heading {
      font-size: 2.5rem;
    }

    .content-subheading {
      font-size: 0.8rem;
      padding: 1rem 3rem 4rem;
      line-height: 1.8;
    }

    .modal { 
      max-width: 300px;
      height: 320px;
      padding: 0rem 1rem;
    }

  }

STEP 3: Add JavaScript for interactivity

Lastly, we will add JavaScript to control the visibility of the modal component. We will set up event listeners on various elements to handle the opening and closing behaviour of the modal component.




const modalOverlay = document.getElementById('modal-overlay');
const modalOpen = document.getElementById('open-modal');
const modalClose = document.querySelector('.modal-close-button');
const modalAcceptBtn = document.querySelector('.modal-accept-button');

modalOpen.addEventListener('click', (event) => {
    modalOverlay.style.display = 'block';
});

modalClose.addEventListener('click', (event) => {
    modalOverlay.style.display = 'none';
  });

modalAcceptBtn.addEventListener('click', (event) => {
     modalOverlay.style.display = 'none';
});

Links

GitHub Link

Live Link

Conclusion

By following the step by step guide outlined above, you can create a custom modal using CSS and also customize the content, styles, animations, and responsiveness according to your design preferences.

How to Remove Duplicate Elements From an Array in JavaScript

Adetutu Oluwasanmi — Sat, 17 Jun 2023 10:14:57 +0000

In this article, we will explore how to remove duplicate elements from an array in JavaScript using different methods. Here are the commonly used methods:

Using the reduce() method
Using the filter() method
Using the Set object

Let’s get started.

Using the `reduce()` method

Here is an example of a JavaScript code that uses the reduce() method to remove duplicate elements from an array:


const itemsArr = ["a", "b", "c", "b", "a", "c", "d", "e", "d", "e"];
const removeDuplicateItems = itemsArr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    return [...accumulator, currentValue];
  }
  return accumulator;
}, []); // 

console.log(removeDuplicateItems); // ["a", "b", "c", "d", "e"];

Code Explanation

We declare a constant variable itemsArr and assign it to an array of several items with duplicates. We declare another constant variable called removeDuplicateItems and assign it to the result of applying the reduce() method on the itemsArr.

The reduce() method is called on itemArr and it iterates over each element of the array. The reduce() method takes two arguments; the callback function and the initial value for the accumulator. The callback function passed into the reduce() method also takes two parameters; accumulator and currentValue. The accumulator is the value that is returned and accumulated after each iteration, and currentValue is the current element of the array being processed in each iteration of the reduce method.

In the callback function, we use the if statement and includes() method to check if the current value is present in the accumulator array. If the condition !accumulator.includes(currentValue) is true, the current value is not included in the accumulator array, but if this condition is false, the current value is included in the accumulator array.

We then return a new array created by spreading the elements of the accumulator (...accumulator) and appending the current value (currentValue). We output the resulting array with duplicate items removed to the console.

Using the `filter()` method

Here is an example of a JavaScript code that uses the filter() method to remove duplicate elements from an array:


const numberArray = [1, 2, 3, 3, 4, 4, 5, 5, 5, 6];
const removeDuplicateNumbers = numberArray.filter((value, index) => {
  return numberArray.indexOf(value) === index;
});
console.log(removeDuplicateNumbers); // [1, 2, 3, 4, 5, 6]

Code explanation

Firstly, we declare a constant variable numberArray and assigns it an array containing several numbers with duplicates. We declare another constant variable called removeDuplicateNumbers and assign it to the result of applying the filter() method on the itemsArr.

The filter() method creates a new array by iterating over each element of the numberArray and applies a callback function to it, takes two parameters: value and index.

In the callback function, the indexOf() method is used to check the first occurrence of the value in the numberArray. If the index of the current element (numberArray.indexOf(value)) is equal to the index passed to the callback function (index), it means that this is the first occurrence of the element, so this element is stored in the filtered array.

So, by comparing the index of each element with the first occurrence of that element in the array, we keep only the first occurrence of each element and remove duplicates.

We log the result of removeDuplicateNumbers to the console which contains a new array without the duplicate items.

Using the `Set` object

Here is an example of a JavaScript code that uses the Set object to remove duplicate elements from an array:


const newArray = ["a", "b", "c", "b", "a", "c", "d", "e", "d", "e"];
const removeDuplicateArr = [...new Set(newArray)];

console.log(removeDuplicateArr); // ["a", "b", "c", "d", "e"];

Code explanation

We declare a constant variable newArray and assigns it an array of items with duplicates. We declare another constant variable called removeDuplicateArr and assign it to the result of applying the new Set object on the newArray.

The Set object only allows unique values, so any duplicates in the original array are removed. Then, we use the spread operator (...) to convert the Set object back into an array.

We log the result of removeDuplicateArr to the console which contains only the unique elements from the original newArray without any duplicates.

How to Create a Custom useFetch Hook in React

Adetutu Oluwasanmi — Sat, 10 Jun 2023 09:01:19 +0000

OUTLINE

Introduction
Creating a custom useFetch hook in React
How to use the useFetch Hook in a React component
Conclusion

Introduction

Custom hooks are reusable functions that contain logic and can be used in functional components. A useFetch hook is a reusable function in React that abstracts the process of fetching data from an API, provides an efficient way to manage HTTP requests and handles the loading and error states.

In this article, we'll walk through the process of creating a custom useFetch hook in React.

Let's dive in!

Creating a custom useFetch hook in React

After setting up your react project, go to the src directory and create a folder called hooks. In this folder, create a new file called useFetch.js which will contain the useFetch logic.

Here is the code below:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
      fetch(url)
      .then(response => {
        if (!response.ok) { 
          // error coming back from server
          throw Error('could not fetch the data for that resource');
        } 
        return response.json();
      })
      .then(data => {
        setIsLoading(false);
        setData(data);
        setError(null);
      })
      .catch(err => {
        setIsLoading(false);
        setError(err.message);
      })
  }, [url])

  return { data, isLoading, error };
}

export default useFetch;

Code explanation

Firstly, import the necessary dependencies inside the useFetch.jsfile. We import the useState and useEffect hooks from the 'react' library.

We declare the useFetch custom hook which takes a url parameter, which represents the API endpoint we want to fetch data from.

We declare three state variables using the useState hook imported from the react library. The data state variable is the fetched data and is set to null. The isLoading state variable indicates whether the data is currently being fetched and is set to true. The error state variable represents errors that could occur during the data fetching process and it is initially set to null.

Next, we declare the useEffect hook which will be triggered whenever the url dependency changes. We define a fetch() function inside the useEffect callback and this function sends a GET request to the specified url. The then callback function is used to handle the response from the server.

We use response.ok to check for errors from the API and If an error is detected, an error message is thrown using the throw statement. And if there are no errors, the response is converted to JSON format using response.json(). We store the resulting data in the setData state variable, isLoading is set to false, and the error state variable is also set to null.

Next, we define a catch callback function to handle any errors that occurred during the fetch request. The isLoading state variable to false, indicating that the data loading has been completed and the error message is stored in the setError state variable.

Finally, the useFetch custom hook returns an object containing the data, isLoading, and error state variables for components to access these values. Then we export the useFetch custom hook as the default export of the module so it can be imported into other files.

How to use the useFetch Hook in a React component

To utilize the useFetch Hook, create the functional component and import the hook into your React component.

Code sample

import { useFetch } from '../hooks/useFetch'

const BlogPosts = () => {

    const { data: blogs, isLoading, error } = useFetch('http://localhost:3000/blogposts');

    return (
      <div>
        {isLoading && <div>Loading blog posts...</div>}
        {error && <div>{error}</div>}

       {/* Render the fetched data */}

        {blogs && blogs.map((blog) => (
          <p key={blog.id}>{blog.name}</p>
        ))}
      </div>
    );
  }

export default BlogPosts;

In the above component, we're using the useFetch hook to fetch data from the http://localhost:3000/blogposts endpoint. The data, isLoading, and error state variables returned by the hook are then used to conditionally render the content. If isLoading is true, then a loading message will be displayed, and If an error occurs, an error message will be displayed, otherwise the fetched data will be rendered in the component.

Lastly, import the functional component <BlogPosts /> inside the App component in the React project directory.

Conclusion

We have successfully created a useFetch Hook in React and utilize it in a functional component. A custom useFetch hook contains a data fetching logic which can be used across different components in a React project allowing us to write a clean and maintainable code.

How to flatten an array of arrays in JavaScript

Adetutu Oluwasanmi — Thu, 01 Jun 2023 13:24:08 +0000

In this article, we will explore how to flatten an array of arrays in JavaScript using different approaches. Here are the common approaches:

Using the reduce() method
Using the flat() method
Using the flatmap() method
Using the concat() method and spread operator

Let’s dive in.

Using the `reduce()` method

The reduce() method is a JavaScript array method that iterates over the elements of an array and reduces it to a single value. It takes two arguments: the callback function (which is executed on each element of the array) and an optional initial value. The callback function receives an accumulator and the current element, and it returns an updated accumulator.

Here is the code example that demonstrates how to flatten an array of arrays using the reduce() method:


const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = nestedArray.reduce((accumulator, currentArray) => {

return accumulator.concat(currentArray);

}, []);

console.log(newFlattenedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it to an array of arrays. Each of the inner arrays contains three elements.

We create a constant variable called newFlattenedArray and assign it to the result of applying the reduce() method to the nestedArray.

The reduce() method is called on nestedArray and it iterates over each element of the array. The reduce() method takes two parameters; the callback function and the initial value for the accumulator. The initial value for the accumulator is set to an empty string and it will be used by the reduce() method as the starting point for the accumulation.

The callback function passed into the reduce() method also takes two parameters; accumulator and currentArray. The accumulator is the value that is returned and accumulated after each iteration, and currentArray is the current element of the array being processed in each iteration of the reduce method.

Inside the callback function, the concat() method is used on the accumulator and it takes the currentArray as an argument. The concat() method is used to combine elements of different arrays into a new array.

At each iteration of the reduce() method, currentArray is combined with the existing accumulator array, resulting in a new array (or single flattened array) that contains all the elements from the nestedArray.

Then, we log the output of flattenedArray to the console.

Using the `flat()` method

The flat() method is a JavaScript array method that creates a new array by concatenating all subarrays within the original array. The flat() method has an optional parameter that specifies the depth of flattening, If no depth is specified, it defaults to 1.

Here is the code example that demonstrates how to flatten an array of arrays using the flat() method:


const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = nestedArray.flat();

console.log(newFlattenedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it a value of a nested array with three inner arrays.

We create a constant variable called newFlattenedArray and assign it to the result of applying the flat() method on the nestedArray.

The flat() method is called on nestedArray and it concatenates all the elements from the inner arrays into a single array.

Then we log the output of newFlattenedArray to the console.

Using the `flatMap()` method

The flatMap() method is a JavaScript array method that creates a new array by applying a callback function to each element of an array.

Here is the code example that demonstrates how to flatten an array of arrays using the flatMap() method:


const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = nestedArray.flatMap(innerArray => innerArray);

console.log(newFlattenedArray);  // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it a value of a nested array with three inner arrays.

We create a constant variable called newFlattenedArray and assign it to the result of applying the flatMap() method on the nestedArray.

The flatMap() method is called on nestedArray and iterates over each element of the nestedArray. It also takes a callback function (innerArray => innerArray) as an argument which takes each element of the nestedArray and returns the individual element innerArray. This then flattens the nested array into a single flattened array.

Then we log the result of newFlattenedArray to the console.

Using the `concat()` method and spread operator

The concat() method is a JavaScript array method that is used to concatenate two or more arrays and return a new array.

Here is the code example that demonstrates how to flatten an array of arrays using the concat() method:


const nestedArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const newFlattenedArray = [].concat(...nestedArray);

console.log(newFlattenedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Code explanation

We declare a constant named nestedArray and assign it to an array of arrays, each of the inner arrays contains three elements.

We create a constant variable called newFlattenedArray and assign it to the result of concatenating the elements of nestedArray using the concat() method and the spread operator (...).

The concat() method is called on an empty array ([]) and it concatenates the elements passed as arguments (spread from nestedArray) to the empty array. The spread method (...nestedArray) is used to spread elements of each inner array as arguments to the concat() method.

This results in a new array containing all the elements from the nested arrays concatenated together.

Then we log the output of newFlattenedArray to the console.

Reference: JavaScript Array Methods

How to Implement a Modal Component with React

Adetutu Oluwasanmi — Thu, 25 May 2023 14:42:46 +0000

OUTLINE

Introduction
Prerequisite
Setting your react project with Vite
Step-by-step process on how to implement a modal component with React

Introduction

In this article, we'll walk through the process of implementing a modal component with React.

The above image shows the user interface (UI) of the project we would be working on. The UI displays a couple of profile cards and each profile card represents a person with their name and profile picture, while the modal component displays additional information about each selected profile, including their name, role, skills, and profile picture.

Let's get started!

Prerequisite

Before starting, ensure that Node.js and NPM are installed on your system. You can check if you have these installed by running the following commands in your terminal:



node -v
npm -v

If you do not have these packages installed on your computer, download and install Node.js from the official website.

Also, a basic knowledge of JavaScript and React is needed.

Setting your React project with Vite

Follow the process outlined in this blog post Setting your React project with Vite to create a new React project.

In the new React project, remove the pre-existing code and styles in the index.css, App.jsx, and App.css files.

Step-by-step process on how to implement a modal component with React

STEP 1: Import packages and files

Inside the project directory, navigate to the App.jsx file and import the necessary package and file.



import { useState } from 'react';
import './App.css';

This imports the useState hook from the 'react' package, which allows you to use state in functional components. It also imports the 'App.css' file for styling.

Within the src directory, create a components folder and add the following files along with their corresponding CSS files: card.jsx, modal.jsx, card.css, and modal.css.



 src/
│  components/
     │  Card/
          Card.jsx
          Card.css
     │  Modal/
          Modal.jsx
          Modal.css
│  App.css/
│  App.jsx/
│  index.css/
│  main.jsx/

STEP 2: Create the App component

In this next step, create a functional component named App and initialize a state variable using the useState hook and import the App.css file, which contains CSS styles for the App component. We also import the Card component from the ./components/card/card file.



import { useState } from 'react';
import './App.css';
import Card from './components/card/card';

const App = () => {

 const [profiles, updateProfiles] = useState([
            { id: 1, name: "Sophia Anderson", role: "Frontend Engineer", skills: ["HTML", "CSS", "JavaScript", "React", "Next.js"], profilePic: "https://rb.gy/9jh39" },
            { id: 2, name: "Isabella Sullivan", role: "Senior Java Developer", skills: ["Java", "Spring Boot", "Spring Framework", "Maven"], profilePic: "https://rb.gy/gs5lt" },
            { id: 3, name: "Ava Reynolds", role: "Backend Developer", skills: ["Node.js", "Express", "MongoDB", "Nest.js"], profilePic: "https://rb.gy/rs32e" },
            { id: 4, name: "Olivia Thompson", role: "Blockchain Developer", skills: ["Web3", "JavaScript", "Solidity", "Rust", "Smart contracts"], profilePic: "https://rb.gy/xbjed"},    
  ])

return (
  <div className='App'>
      <div className='profile-card'>

        {profiles.map(profile =>{
                return(< Card 
                  key={profile.id} 
                  id={profile.id} 
                  name={profile.name} 
                  skills={profile.skills} 
                  role={profile.role} 
                  profilePic={profile.profilePic} 
                  />)
         })}

      </div>
  </div>
);
};

Code explanation

We declare a state variable called profiles and updateProfiles to update the state. The profiles state variable contains an array of user/profile objects with various properties such as id, name, role, skills, and profilePic.

We declare a return statement that returns the JSX code that will be rendered to the DOM.

Next, we use the .map() function on the profiles array which iterates over each profile object in the array and returns a <Card/> component for each profile. The properties of the profile object (such as id, name, skills, role, and profilePic) are passed as props to the <Card/> component.

It is important to pass a key prop key={profile.id} to the card component within the profiles.map function. This is because the key prop value will be used as a unique identifier for each profile in the profiles array.

In React, the key prop is not accessible within the component but it is primarily used by React to update the list and maintain the state and order of the component.

STEP 3: Style the App component

Add the CSS styles below to your App.css file to style the App component.



.App {
    text-align: center;
    margin: 10rem 3rem;
  } 

.profile-card{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 4rem;
}

STEP 4: Create the card component

In this step, we create a functional component named Card and initialize a state variable using the useState hook and import the Card.css file, which contains CSS styles for the Card component.



import './Card.css'
import Modal from '../Modal/Modal';
import { useState } from 'react';

const Card = ({id, name, profilePic, skills, role}) => { 

const [showModal, setShowModal] = useState(false)

const handleClose = () => {setShowModal(false)}

  return (
    <>  
        <div className="card">
            <div className="number">{id}</div> 
            <div>
                <img className="profile-pic" src={profilePic} alt="profile picture" />
            </div>
            <div className="descr">
                <p className="name">{name}</p>
                <button className="learn-more" onClick={() => setShowModal(true)}>Click to learn more</button>
            </div>
        </div>

         {showModal && <Modal name={name} role={role} skills={skills} profilePic={profilePic} handleClose={handleClose}/>}
    </>
  );
};

export default Card;

Code explanation

Firstly, we declare a new component called card using the arrow function expression. In the previous step, the card component received an object of props as an argument. We use destructuring to extract some properties (id, name, profilePic, skills, and role) from the props object.



const [showModal, setShowModal] = useState(false)

const handleClose = () => {setShowModal(false)}

In the card component, we declare a state variable called showModal and setShowModal to update the state. The initial value of showModal is set to false to hide the modal. We declare a function named handleClose that sets the showModal state to false, which closes the modal when it is called.

We declare the return statement and then we pass each of the prop values into the JSX element so each profile card can be rendered to the DOM.



<button className="learn-more" onClick={() => setShowModal(true)}>Click to learn more</button>

Next, We pass an onClick event to the learn more button in the card component. When the button is clicked, it triggers an onClick event that calls the setShowModal function with true as the argument. This updates the showModal state and shows the modal.



{showModal && <Modal name={name} role={role} skills={skills} profilePic={profilePic} handleClose={handleClose}/>

Finally, we import the modal component from the modal directory and render the modal component in the card component. The modal component is only rendered if showModal is true, and we pass in various props such as name, role, skills, profilePic, and the handleClose function to the modal component. When the modal is rendered, the handleClose function is passed as a prop to handle its close action.

STEP 5: Style the card component

Add the CSS styles below to your Card.css file to style the card component.



.card {
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 10px;
  }

  .number{
    text-align: right;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.8rem;
  }

  .name{
    font-size: 1.8rem;
    font-weight: 600;
  }

  .profile-pic{
    width: 100%;
    height: 300px;
  }

  .descr{
    margin-bottom: 1.5rem;
  }

  .learn-more{
    padding: 0.8rem;
    outline: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.5rem;
  }

  .learn-more:hover{
    background-color: #6a6d6d;
    color: #ffff;
  }

  @media screen and (max-width: 1400px) {  
    .profile-card{
      display: flex;
      flex-direction: column;
      margin-top: 1rem;
    }

    .card{
      margin-top: 3rem;
    }
  }

STEP 6: Create the modal component

In this next step, we create a functional component named Modal and import the Modal.css file, which contains CSS styles for the Modal component.



import './Modal.css' 

const Modal = ({name, profilePic, handleClose, skills, role}) => {

  return (
    <div className="modal-backdrop">

        <div className="modal">
            <img className="modal-img" src={profilePic} alt="profile pic" />
            <div className="modal-body">
               <div className='modal-name'>{name}</div>
               <div className='modal-role'>{role}</div>
               <div className="skills">
               <ul>
                    {skills.map(skill => <li key={skill}>{skill}</li>)}
               </ul>
               </div>
            </div>
            <button className="close-btn" onClick={()=> handleClose()}>Close</button>
        </div>

    </div>
  );
};

export default Modal;

Code explanation

We declare a new component called ‘modal’ using the arrow function expression. In the previous step, the card component received an object of props as an argument. Then, we destructure the specific props such as name, profilePic, handleClose, skills, and role from the props object.

We declare the return statement and then we pass each of the prop values into the JSX elements to be rendered.



{skills.map(skill => <li key={skill}>{skill}</li>)}

The skills prop value consists of a list of skills arrays. So we use the map function to iterate over the skills array. It returns a new array of list items <li> with each skill as its content. The key attribute is set to the skill for proper identification of list items.



<button className="close-btn" onClick={()=> handleClose()}>Close</button>

Lastly, we pass an onClick event to the close button in the modal component. When the button is clicked, it triggers the onClick event that calls the handleClose function, which was passed as a prop to handle the closing action of the modal.

STEP 7: Style the modal component

Add the CSS styles below to your Modal.css file to style the modal component.



.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
  }

.modal { 
    max-width: 480px;
    height: 400px;
    margin: 150px auto;
    background-color: #ffff;
    border-radius: 10px;
    padding: 0;
  }

.modal-img{
    border-radius: 50%;
    height: 100px;
    width: 100px;
    margin: 4rem 0 2rem;
}

.modal-name {
    font-size: 2rem;
    font-weight: 600;
}

.modal-role{
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    font-style: italic;
}

.skills ul {
    display: flex;
    padding: 0;
    justify-content: center;
    margin-top: 0;
  }

.skills li {
    list-style-type: none;
    margin-right: 10px;
    color: black;
    background-color: #ebebf2;
    padding: 0.5rem 1rem;
    margin: 2rem 0.5rem;
    font-size: 1.3rem;
    border-radius: 5px;
    font-weight: 600;
}

.close-btn{
    background-color: #ebebf2;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 1rem 2rem;
    margin-top: 2rem;
    outline: none;
    border: none;
    font-weight: 500;
    text-transform: uppercase;
  }

  .close-btn:hover,
  .close-btn:focus{
    background-color: #9393B2;
    color: #ffff;
  }

  @media screen and (max-width: 480px) { 
    .skills li {
        padding: 0.5rem 0.8rem;
        margin: 2rem 0.4rem;
        font-size: 1rem;
    }
  }

We have successfully implemented a modal component with React and you can find the complete code for this tutorial on GitHub and the live link.

How to Use useState Hook with Conditional Rendering in React: Showing and Hiding Components

Adetutu Oluwasanmi — Thu, 18 May 2023 12:51:13 +0000

OUTLINE

Introduction
Prerequisite
Setting your react project with Vite
Step-by-step process on how to use the useState hook for conditional rendering and showing/hiding components in React
Conclusion

Introduction

In React, useState hook is used to declare and manage state variables in a functional component and with conditional rendering (using a boolean value) we can display or hide a component (or control the visibility of a component) based on certain conditions.

In this article, we will go through a step-by-step process on how to use the useState Hook with Conditional Rendering to show and hide components in React.

Here is a video snippet of the project we would be working on:

Prerequisites

Before getting started, ensure that Node.js and NPM are installed on your system. You can check if you have these installed by running the following commands in your terminal:



node -v
npm -v

If you do not have these packages installed on your computer, download and install Node.js from the official website.

Setting your React project with Vite

Follow the process outlined in this blog post Setting your React project with Vite to create a new React project.

In the new React project, remove the pre-existing code and styles in the index.css, App.jsx, and App.css files.

Step-by-step process on how to use the useState hook for conditional rendering and showing/hiding components in React

STEP 1: Import packages and files

Inside the project directory, navigate to the App.jsx file and import the necessary package and file.



import { useState } from 'react';
import './App.css';

This imports the useState hook from the 'react' package, which allows you to use state in functional components. It also imports the App.css file for styling.

STEP 2: Create a functional component

In this next step, create a functional component named ‘App’ and initialize a state variable using the useState hook.



import { useState } from 'react';
import './App.css';

const App = () => {

  const [showEvents, setShowEvents] = useState(true)
 const [profiles, updateProfiles] = useState([
    { id: 1, name: "Sophia Anderson", profilePic: "https://rb.gy/9jh39" },
    { id: 2, name: "Isabella Sullivan", profilePic: "https://rb.gy/gs5lt" },
    { id: 3, name: "Ava Reynolds", profilePic: "https://rb.gy/rs32e" },
    { id: 4, name: "Olivia Thompson", profilePic: "https://rb.gy/xbjed"}, 
  ])

return (
    <div>
      {/* Code to be executed*/}
    </div>
  );
}

This code declared two state variables showEvents and profiles. The showEvents state variable will control the visibility of the component you want to show or hide. It is also set to true indicating that the user profiles will be displayed. The profiles state variable contains an array of user objects each containing an id, name, and profile picture.

STEP 3: Add the hide and show button



import { useState } from 'react';
import './App.css';

const App = () => {

  const [showEvents, setShowEvents] = useState(true)
 const [profiles, updateProfiles] = useState([
    { id: 1, name: "Sophia Anderson", profilePic: "https://rb.gy/9jh39" },
    { id: 2, name: "Isabella Sullivan", profilePic: "https://rb.gy/gs5lt" },
    { id: 3, name: "Ava Reynolds", profilePic: "https://rb.gy/rs32e" },
    { id: 4, name: "Olivia Thompson", profilePic: "https://rb.gy/xbjed"},
  ])

return (
    <div>
// Hide and show button

  {showEvents && <button onClick={() => setShowEvents(false)} className="profile-btn">Hide profiles</button>}

  {!showEvents && <button onClick={() => setShowEvents(true)} className="profile-btn">Display profiles</button>}

// Hide and show button
    </div>
  );
}

Based on the boolean value of the showEventsstate variable, we can conditionally render the component we want to show or hide.



{showEvents && <button onClick={() => setShowEvents(false)} className="profile-btn">Hide profiles</button>}

This line conditionally renders the hide profilesbutton, if showEvents is true. The onClick event is set to a function that calls setShowEvents(false), which updates showEvents to false when the button is clicked.



{!showEvents && <button onClick={() => setShowEvents(true)} className="profile-btn">Display profiles</button>}

This line conditionally renders the display profiles button, if showEvents is false. The onClick event is set to a function that calls setShowEvents(true), which updates showEvents to true when the button is clicked.

STEP 4: Render the profile card component



import { useState } from 'react';
import './App.css';

const App = () => {

  const [showEvents, setShowEvents] = useState(true)
 const [profiles, updateProfiles] = useState([
    { id: 1, name: "Sophia Anderson", profilePic: "https://rb.gy/9jh39" },
    { id: 2, name: "Isabella Sullivan", profilePic: "https://rb.gy/gs5lt" },
    { id: 3, name: "Ava Reynolds", profilePic: "https://rb.gy/rs32e" },
    { id: 4, name: "Olivia Thompson", profilePic: "https://rb.gy/xbjed"},
  ])

  const handleDelete = (id) => {
    let filteredProfiles = profiles.filter(each => each.id !== id)
    updateProfiles(filteredProfiles)
  }


return (
  <div className='App'>

    {showEvents && <button onClick={() => setShowEvents(false)} className="profile-btn">Hide profiles</button>}

    {!showEvents && <button onClick={() => setShowEvents(true)} className="profile-btn">Display profiles</button>}

     <div className='profile-card'>

      {showEvents &&  profiles.map((profile) => (

          <div key={profile.id}>

                <div className="card">

                    <div className="number">
                        {profile.id}
                    </div> 

                     <div>
                        <img className="profile-pic" src={profile.profilePic} alt="profile picture" />
                    </div>

                    <div className="descr">
                        <p className="name">{profile.name}</p>
                        <button className="delete-profile" onClick={()=> handleDelete(profile.id)}> Delete profile</button>
                    </div>

                </div>

          </div>

        ))}
   </div>

  </div>
)
}

export default App;

Code explanation

In this profile card component section, the block of code is conditionally rendered based on the value of showEvents. If showEvents is true, the map function iterates over the profiles array.

The profiles array has been defined using the useState hook. It contains four profile user objects with properties such as id, name, and profile pic (URLs to the profile pictures). The map function used on the profiles array then iterates over each user object and executes the code within the curly braces for each element.

Each profile is rendered within a nested div, and a unique key is assigned using the profile.id. Then, each item in the profiles object is passed in as props into the profile card component.

The Delete Function (Optional)



<button className="delete-profile" onClick={() => handleDelete(user.id)}> Delete profile</button>

When the delete profile button is clicked, it calls the handleDelete function below with the user’s id.



const handleDelete = (id) => {
  let remove = users.filter(each => each.id !== id);
  updateUsers(remove);
};

This above code declares an handleDelete function that takes in an id as a parameter.

This line let filteredProfiles = profiles.filter(each => each.id !== id) uses the filter method on the profiles array to create a new array called filteredProfiles. The filter method iterates through each element in the profiles array and returns a new array that excludes the profile objects whose id matches the provided id parameter.

This line updateProfiles(filteredProfiles) updates the state of the profile array by replacing it with the new filtered array. This causes React to re-render the component and reflect the updated array in the user interface.

STEP 5: Add styles to the component

Add the following styles below to your App.css file;



.App {
  text-align: center;
  margin: 3rem;
}

.profile-card{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 4rem;
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 10px;
}

.number{
  text-align: right;
  font-weight: 700;
  padding: 0.5rem;
}

.name{
  font-size: 0.9rem;
  font-weight: 600;
}

.profile-pic{
  width: 100%;
  height: 300px;
}

.descr{
  margin-bottom: 1.5rem;
}

.delete-profile{
  padding: 0.6rem;
  outline: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
}

.delete-profile:hover{
  background-color: #6a6d6d;
  color: #ffff;
}

.profile-btn{
   background-color: #ebebf2;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 1rem;
  outline: none;
  border: none;
  text-transform: uppercase;
  font-weight: 500;
}

.profile-btn:hover{
  background-color: #9393B2;
  color: #ffff;
}

@media screen and (max-width: 1400px) { 
  .profile-card{
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
  }

  .card{
    margin-top: 3rem;
  }
}

Links to the project

Live link

GitHub Link

Conclusion

Finally, we have a React component that utilizes useState Hook to hide and show components using conditional rendering. We also implemented a delete function that removes a profile from the profiles state array.

Setting up a React Project with Vite: A Step-by-Step Guide

Adetutu Oluwasanmi — Mon, 15 May 2023 17:28:57 +0000

OUTLINE

Introduction
Prerequisites
Setting up a React Project with Vite
Conclusion

Introduction

React is a JavaScript library developed by Facebook that allows developers to build reusable UI components and efficiently update them, resulting in fast and responsive web applications.

Vite is a fast build tool and development server that is designed to enhance the development experience for modern web applications. It is designed to offer quick hot module replacement (HMR) and efficient build times by utilizing native ES modules, which makes it highly compatible and ideal for frameworks such as React, Vue.js, and others.

In this step-by-step guide, we will explain the process of setting up a React project using Vite, following the official Vite documentation.

Prerequisites

Before you begin ensure that Node.js and NPM are installed on your system. You can check if you have these installed by running the following commands in your terminal:

node -v
npm -v

If the version numbers are not returned by these commands, download and install Node.js from the official website.

Setting up a React Project with Vite

STEP 1: Create a new React project

Open your terminal and navigate to the directory where you want to create your new React project. Run the following command to create a new React project using Vite's template:

npx create-vite@latest my-react-app --template react

This command will create a new directory named ‘my-react-app’ and initialize a React project using the Vite template for React. After the command has been executed, navigate to the newly created project directory and run the following command;

cd my-react-app

STEP 2: Installing dependencies

Install the project dependencies by running the following command:

npm install

This command will create a package.json file and install all the required dependencies specified in it.

STEP 3: Running the development server

To start the development server, run the following command:

npm run dev

This command will compile your React code and launch the development server. You should see the following output in your terminal:

> my-react-app@0.0.0 dev
> vite

  VITE v4.3.5  ready in 1225 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Click on the link http://localhost:3000/ which will open up your default web browser and, your React application will be up and running.

STEP 4: Building for production

When your development is complete and you are ready to deploy your React application to a production environment, you need to build it. To build your React application, run the following command:

npm run build

This command will compile and bundle your React code into optimized static assets and place them in the dist directory.

STEP 5: Serving the production build locally

Once the build is complete, you can serve the optimized production build locally to ensure everything is working as expected. Run the following command to serve the production build:

npm run preview

This command will start the Vite server, serving the production build at http://localhost:4173/. Open your browser and navigate to the provided URL to see your React application running in the production environment.

Conclusion

Setting up a React project with Vite offers the benefits such as a lightning-fast development server, optimized builds, simplified configuration, compatibility, etc., resulting in a highly efficient and productive development experience.

By following the steps outlined in this guide, you have successfully created a new React project using Vite, set up the development server, built your application for production, and served the optimized build.

How to Install SASS Locally Using Node Package Manager (NPM)

Adetutu Oluwasanmi — Tue, 09 May 2023 11:39:28 +0000

Introduction

What is SASS?

Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is used to extend the capabilities of CSS (Cascading Style Sheets). It provides a way to write CSS more efficiently and with more advanced features, such as variables, mixins, nesting, extends, and functions.

Sass files are saved with a .scss extension, and they are compiled into standard CSS files. The compilation process involves interpreting the Sass syntax and converting it into CSS code that can be understood by web browsers.

What is Node Package Manager (NPM) and why is it useful for installing Sass?

Node Package Manager (NPM) is a command-line tool that is used to manage packages for Node.js, a popular server-side JavaScript runtime. It provides a centralized repository of open-source software packages that can be easily installed and managed using simple commands.

NPM is useful for installing Sass because it simplifies the installation process by automatically downloading and installing all of the dependencies required for Sass to function properly. Secondly, it makes it easier to manage different versions of Sass as well as other packages used in a project.

Prerequisites for installing Sass with NPM

Before installing Sass using NPM, ensure that Node.js and NPM are installed on your system. You can check if you have these installed by running the following commands in your terminal:

node -v
npm -v

If the version numbers are not returned by these commands, download and install Node.js from the official website.

Installing Sass with NPM

To Install Sass as a development dependency for a specific project, follow the steps outlined below;

STEP 1: Open a terminal window or command prompt and navigate to your project directory.

 cd project-name

STEP 2: Initialize your project with NPM by running the following command:

 npm init -y

     or

 npm init

The command npm init creates a new package.json file in your project directory. The -y option skips the interactive prompts that would otherwise ask you to enter values for these fields.

Here is an example of what the package.json file created by npm init -y would look like:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

STEP 3: Install Sass by running the following command:

npm install sass --save-dev

This command will install the latest version of Sass as a development dependency and add it to the devDependencies section in your project's package.json file.

STEP 4: Once Sass is installed, you can create a folder name sass and in the folder, create a file called main.scss file in your project directory and start writing Sass code.

For example, you could add the following code to the main.scss file;

$primary-color: #24a0ed;

h1 {
  color: $primary-color;
}

button {
  color: #fff;
  background-color: $primary-color;
  border: none;
  padding: 10px 20px;
  border-radius: 15px;

  &:hover{
    color: $primary-color;
    background-color: #ffff;
    border: 1px solid $primary-color;
  }
}

This code defines a variable called $primary-color and uses it to set the color of the h1 element and the background-color of the button.

Ensure that the h1 element and button are defined in the index.html file. Also, ensure to link the compiled CSS file in your HTML file using the tag:

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

STEP 5: To compile the main.scss file to a CSS file, navigate to the package.json file and edit the scripts field;

Replace

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

with

"scripts": {
    "compile:sass": "sass sass/main.scss src/styles.css -w"
  },

Script command explanation

compile:sass is the name of the custom script command.

sass sass/main.scss src/styles.css is the command that runs the Sass compiler.

Sass is the package that was installed as a dev dependency. The Sass command is followed by two arguments: sass/main.scss and src/styles.css.

sass/main.scss - The input file main.scss is in the sass folder.

src/styles.css - The output file styles.css is in the src folder.

The Sass code in the main.scss will be compiled into CSS code and saved in the src/styles.css file.

-w: This is an optional flag that tells the Sass compiler to watch for changes to the input file sass/main.scss and automatically recompile the output file src/styles.css when changes are detected. This is useful during development when we want to see changes to the Sass code reflected immediately in your CSS code.

STEP 6: Finally, run the following command in the terminal compile the Sass code in the input file(s) and generate CSS code in the output file.

npm run compile:sass

Then, click on the live server to preview the code.

It's important to keep the terminal window open while the Sass compiler is running in watch mode so that the compiler process can continue to run and automatically update your CSS code as you make changes to your Sass code.

If you close the terminal window while the Sass compiler is running in watch mode, the compiler process will also be terminated, and you won't be able to see the changes you make to your Sass code reflected in your CSS code until you manually re-run the npm run compile:sass command again.

Conclusion

Sass is a CSS preprocessor that is widely used in web development to write cleaner and more efficient CSS code. By installing Sass as a development dependency, we can quickly and easily manage and update Sass's version and dependencies using Node Package Manager (NPM).

Forem: Adetutu Oluwasanmi

Running a JSON Server in the Terminal using Process Manager (PM2): A Step-by-Step Guide

OUTLINE

Introduction

Prerequisite

How to run a JSON Server in the Terminal using Process Manager

STEP 1: Install JSON Server and PM2

STEP 2: Create a JSON file

STEP 3: Create a server.js file

STEP 4: Start the JSON Server with PM2

STEP 5: Access the JSON Server

Resources

Conclusion

How to Create Dynamic Pages with Route Parameters and the useParams Hook in React

OUTLINE

Introduction

Prerequisite

Creating Dynamic Pages with Route Parameters and the useParams Hook in React

STEP 1: Setting up your React project

STEP 2: Setting up a JSON server

STEP 3: Create the useFetch hook for data fetching

STEP 4: Setup React Router in the App.jsx file

STEP 5: Create the Home component

STEP 6: Add the CSS styles to the Home Component

STEP 7: Create the RecipeList component

STEP 8: Add the CSS styles to the RecipeList Component

STEP 9: Create the Recipe component

STEP 10:Add the CSS styles to the Recipe Component

NOTE:

Link

Conclusion

How to Design a CSS Card Flip Animation: Creating Flipping Cards on Hover

OUTLINE

Introduction

Prerequisite

Step-by-step guide on how to design a CSS card flip animation on hover

STEP 1: Create the HTML structure

STEP 2: Add the CSS styles

Links

Conclusion

How to Implement a Custom Modal with CSS

OUTLINE

Introduction

Prerequisite

Step-by-step process on how to implement a custom modal with CSS

STEP 1: Create the HTML structure

STEP 2: Style the page and the modal

STEP 3: Add JavaScript for interactivity

Links

Conclusion

How to Remove Duplicate Elements From an Array in JavaScript

Using the reduce() method

Code Explanation

Using the filter() method

Code explanation

Using the Set object

Code explanation

How to Create a Custom useFetch Hook in React

OUTLINE

Introduction

Creating a custom useFetch hook in React

Code explanation

How to use the useFetch Hook in a React component

Code sample

Conclusion

How to flatten an array of arrays in JavaScript

Using the reduce() method

Code explanation

Using the flat() method

Code explanation

Using the flatMap() method

Code explanation

Using the concat() method and spread operator

Code explanation

How to Implement a Modal Component with React

OUTLINE

Introduction

Prerequisite

Setting your React project with Vite

Step-by-step process on how to implement a modal component with React

Using the `reduce()` method

Using the `filter()` method

Using the `Set` object

Using the `reduce()` method

Using the `flat()` method

Using the `flatMap()` method

Using the `concat()` method and spread operator