Kingsley Ubah - freeCodeCamp.org

How to Create a Chatbot With the ChatGPT API

Kingsley Ubah — Wed, 26 Jul 2023 15:48:02 +0000

OpenAI's ChatGPT is a great tool for getting information as quickly as possible for your coding projects. Even better, you can now integrate the artificial intelligence-powered chat capability of OpenAI's models directly into your application.

Recently, the OpenAI team expanded their API by giving developers access to their pretrained AI models (DALL-E, Codex, and GPT-3). This means that you can send a question to the API, get the response, and use the data in your application, all within seconds.

In this article, you'll learn how to create an OpenAI account, retrieve your API keys and query OpenAI's GPT-3 model from your Node.js application. Let's dive right in!

The first thing you need to do is sign up for an OpenAI account if you don't already have one. Once you're in, you'll be redirected back to the homepage.

At the top right corner of the page, click on your profile image, then click on Manage Account. On the sidebar, click API Keys and then click the create new secret key button to generate a secret key:

Screenshot of secret key

Copy the secret key and paste it somewhere safe and accessible because you'll need it later to connect your application with the OpenAI API.

With the key safely stored, the next step is to create a Node.js project and spin up an Express server on top of it. Let's start with the installation and basic setup.

How to Set up the Project

To follow along with this project, you need to have Node.js and npm installed on your local machine. The latest version of Node.js comes with npm, and it's available on the official Node.js website.

Start by creating an empty directory in your computer. Next, launch the command prompt and cd into the folder you just created:

cd path/to/project

Once pointed to the directory, run the following command to create a Node project:

npm init -y

Next, run the following command to install express and openai libraries from npm:

npm i express openai

The next step is to create the server.

How to Create an Express Server

For now, this server will only serve the static files. We'll implement the chat API towards the end of this article.

Start by creating a file named server.js inside the root folder of your project. Next, open the file with a code editor and add the following code:

const express =  require('express')
const app = express()

app.use(express.static('public'))

app.listen(5000, ()=> {
    console.log("Server is active")
})

With this code, you've created a web server that serves static files (i.e. HTML, CSS) from the /public folder.

Next, we'll create the HTML file that renders the chat interface on the web page, as well as the stylesheet file and the JavaScript file.

How to Create the Chatbot

Start by creating a folder named public inside the root of your project. Then inside the /public directory, create a file named index.html.

Open the file with a text editor and add the following markup in the file:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="chat-area">

    div>

    <div class="submit-form">
        <div class="input">
            <textarea name="input" id="input" cols="40" rows="3">textarea>
            <button id="btn">Submitbutton>
        div>    
    div>    

body>
html>

As you can see above, the page comprises of the chat area (where the messages are displayed) and the submit area (comprising the text area and the submit button).

To style the page, add the following stylesheet between the opening and closing tags in your /public/index.html file:

    <style>
        #chat-area {
            margin: 0 auto;
            width: 80%;
            height: 500px;
            overflow:scroll;
            border: 1px solid gray;
            border-radius: 4px;
        }

        .input {            
            width: 100%;
        }

        .submit-area{
            justify-content: center;
            display: flex;
            margin: 20px auto;
            width: 80%;            
        }       

        textarea {
            width: 100%;
        }

        .box {
            width: 96%;
            margin: 0 auto;
            padding: 10px 10px;
            background-color: #C4DBFE;
            margin: 10px auto;            
        }

        .answer {
            background-color: aquamarine;
        }

        button {
            background-color: #004089;
            color: white;
            padding: 10px 10px;
            border-radius: 5px;
            border: none;
        }
    style>

If you save the file and check the browser, you should find your page like this:

Screenshot of the page

The chat area is empty for now because we haven't submitted any messages yet. To do that, we need to bring in JavaScript.

How to Add Front-end JavaScript

When the user inputs a message in the text area and clicks on the submit button, we'll send the message to the backend, get the response from the API and display it on the page.

Start by adding an empty script element within the tags in index.html:

<script>

script>

Inside the script tags, we're to call the getResponse() function whenever the user clicks on the submit button:

const btn = document.getElementById("btn")

btn.addEventListener('click', getResponse)

The getResponse function essentially gets the user's question, sends it to our Node.js backend to fetch the answer, and displays the response on the page.

Inside the function, we start by accessing the prompt submitted by the user:

async function getResponse() {                  
  var inputText = document.getElementById("input").value           
  const parentDiv = document.getElementById("chat-area") 

  // The remaining code goes inside this function
}

If the value of the text area is empty, we simply return nothing:

if(inputText === '') { return }

Otherwise, we first add the question to the chat area in the UI:

const question = document.createElement('div')
question.innerHTML = inputText
question.classList.add("box")
parentDiv.appendChild(question)

Next, we reset the text area so it's blank:

document.getElementById("input").value = ''

Then we send the question to our server so that the server can send it to the OpenAI API and send us back a response:

let res = await fetch('http://localhost:5000/chat', 
  {
    method: 'POST',
    headers: {
      "Content-Type": 'application/json'                
    },
    body: JSON.stringify({
      question: inputText          
    })
  }
)

const data = await res.json()

If the response has a message property, we add the message content to the chat area in the UI:

if(data.message) {
  const answer = document.createElement('div')
  answer.innerHTML = data.message
  answer.classList.add("box", "answer")
  parentDiv.appendChild(answer)
}

Now the frontend is all set. Let's move our focus back to the backend.

How to Send the API Response to the Client

Our backend will serve as the middleman between the frontend and OpenAI's API. Basically, we'll get the prompt from the client, send it to the API, and send the response back to the client.

In server.js, import these at the top of the file:

const { OpenAI } = require("openai")

Next, create an instance of the openai connection using the API key you generated earlier:

const openai = new OpenAI({
    // replace your-api-key with your API key from ChatGPT
    apiKey: 'your-api-key'
})

Finally, create the route:

app.post('/chat', async (req, res)=> {   
  try {
    const resp = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
        messages: [
          { role: "user", content: req.body.question}
        ]  
    })           

    res.status(200).json({message: resp.choices[0].message.content})
  } catch(e) {
      res.status(400).json({message: e.message})
  }
})

Save the file changes, then go to your browser and submit a question. You should get back a response after a few seconds.

You can ask as many questions as you want, but you'll have to wait for a response to each question from the backend.

Screenshot of the questions and corresponding answers from ChatGPT

If any error is encountered, check the console in your browser to inspect the error message.

Conclusion

OpenAI's API offers you a way to include AI-powered chatbots in your application using JavaScript or even HTMX (if you're knowledgeable of HTML but not JavaScript).

Connect with me on Twitter and LinkedIn.

How to Create a 3D Tilting Card Effect in React Native

Kingsley Ubah — Wed, 22 Feb 2023 16:35:15 +0000

Recently, I came across a tutorial about how to create a 3D tilting card effect (with mouse tracking functionality) on Kevin Powell's YouTube channel.

Kevin used HTML, CSS, and JavaScript to create the markup, style the card, and implement the mouse tracking functionality, respectively.

In this tutorial, we'll take a look at how to replicate the same project in React Native. We'll write pure HTML markup and use the react-native-render-html library to render it all into 100% native views.

This how our tilted cards will look by the end of this tutorial:

Feeling excited? Let's begin!

Prerequisites

To follow this tutorial, you'll need to have a good understanding of HTML. Knowledge of JavaScript and React Native is helpful but not necessary.

To follow this tutorial locally, on your computer, you need to have the following installed:

Node.js v10 or above
Xcode or Android Studio (set up to run the emulator)
React Native CLI

For step-by-step instructions on how to set up your React Native development environment, you can read the official documentation.

Alternatively, if you don't have the time or resources to set it up from scratch, use Expo Snack. This is a browser-based environment that lets you create React Native projects without needing to install anything.

Skip the Project Setup section if you're following this tutorial from Expo Snack. Otherwise proceed.

Project Setup

Run this command to install the React Native CLI tool using npm:

npm install -g react-native-cli

Initialize a new project:

react-native init my-app

Start your emulator:

cd my-app && npx react-native run-ios // Start the iOS simulator

// OR

cd my-app && npx react-native run-android // Android the android emulator

These commands should have the simulator show up on the screen like this:

Afterward, cd into your application folder on the terminal and run the following command to install React Native HTML Renderer:

npm i react-native-render-html

That's all for installations. Let's get started with the code.

How to Set Up the App

In this section, we'll import the React, useWindowDimensions, and RenderHtml, which we'll use create the layout of our application.

Open the App.js file in your project and clear the file content. Then start by importing the following:

import * as React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

The useWindowDimentions hook allow us to access the dimensions of the viewport, which is how we're going to make the content responsive across all screen sizes. We'll use RenderHtml to render pure HTML markup into native views in our React Native application.

If you're following this tutorial on Expo Snack, you'll be asked to add the react-native-render-html package by clicking on Add dependency link at the page bottom. Click it.

Next, include the following code beneath the imports:

const source = {
  html: `
"language-css" tabindex="0">"language-css">"token selector">.awesome-layouts "token punctuation">{
  "token property">display: grid;
class="token punctuation">}`
};

As a value of the html property, we pass the HTML markup for the code block. It's pre-formatted content, so don't format the code (or it'll break). Just copy the code as it is and paste in your file.

Next, create App() as a functional component and a base stylesheet for the application. Return and pass in both the pre-formatted code and stylesheet to the source and baseStyles, respectively:

export default function App() {  
  const { height, width } = useWindowDimensions();

  const base = {
    height: height,
    width: width,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'hsl(224, 32%, 12%)', 
    color: 'white'
  }

  return (  
      
  );
}

On line 2, we access the height and width of the viewing device from the useWindowsDimensions() call. We then set the height and width of the root element to that of the screen, align the content to the center, set the background color to dark-blue, and the text color to white.

Save the file. You should find a UI that looks like the image below:

Next up is styling the code block.

How to Style the

 Code

In this section, we'll place the pre-formatted code inside a card, tilt the card, and apply different colors to the code to make it appear like real CSS code.

1. How to put the code in a card

All of the stylesheets for our HTML markup will go inside the htmlStyles object. The first property of htmlStyles is the stylesheet for the

 element:
const htmlStyles = { 
  pre: {
    fontSize: '18px',
    fontWeight: 'bold',
    backgroundColor: 'hsl(222, 45%, 7%)',
    padding: '10px',
    borderRadius: '5px',    
    transform: [
      { perspective: 5000 },
      { rotateX: '8deg'},
      { rotateY: '20deg'},
      { skewX: '8deg'},
    ],
  },  
}

This adds a dark-blue background around the code, rounds the box edges, increases the font size and weight of the code, and adds some padding between the box and the code.
With transform, we rotate the card 8 degree around the x-axis and 20 degrees along the y-axis, tilting the card a little bit.
We also set perspective to 5000 to set a significant distance between the user and the card (which makes it more realistic).
To see this in effect, you need to add the tagsStyles property to  and pass htmlStyles as its value, like so:


Save the file and go over to your device/emulator to see the effect:

Next, we style the text by adding different colors to it.
2. How to style the code
We don't want all of the code to be white. Instead, we want the .selector to be pink, the .property greenish-blue and the rest white. We'll add some extra CSS to get these colors.
Recall that each  element within 
 had a class name of either .selector, .property or .punctuation. With react-native-render-html, we can't use the class selector to target elements, so this will not work:
.selector {
    color: 'hsl(338, 70%, 65%)'
}

We'll have to define the CSS code directly on the respective HTML tags with the inline style property. So for the  element with the class name selector, apply the pink color like so:
style="color: hsl(338, 70%, 65%);

As for the  element with class name of property, apply a greenish-blue color to it:
style="color: hsl(183, 70%, 62%);

Next, we'll add some glow to the text. To do this, we'll use the React Native versions of the text-shadow property and we'll apply it to the  elements (add inside the htmlStyles object):
 span: {
    textShadowColor: 'currentColor',
    textShadowOffset: {width: -0.5, height: 0.5},
    textShadowRadius: 4
  },

By setting textShadowColor to currentColor, we're telling React Native to use the same color of each text as shadow color, so the selector will have a pink glow and the property will have a greenish-blue glow.
Here's the result:

Now we're done with styling the code. In the next section, we'll turn the card into a 3D element.
How to Make the Card 3D and Add Different Layers
In this section, we'll add a second layer to the card and transform the card into a 3D object. The second box will be an image gradient containing the colors blue and red.

In the source object, underneath the 
 tag, create an  element and point its src to the image above (upload the image to a place like Dropbox and get the URL):
"put-the-url-to-your-image-here"/>

Next, add the following stylesheet to the htmlStyles object:
  img: {    
    top: -95,
    right: 7, 
    zIndex: -10,   
    height: 95,
    width: 216,    
    borderRadius: '5px', 
    overflow: 'hidden',   
   transform: [
      { perspective: 5000 },
      { rotateX: '8deg'},
      { rotateY: '20deg'},
      { skewX: '8deg'},
    ],
  }

The above stylesheet basically overlaps the image with the code block (top and right), places the image behind the code block (z-index), makes the image the same size as the code block (height and width) and the same shape as well (transform).
Here's the final look of our application:

To straighten the button, you simply reset the value of rotateX and rotateY to 0 for both the  and the 
 element:

Grab the full source code from here.
Conclusion
In this tutorial, we took a tilted 3D card made with HTML and CSS and replicated it in React Native.
To achieve this, we used react-native-html-renderer to render HTML to React Native elements, and React Native specific properties to style the elements.
I hope you enjoyed following this tutorial as I did making it. You can give feedback on this article or discuss opportunities with me on Twitter.

React Native Tutorial – How to Create a Simple Responsive Layout for Beginners

Kingsley Ubah — Thu, 02 Feb 2023 23:50:26 +0000

Having a responsive layout is an important component of user interface (UI) design. It enables a website or application to automatically adjust its size and layout based on the size of the user's device and screen. This provides an optimal viewing experience.

Responsive layouts also give the user a more consistent and unified look across all devices and platforms, while still making sure the user's experience is tailored to their device.

This helps create a more user-friendly experience and improves the overall usability of the website or application.

In this tutorial, I'll show you how to create a simple responsive layout in React Native. You can preview the demo here.

Requirements

To follow this tutorial, you'll need:

A basic understanding of React Native
Expo Snack – a browser-based development environment for React Native

How to Create a Responsive Layout

Go to Expo Snack and clear the content of App.js. Start by importing the React library and Text, View, and Stylesheet UI components:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

React Native is based on React, so we need to import the React library explicitly. The Text component is used to create text, View is a container element used for grouping other elements, and StyleSheet is used to define the components stylesheet.

Next, define an App function and return two custom components,

and

export default function App() {
  return (
    
      
      
    
  );
}

Here we wrap

and

inside a container. Both of them are custom components, and because they haven't been created yet, you'll get a ReferenceError. Ignore that for now.

Next, create the stylesheet for this component and define the styling for the container element:

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },  
});

This flex:1 value tells the component to fill all available space and to share the space evenly amongst its children.

Let's now create both the

and components.

How to Create the
Component

In the components folder, create a new file named Header.js. Then import both the following:

import * as React from 'react';
import { Text, View, StyleSheet} from 'react-native';

