React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a recipe app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app recipe-app

with NPM to create our React project.

We also need the uuid package to let us generate unique IDs for our recipe items.

To do this, we run:

npm i uuid

Create the Recipe App

To create the recipe app, we write:

import React, { useState } from "react";
import { v4 as uuidv4 } from…

Comparing object properties and values is something that we need to do sometimes in our JavaScript code.

In this article, we’ll look at how to compare objects in JavaScript.

JSON.stringify

The JSON.stringify method lets us convert a JavaScript object into a JSON string.

Once we converted our object into a string, we can compare the stringified value against another object that’s stringified.

For instance, we can write:

const obj1 = {
  a: 1
}
const obj2 = {
  a: 1
}
console.log(JSON.stringify(obj1) === JSON.stringify(obj2))

We have 2 objects, obj1 and obj2 .

Then we call JSON.stringify on both objects and check…

Formatting numbers as currency stings is something that we have to do sometimes in our JavaScript apps.

In this article, we’ll look at how to format numbers as currency strings with JavaScript.

The Intl.NumberFormat Constructor

We can use the Intl.NumberFormat constructor that comes with most browsers to format a number into a currency string.

For instance, we can write:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
const str = formatter.format(1500);
console.log(str)

We pass in the locale and an object with formatting options arguments of the constructor.

style is set to 'currency' to format a number into a currency string.

…

Getting the screen size is important if we want to create responsive web apps.

Therefore, this is an operation that’s frequently done within JavaScript web apps.

In this article, we’ll look at how to get the size of the screen, web page, or browser window with JavaScript.

Use the window.screen Object to Get a Screen’s Dimensions

The window.screen object lets us get the height and width of the browser’s screen with the height and width properties respectively.

For instance, we can write:

console.log(window.screen.height,
  window.screen.width)

to get the height and width of the screen that the app is currently on.

Window innerWidth and innerHeight Properties

The window.innerWidth and window.innerHeight properties let us get the current…

Removing an item from a JavaScript array is something that we have to do often.

In this article, we’ll look at how to remove a specific item from a JavaScript array.

The indexOf and splice Methods

One way to remove an item from an array is to use the indexOf method to get the index of the item we want to remove.

Then we can use the splice method to remove an item with the given index.

For instance, we can write:

const array = [1, 2, 3];console.log(array);const index = array.indexOf(2);
if (index > -1) {
  array.splice(index, 1);
}

We have the array…

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a PIN pad with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app pin-pad

with NPM to create our React project.

Create the PIN Pad

To create the PIN pad, we write:

import React, { useState } from "react";export default function App() {
  const [pin, setPin] = useState("");  return (
    <div>
      <div>{pin}</div>
      <div>…

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a grade calculator with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app grade-calculator

with NPM to create our React project.

Also, we’ve to install the uuid package to let us assign unique IDs for each grade entry.

To do this, we run:

npm i uuid

Create the Grade Calculator

To create the grade calculator, we write:

import React, { useState } from "react";
import { v4 as uuidv4 }…

If we’re working with web front end apps, then changing an element’s class is something that we’ve to do often.

In this article, we’ll take a look at how to change an element’s class with JavaScript.

The classList Property

An element has the classList property to let us manipulate the classes that are applied to the element.

For instance, if we have a div:

<div>
  hello world
</div>

Then to add a class to the div, we can write:

document.querySelector("div").classList.add('hello');

We call add to add the 'hello' class to the div.

If the hello class is already added, then nothing will be done.

…