Create a

function and return a single with text saying "Header Component":

export default function Header() {
  return (
    
      Header Component
    
  );
}

The is linked to a style property of header. Keep in mind that we want to make this header responsive on all screen sizes. Let's do that using CSS.

const styles = StyleSheet.create({
  header: {
    width: "100%",
    height: "15%",
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'grey'    
  },
});

With this stylesheet, we're specifying that, no matter how big or small the screen, the header should span the whole width of the screen (100%) and take only 15% of the screen's height.

Now to the boxes.

How to Create the Component

Below the header we want to place two boxes, one to the left and one to the right. We also want the boxes to take up a certain width and height based on the screen dimension of the target device.

Inside the components folder, create a new file named boxes.js. Start by importing the following:

import * as React from 'react';
import { Text, View, StyleSheet} from 'react-native';

Next, create a Boxes function and return the markup for the boxes:

export default function Boxes() {
  return (
    
      
        
          Box 1
                              
      
      
        
          Box 2
                              
      
    
  );
}

Here we have two boxes placed inside the container. Inside both is a View element containing the text label for each box.

Next, define the styling for the component. We'll create three sets of styles, one for the box container, one for the inner wrapper and the last for the boxes themselves.

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "85%",
    alignItems: "center",
    flexDirection: 'row',
    flexWrap: 'wrap'    
  },
  box: {
    width: "50%",
    height: "50%",
    padding: 5
  },
  inner: {
    flex: 1,
    backgroundColor: "#D3D3D3",
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Recall that the header takes up 15% of the screen's height. Therefore, with the above CSS, we specify that the box container should take up the remaining 85%.

We align the boxes to the center and place them in a row arrangement. Each box takes up 50% of the total height and width, and we apply padding of 5 to space them a bit.

Now that we have both the responsive Header and Boxes ready, let's import them to App.js and see the results.

How to Import
and

Inside App.js, at the top of the file, import both

and like so:

import Header from "./components/Header"
import Boxes from "./components/Boxes"

Once the app compiles, you should see your responsive layout on the right side of your window looking like this:

Final look of responsive layout

This arrangement will be consistent across all screen sizes because we used percentages to set the height and width instead of fixed width values.

Conclusion

I hope this tutorial helped you understand React Native positioning better. You should now be able to create responsive layouts in your React Native app using the techniques we covered in this post.

Grab my FREE freelance writing checklist here. Have a great week!

React.js vs React Native – What's the Difference?

Kingsley Ubah — Wed, 01 Feb 2023 00:41:21 +0000

Are React.js and React Native the same?

If you're new to the world of web and mobile development, you might be wondering the same thing.

As a newbie, it's easy to assume that React.js are React Native are the same. After all, they both have "React" as part of their name.

Though React.js and React Native share a lot in common, they're different from each other. In this article, I'll explain both React.js and React Native, then I'll list out their similarities and differences. By the end of this article, you'll have a clear knowledge of both tools and what kind of app they're used to build.

In order to have a clear understanding of the difference between React.js and React Native, we have to first dive into how a website is rendered on a web browser.

How Websites Get Rendered: HTML, CSS, and JavaScript

When you type the URL of a website into your browser's address bar and click enter, the browser requests the website, and the web server sends an HTML file to the browser.

The HTML file contains the content of the webpage and the linked files such as images, videos, and stylesheets. The web browser parses the HTML file and builds a Document Object Model (DOM) which is a tree-like structure containing the elements of the page (for example, buttons, paragraphs, links, and so on).

The browser initiates requests for the linked files and downloads them to the computer. It then parses the linked files, such as CSS and JavaScript, and applies the styling to the content, making it more presentable to the user. After all the files are downloaded, the browser renders the content on the screen.

The browser also runs any JavaScript code to make the page interactive. So, for example, if the user fills the wrong information in a form, JavaScript can be used to insert a

element into the page showing an error message to the user.

However, one of the biggest problems of inserting elements into the DOM with JavaScript is that the code is not reusable. For example, if you want to insert the same button into the page, but with different background colors, you have to create the element twice in JavaScript:

let blueBtn = document.createElement("button").style.backgroundColor("blue")
let redBtn = document.createElement("button").style.backgroundColor("red")

// Insert blue and red button into the page

This is just a simple example. With complex user interfaces, you can imagine how long and confusing things can become. React was developed to solve this problem by making the process of creating web apps much more organized and intuitive.

What is React.js?

Technically speaking, ReactJS is an open-source, front-end JavaScript library for building user interfaces or UI components. In simple terms, this means that you can use React to build all the parts of a website that the user can see and interact with on their browser window.

So what's the difference between using plain JavaScript and React? Well, React makes the process of designing the user interface much easier. It allows you to create elements that you can easily re-use in other parts of the website or app.

With JavaScript, I previously mentioned how you'll need to write the same code twice to create the same button with different colors, which could lead to complexity in large projects.

React's component architecture solves this problem brilliantly. With React, you define a single piece of the UI, say a button, as a component.

const Button (props) => {
    return (
        
            
        
    )
}

The component in this case is a function that returns HTML-like syntax called JSX, which defines the presentation and look of the component on the web browser.

Now, say you want to use the same button (but with different colors) in multiple places on your website. Instead of creating each button from scratch with different color properties (as you would with JavaScript), with React, you simple use the same

)
}

As you can see here, the state, logic and presentation of a component are all separate from each other, making React UI components easier to understand and compose.

To conclude, React is a JavaScript library designed to simplify the process to building the frontend of web applications.

What is React Native?

Here's the main difference between ReactJS and React Native:

React JS is used to build the user interface of web applications (that is, apps that run on a web browser)
React Native is used to build applications that run on both iOS and Android devices (that is, cross-platform mobile applications)
React uses HTML, CSS and JavaScript to create interactive user interfaces. React Native, on the other hand, uses native UI components and APIs to create mobile apps.

Both React JS and React Native share the same syntax. React Native was created as a way for developers to build cross-platform mobile applications using their existing knowledge of web development tools like HTML, CSS, JavaScript and the React core library.

In fact, some of the libraries commonly used together with React to develop web applications also have a mobile version for building apps in React Native – for example, Axios, Bootstrap CSS, and Tailwind CSS.

Here are the things React DOM and React Native have in common:

They both use the same core React library.
They both use the same component-based architecture, which means that developers can break down their applications into smaller, more manageable pieces.
They both use JavaScript as their programming language, and JSX as their templating language.
Both React DOM and React Native use virtual DOMs to render their applications.
Both React DOM and React Native also use the same styling techniques and components, through React Native's is a bit different.
They both utilize Chrome DevTools for debugging applications.
They use the same JavaScript APIs.
Both were developed in Meta. React was developed by a software engineer named Jordan Walke while React Native was born from a hackathon.

Conclusion

This article explored the differences between React DOM and React Native, two popular JavaScript tools. React DOM is primarily used for web development, while React Native is used for mobile development.

React DOM uses HTML, CSS, and JavaScript for layout and styling, and allows developers to create interactive user interfaces. React Native, on the other hand, uses native UI components and APIs to create cross-platform mobile applications.

Thanks for reading. Grab my FREE freelance writing checklist here.

React Native Networking – How To Perform API Requests In React Native using the FetchAPI

Kingsley Ubah — Fri, 20 Jan 2023 19:35:24 +0000

APIs, or application program interfaces, are essential mechanisms for businesses in all industries. They allow for a secure exchange of data between two different systems, such as a web application and a database.

Think of when you are using a mobile app to order food from a restaurant. The restaurant's menu, pricing, and ordering information could all be stored in a database that is managed by a back-end application.

To enable the mobile app to access the data, the app must make an API request to the back-end application. The request will include information such as the restaurant's location, the menu items, and the desired order.

The back-end application will then respond with the requested information. The mobile app can then use the data to create a user-friendly interface for ordering food.

API requests can also be used to update the database with new data, providing a way for the application to save and store new information. You can also set up with in-app subscription events. For example, when a user's subscription is about to expire, an API request is sent to a notification system to alert the them.

In this tutorial, you’ll learn how to make GET, POST, PUT and DELETE requests to APIs in a React Native app using the FetchAPI. You can access the full code from this tutorial here.

Prerequisites

To follow this tutorial, you’ll need just two things:

A basic understanding of React Native
Expo Snack

Expo Snack is an online development environment for React Native which essentially lets you run React Native apps on your web browser. This removes the hassle of setting up your local React Native environment from scratch.

Setting up the app

Go to Expo Snack to initialize a new React Native project, then go to the App.js file and clear the file’s content.

Start by importing React, useState, and useEffect hooks from React as well as the Text, View, and StyleSheet components from React Native.

import React,{useState, useEffect} from 'react';
import { Text, View, StyleSheet } from 'react-native';

Next, define an App component function. Inside the function body, we set the data state to an empty array, the loading state to true, then we return a simple “Hello World” text for now.

export default function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  return (
    <View>
      <Text>Hello WorldText>
    View>
  );
}

Later on, when we retrieve data from JSONPlaceholder API (see next section), we’ll populate out the data state with it and render the data from the App component as text.

The API we’ll be working with

The API we’ll be fetching our data from is JSONPlaceholder. This is a free fake API for testing and prototyping purposes.

The API comes with 6 common resources which you can read, edit, update or delete by making API requests.

Array of 100 post objects

So here each post is an object with four properties: userId, id, title and body. There are 100 objects in the array.

You can:

create a new post by making a POST request to this API (that is, add a new object)
read a specific post by making a GET request to this API (that is, read an object)
update an existing post by making a PUT request to this API (that is, modify an object)
delete an existing post by making a DELETE request to this API (that is, remove an object)

Let’s start with making GET requests in our React Native app.

How to Make a GET Request in React Native

An API GET request is a type of API request used to retrieve data from a server. The request is sent via a HTTP GET method and data is returned in the form of a JSON or XML object.

Let’s make a GET request in our React Native app. First, store the URL you want to make the request to inside a variable (paste this code under state variable declaration):

const url = "https://jsonplaceholder.typicode.com/posts"

Next, use the fetch method to execute the API request to the URL. Wrap the fetch inside of useEffect (this hook allows us to perform side effects in our code, for example API calls):

useEffect(() => {
  fetch(url)
    .then((resp) => resp.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}, []);

So what’s happening here inside useEffect? First we make a GET call to the URL. Once the data is returned, we parse it to JSON with resp.json(), and in the next then block we call setData to update the state with the post.

In the event of any error, the catch method will run (which logs the error to the console). Finally, we set the loading state to false.

Finally, we render the post gotten from the API:


  {loading ? (
    <Text>Loading...Text>
  ) : (
    data.map((post) => {
      return (
        <View>
          <Text style={styles.title}>{post.title}Text>
          <Text>{post.body}Text>
        View>
      );
    })
  )}
;

So if the API request is still in progress, we show the “Loading” text on our app. Once the data is retrieved, we loop through the array and render the title and text of each post.

To style it up a bit, paste the following stylesheet underneath App:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  title: {
    fontSize: 30,
    fontWeight: "bold",
  },
});

Here’s the result when the posts are returned from the API.

Final look

As you can see, we successfully fetched the list of posts from the API and rendered each of them in our React Native app.

Now if you want to retrieve a specific resource (like a specific post) as opposed to a collection of resources like a list of posts, all you need to do is add the resource ID to the URL like so:

const url = "https://jsonplaceholder.typicode.com/posts/1"

If we make a GET request to the above API endpoint, the server will only gives us back the post with an ID of 1.

Let’s move on to other types of requests.

How to Make a POST Request in React Native

An API POST request is a type of API request that is used to create or update a resource on a web server.

It sends data to the server in the form of a request body which usually contains information such as the title, description, and other relevant details. If the data is accepted, the server responds with a success code and the resource is created or updated.

When making a POST request with the FetchAPI, you must specify the method as ‘POST’. Here’s an example of a POST to the fake server from our React Native app:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    userId: 55,
    id: 101,
    title: "Post title",
    body: "Post body",
  }),
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(JSON.stringify(responseData));
  })
  .done();

The value of the body property must always be a JSON object with JSON string values (hence the JSON.stringify call).

Once the server is done processing the request, it sends back a response to tell you if the resource was created on the server or not (and why it failed).

How to Make a PUT Request in React Native

If a POST request is used to create a new resource on a server, a PUT request is used to update a specific resource on that server.

In a PUT request, you need to specify the ID of the resource you want to update on the server as well as the new values. Here’s an example which updates the title and body of post one on the server:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    userId: 55,
    id: 101,
    title: "New Post title",
    body: "New Post body",
  }),
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(JSON.stringify(responseData));
  })
  .done();

Similar to a POST request, the server sends back a response to tell you if the resource was updated on the server or not (and why it failed).

How to Make a DELETE Request in React Native

As you might have guessed, a DELETE request is used to delete a specific resource from a server.

In a DELETE request, you only specify the ID of resource you want to delete on the server:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(JSON.stringify(responseData));
  })
  .done();

Once the server is done with processing the request, it sends back a response to tell you if the resource was deleted on the server or not (and why it failed).

How to Integrate Other Third-Party APIs to React Native

Third-party APIs are created and maintained by organizations other than the main developer of the application. They are used to provide access to certain external data sources so that developers can incorporate them into their applications.

With the widespread use of React Native for developing mobile applications, third-party APIs can be easily integrated to create powerful and feature-rich applications.

One of the main benefits of using third-party APIs is that they are often updated frequently, which means that the developers can quickly access the latest features and data sources. This can be especially useful when developing mobile applications, as they often require access to the latest features and data sources.

Additionally, you can also use third-party APIs to add features that are hard or impossible to create in-house as it requires substantial human, financial, and time resources.

For example, there are complex APIs for Facebook login, payment processing, weather report, integrating in-app purchases infrastructure, and so on.

Conclusion

This tutorial walked you through the steps of making API requests in React Native using the built-in Fetch library.

I hope you enjoyed this as much as I did writing it. Have a great week.

How to Build a Responsive Form with Filter Functionality Using HTML, CSS, and JavaScript

Kingsley Ubah — Wed, 13 Oct 2021 20:54:46 +0000

Most sites that display a list of data in a table typically have some kind of filter functionality implemented. This helps the user filter relevant items based on the text they type into the form input.

In this quick tutorial, we are going to build a responsive filterable table which looks like this:

A responsive table filtered by programming language

The table will contain a list of developers. Each row contains a name, an age, and programming language. When a user types into the input field, the table will filter and return the rows which match the value entered.

During the process of building this, you will learn about some CSS properties as well as DOM access/manipulation with JavaScript.

You can get the example code from CodePen.

Getting Started

You will need to create three simple files in your project folder. They are index.html for the HTML markup, styles.css for the styling, and index.js for the script.

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Filterable Tabletitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>

  <script src="index.js" type="text/javascript">script>
body>
html>

Make sure to link your stylesheet and script file as I have done in the HTML above.

HTML Markup For The Table

Add the following markup inside the body tags:

<div class="app">
    <input type="text" id="searchInput" placeholder="filter developer...">

    <table>
      <thead>
        <tr>
          <th>Nameth>
          <th>Ageth>
          <th>Languageth>
        tr>
      thead>
      <tbody id="names">
        <tr>
          <td>Kingsleytd>
          <td>32td>
          <td>JavaScripttd>
        tr>
        <tr>
          <td>Samueltd>
          <td>22td>
          <td>Pythontd>
        tr>
        <tr>
          <td>Joycetd>
          <td>28td>
          <td>Rubytd>
        tr>
        <tr>
          <td>Jaketd>
          <td>29td>
          <td>Pythontd>
        tr>
        <tr>
          <td>Danieltd>
          <td>40td>
          <td>JavaScripttd>
        tr>
        <tr>
          <td>Marytd>
          <td>21td>
          <td>Ctd>
        tr>
        <tr>
          <td>Davidtd>
          <td>26td>
          <td>JavaScripttd>
        tr>
        <tr>
          <td>Kellytd>
          <td>31td>
          <td>Reacttd>
        tr>
        <tr>
          <td>Cleotd>
          <td>43td>
          <td>Javatd>
        tr>
        <tr>
          <td>Petertd>
          <td>19td>
          <td>Vuetd>
        tr>
        <tr>
          <td>Georgetd>
          <td>59td>
          <td>Coboltd>
        tr>
        <tr>
          <td>Jamestd>
          <td>29td>
          <td>JavaScripttd>
        tr>
        <tr>
          <td>Ethantd>
          <td>22td>
          <td>PHPtd>
        tr>
        <tr>
          <td>Sandratd>
          <td>29td>
          <td>Rtd>
        tr>
        <tr>
          <td>Pirestd>
          <td>34td>
          <td>React Nativetd>
        tr>
        <tr>
          <td>Marthatd>
          <td>30td>
          <td>Reacttd>
        tr>
      tbody>
    table>
  div>

The first element is the form input. We'll use this to collect data from the user.

Then we have the table. The table consists of a head (thead) and a body (tbody). The head has a single row (tr) of data, which is the heading. The body has 16 rows of data, each of which consist of a name, age, and programming language.

We wrap both these elements in a parent div tag. They will help us with alignment as we will see later in the CSS.

Save the file and open the app on a web browser.

Table HTML

How to Style the Table with CSS

We will now apply some styling to the table. First, we set the base styles like this:

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

/* Set no margin and padding around body. Set height to take up entire screen height. Align everything to the center, both horizontally and vertically */

body {
  margin: 0;
  height: 100vh;
  padding: 0;
  font-family: "lato", sans-seriff;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

/* Remove border and outline around input. Set width to take up the entire width of parent and set margin on bottom */

#searchInput {
  border: none;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
}

/* When input gains focus, add a blue border below it */

#searchInput:focus {
  border-bottom: 2px solid #4575b6;
}

The table will get aligned to the center.

Center aligned table

To make the table look better, we can use the following styling rules:


/* Sets width of table container (div) to 80% of browser window's width and the height to 100% of window's height. `vh` and `vw` makes the table responsive because it scales along with screen size. Also set margin of 20px to top and bottom */

.app {
  width: 80vw;
  height: 100vh;
  margin: 20px 0;
}

/* Collapse all borders separating each cell. Table takes up entire width of .app. Set gray shadow around table */
table {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 5px 7px gray;
}

/* Set shadow on just the table head */
thead {
  box-shadow: 0px 0px 10px gray;
}

/* Add some space around table heading. Align text to right and transform to uppercase */

th {
  padding: 1rem 3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}

/* Add padding on each cell */
td {
  padding: 0.5rem 3rem;
  font-size: 1rem;
}

/* Create alternating color(blue) across the rows. Set blue on all even ones (2, 4, 6 ...) */

tr:nth-child(even) {
  background-color: #dee8f5;
}

Now our table looks a bit better and it's also responsive.

Table is now responsive

How to Implement the Filter Functionality with JavaScript

The table is pretty much static at this point. Using JavaScript, we will implement the logic for filtering the names based on what a user types into the form field.

In your script file, define a function called filter. In the first three lines we access the user's input value, pass the table body into the variable names, and finally access all table rows from inside of the .

We also change the value to uppercase to make sure everything is consistent (the user might type 'j' instead of 'J').

  /* This function will check for the user's input and based on that will either hide or display a particular row */

  function filter() {
    // Access text value and elements from the DOM 
    let value = document.getElementById("searchInput").value.toUpperCase();
    let names = document.getElementById("names");
    let rows = names.getElementsByTagName("tr");

   // Code continues

Next, we loop through each array. For each row, we access the last column (language column) and get its text content (actual value).

for (i = 0; i < rows.length; i++) {
    let column = rows[i].getElementsByTagName("td")[2];
    let language = column.textContent;

    rows[i].style.display =
      language.toUpperCase().indexOf(value) > -1 ? "" : "none";
  }
}

document.getElementById("searchInput").addEventListener("keyup", filter);

If the actual string value from the table contains any of the user's values from their input, we display that row. Otherwise, we hide it. We also used the ternary operator to shorten the conditional statement.

Finally, we add an event listener on the input. Every time the key is released, the filter will be invoked.

Here is the full code for that:

function filter() {
  let value = document.getElementById("searchInput").value.toUpperCase();
  var names = document.getElementById("names");
  var rows = names.getElementsByTagName("tr");

  for (i = 0; i < rows.length; i++) {
    let column = rows[i].getElementsByTagName("td")[2];
    let language = column.textContent;

    rows[i].style.display =
      language.toUpperCase().indexOf(value) > -1 ? "" : "none";
  }
}

document.getElementById("searchInput").addEventListener("keyup", filter);

Your table should look similar to this in the end:

Wrapping Up

With just HTML, CSS, and JavaScript you can create some really stylish elements with advanced features.

I hope you learned a thing or two from this. Once again, you can check out the code on CodePen and tweak it as you like.

Thanks for following along.

How to Build an Accordion Menu Using HTML, CSS and JavaScript

Kingsley Ubah — Wed, 29 Sep 2021 19:45:33 +0000

You can use HTML, CSS and JavaScript to create stylish and dynamic web elements. And one useful element you can build is an accordion menu.

Accordion menus expand and collapse when a user clicks a button. It's a great way to not have to show all the info about a topic up front, and instead give users the option to show only what they need.

In this tutorial, I'll show you how to build a simple accordion menu that looks like this:

In UI design, an accordion menu is a vertically stacked list of various pieces of information. For each list, there is a labelled header pointing to corresponding content. Each list's content is hidden by default. Clicking on a particular label will expand its content.

One very common use case for accordions is to hold a list of frequently asked questions. Clicking on any question will toggle/show a corresponding answer.

We'll begin by defining the HTML markup. If you are using an IDE like VS Code and you have emmet installed, create a new index.html file and type ! followed by enter. This should create HTML boilerplate code for your project.

Alternatively, you can copy the following code into your index.html, or get the code for this project from Codepen.

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>

  <script src="app.js" type="text/javascript">script>
body>
html>

The folder structure is simple. We will create a folder called accordion. Inside the folder we will create three files: index.html, styles.css, and app.js. We will also link all files into our HTML markup as you can see above.

HTML Markup for the Accordion

For each list in the menu, we will have two divs – one for the label, the other for the content.

<body>
  <div class="accordion-body">
  <div class="accordion">
    <h1>Frequently Asked Questionsh1>
    <hr>
    <div class="container">
      <div class="label">What is HTMLdiv>
      <div class="content">Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and structure of a document. HTML is very simple to learn and use.div>
    div>
    <hr>
    <div class="container">
      <div class="label">What is CSS?div>
      <div class="content">CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. CSS is popularly called the design language of the web.
div>
    div>
    <hr>
    <div class="container">
      <div class="label">What is JavaScript?div>
      <div class="content">JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third of the web trio.div>
    div>
    <hr>
    <div class="container">
      <div class="label">What is React?div>
      <div class="content">React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. div>
    div>
    <hr>
    <div class="container">
      <div class="label">What is PHP?div>
      <div class="content">PHP is a server-side and general-purpose scripting language that is especially suited for web development. PHP originally stood for Personal Home Page. However, now, it stands for Hypertext Preprocessor. It’s a recursive acronym because the first word itself is also an acronym.div>
    div>
    <hr>
    <div class="container">
      <div class="label">What is Node JS?div>
      <div class="content">Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigmdiv>
    div>
    <hr>
  div>
  div>

  <script src="index.js" type="text/javascript">script>
body>

Without CSS, our page will look all bare, like this:

How the accordion menu looks without CSS

How to Style the Accordion with CSS

We want our accordion menu to look good, of course. Time to bring some CSS into play. I've added some comments in the code to explain what each piece is doing:

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

/* Sets the background color of the body to blue. Sets font to Rubik */

body {
  background-color: #0A2344;
  font-family: 'rubik', sans-serif;
}

/* Aligns the heading text to the center. */

h1 {
  text-align: center;
}

/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */

.accordion {
  width: 800px;
  margin: 90px auto;
  color: black;
  background-color: white;
  padding: 45px 45px;
}

With all of these styles applied, here is how our accordion will look like now:

Styles added to the accordion menu

Now we need to start doing some work on the inside to set up its functionality. First, we set the position property for each of the containers (holding both the label and content) to relative.

That means we can now position its children relative to it.

.accordion .container {
  position: relative;
  margin: 10px 10px;
}

/* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */

.accordion .label {
  position: relative;
  padding: 10px 0;
  font-size: 30px;
  color: black;
  cursor: pointer;
}

You can now notice the difference in the image below:

The next action will be to append a little '+' sign at the end of each list. This will let users know that they can expand the section to learn/see more.

We will achieve this using the ::before selector. The ::before and ::after selector is used to place content before of or after a specified element.

Here, we are inserting '+' before the label. But we will use the offset properties top and right to place it at the far right corner.


/* Positions the plus sign 5px from the right. Centers it using the transform property. */

.accordion .label::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 30px;
  transform: translateY(-50%);
}

/* Hides the content (height: 0), decreases font size, justifies text and adds transition */

.accordion .content {
  position: relative;
  background: white;
  height: 0;
  font-size: 20px;
  text-align: justify;
  width: 780px;
  overflow: hidden;
  transition: 0.5s;
}

/* Adds a horizontal line between the contents */

.accordion hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}

This will make everything better. Also notice that the content for each list is now hidden.

Accordion menu's content is now hidden

Adding JavaScript to our Accordion

At this point, our accordion is pretty much static. To make a container display the content when a user clicks on it, we will need to bring in some JavaScript.

Navigate to your script app.js and type in the following code:

const accordion = document.getElementsByClassName('container');

for (i=0; i'click', function () {
    this.classList.toggle('active')
  })
}

This script will access all of our lists by classname of container.

Then we will loop through the list. For each container, we simply want to register an event listener to it. When it gets clicked, we want to toggle the class "active" on that element.

Now we are going to test this effect. Click the first container with the label What is HTML, open your DevTools (click on F12), and inspect it inside of the elements tab.

You should find the active class registered on it:

active class toggled on first menu item

Clicking on the element again will remove the active class from it.

How to Finish Up the App

There is one last thing we need to do. We need to create an active class within a stylesheet. We will define how we want our accordion to look once JavaScript toggles the class on a container.


/* Unhides the content part when active. Sets the height */

.accordion .container.active .content {
  height: 150px;
}

/* Changes from plus sign to negative sign once active */

.accordion .container.active .label::before {
  content: '-';
  font-size: 30px;
}

This is how our app looks and behaves in the end:

Final look

Wrapping Up

So in this tutorial, we built an accordion menu using HTML, CSS, and JavaScript.

Thanks for following along. I hope you learned something useful from this tutorial.

If you are interested in content like this, follow my blog.

Have a great week.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

How to Build a Sign Up Form with Floating Labels and Transitions Using Plain HTML and CSS

Kingsley Ubah — Mon, 13 Sep 2021 21:15:35 +0000

In this tutorial we are going to build a modern sign up form with floating labels and smooth transitions using plain HTML and CSS.

A view

As you can see in the above image, when an input within the form gains focus, its label floats to the top and a semi-thick border appears around the input. If text gets typed into the input and the input loses focus, the label remains on top. Otherwise, the label drops back down into the input.

Many modern forms have some sort of transition applied to them. Not only do these transitions make the form more dynamic, but they also help guide the user on the state of the input (that is whether it has focus or not) and what kind of data each input is expected to handle.

In this tutorial, you will learn about some cool CSS features like transitions, selectors like :placeholder_focus ,and many other CSS properties you should know.

Let's dive in!

The HTML Markup

We are going to define the markup for our sign up form. But before that, we have to set up our HTML boilerplate and correctly link to our stylesheet from the head tag. You can easily do this with the Emmet plugin by typing ! then tab in your IDE/Code editor.

You can also copy this boilerplate and paste it into your index.html file:

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>

body>
html>

Within the body tag, we define the markup for our sign up form:

<div class="signupFrm">
    <form action="" class="form">
      <h1 class="title">Sign uph1>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Emaillabel>
      div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Usernamelabel>
      div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Passwordlabel>
      div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Confirm Passwordlabel>
      div>

      <input type="submit" class="submitBtn" value="Sign up">
    form>
  div>

We create a container div to hold the form element. Each of the form's inputs, along with its text label, are wrapped inside a container div. The labels serve the purpose of informing the user what information each input should take in.

And our page will look like this:

HTML Form of four inputs and four labels

You may notice that the placeholder value we have assigned to all inputs is "a". This will be helpful later in the tutorial when we start to apply some dynamic logic.

How to Style the Form

Our form is pretty basic, so let's add some styling to make it look nicer.

First, we need to perform some resets and set the background color:

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* Get rid of all default margins/paddings. Set typeface */
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: "lato", sans-serif;
}

Here's what our page will look like:

Without any styling yet

After stying the body, we'll set the display mode of the content to flex. This makes sure that all the direct children inside a container element div are displayed side-by-side by default.

In our case, there's only one child inside the container signupFrm. The only reason we use display: flex here is to use the align-items and justify-content properties to help center everything vertically and horizontally:

/* Puts the form in the center both horizontally and vertically. Sets its height to 100% of the viewport's height */

.signupFrm {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

The vh property, which stands for viewport height, ensures that the form takes up 100% of the height of the browser window, regardless of the screen size or orientation. That will make it more responsive.

Our form is now aligned to the center

Now we'll style the form a bit:

.form {
  background-color: white;
  width: 400px;
  border-radius: 8px;
  padding: 20px 40px;
  box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
}

.title {
  font-size: 50px;
  margin-bottom: 50px;
}

In the first style targeted on the form, we set the background to white, we give it a width of 400px, we add some curve around the form, and finally we set a shadow around the box. We also set the font size of the title and some space below the element.

And the result should look like this:

The form is now inside a card, with a box shadow

Next, we'll style the div which contains the form inputs and form labels.

.inputContainer {
  position: relative;
  height: 45px;
  width: 90%;
  margin-bottom: 17px;
}

We set the position property of our input's container div to relative. This will enable us position the children input and label however we want. We also set the width to take up 90 percent of the entire container width.

This is how our form will be rendered in the web browser.

Looks better

Now we need to style our inputs.

We first set the position to absolute. This will allow us to move each of them to the top-left part of the relatively positioned container parent.

We also need to hide our arbitrary placeholder text (the "a" characters mentioned earlier), so they don't overlap with the text within each label. The placeholder text will be needed when we implement the transition:

/* Style the inputs */

.input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid #DADCE0;
  border-radius: 7px;
  font-size: 16px;
  padding: 0 20px;
  outline: none;
  background: none;
  z-index: 1;
}

/* Hide the placeholder texts (a) */

::placeholder {
  color: transparent;
}

With the styles applied, our form should now look like this:

The placeholder "a" is no longer visible

Next, we style the text labels:

/* Styling text labels */

.label {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 0 4px;
  background-color: white;
  color: #DADCE0;
  font-size: 16px;
  transition: 0.5s;
  z-index: 0;
}

The label shows text that tells which information is expected inside the input. We start by setting its position to absolute. And by setting the top and left properties, we can move the text upwards relative to its container.

Next we set a transition of 0.5 seconds. This is how long it will take the text to move up when hovered on.

Finally, we also set a z-index of 0. The low z-index ensures that the label is positioned behind other "higher-placed" elements if they ever overlap.

Here is what gets rendered on the page:

The result

Now we are going to focus on the buttons.

We'll add some smooth animations with the CSS transform property, which moves the button up a little and changes the color once it's hovered over:

.submitBtn {
  display: block;
  margin-left: auto;
  padding: 15px 30px;
  border: none;
  background-color: purple;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 30px;
}

.submitBtn:hover {
  background-color: #9867C5;
  transform: translateY(-2px);
}

Here is the result:

The button scales up and changes color when hovered over

Next, we need to perform some state changes.

When an input gains focus, we want to position its label beyond the top of the container (-7px), 3 pixels from the left, reduce the font-size to 14, and change the color to purple:

.input:focus + .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
  color: purple;
}

Here's the result:

Labels go up when input gains focus

We also need to add a purple border around the input when it gains focus.

.input:focus {
  border: 2px solid purple;
}

Purple border added

Finally, we have to do something very important.

Currently, when you type some text into the form and move focus (your mouse) away from it, the label text and the text within the input collide:

Collision between label and input value

With the following CSS, we'll specify that, when we type a value into the input and change focus, we want the label to remain floating. Also, well specify that we want the label text to lose its purple color:

.input:not(:placeholder-shown)+ .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
}

And with that, here is the final look of our sign up page.

Final look

Wrapping Up

I hope you learned some new things about CSS from this tutorial. CSS transitions bring life to your website, and in this guide we have made our form much more lively with them.

You can get all the code from this tutorial from this GitHub repository.

I recently created a newsletter where I provide practical tips and resources on learning web development. Subscribe to my newsletter and get tips right in your inbox.

Thanks for following along.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

CSS Flexbox and Grid Tutorial – How to Build a Responsive Landing Page with HTML and CSS

Kingsley Ubah — Wed, 08 Sep 2021 17:16:00 +0000

In this tutorial, we are going to build a simple landing page for an online education platform called Skilllz.

This tutorial will teach you how to use and implement CSS Flexbox and CSS Grid alignment. We'll also cover many other CSS concepts. And finally, we'll learn how to make the page responsive so that it works on all screen sizes.

The tutorial is divided into five parts:

How to Build the Navigation Bar
How to Build the Showcase Section
How to Build the Lower Section
How to Build the Footer Section
How to Make the Page Responsive

Each of these sections will teach you some new CSS and web development skills and tools. So let's jump right in.

How to Create the HTML Boilerplate

If you have emmet installed in your IDE, you can generate an HTML boilerplate for your project by typing ! and clicking the enter or tab key on your keyboard.

If not, you can copy this boilerplate code and paste it into your code editor:

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
head>
<body>

body>
html>

How to Use Font Awesome Icons

As you can see in one of the shots, we will be using some font icons to give better swap to our service section.

For this, we will be using font awesome from the CDN. If you created an HTML biolerplate by yourself, copy the following link tag and paste it into your head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

Let's Get Started

First, make sure that your stylesheet file (.css) is properly linked to your HTML page.

The Navigation Bar section is going to be comprised of our site's name as well as two navigation links: Log in and check courses.

Here is the markup for our navbar:

class="navbar">
        <div class="container flex">
          <h1 class="logo">Skilllzh1>
            <nav>
              <ul>
                <li class="nav"><a class="outline" href="">Log ina>li>
                <li class="nav"><a href="" class="outline">Check coursesa                 li>
              ul>
            nav>
        div>
      div>

On the div wrapping the elements inside this section (the navbar), we register the container and flex class.

.container: we will use this utility class in every section to make sure that the inner elements do not exceed a certain width which we'll specify in CSS
.flex: we will use this utility class to display children elements in a horizontally aligned manner (side-by-side) using CSS Flexbox.

Inside the div we have an h1 with class of logo and two navigation links li>a with the outline classes, respectively.

At this point, our page will look all plain and bare like this:

No CSS yet

How to Apply CSS Styling to our Page

We now have to apply some CSS rules to style our nav section the way we want. What we want to do first is set the base styling for our web page with the following code:

/* Override default style and set padding and margin to nothing */

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

/* White text throughout */

body {
  font-family: "lato", sans-serif;
  color: white;
}

/* Make all link text black with no text decoration */
a {
  color: black;
  text-decoration: none;
}


h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.2;
}


h2 {
  font-size: 25px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

p {
  font-size: 30px;
}

/* All images must not be larger than parent container */
img {
  width: 100%;
}

/* No styling on list items */
li {
  list-style-type: none;
}



p {
  font-size: 20px;
  margin: 10px 0;
}

With the default styles applied, our page will now look like this:

Next, we need to define the styling for our container class:

/* Centers it, sets a maximum width and makes sure elements can flow past it*/

.container {
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
}

Now, our content will not exceed the maximum width specified.

After that, we need to set the background color of our navbar section to purple:

/* Sets background color, height and padding*/

.navbar {
  background-color: purple;
  height: 70px;
  padding: 0 30px;
}

Then we target only the h1 element inside the navbar and specify the following styles:

/* Sets font size, reduces font-weight, adds margin and line height */

.navbar h1 {
  font-size: 30px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

With that style applied, our h1 heading will look like this:

Now we need to display both child elements inside the container h1 and nav side-by-side using Flexbox.

.navbar .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

First, we set the display mode to flex. This will align the elements side by side by default.

We then justify the content, adding a considerable space between each item using the space-between value. We align the items to appear at the center (middle) of the container and set its height to take up the entire container.

This is what our page should now look like:

Cool right?

However, we also do not want both of our navigation link stacked on top of each other. Instead, we want them to be displayed side-by-side. Guess how we do that? With Flexbox!

.navbar ul {
  display: flex;
}

/* Changes the color of both links to white, adds padding between them and margin as well */

.navbar a {
  color: white;
  padding: 9px;
  margin: 0 10px;
}

Our page will now look like this:

The power of CSS flexbox

If you watched the brief intro video, you will notice that whenever I hover over any of the links, the text color changes to a lighter shade of purple and a solid border appears below it.

We can implement this transition using the CSS :hover pseudo-element:

.navbar a:hover {
  color: #9867C5;
  border-bottom: 3px solid #9867C5;
}

Now watch this:

Hover effect on the links

And with that, we have come to the end of the navbar section.

How to Build the Showcase Area

The showcase area is going to house the headline text, supporting text, a form for signing up new users, as well as a headline image.

This section is going to be divided in two: the left side and the right side. In other words, it will be displayed as a grid of two units.

Here is the markup for this section:

<section class="showcase">
        <div class="container">
            <div class="grid">
              <div class="grid-item-1">
                <div class="showcase-text">
                  <h1>Learn any digital skill of your choice todayh1>
                  <p class="supporting-text"> Over 30,000 students currently learn with usp>
                div>
                <div class="showcase-form">
                  <form action="">
                    <input type="email" placeholder="Enter your email address">
                    <input type="submit" class="btn" value="Start Learning">
                  form>
                  <p class="little-info">Try out our free courses today. No risk, no credit card requiredp>
                div>
              div>

              <div class="grid-item-2">
                <div class="image">
                  <img src="./images/transparent.png" alt="">
                div>
              div>
           div>

        div>
      section>

Currently, our app is going to look a bit messy:

How to Apply CSS Styling to our Showcase Area

First, we set the height of the showcase section as well as a background color:

.showcase {
  height: 300px;
  background-color: purple;
}

Our app will now look like this:

Still messy

NOTE: I changed the color of h1 to white

Next, we apply the following styles:

/* Adds margin below the text */
.showcase p {
  margin-bottom: 30px;
}

/* Adds a shadow below the image */
.showcase img {
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}

/* Adds some padding on the form content */
.showcase-form {
  padding-left: 7px;
}

This brings us to the main activity. If you remember, I said that we were going to be creating two sections (grids) inside the showcase container. With the grid class registered on that container, we can align its content using CSS grid display like this:

.grid {
  overflow: visible;
  display: grid;
  grid-template-columns: 60% 40%;
}

This will create two columns inside of our showcase container. The first part will take up 60 percent of the container, and the second part will take up the remaining 40 percent of the container.

The overflow visible will ensure that the image (if bigger than the container) will flow beyond the container.

Our app will now look like this

Next, we need to set some space between the navigation area and the showcase area.

.grid-item-1,
.grid-item-2 {
  position: relative;
  top: 50px;
}

As a result, it is now spaced out a bit:

Now, we need to style both of our form inputs because they don't look so nice. We select the first input by its type (email) and select the second by its class name, btn.

.showcase input[type='email'] {
  padding: 10px 70px 10px 0;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding-left: 6px;
}

.btn {
  border-radius: 6px;
  padding: 12px 20px;
  background: #9867C5;
  border: none;
  margin-left: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

This style will transform both our form inputs to this:

Form input styled better

Also maybe change the font of the supporting text:

.showcase-form {
  margin: auto;
}

/* Change typeface and its size */
.little-info {
  font-size: 15px;
  font-family: "poppins", sans-serif;

}

This is the final look of our showcase section:

Final look of showcase section

That's it for this section!

How to Build the Lower Part of the Page

The lower part of the page is going to contain two sections, the stats section and the testimonials section.

The stats container which displays the services offered by Skilllz will be made up of three divs, each of which houses a font awesome icon, an h3 of class title, and a paragraph p of class text.

The testimonial container will hold the testimonials of three random people who learned using Skillz. I grabbed the pictures from unsplash.

How to Build the Stats Section

First, we are going to work on the stats section. The text is just a dummy 'lorem50' text to act as a filler for this demo.

Here is the markup for it:

<div class="lower-container container">
      <section class="stats">
        <div class="flex">
          <div class="stat">
            <i class="fa fa-folder-open fa-2x" aria-hidden="true">i>
            <h3 class="title">Over 300 available coursesh3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
          div>
          <div class="stat">
            <i class="fa fa-graduation-cap fa-2x" aria-hidden="true">i>
            <h3 class="title">Free certificate offered on all coursesh3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
          div>
          <div class="stat">
            <i class="fa fa-credit-card-alt fa-2x" aria-hidden="true">i>
            <h3 class="title">Book 1on1 session for as low as $5h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
          div>
        div>
      section>

This section will be displayed as a blank page. This is because we had set the color of our text in the whole body to white. So we have to add some styling.

How to Apply CSS Styling to the Stats Section

First we need to apply the following styles:

/* Centers the container, sets a maximum width
.lower-container {
  margin: 120px auto;
  padding: 0;
  max-width: 1400px;
}


/* Targets all h3 with class of title */
.title {
  color: black;
  font-size: 20px;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}

/* Targets the paragraphs with class name of text */
.text {
  color: black;
  font-size: 19px;
  width: 100%;
  padding: 10px;
  margin: 0, 20px;
  text-align: justify;
}

This will now make our text visible:

Notice that the font icons from Font Awesome are not visible. We will be working on that pretty soon.

But before then, we will need to do something important. We do intend for all of the three stat divs to be aligned horizontally (side-by-side). To achieve that, we will once again be using CSS Flexbox:

/* Display horizontally, put a little space around them */
.flex {
  display: flex;
  justify-content: space-around;
}

/* Add some padding around the container. Align text centrally */
.stats {
  padding: 45px 50px;
  text-align: center;
}

/* Set margin and width */
.stat {
  margin: 0 30px;
  text-align: center;
  width: 800px;
}

This is how our app will now look:

Still no icons? Time to fix that!

.stats .fa {
  color: purple;
}

and voilà!

How to Build the Testimonials Section

The second section inside of the lower container div of the page is the testimonials section. This section is going to be made up of three cards, each of which contains the image of the person (clipped inside a circle), their name, and the person's testimonial.

Here is the markup for that:

<section class="testimonials">
      <div class="container">
        <div class="testimonial grid-3">
          <div class="card">
            <div class="circle">
              <img src="./images/4.jpg" alt="">
            div>
            <h3>Astonh3>
            <p>I have learnt web development using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!p>
          div>
          <div class="card">
            <div class="circle">
              <img src="./images/5.jpg" alt="">
            div>
            <h3>Bethh3>
            <p>I have learnt copywriting using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!p>
          div>
          <div class="card">
            <div class="circle">
              <img src="./images/6.jpg" alt="">
            div>
            <h3>Chrish3>
            <p>I have learnt affilitate marketing using this platfrom and I am going to say this is the best platform for learning. Absolutely
            worth the investment!p>
          div>
        div>
      div>
    section>

How to Apply CSS Styling to it

First, we set the text color to black so we can see it:

.testimonial {
  color: black;
  padding: 40px;
}

When applied, it should make the text visible and add some padding to the section:

Next, we set the image to take up the height of its parent container:


/* Wrap the image inside a cirle shape and set height to take up all of parent element */

.testimonial img {
    height: 100%;
    clip-path: circle();
}

/* Align text centrally */

.testimonial h3{
  text-align: center;
}

If you check the final layout in the gif, you will notice that all three testimonial cards are aligned side-by-side on the same line.

So we will need to create a div of three equal columns using the CSS grid arrangement.

/* Create a grid of three equal columns. Set a gap of 40 px between them */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


/* Create a white card with some shadow around it */
.card {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -7px -7px 20px rgba(0, 0, 0, 0.2),
               7px  7px 20px rgba(0, 0, 0, 0.2)
}

With all of these styles applied, the testimonials section will now look like this:

Finally, we style the circle div and position it relative to the top border of the card using CSS:

.circle {
    background-color: transparent;
    border:3px solid purple;
    height:90px;
    position: relative;
    top: -30px;
    left: 120px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:90px;
}

And here is how everything will look in our browser:

Final look

Alright, now we're ready to move on to the footer section. Then we'll learn how to make the site responsive.

The final part of our landing page building process is to create the footer section. The footer section will comprise some copyright text, three extra navigation links, and a group of social media icons from Font Awesome.

Here is the HTML Markup for the footer section of our landing page:

<footer>
   <div class="container grid-3">
     <div class="copyright">
       <h1>Skilllzh1>
       <p>Copyright © 2021p>
     div>
     <nav class="links">
       <ul>
         <li><a href="" class="outline">Homea>li>
         <li><a href="" class="outline">Tutorsa>li>
         <li><a href="" class="outline">Categoriesa>li>
       ul>
     nav>
     <div class="profiles">
       <a href=""><em class="fab fa-twitter fa-2x">em>a>
       <a href=""><em class="fab fa-instagram fa-2x">em>a>
       <a href=""><em class="fab fa-facebook fa-2x">em>a>
       <a href=""><em class="fab fa-whatsapp fa-2x">em>a>
     div>
   div>
 footer>

The footer section will look unattractive without any styling:

No CSS yet

So let's change that.

First, we need to set the background colour for the footer section (as well as the color for all links) to white, like this:

/* Add padding around the footer as well */

footer {
  background-color: purple;
  padding: 20px 10px;
}

/* Sets all link texts to white and puts margin to the left and right */

footer a {
  color: white;
  margin: 0 10px;
}

Now the footer will look like this:

Footer

If you check the first gif, you will notice that when I hover over any of the links inside of the footer, their color changes to a lighter shade of purple and a border also appears below them.

We can make this happen using a :hover selector:

footer a:hover {
  color: #9867C5;
  border-bottom: 2px solid #9867C5;
}

That's all for the footer!

How to Set Media Queries to Make the Page Responsive

It's now time to make our landing page more responsive. When building a website, it is important to have in mind that users will be viewing the site from different devices. So it is imperative to make the site layout responsive to improve the user experience across multiple devices.

In our CSS, we will define media queries which set breakpoints for the various screen widths of different devices and map a set of CSS rules for each screen size.

How to Design for Tablets and Smaller Screens

First, we will optimize our site's layout for users viewing from a tablet. In our CSS, we define the following style:

/* Tablets and Under */

@media(max-width: 768px) {
  .grid,
  .grid-3 {
    grid-template-columns: 1fr;
  }

Initially we had set two columns for the .grid class and 3 columns for the grid-3 class. Now, we want to make sure that all grid items take up just a single line.

As a result, our form and image which was formerly displayed side-by-side (horizontally) will now be displayed one after the other (vertically), like this:

Next, we'll apply the following styles:

/* Align all text to the center. This will move all text, including form centrally */

.showcase {
    height: auto;
    text-align: center;
  }

/* This resets the width of the image container and adds margin space to the left */ 

.image {
    width: 600px;
    margin-left: 80px;
  }

/* Changes the service sections from side-by-side orientation to each taking its own line. Aligns text to the center */

.stats .flex {
    flex-direction: column;
  }

  .stats {
    text-align: center;
  }

/* Makes sure each stat section does not exceed the width of parent */

.stat {
    width: 100%;
    padding-right: 80px;
  }

/* (re)Moves the cirle to the center of the card */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 270px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }

And voilà! Our site now works on tablets and smaller screens.

The result

How to Design for Mobile Devices

Many people may view the site from a mobile device which typically has the smallest screen size out of all devices. Because of this, creating a layout for mobile-sized screens is very important.

/* Mobile devices */
@media(max-width: 500px) {
  .navbar {
    height: 100px;
  }

First, we increase the height of our navigation area. Since it will be viewed from a smaller screen, we want the area more accentuated for the user.

Then, we define the following styles:

/* Changes the alignment. The logo title stays at the top, the nav links will be below it */

.navbar .flex {
    flex-direction: column;
  }


/* When hovered on, retain white color and change border to black */

  .navbar a:hover {
    color: white;
    border-bottom: 2px solid black;
  }


/* Set light purple background on nav links, make it a bit round and add some spacing */

  .navbar ul {
    background: #9867C5;
    border-radius: 5px;
    padding: 10px 0;
  }


/* Align text to center */

  .showcase {
    height: auto;
    text-align: center;
  }


/* Reduce font size */

.little-info {
    font-size: 13px;
  }


/* Reduce image width */

  .image {
    width: 350px;
    margin-left: 70px;
  }

  .stat {
    margin-bottom: 40px;
  }


/* Move circle once again */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 150px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }
}

And voilà!

Wrapping Up

FlexBox and Grid alignment are very powerful tools for laying out a web page however you want it to look.

Responsive web design is arguably one of the most important design principles in web development. We have to consider the fact that our site will be viewed from various kinds of devices with different screen resolutions. Optimizing our site's layout for different screens will improve the user experience.

In this tutorial, we have designed a simple landing page using CSS Flexbox, Grid, and many other CSS properties. We have also made the page look good on Tablets and Mobile Screens.

The full code for this project can be gotten from this GitHub repository.

I hope you learned something useful from this tutorial. If you have any suggestions, reach out to me on Twitter. You can also visit my blog for posts like this.

Thanks for following along and see you soon.

JavaScript Array.some() Tutorial – How to Iterate Through Elements in an Array

Kingsley Ubah — Tue, 07 Sep 2021 22:14:16 +0000

When you're working with an array in JavaScript, sometimes you might just want to check if at least one element inside that array passes a test. And you might not care about any other subsequent matches.

In such a case, you should use the some() JavaScript method. So let's see how it works.

How to Use the Array.some() JavaScript Method

The some() method is an Array.propotype (built-in) method which takes in a callback function and will test that function on each iteration against the current item.

If any elements in the array pass the test specified in the callback, the method stops iterating and returns true. If no elements pass the test, the method returns false.

The method takes in three parameters:

currentItem: This is the element inside of the array which is currently being iterated over
index: This is the index position of the currentItem inside of the array
array: This represents the array collection to which the some() method is bound

A simple way to understand the main idea behind Array.some() method is to consider one of our biggest propensities as humans: generalization. People tend to make generalizations based on just one single experience or perception.

For example, if a certain person from a certain place behaves a certain way, a lot of people will assume that everyone from that place also behaves the same way. Even though such an assumption was based on just one single experience.

The some() method essentially makes up its mind the moment it finds a match, and returns true.

How to Use Array.some() in Your JavaScript

In the following examples, we will be taking a practical look at how we can use the some() method inside our JavaScript.

How to test for at least one match with `some()`

In this example, we will check if there is at least one male inside of the people array

let people = [{
    name: "Anna",
    sex: "Female"
  },

  {
    name: "Ben",
    sex: "Male"
  },

  {
    name: "Cara",
    sex: "Female"
  },

  {
    name: "Danny",
    sex: "Female"
  }

]


function isThereMale(person) {
    return person.sex === "Male"
}

console.log(people.some(person => isThereMale(person)) // true

Since a male actually exists, the some() method returns true.

Even if we were to define two males inside the array, the method will still return true. The method doesn't care if there is a second male or not, all it cares about is the first one.

let people = [{
    name: "Anna",
    sex: "Female"
  },

  {
    name: "Ben",
    sex: "Male"
  },

  {
    name: "Cara",
    sex: "Female"
  },

  {
    name: "Danny",
    sex: "Female"
  },

  {
    name: "Ethan",
    sex: "Male"
  }

]


function isThereMale(person) {
    return person.sex === "Male"
}

console.log(people.some(person => isThereMale(person)) // true

If all items within an array fail the callback test, the some() method will return false.

In this example, since there is no male inside of our people array, false will be returned instead:

let people = [{
    name: "Anna",
    sex: "Female"
  },

  {
    name: "Bella",
    sex: "Female"
  },

  {
    name: "Cara",
    sex: "Female"
  },

  {
    name: "Danny",
    sex: "Female"
  },

  {
    name: "Ella",
    sex: "Female"
  }

]


function isThereMale(person) {
        return person.sex === "Male"
}

console.log(people.some(person => isThereMale(person))) // false

How to use the index parameter with `some()`

The callback function defined inside some() can access the index property of every item being iterated over. The index is just a numerical value that uniquely identifies the position of each and every element inside an array. That way, you can refer to any element in the array by its index.

Here, we use the index value to construct a message which we log onto the console:

let people = [{
    name: "Anna",
    sex: "Female"
  },

  {
    name: "Ben",
    sex: "Male"
  },

  {
    name: "Cara",
    sex: "Female"
  },

  {
    name: "Danny",
    sex: "Female"
  },

  {
    name: "Ethan",
    sex: "Male"
  }

]


function isThereMale(person, index) {
        if (person.sex === "Male") console.log(`No ${index+1}, which is ${person.name}, is a Male`)
        return person.sex === "Male"
}

console.log(people.some((person, index) => isThereMale(person, index)))

/* 
"No 2, which is Ben, is a Male"

true
*/

How to Use the Context Object with `some()`

In addition to the callback function, some() can also take in a context object.

some(callbackFn, contextObj)

We can then refer to the object from inside the callback function on each iteration, using this as a reference. This allows us to access any properties or methods defined inside the context object.

Example of using the context object with `some()`

In this example, we are looking to check if at least one person in the people array is a tricenarian. That is, the person's age falls between 30 and 39.

We can define the rule inside the conditions object and then access it from inside the callback function using the this.property notation. We then perform a check to determine if at least one person matches the criteria.

let people = [{
    name: "Anna",
    age: 20
  },

  {
    name: "Ben",
    age: 35
  },

  {
    name: "Cara",
    age: 8
  },

  {
    name: "Danny",
    age: 17
  },

  {
    name: "Ethan",
    age: 28
  }

]

let conditions = {
    lowerAge: 30,
  upperAge: 39
}



console.log(people.some(person => function(person) {
    return person.age >= this.lowerAge && person.age <= this.upperAge
}, conditions)) // true

Since one person (Ben) falls in that range, some() will return true.

Wrapping Up

The some() method is an Array.prototype method which takes in a callback function and calls that function for every item within the bound array.

When an item passes the callback test, the method will return true and stop the loop. Otherwise, it returns false.

In addition to the callback function, the some() method can also take in a context object as the second argument. This will enable you to access any of its properties from the callback function using this.

I hope you got something useful from this article.

If you want to learn more about Web Development, feel free to visit my**** blog**.**

Thank you for reading and see you soon.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

JavaScript Array.find() Tutorial – How to Iterate Through Elements in an Array

Kingsley Ubah — Wed, 01 Sep 2021 16:41:26 +0000

When you're working with an array collection, sometimes you'll only need to find out if an item exists in the array so you can retrieve it. And you won't care how many other items (if any) exist within the same array.

Well, we can use the find() method to do just that.

How the Array.find() Method Works

The find() method is an Array.prototype (aka built-in) method which takes in a callback function and calls that function for every item it iterates over inside of the array it is bound to.

When it finds a match (in other words, the callback function returns true), the method returns that particular array item and immediately breaks the loop. So the find() method returns the first element inside an array which satisfies the callback function.

The callback function can take in the following parameters:

currentItem: This is the element in the array which is currently being iterated over.
index: This is the index position of the currentItem inside the array.
array: This represents the target array along with all its items.

How to Use the `find()` Method in JavaScript

In the following examples, I will demonstrate how you can use the find() method to retrieve the first item from an array which matches a specified condition in JavaScript.

How to get a single item with find()

Let's assume you have a dog which goes missing. You report it to the relevant authorities and they bring together a group of recovered dogs.

To be able to find your dog, you need to provide unique information about him. For example, the breed of your dog (a Chihuahua) might be used to identify it.

We can express this scenario in JavaScript using an array collection. The array called foundDogs will contain all the names of the recovered dogs as well as their respective breeds. And we'll use the find() method to find the dog which is a Chihuahua from inside the array.

let foundDogs = [{
    breed: "Beagle",
    color: "white"
  },

  {
    breed: "Chihuahua",
    color: "yellow"
  },

  {
    breed: "Pug",
    color: "black"
  },
]

function findMyDog(dog) {
  return dog.breed === "Chihuahua"
}

let myDog = foundDogs.find(dog => findMyDog(dog));

console.log(myDog);


/*

{
  breed: "Chihuahua",
  color: "yellow"
}

*/

The find method stops iterating when a match is found.

There is something very important to remember about find(): it stops executing once the callback function returns a true statement.

To illustrate this, we will once again use the missing dog example. This time, we will assume that two Chihuahuas were found.

But the find() method will only return the first instance of Chihuahua it discovers within the array. Any other instance will then be subsequently ignored.

We can also easily see this by logging the index position of that item into the console:

let foundDogs = [{
    breed: "Beagle",
    color: "white"
  },

  {
    breed: "Chihuahua",
    color: "yellow"
  },

  {
    breed: "Pug",
    color: "black"
  },

  {
    breed: "Chihuahua",
    color: "yellow"
  }
]


function findMyDog(dog, index) {
    if (dog.breed === "Chihuahua") console.log(index);
  return dog.breed === "Chihuahua"
}


let myDog = foundDogs.find((dog, index) => findMyDog(dog, index));


console.log(myDog);

/* 
1

{
  breed: "Chihuahua",
  color: "yellow"
}

*/

How to use a Destructuring Assignment

You can make your code more concise by combining both the destructuring assignment and an arrow function expression.

We'll use destructuring to extract only the name property from the object which we then pass in as a parameter to the callback function.

We'll get the same result:

let foundDogs = [{
    breed: "Beagle",
    color: "white"
  },

  {
    breed: "Chihuahua",
    color: "yellow"
  },

  {
    breed: "Pug",
    color: "black"
  },
]




let myDog = foundDogs.find(({breed}) => breed === "Chihuahua");

console.log(myDog);

/*

{
  breed: "Chihuahua",
  color: "yellow"
}

*/

How to find an item by its index

In this example, we will be finding and returning the spot belonging to 'David' from inside the array using its unique index value. This demonstrates one way we can use the index property inside of our callback function with the find() method:

let reservedPositions = [{
    name: "Anna",
    age: 24
  },

  {
    name: "Beth",
    age: 22
  },

  {
    name: "Cara",
    age: 25
  },

  {
    name: "David",
    age: 30
  },

  {
    name: "Ethan",
    age: 26
  }
]


function findByIndex(person, index) {
  return index === 3
}


let myPosition = reservedPositions.find((person, index) => findByIndex(person, index));

console.log(myPosition);

/*
{
  age: 30,
  name: "David"
}
*/

You Can Use the Context Object with find()

In addition to the callback function, the find() method can also take in a context object.

find(callback, contextObj)

We can then refer to this object from inside the callback function on each iteration, using the this keyword as a reference. This allows us to access any properties or methods defined inside of the context object.

How to use the context object with find()

Let's say we have an array of job applications and want to select just the first applicant who meets all of the criteria.

All criteria is defined inside a context object called criteria and that object is subsequently passed as a second parameter into the find() method. Then, from inside the callback function, we access the object to check if an applicant matches all of the criteria specified there.

let applicants = [
    {name: "aaron", yrsOfExperience: 18, age: 66},
    {name: "beth", yrsOfExperience:  0, age: 18},
    {name: "cara", yrsOfExperience: 4, age: 22},
    {name: "daniel", yrsOfExperience: 3, age: 16},
    {name: "ella", yrsOfExperience: 5, age: 25},
    {name: "fin", yrsOfExperience: 0, age: 16},
    {name: "george", yrsOfExperience: 6, age: 28},
]

let criteria = {
    minimumExperience: 3,
  lowerAge: 18,
  upperAge: 65
}


let luckyApplicant = applicants.find(function(applicant) {
    return applicant.yrsOfExperience >= this.minimumExperience && applicant.age <= this.upperAge
  && applicant.age >= this.lowerAge ;
}, criteria)

console.log(luckyApplicant);

/*
{
  age: 22,
  name: "cara",
  yrsOfExperience: 4
}
*/

Technically, three applicants (Cara, Ella and George) all qualify based on the criteria. In other words, the three of them are at least 18 years old, not older than 65, and have at least 3 years of working experience.

However since the find() method always returns ONLY the first instance which evaluates to true, the other two will be ignored and the loop will be broken.

Wrapping Up

The find() method is an Array.prototype method which takes in a callback function and calls that function for every item within the bound array.

When the callback function evaluates to true, the method returns the current item and breaks the loop. It returns just the first match – any other matches present inside of the array will be ignored.

In addition to the callback function, the find() method can also take in a context object as the second argument. This will enable you access any of its properties from the callback function using this.

I hope you got something useful from this article.

If you want to learn more about Web Development, feel free to visit my**** blog**.**

Thank you for reading and see you soon.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

React Tutorial – Build a Movie List Generator with React and HarperDB

Kingsley Ubah — Mon, 30 Aug 2021 19:07:30 +0000

In this tutorial, we are going to be building a simple movie generator which automatically generates a new movie every 40 seconds. It will also contain a button called “Generate New Movie” to display another movie on demand.

This app will display a movie along with its title, release date, fan rating, time duration, a short description, star casts, name of directors and finally a button which links to the movie’s IMDb page.

You can access the complete code for this project from its Github repository.

How Are We Going to Build This?

As it is with most other web apps, this app will consist of both a front end and a back end.

The front end is the part the user sees and interacts with. In our app, our front end will be made up of the movie's cover image, its information, and a button which will link to the movie’s IMDb page.

The back end is where our movie data – such as the movie title, description, actors, picture, and so on – will be coming from.

The app is going to automatically generate a new random movie every 40 seconds.

We'll build the front end of our app using React. React is a front end JavaScript library used for building reusable UI components such as buttons, navigation menus, images, cards and more.

We will also style our components using pure CSS.

How We'll Build the Back End

The back end of a website typically contains a database, which is a program you use to store and manage data. The database also has to be accessible via an API so that our front end can access the data and display it to the user.

To accomplish this, we'll use an interesting and fun tool called HarperDB.

What is HarperDB?

HarperDB is database and data management software that's incredibly fast – it's even been proven to be 37 times faster than MongoDB.

A database’s speed refers to how fast it can read and write data into its records as well as make computations on such data.

HarperDB is also incredibly flexible. It allows you do the following:

Make queries to a single endpoint
Use both SQL and NoSQL to query your database
Upload data in JSON and with SQL queries.

If you are working with lots of data, you can import it all in one step in a CSV file. Pretty neat!

You don’t have to define the data types for your data, as HarperDB dynamically does it for you. Not to mention their simple interface for managing your cloud instance without any hassle.

As I said, very flexible.

Prerequisites for this Tutorial

To build this app, I'll assume you have some basic knowledge of the following languages and tools:

Npm or any other package managers: We'll need this to install React and a React HarperDB hook called use-harperdb to your project.

NPM stands for Node Package Manager. It's a tool which connects your local project to the npm registry, where millions of public code packages, such as React and useharperdb, are hosted. It also helps you manage this code, once it's installed.

Make sure to have a Node version of at least 12.xx installed on your machine. You can check your node version with this command: node -v

SQL: In this project, we are only going to be using one or two basic queries, so don’t worry if you don’t know much about SQL.

SQL stands for Structured Query Language. It is a popular language used in querying relational databases. We will use it in our hook to query our HarperDB cloud instance for data.

React: Our user interface is going to be built with React. If you know JavaScript, then learning React is relatively easy.

A HarperDB account: If you don’t have a HarperDB account, you will need to create one. Don’t worry, it's completely free. I will show you how to create an account below.

And finally, CSS: we'll use a little CSS to style our elements.

What are React Hooks?

In the past, to work with data in a React component, you had to define the component as a class component. This changed when React introduced hooks.

Simply put, hooks are functions which allow you to work with data in a non-class (that is, functional) React component.

Thanks to this, you don’t have to define a React class component just to manage state data inside of it.

The use-harperdb hook allows you to hook your app into your cloud database instance to obtain data. Think of it as a bridge between your React app (front end) and the HarperDB database (back end).

How to Set Up the Database

HarperDB is a flexible database, as I mentioned before. It allows you to use its services either by setting up your own local HarperDB server or using the serverless architecture.

In this project, we will be using the serverless architecture. This means that we will not be implementing a server (that is, the back end) on our local machine. Instead, we will leverage HarperDB’s cloud infrastructure to manage our movie data and make it available for our app.

Set Up the HarperDB Cloud Instance

First, I am going to assume that you have created your free account like I asked earlier. If you haven’t, go ahead and sign up.

Sign Up for HarperDB

You will be asked to provide your name, a valid e-mail, and a sub-domain name for your cloud instance. With it, HarperDB will create a sub-domain name for you.

Make sure to choose a strong password

Next, we'll create a cloud instance:

Fill in your details

Here, you will be asked to add an Instance name. Don’t worry, you can name it whatever you can easily remember, but it is best to make it descriptive.

To create your Instance URL, which you will need on your app when querying for data, HarperDB will combine your Instance Name with your Subdomain Name. You will also be prompted to set your Instance credentials (username and password).

Next, we select the Instance Specifications. For the sake of this tutorial, we will go with the free plans. Also, you will need to pick a region for your instance.

Choosing the free plans

Click on “Confirm Instance Details” and you will be moved to a page which contains all your instance’s information. Now, copy your instance URL, your username, and your password and save it somewhere as you will need it later.

Save your URL, username and password

When you're done, click the “Add Instance” button. You will be moved to a page which shows your instance card. Your instance will need some time to set up initially before you can use it, but we can do a few things while we wait.

Setting it up

How to Set up the React App

While our cloud instance is still being set up, we can take the opportunity to set up the project directory for our app.

First, we initialize our project by running the following command on any command terminal:

npx create-react-app harperdb-movies-generator

This command will create a folder called harperdb-movies-app as well as install all of the dependencies we need for our project. This includes React and the ReactDOM, so we don’t have to do it manually.

Next we are going to run the command to bring the use-harperdb hook into our project. This hook will help us connect to our cloud instance. To install it, we run the following command on our command line:

npm install use-harperdb

That’s all for the setup!

How to Integrate HarperDB to your React App

Now that the use-harperdb hook has been installed, we have to do one more thing to be able to access data from your database and make CRUD operations on it: We have to connect your app to your cloud instance. We will do this with the HarperDBProvider.

Before getting into that, we have to do something first. When building a CRUD application, it is not a good practice to expose private credentials such as our API keys to other people, especially if we are intending on pushing the code to a public repo like GitHub.

To protect any sensitive credentials, we will need to store them as environmental variables. This is just a file where we store sensitive credentials such as our passwords, API keys, and in our current case, our cloud instance credentials (URL, username, and password).

Create an .env in the root of your directory. You create this file in your code editor, right click on the root directory (harperdb-movie-generator) and select the “create new file” option.

Name this file .env and press enter. This will create a .env file inside of harperdb-movie-generator. After this, define the following variables:

REACT_APP_DB_URL=**
REACT_APP_USER=**
REACT_APP_PASSWORD=**

Make sure you use the same format and pass in the correct details about your own cloud instance in place of the double asterisks. Fill in your Instance URL, your Instance Username, and your Instance Password, which I earlier told you to save somewhere.

React will read all environmental variables that use the REACT_APP as prefix, and will then dynamically pass in the value where needed.

With the .env file created, our next action will be to wrap our entire React app inside the imported HarperDBProvider

HarperDBProvider will ensure that our app has the context of the HarperDB database.

To wrap our React App inside the provider, we'll go over to index.js inside our project, import the provider, and securely pass in those environmental variables into the provider. This lets it know which instance to connect our front end to:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { HarperDBProvider } from 'use-harperdb';


ReactDOM.render(
  <React.StrictMode>
    <HarperDBProvider
    url={process.env.REACT_APP_DB_URL}
    user={process.env.REACT_APP_USER}
    password={process.env.REACT_APP_PASSWORD}
    >
      <App />
    HarperDBProvider>
  React.StrictMode>,
  document.getElementById('root')
);

How to Populate Our Database with Data

If you remember, we left the cloud instance while it was still being set up. By now, we should have our instance all set and ready to serve data. In that case, you will see the OK status on your instance:

Instance now set

Your cloud instance should be good-to-go with your front end hooked up to your instance as well. However, the front end will be useless if it doesn’t have any data (that is, movies) to display to the user.

So first we need to populate our database with data.

But before that, we will need to create a schema for our movie data. You can think of a schema as a collection of tables in our database. I simply call my own schema "collection":

Creating our schema and a table inside of it

Next, we'll create our table. I'll called mine "movie". A table will consist of records of individual movies.

Each movie record must have a hash_attribiute. A hash_attribute is simply a column with unique keys which identifies that particular row of data and distinguishes it from the next row. We are simply using the “id” column as our hash_attribute.

Since we are creating an app with more than one movie, our table will consist of more than one row of movies (that is, records of data). Also, since each movie has many properties such as title, year, release date ,and so on, it will have more than one field of information.

You can upload the movies one by one with a single JSON object or upload a full collection of movies with an array of JSON objects.

HarperDB allows you to upload data in three main ways:

By making SQL or NoSQL queries to create data on our database.
By defining a single JSON object (for only one record) and an array of JSON data (for multiple records)
By importing and loading data with a CSV file

To upload a single movie's data, we create a JSON object which contains all the movie information. Here is an example of the JSON data:

{
  cover: 'https://res.cloudinary.com/ubahthebuilder/image/upload/v1627129180/avengers_endgame_ilqzqj.png',
  date: 2017,
  description: 'After the devastating events of Avengers: Infinity War (2018), the universe is in ruins. With the help of remaining allies, the Avengers assemble once more in order to reverse Thanos actions and restore balance to the universe.',
  directors: [
    'Anthony Russo',
    'Joe Russo'
  ],
  genres: [
    'Action',
    'Adventure',
    'Drama'
  ],
  hours: 3,
  id: 1,
  minutes: 1,
  rating: 8.4,
  stars: [
    'Robert Downey',
    'Chris Evans',
    'Mark Ruffalo'
  ],
  title: 'Avengers: End Game',
  website: 'https://www.imdb.com/title/tt4154796/',
  writers: [
    'Christopher Markus',
    'Stephen McFeely'
  ]
}

Navigate to the movie table inside the collection and click on the + sign at the top right corner of the page, which is highlighted in the following image:

Adding a new movie record into our table

Copy the previously defined JSON object and paste it into the space provided, replacing everything there for formatting reasons. Click the green button to save the information into the movies table.

Paste in the JSON object

Once we are done with uploading, our table should look something like this:

Eight Movies inside of our table

Note that you can make use of the data from this project’s GitHub repository to insert multiple records of movies at once.

How to Build Up Our UI and Query the Database

Now that the data is ready, we need to display it on our front end for the user to see and interact with.

First, we need to alter our app.js file:

import React from 'react';
import './App.css';
import Movie from './components/Movie';

function App() {
  return (
    <div className="App">
      <div className="main-container">
        <header>
          <h1 className="heading">Movie Listh1>
          <h3> A Simple Movie Generator built with React and HarperDBh3>
        header>
        <div>
          <Movie />
        div>
      div>
    div>
  );
}

export default App;

This will be the top level component in our project.

Next, we'll import the React and React DOM libraries as well as the stylesheet App.css for our entire app.

Next, in the App.css file we define our app component which returns the Header elements as well as the Movie component.

Here is the style for our entire app:

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

/* Base Styles */

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

a {
  color: black;
  font-family: "roboto", sans-serif;
  font-size: 50px;
  text-decoration: none;
  display: inline-block;
}


h1 {
  text-align: center;
  font-family: "roboto", sans-serif;
  font-size: 60px;
  font-weight: 80px;
}

h3 {
  text-align: center;
}

p {
  font-weight: 400px;
}

span {
  color: #FFF338;
}

ul {
  list-style-type: none;
  display: flex;
  margin-left: 339px;
}


li {
  outline-color: #2C394B;
  outline-style: inset;
  outline-width: 2px;
  outline-offset: 5px;
  margin: 11px;
  padding: 0px, 20px;
}

img {
  height: 500px;
  width: 100%;
}


/* Classes */

.movie-cover {
  max-width: 800px;
  width: 800px;
  background-color: #2C394B;
  margin: 0 auto;
  border-radius: 10px;
}

.circle {
    background-color: transparent;
    margin-right: 37px;
    text-align: center;
    margin-top: 50px;
    border:3px solid #FFF338;
    height:90px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:90px;
}

.ratings {
  font-size: 30px;
  margin-top: 12px;
}

.big-half , .small-half {
  font-family: "roboto", sans-serif;
  font-style: oblique;
  color: white;
}

.small-half {
  color: #DAD0C2;
  font-size: 19px;
}



.visit-movie-button {
  margin: 30px, 20px;
  padding: 10px, 30px;
  position: relative;
  top: 50px;
  left: 120px;
  font-size: 20px;
  outline-style: solid;
  color: #FFF338;
  outline-color: #FFF338;
  outline-offset: 10px;
}


.generate-movie-button {
background-color: #FFF338;
padding: 0.5em 1.2em;
font-size: 20px;
text-decoration: none;
position: relative;
top: 50px;
left: 250px;
text-transform: uppercase;
}

.action-buttons {
  width: inherit;
}


.title {
  font-size: 50px;
  padding-top: 40px;
  padding-left: 30px;
  margin-bottom: 0;
}

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

.supporting-info {
  padding-left: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

.lower-information {
  font-family: "roboto", sans-serif;
  width: 800px;
  max-width: 800px;
  margin-left: 380px;
}

Once again, you can access the complete code for this project from its Github repository.

How to Add the Movie Component

We now need to add our movie component. We will start by creating a new folder under the 'src' directory named component. We then need to create a new file inside that new file named 'movie.js'. This is where the spicy things start to happen.

In addition to the React and ReactDOM libraries, we are going to import the use-harperdb hook (function) as well.

We are going to execute the use-harperdb function, passing in an object as an argument. Inside the object, we need to supply at least a single query property. This property determines what kind of operation we want to carry out on our database.

import React from 'react';
import { useHarperDB } from 'use-harperdb';

function Movie() {
let [data, loading, error, refresh] = useHarperDB({
    query: {
      operation: 'sql',
      sql: `select * from collection.movie where id = ${Math.floor(Math.random() * 8) + 1}`
    },
    interval: 40000 // 40 Seconds
  }
  )

  // CODE CONTINUES

The first property, which is the operation property, specifies how you want to query the data. In our example, we are going to do so with a SQL command.

The second property within the query is the SQL property. This is where we write our SQL queries for any CRUD operation we want to carry out. In our case, we simply want to select all fields from a randomly selected movie between 1-8, from the database, which we have denoted by the following SQL clause:

select * from collection.movie where id = ${Math.floor(Math.random() * 8) + 1}`

After the query, another optional property we can define is the interval property. With this property, you can specify how long you want your app to wait before it automatically generates a fresh query to the database.

Executing the useHarperDB function with those parameters correctly passed in will return us an array containing some important things. Below are four important items we will get from useHarperdDB:

loading: This is a Boolean which specifies if the database is still processing data or not. That way, you can optionally display a “loading” spinner
error: This indicates if an error was encountered while querying the database.
refresh: Assuming you don’t set an interval property, you can call this function whenever you want to fetch new data.
data: The main thing. If all things go well, HarperDB will return our data to this variable.

How to Display Data in our Front End

With our data now successfully returned from the database, it’s time pass it into our React template:

if(loading) {
    return <div> Loading... div>
  }

if(data) {
      return (
<>
<div className="movie-cover">
  <div className="top-information">
    <h2 className="title">{data[0].title}h2>
    <div className="circle">
      <div className="ratings">
        <span className="big-half">{data[0].rating}span>/<span className="small-half">10span>
      div>
    div>
  div>

  <div className="supporting-info">
    <span className="year">{data[0].date}span> -
    <span className="time">{data[0].hours}h:{data[0].minutes}mspan>
  div>
  <div className="image">
    <img src={data[0].cover} alt="Movie Image" />
  div>
div>

<div className="genres">
  <ul className="movie-genres">
    {data[0].genres.map((genre, index) => {
    return (
    <li key={index}><span className="movie-genre-item">{genre}span>li>
  )
    })}
  ul>
div>

<div className="lower-information">
  <p>{data[0].description}p>

  <hr />
  <p> Starring: {data[0].stars.map((star, index) => {
    return (
    <span key={index}>{star} - span>
    )
    })}
  p>
  <hr />
  <p> Writers:
    {data[0].writers.map((writer, index) => {
      return (
    <span key={index} className="writer">{writer} - span>
    )
    })}
  p>
  <hr />
  <p>Directors:
    {data[0].directors.map((director, index) => {
      return (
    <span key={index} className="director">{director} - span>
    )
    })}
  p>
  <hr />
  <div className="action-buttons">
    <a href={data[0].website} className="visit-movie-button">Visit Moviea>
    <a href="" className="generate-movie-button" onClick={refresh}>GENERATE NEW MOVIEa>
  div>
div>

)
} else {
    return (
      <div>Sorry No Data
        {error}
      div>
  )
}

}

If you are familiar with React, this shouldn’t be foreign to you. But I am still going to explain what we did here:

As I stated, the useHarperDB function will return our data. If you query to get all of the movies, it will return an array of movies. Since we queried for only a single movie, it will return an object containing the data of a single movie.
Next, we have to check if the data was returned. If there is no data, we display a simple div displaying a "Sorry No Data" message.
Since we did receive data, we passed in the data into our template. We extract each field from the object and pass it into the correct template.

When finished, we run the following command on the command line:

npm start

That should start our development server at https://localhost:3000. If everything goes well, we should see our app live on the browser with some cool movie data!

How our app should look

That's it for our app!

How to Deploy the App to GitHub Pages

Welcome to the last section of the tutorial. We will be deploying our new app to GitHub pages for the world to see.

Deploy on GitHub Pages

If you have another hosting provider, then you are absolutely welcome to deploy your app there. If you don’t, or you want something free, then GitHub Pages is great.

First, you need to have a GitHub account. If you don’t, you can create one for yourself here.

Also, you need to have Git version control software installed on your local machine. This is something every software developer should already have. However, if you don’t, you can install it from here.

The first thing to do is to create a new repository for your project on your GitHub account:

Creating a new GitHub repo

Then go back to the terminal and run the following command:

npm install gh-pages --save-dev

This will save GitHub Pages to your project as a dev dependency.

When this is done, go over to your project folder and open the package.json file. You should find gh-page safely installed there under the dev dependency:

"devDependencies": {
    "gh-pages": "^3.2.3"
  }

Next, we'll do the following three things:

Navigate to your project directory (harperdb-movie-generator) and select the package.json file. On the top of your package json, you will add the following data (replace the template with yours):

"homepage":  https://{Your GitHub username here}.github.io/{Your Project Name}.git

To find your GitHub username and the name of your repository, navigate to the newly created repo on GitHub. At the top, you can find your GitHub username and the project name next to it. Copy both of them and fill it into the aforementioned template – make sure to append .git at the end of your project name.

Github information for your package.json

The essence of adding the “homepage” field is to specify the URL where our app will eventually get hosted. Make sure to put a comma at the end, so your package json will be parsed correctly.

Go over to the "scripts" field within the same file and pass in the following data being sure you maintain proper indentation:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

This is what you will run when you are ready to deploy to GitHub pages.

Finally, you are going to initialize Git in your project. To do this, simply navigate to your project directory on the command line and run the following command:

cd projects/harperbd-movie-generator

git init

Now, everything is set!

The only thing left to do is deploy your app to GitHub pages. To do this, run the following command:

npm run deploy

And voilà! Your app will immediately be deployed to GitHub pages.

How to View Your Live App

Your app is now live at this point, but you have to see what it looks like. So you have to get its URL.

Go over to your GitHub profile and click the repository tab. Select your newly created repo, go to the settings page, and scroll down a bit. You will find the GitHub pages section. Click on “check it out here!”

In the following page, inside Source, switch the Branch to “gh-pages” and file-path to “root”. Within a few minutes, your app will be all set. Copy the URL from the page and paste into a new browser window.

Project now live at the provided URL

And behold, you'll see your live project.

Wrapping Up

We built this project with React and HarperDB. HarperDB is a great choice for your data management and back-end operations.

Not only is it flexible but also very easy to integrate, as we have seen in this tutorial.

You shouldn’t stop here. You can improve on your skills by building some other cool projects with this same stack. Thanks to HarperDB’s free plan, you don’t have to pay anything.

You can grab the code for this project from its GitHub repository.

Want to reach out for any suggestions? You can get me on Twitter

That’s it. Thank you for following along and have a great week.

JavaScript Array.filter() Tutorial – How to Iterate Through Elements in an Array

Kingsley Ubah — Thu, 26 Aug 2021 16:07:48 +0000

The Array.filter() method is arguably the most important and widely used method for iterating over an array in JavaScript.

The way the filter() method works is very simple. It entails filtering out one or more items (a subset) from a larger collection of items (a superset) based on some condition/preference.

We all do this everyday, whether we're reading, choosing friends or our spouse, choosing what movie to watch, and so on.

The JavaScript `Array.filter()` Method

The filter() method takes in a callback function and calls that function for every item it iterates over inside the target array. The callback function can take in the following parameters:

currentItem: This is the element in the array which is currently being iterated over.
index: This is the index position of the currentItem inside the array.
array: This represents the target array along with all its items.

The filter method creates a new array and returns all of the items which pass the condition specified in the callback.

How to Use the `filter()` Method in JavaScript

In the following examples, I will demonstrate how you can use the filter() method to filter items from an array in JavaScript.

`filter()` Example 1: How to filter items out of an array

In this example, we filter out every person who is a toddler (whose age falls between 0 and 4 ).

let people = [
    {name: "aaron",age: 65},
    {name: "beth",age: 2},
    {name: "cara",age: 13},
    {name: "daniel",age: 3},
    {name: "ella",age: 25},
    {name: "fin",age: 1},
    {name: "george",age: 43},
]

let toddlers = people.filter(person => person.age <= 3)

console.log(toddlers)



/*
[{
  age: 2,
  name: "beth"
}, {
  age: 3,
  name: "daniel"
}, {
  age: 1,
  name: "fin"
}]
*/

`filter()` Example 2: How to filter out items based on a particular property

In this example, we will only be filtering out the team members who are developers.

let team = [
    {
          name: "aaron",
        position: "developer"
      },
      {
          name: "beth",
        position: "ui designer"
      },
      {
          name: "cara",
        position: "developer"
      },
     {
          name: "daniel",
        position: "content manager"
      },
      {
          name: "ella",
        position: "cto"
      },
      {
          name: "fin",
        position: "backend engineer"
      },
      {
          name: "george",
        position: "developer"
  },

]

let developers = team.filter(member => member.position == "developer")

console.log(developers)


/*
[{
  name: "aaron",
  position: "developer"
}, {
  name: "cara",
  position: "developer"
}, {
  name: "george",
  position: "developer"
}]
*/

In the above example, we filtered out the developers. But what if we want to filter out every member who is not a developer instead?

We could do this:

let team = [
    { 
        name: "aaron",
           position: "developer"
      },
      {
          name: "beth",
           position: "ui designer"
      },
      {
          name: "cara",
        position: "developer"
      },
      {
          name: "daniel",
        position: "content manager"
      },
      {
          name: "ella",
        position: "cto"
      },
      {
          name: "fin",
        position: "backend engineer"
      },
      {
          name: "george",
        position: "developer"
      },

]

let nondevelopers = team.filter(member => member.position !== "developer")

console.log(nondevelopers)


/*
[
    {
          name: "beth",
          position: "ui designer"
    }, 
    {
          name: "daniel",
          position: "content manager"
    }, 
    {
          name: "ella",
          position: "cto"
    }, 
    {
          name: "fin",
          position: "backend engineer"
    }
]

*/

`filter()` Example 3: How to access the index property

This is a competition. In this competition, there are three winners. The first will get the gold medal, the second will get silver, and the third, bronze.

By using filter and accessing the index property of every item on each iteration, we can filter out each of the three winners into different variables.

let winners = ["Anna", "Beth", "Cara"]

let gold = winners.filter((winner, index) => index == 0)
let silver = winners.filter((winner, index) => index == 1)
let bronze = winners.filter((winner, index) => index == 2)

console.log(Gold winner: ${gold}, Silver Winner: ${silver}, Bronze Winner: ${bronze})

// "Gold winner: Anna, Silver Winner: Beth, Bronze Winner: Cara"

`filter()` Example 4: How to use the array parameter

One of the most common uses of the third parameter (array) is to inspect the state of the array being iterated over. For example, we can check to see if there is another item left in the array. Depending on the outcome, we can specify that different things should happen.

In this example, we are going to define an array of four people. However, since there can only be three winners, the fourth person in the list will have to be discounted.

To be able to do this, we need to get information about the target array on every iteration.

let competitors = ["Anna", "Beth", "Cara", "David"]

function displayWinners(name, index, array) {
    let isNextItem = index + 1 < array.length ? true : false
    if (isNextItem) {
        console.log(`The No${index+1} winner is ${name}.`);
    } else {
        console.log(`Sorry, ${name} is not one of the winners.`)
    }
}

competitors.filter((name, index, array) => displayWinners(name, index, array))

/*
"The No1 winner is Anna."
"The No2 winner is Beth."
"The No3 winner is Cara."
"Sorry, David is not one of the winners."
*/

Oops, sorry David!

How to Use the Context Object

In addition to the callback function, the filter() method can also take in a context object.

filter(callbackfn, contextobj)

This object can then be referred to from inside the callback function using the this keyword reference.

`filter()` Example 5: How to access the context object with `this`

This is going to be similar to example 1. We are going to be filtering out every person who falls between the ages of 13 and 19 (teenagers).

However, we will not be hardcoding the values inside of the callback function. Instead, we will define these values 13 and 19 as properties inside the range object, which we will subsequently pass into filter as the context object (second parameter).

let people = [
    {name: "aaron", age: 65},
    {name: "beth", age: 15},
    {name: "cara", age: 13},
    {name: "daniel", age: 3},
    {name: "ella", age: 25},
    {name: "fin", age: 16},
    {name: "george", age: 18},
]

let range = {
  lower: 13,
  upper: 16
}


let teenagers = people.filter(function(person) {
    return person.age >= this.lower && person.age <= this.upper;
}, range)

console.log(teenagers)

/*
[{
  age: 15,
  name: "beth"
}, {
  age: 13,
  name: "cara"
}, {
  age: 16,
  name: "fin"
}]
*/

We passed the range object as a second argument to filter(). At that point, it became our context object. Consequently, we were able to access our upper and lower ranges in our callback function with the this.upper and this.lower reference respectively.

Wrapping Up

The filter() array method filters out item(s) which match the callback expression and returns them.

In addition to the callback function, the filter method can also take in a context object as the second argument. This will enable you access any of its properties from the callback function using this.

I hope you got something useful from this article.

If you want to learn more about Web Development, feel free to visit my**** Blog.

Thank you for reading and see you soon.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

JavaScript Array.forEach() Tutorial – How to Iterate Through Elements in an Array

Kingsley Ubah — Tue, 24 Aug 2021 17:16:41 +0000

In JavaScript, you'll often need to iterate through an array collection and execute a callback method for each iteration. And there's a helpful method JS devs typically use to do this: the forEach() method.

The forEach() method calls a specified callback function once for every element it iterates over inside an array. Just like other array iterators such as map and filter, the callback function can take in three parameters:

The current element: This is the item in the array which is currently being iterated over.
Its index: This is the index position of that item within the array
The target array: This is the array which is being iterated over

The forEach method does not return a new array like other iterators such as filter, map and sort. Instead, the method returns undefined itself. So it's not chainable like those other methods are.

Another thing about forEach is that you cannot terminate the loop (with the break statement) or make it skip one iteration (with the continue statement). In other words, you can’t control it.

The only way to terminate a forEach loop is by throwing an exception inside the callback function. Don’t worry, we will see all of this in practise soon.

How to Use the `forEach()` Method in JavaScript

Imagine that a group of students lined up for a routine roll call. The class coordinator moves through the line and calls out the name of each student while marking whether they're present or absent.

It is important to note that the coordinator doesn't change the students' order in the line. He also keeps them in the same line after he is finished with the roll call. All he does is perform an action (his inspection) on each of them.

In the following examples, keeping this scenario in mind, we'll see how you can use the forEach method in JavaScript to solve real world problems.

`forEach()` Method Examples in JavaScript

How to Remove the First Odd Number in an Array with `forEach()`

In this example, we have an array which has one odd number at the first spot and several even numbers following it. But we only want the numbers in this array to be even. So we are going to remove the odd number from the array using the forEach() loop:

let numbers = [3, 6, 8, 10, 12]
let odd = 3;

numbers.forEach(function(number) {
    if (number === odd) {
        numbers.shift() // 3 will be deleted from array
    }
})

console.log(numbers);

[6, 8, 10, 12] // All even!

How to Access the Index Property with `forEach()`

In this example, we are going to execute a rollCall function for each student looped over inside of the array. The rollcall function simply logs a string pertaining to each of the students to the console.

names = ["anna", "beth", "chris", "daniel", "ethan"]

function rollCall(name, index) {
    console.log(`Is the number ${index + 1} student - ${name} present? Yes!`)
    ;}

names.forEach((name, index) => rollCall(name, index));


/*
"Is the number 1 student - anna present? Yes!"
"Is the number 2 student - beth present? Yes!"
"Is the number 3 student - chris present? Yes!"
"Is the number 4 student - daniel present? Yes!"
"Is the number 5 student - ethan present? Yes!"
*/

In this example, the only information we had about each student was their name. However, we also want to know what pronouns each student uses. In other words, we want a pronoun property defined for each student.

So we define each student as an object with two properties, name and pronoun:

names = [
    {name:"anna",pronoun: "she"},
    {name: "beth",pronoun: "they"},
    {name: "chris",pronoun: "he"},
    {name: "daniel",pronoun: "he"},
    {name: "ethan",pronoun: "he"}
]

function rollCall(student, index) {
    console.log(`The number ${index + 1} student is ${student.name}. Is ${student.pronoun} present? Yes!`);
}

names.forEach((name, index) => rollCall(name, index));

/*
"The number 1 student is anna. Is she present? Yes!"
"The number 2 student is beth. Is they present? Yes!"
"The number 3 student is chris. Is he present? Yes!"
"The number 4 student is daniel. Is he present? Yes!"
"The number 5 student is ethan. Is he present? Yes!"
*/

We're logging the roll call message of each student to the console, then we perform a check to see what pronoun the student uses, and finally we dynamically pass the accurate pronoun as part of the string.

How to Copy an Array into a New Array with `forEach()` in JavaScript

After three years of studying, it is now time for each of the students to graduate. In our JavaScript, we define two arrays: stillStudent and nowGraduated. As you probably guessed, stillStudent holds the students right before their graduation.

Then the forEach loop takes in each of the students and calls the graduateStudent function on it.

In this function we construct an object with two properties: the name of the student as well as the position at which they graduated. Then we pass the new object to the nowGraduated array. At that point, the student has become a graduate.

This example also demonstrates how you can use the forEach() method to copy an array into a new array.

let stillStudent = ["anna", "beth", "chris", "daniel", "ethan"]
let nowGraduated = []

function graduateStudent(student, index) {
    let object = { name: student, position: index + 1}
    nowGraduated[index] = object
}

stillStudent.forEach((name, index) => graduateStudent(name, index));

console.log(nowGraduated);

/*
[
    { name: "anna", position: 1}, 
    { name: "beth", position: 2}, 
    { name: "chris", position: 3}, 
    { name: "daniel", position: 4}, 
    { name: "ethan", position: 5}]
]
*/

How to Check for the Next Item in an Array with the `array` Parameter

At some point, the teacher will need to check if the list has a particular item next on the list. In such a case, the teacher will need to have a broad view of the whole list. That way, he can tell if there is a next student to call for.

In our JavaScript, we can replicate this because the callback function can also access the array (the third) parameter. This parameter represents the target array, which is name.

We check if there is a next item (student) on the array. If there is, we pass the string positive to the nextItem variable. If there is none, we pass the string negative to the variable. Then for every iteration, we check if that student is indeed the last.

names = ["anna", "beth", "chris", "daniel", "ethan"]

function rollCall(name, index, array) {
    let nextItem = index + 1 < array.length ? "postive" : "negative"
    console.log(`Is the number ${index + 1} student - ${name} present? Yes!. Is there a next student? ${nextItem}!`);
}

names.forEach((name, index, array) => rollCall(name, index, array))

/*
"Is the number 1 student - anna present? Yes!. Is there a next student? postive!"
"Is the number 2 student - beth present? Yes!. Is there a next student? postive!"
"Is the number 3 student - chris present? Yes!. Is there a next student? postive!"
"Is the number 4 student - daniel present? Yes!. Is there a next student? postive!"
"Is the number 5 student - ethan present? Yes!. Is there a next student? negative!"
*/

You can't exit a `forEach` Loop, So Use `every()` Instead

Remember when I mentioned that, by nature, you can't break out of (aka exit) a forEach loop? Once it's started, it will run until it reaches the last item in the array. So if you insert a break statement, it will return a SyntaxError:

let numbers = [2, 4, 5, 8, 12]
let odd = 5;

numbers.forEach(function(number) {
    if (number === odd) {
        break; // oops, this isn't gonna work!
    }
})

Normally you would want to break out of a loop if you end up achieving what you intend to before reaching the last item. In our example above, we already found the odd number (5), so there was then no need to keep iterating over the remaining items (8 and 12).

If you want to break out of the loop on some condition, then you will have to use any of the following methods:

for loop
for…of or for…in loop
Array.some()
Array.every()
Array.find()

Here is how you can break out of a loop with Array.every():

let numbers = [2, 4, 5, 8, 12]
let odd = 5;

numbers.every(number => {
  if (number == odd) {
    return false;
  }

  console.log(number);

  return true;
});

// 2 4

Wrapping Up

In this tutorial, I have introduced the forEach method, illustrated how it works with a simple analogy, and I've also given you some practical examples of its usage in JavaScript code.

Hopefully you got something useful from this piece.

If you want to learn more about Web Development, feel free to visit my Blog.

Thank you for reading and see you soon.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

JavaScript Array.map() Tutorial – How to Iterate Through Elements in an Array with map()

Kingsley Ubah — Thu, 19 Aug 2021 16:16:57 +0000

When ES6 (EmcaScript 2015) came out, it ushered in a whole new set of methods for iterating over an array. And one of the most useful is the map() method.

Array.prototype.map() is a built-in array method for iterating through the elements inside an array collection in JavaScript. Think of looping as a way to progress from one element to another in a list, while still maintaining the order and position of each element.

This method takes in a callback function which gets called for every new element it iterates over.

The callback function takes in three parameters:

The current value
It's index
The target array

If you are a beginner struggling to understand how to use the map() method or what exactly it does, then this article is for you.

In this article, I will explain the map() method and illustrate how it works with some simple examples.

How the map() Method Works in JavaScript

Imagine this: there is a queue of people outside a hospital waiting to be vaccinated. This means that they are yet to be vaccinated.

One-by-one, a doctor administers the vaccination to all of them. The doctor does this by iterating through the line. On one end, there is a group of people who are yet to be vaccinated. The doctor took each and every one of them, administered the vaccine to them, and returned them into a new line of vaccinated people.

On one end, there is an array (A) you want to operate on. map() takes in all elements in that array (A), performs a consistent action on each of those elements, and returns them into a new array (B).

How to Use the map() method – Avengers Example

To illustrate how map() works in JavaScript, let's consider a list of names of some of our favourite Avengers. The problem is that the names in this list are not complete – they are missing an important suffix.

With map(), we can take all names in the array and append the "man" suffix to each and every one of them:

let firstNames = ["super", "spider", "ant", "iron"]
let lastName = "man";

let fullNames = firstNames.map(firstName => firstName + lastName);

console.log(fullNames);

// ["superman", "spiderman", "antman", "ironman"]

VISUAL CODE

What about the women?

Sorry, my bad. I realized my mistake and decided to include a female character at the first position in the Array. Each item within an array is identified by a unique value, its index (or position in the array). The first item will have an index of 0, the second an index of 1, and so on.

Since there is now a female superhero on the list, we will want to make sure we append the right suffix to the appropriate superhero.

Since map() also takes in the index of the item we are currently iterating over, we can do this by checking for the index of our hero and making sure we use the "woman" suffix for the first item on our array:

let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";

let fullNames = firstNames.map(function(firstName, index) {
    return (index == 0) ? firstName + female : firstName + male;
 });

console.log(fullNames);

["wonderwoman", "spiderman", "antman", "ironman"]

How to Use the Index Argument

In addition to the value being iterated over, map takes in its index position as well. This is very useful if you want to perform different kinds of operations depending on the index position of the item.

In the previous example, we appended a different suffix by checking for the index.

To find out the index position of each of our items within the array, we can do this:

let fullNames = ["wonderwoman", "spiderman", "antman", "ironman"]

fullNames.map(function(firstName, index) {
    console.log(${firstName} is at ${index} position)
});

/*
"wonderwoman is at 0 position"
"spiderman is at 1 position"
"antman is at 2 position"
"ironman is at 3 position"
*/

RESULT

How to Multiply All Items in the Array by 2

Let's work a bit with numbers now. In this example, we simply want to multiply every number in the target array by two and then return their products into a new array:

let numbers = [10, 20, 30, 40]
let multiplier = 2;

let products = numbers.map(number => number * multiplier);

console.log(products);

// [20, 40, 60, 80]

How to Round to the Nearest Integer

What if we have an array of decimals but we want each of those decimal numbers to be rounded to the nearest integer?

let numbers = [3.7, 4.9, 6.2]
let rounded = numbers.map(function(number) {
    return Math.round(number);
})

console.log(rounded);

// [4, 5, 6]

How to Change Strings to Numbers

We have a list of numbers which are of the string type. However, we want to convert each one to the number type:

let strings = ["10","20","30"]

let numbers = strings.map(function(string) {
    return Number(string);
})

console.log(numbers);

// [10, 20, 30]

How to Get the Avengers' Real Names

In this example, we are working with objects. We have five avengers in the array, and each one has both a real name and a hero name. However, we only want to retrieve their real names into the new array.

let avengers = [
    {name: "steve rogers", heroName: "captain america"},
    {name: "tony stark", heroName: "iron man"},
    {name: "bruce banner", heroName: "the hulk"},
    {name: "peter parker", heroName: "spiderman"},
    {name: "tchalla", heroName: "black panther"}
]

let realNames = avengers.map(avenger => avenger.name);

console.log(realNames);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]

How to Get the Avengers' Hero Names

To get only their hero names, we do almost the exact same thing, only in this case we access the heroName property:

let avengers = [
    {name: "steve rogers", heroName: "captain america"},
    {name: "tony stark", heroName: "iron man"},
    {name: "bruce banner", heroName: "the hulk"},
    {name: "peter parker", heroName: "spiderman"},
    {name: "tchalla", heroName: "black panther"}
]

let heroNames = avengers.map(avenger => avenger.heroName);

console.log(heroNames);

// ["captain america", "iron man", "the hulk", "spiderman", "black panther"]

How to Separate Out a Function

Instead of defining a function directly inside of map(), we can define the function outside and then call it inside our map() function:

let avengers = [
    {name: "steve rogers", heroName: "captain america"},
    {name: "tony stark", heroName: "iron man"},
    {name: "bruce banner", heroName: "the hulk"},
    {name: "peter parker", heroName: "spiderman"},
    {name: "tchalla", heroName: "black panther"}
]

let getName = avenger =>avenger.name;

let realNames = avengers.map(getName);

console.log(realNames);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]

How the Array Argument Works

Earlier I stated that on every iteration, the map() method takes in the value being iterated over and also its index position. There is another argument to add to those two, the Array argument.

The arr argument represents the target array being looped over, along with its entire content. With this argument, you can essentially look into the full array to find something.

In this example, we will access the arr parameter to look in and check if the current item is the last item in the list. If it is not, we access the next item and subtract it from the current item. If it is the last, we just return it.

const oldArray = [33, 20, 10, 5];
const newArray = oldArray.map((currentVal, index, arr) => {
    let nextItem = index + 1 < arr.length ? arr[index + 1] : 0
    return currentVal - nextItem;
    });


console.log(newArray);

// [13, 10, 5, 5]

Wrapping Up

The map() method was introduced in ES6. With this method, we can access and perform a consistent action on every single item inside an array collection.

It takes in a callback function which it calls for every new element it iterates over.

In this tutorial, I have introduced the map() method, illustrated how it works with an analogy and given some practical examples of its usage in JavaScript code.

I hope you got something useful from this piece. If you like programming-related tutorials like this, you should check out my blog. I regularly publish articles on software development there.

Thank you for reading and see you soon.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

Kingsley Ubah - freeCodeCamp.org

How to Create a Chatbot With the ChatGPT API

How to Sign Up for a ChatGPT Account

How to Set up the Project

How to Create an Express Server

How to Create the Chatbot

How to Add Front-end JavaScript

How to Send the API Response to the Client

Conclusion

How to Create a 3D Tilting Card Effect in React Native

Prerequisites

Project Setup

How to Set Up the App

How to Style the Code

1. How to put the code in a card

2. How to style the code

How to Make the Card 3D and Add Different Layers

Conclusion

React Native Tutorial – How to Create a Simple Responsive Layout for Beginners

Requirements

How to Create a Responsive Layout

React.js vs React Native – What's the Difference?

How Websites Get Rendered: HTML, CSS, and JavaScript

What is React.js?

What is React Native?

Conclusion

React Native Networking – How To Perform API Requests In React Native using the FetchAPI

Prerequisites

Setting up the app

The API we’ll be working with

How to Make a GET Request in React Native

How to Make a POST Request in React Native

How to Make a PUT Request in React Native

How to Make a DELETE Request in React Native

How to Integrate Other Third-Party APIs to React Native

Conclusion

How to Build a Responsive Form with Filter Functionality Using HTML, CSS, and JavaScript

Getting Started

HTML Markup For The Table

How to Style the Table with CSS

How to Implement the Filter Functionality with JavaScript

Wrapping Up

How to Build an Accordion Menu Using HTML, CSS and JavaScript

What is an Accordion Menu?

How to Build an Accordion Menu using HTML, CSS and JS

HTML Markup for the Accordion

How to Style the Accordion with CSS

Adding JavaScript to our Accordion

How to Finish Up the App

Wrapping Up

How to Build a Sign Up Form with Floating Labels and Transitions Using Plain HTML and CSS

The HTML Markup

How to Style the Form

Wrapping Up

CSS Flexbox and Grid Tutorial – How to Build a Responsive Landing Page with HTML and CSS

How to Create the HTML Boilerplate

How to Use Font Awesome Icons

Let's Get Started

How to Build the Navigation Bar

How to Apply CSS Styling to our Page

How to Build the Showcase Area

How to Apply CSS Styling to our Showcase Area

How to Build the Lower Part of the Page

How to Build the Stats Section

How to Apply CSS Styling to the Stats Section

How to Build the Testimonials Section

How to Apply CSS Styling to it

How to build the Footer Section

How to Style the Footer

How to Set Media Queries to Make the Page Responsive

How to Design for Tablets and Smaller Screens

How to Design for Mobile Devices

Wrapping Up

JavaScript Array.some() Tutorial – How to Iterate Through Elements in an Array

How to Use the Array.some() JavaScript Method

How to Use Array.some() in Your JavaScript

How to test for at least one match with some()

How to use the index parameter with some()

How to Use the Context Object with some()

Example of using the context object with some()

How to Style the
Code

How to test for at least one match with `some()`

How to use the index parameter with `some()`

How to Use the Context Object with `some()`

Example of using the context object with `some()`

How to Use the `find()` Method in JavaScript

The JavaScript `Array.filter()` Method

How to Use the `filter()` Method in JavaScript

`filter()` Example 1: How to filter items out of an array

`filter()` Example 2: How to filter out items based on a particular property

`filter()` Example 3: How to access the index property

`filter()` Example 4: How to use the array parameter

`filter()` Example 5: How to access the context object with `this`

How to Use the `forEach()` Method in JavaScript

`forEach()` Method Examples in JavaScript

How to Remove the First Odd Number in an Array with `forEach()`

How to Access the Index Property with `forEach()`

How to Copy an Array into a New Array with `forEach()` in JavaScript

How to Check for the Next Item in an Array with the `array` Parameter

You can't exit a `forEach` Loop, So Use `every()` Instead