Forem: deji adesoga

A Summary of the Battery Status API

deji adesoga — Sat, 30 Mar 2024 13:18:12 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

The Battery Status API helps track the status of a system's battery. It performs 4 basic tasks:

Get current battery level.
Charging status
Battery discharge time
Time until fully charged.

This API can optimize web app performance for battery efficiency

Additional Context

Check out the video tutorial I created below on how to interact with the Battery Status API, on my YouTube channel:

Angular's Evolution: Embracing Change in the Web Development Landscape

deji adesoga — Sat, 17 Feb 2024 11:39:59 +0000

Unlock Your Angular Signals Knowledge with my New Course: Demystifying Reactivity with Angular Signals

Introduction

In the world of web development, frameworks come and go, but some, like Angular, make a lasting impact. This blog post delves into Angular's journey, exploring its rise, the challenges it faced, and how it's adapting to stay relevant in the ever-evolving tech landscape.

The Rise and Challenge of Angular

Angular version 1.0 was released by Google in the year 2010, and was also known as AngularJS. During that period, Angular.js emerged as a frontrunner in the race of web development frameworks. In its early days, it was celebrated for its distinct features such as data binding, model view architecture, testing capabilities as well as support for dependency Injection, quickly made it a preferred choice for developers.

Later down the line, Angular version 2.0 was released in September 2016 by Google. This new version was a complete rewrite from the version 1.0 of Angular, known as Angular.js. This decision was not well taken by the web development community and becasue of this, newer frameworks like React and Vue.js started to gain more traction. Angular's comprehensive nature, was began to be seen as a barrier, especially for newcomers to the framework.

Learning Angular: A Steep Curve

One of Angular's most significant hurdles has been its perceived steep learning curve. For new developers, Angular's complexity, coupled with a rich set of features, often felt overwhelming. This complexity stands in contrast to frameworks like React, which are perceived as more beginner-friendly. As a result, many new developers gravitated towards these alternatives, leading to a gradual decline in Angular's popularity among the new generation of developers.

Angular's Transformation: The Angular 16 Era

With the release of Angular 16, the framework has begun a new chapter. This version aims to address some of the long-standing barriers to entry. The introduction of new features and the simplification of existing ones are steps towards making Angular more accessible to a broader range of developers. Angular 16 represents a significant shift, aiming to reduce the complexity that has long been associated with the framework.

The Angular Developer Community

As Angular evolves, so does its community. The changes in Angular 16 are attracting a new wave of developers, ready to explore its potential. This influx of new talent and ideas is revitalizing the Angular community, bringing fresh perspectives and energy. For seasoned Angular developers, this is a call to action – an opportunity to mentor, to share knowledge, and to learn from the newcomers.

Conclusion

Angular's journey is a testament to the dynamic nature of web development. The framework's evolution reflects a willingness to adapt and change, ensuring it remains a valuable tool for developers. Whether you're a seasoned Angular veteran or a newcomer to the framework, now is an exciting time to be part of the Angular community. As Angular continues to evolve, it offers both challenges and opportunities, inviting developers to grow and innovate along with it.

Angular Tips: Transforming Observables into Signals for Enhanced Reactivity

deji adesoga — Thu, 01 Feb 2024 15:14:06 +0000

Unlock Your Angular Signals Knowledge with my New Course: Demystifying Reactivity with Angular Signals

Introduction

There’s always been a love-hate relationship with front-end devs and Angular.

It’s a really powerful framework, and yet so hard to get into it,

especially if you’re a newer engineer.

Thankfully, Angular keeps evolving, year by year, and continuously offerring better, easier, and more efficient ways to manage data and reactivity.

One such evolution is the conversion of observables to signals using Angular's interoperability API.

This post explores this transformative process and its significance in enhancing application reactivity and performance.

Understanding Observables and Signals in Angular

In Angular, observables are a core part of managing data streams, particularly when fetching data from REST APIs. They provide a powerful way to handle asynchronous data flows. However, managing these observables, especially in complex applications, can become challenging. This is where signals come in, offering a simpler and more reactive way to handle data.

The toSignal API: The Hero We All Needed

The toSignal method, a part of Angular's interoperability API, is pivotal in converting observables to signals. It enhances data stream management, making applications more efficient and responsive. The toSignal API accepts various data types and a source, such as data from a REST API, and can also take an initial value, defaulting to 'undefined' if not provided.

A basic example of the toSignal API in use:

import { toSignal } from '@angular/interoperability';

let observable = fetchData('https://my-api.com/data');
let signal = toSignal(observable, []);

In this instance, fetchData is a function that returns an observable from a REST API, which is then transformed into a signal.

Implementing Reactive Primitives for Efficient State Management

Angular's reactive primitives - effects, computed, and signal - play a crucial role in managing state reactively. The focus here is on the computed primitive, which wraps the environment and implements the first reactive primitive. An observable variable is created to hold API response data, which is then converted to a signal.

import { computed, observable, toSignal } from '@angular';

let environment = computed(() => { /* Computed environment code here */ });
let products$ = observable(fetchData('https://my-api.com/products'));
let productsSignal = toSignal(products$, []);

Integrating Signals into Angular Components

To utilize the products signal in a component, Angular 17's new @For loop syntax provides a better alternative to the traditional ngFor. This integration significantly simplifies the component's code and enhances reactivity.

<template>
 @for (product of productService.productSignal(); track product){
<!-- Component code here -->
} @empty {
   <div>No Products Available</div>
}
</template>

The Benefits of Converting Observables to Signals

The conversion offers several advantages:

Simplified State Management: Signals provide a more straightforward approach to managing data streams compared to observables.
Enhanced Reactivity: Signals update the UI reactively, ensuring that changes in data are immediately reflected.
Performance Improvements: By reducing the reliance on observables in templates, potential performance issues are minimized, leading to faster, more responsive applications.

Conclusion

Converting observables to signals in Angular represents a significant step towards more efficient and reactive web applications. By understanding and implementing this process, developers can optimize the performance and maintainability of their applications. As Angular continues to evolve, embracing these advancements is key to staying ahead in the dynamic world of web development.

How to Fetch Data using the provideHttpClient in Angular

deji adesoga — Sat, 01 Jul 2023 12:47:01 +0000

The Angular echo system has been undergoing some changes over the past year. One of those changes was the introduction of the concept of Standalone applications, which was introduced in Angular v14. The Standalone applications provide the option of creating projects without modules. We can call such applications module-less applications, which allows the possibility of only importing the packages needed for building an application.

To fetch data in a Standalone application, Angular introduced the concept of using the provideHttpClient. In a module-based application the HttpClientModule remains the way to go. In the next few steps, I will break down how we can use the provideHttpClient to fetch data from a public REST API.

Prerequisites

This tutorial requires you to be familiar with the basics of the technologies listed below:

Html
JavaScript
TypeScript
node package manager (npm)

How to Install and Create a Standalone app in Angular 16
Generating the Angular service
How to Configure the provideHttpClient
Integrating the JSON Placeholder REST API
Displaying the Data in an HTML Table
Conclusion

You can also watch the video version of this article on my YouTube channel:

How to Install and Create a Standalone App in Angular 16

To create a new Angular project, we need to ensure we have Angular installed in the terminal. To do that, we have to open the terminal and run the command ng version. If you get an error message, that means Angular has not been installed on your machine and you'll have to run the following command below to have it installed:

npm install -g @angular/cli

Once the installation is complete, you can close and reopen the terminal, and then re-run the ng version command. That should give us the result below in the terminal:

From the image above, we can see the version of the Angular version installed, which is Angular 16 as of the time of writing of this article.

Next, we can proceed to create a new standalone application in our terminal by running the following command:

ng new ng-client --routing=false --style=css --standalone

The command above will generate a new standalone application called ng-client. The application will be without a routing configuration as we set it to false, and a style sheet of CSS. To run this application, we can navigate to the ng-client directory and run the ng serve --open command. This should open up the default Angular template user interface as seen below.

Generating the Angular service

Services in Angular are TypeScript classes that help to perform specific functions in an Angular application. In this application, we will be making use of the Angular Service to fetch data from a REST API. To do this, the first thing we need to do is to generate an Angular Service, with the following command:

ng g service service/data

With the above, a new Service called DataService is created inside a service folder.

How to Configure the provideHttpClient

To configure the Angular Service, we head to the main.ts file. Here we can have the following code below:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
}).catch((err) => console.error(err));

To summarize the above code, we

Start by importing the provideHttpClient from the @angular/common/http package.
Next, we inject the provideHttpClient() within the providers array.

This configuration now makes it possible to make use of the HttpClient to communicate with the REST API in our DataService file.

Integrating the JSON Placeholder REST API

The public REST API we will use in this tutorial is called the JSON Placeholder. To integrate this API, we need to import a couple of packages in our DataService file:

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

Next, we create the interface that helps to shape the way the object from our data is going take, as seen below:

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

The user id, id, title, and body are all data we intend to display in the table. We can now create the variable that holds the link of our REST API as well as inject the HttpClient in the constructor.

apiUrl = 'https://jsonplaceholder.typicode.com/posts';

constructor(private http: HttpClient) {}

Finally, we create the function that communicates with the REST API as seen below:

getAllPosts(): Observable<Post[]> {
 return this.http.get<Post[]>(this.apiUrl);
}

The getAllPosts() is appended to an Observable of type Post.
In the return statement, we make use of the get http request to retrieve data from the API.

Our DataService file should now look like this:

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Injectable({
  providedIn: 'root',
})
export class DataService {
  apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getAllPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.apiUrl);
  }
}

With this configuration, we can now communicate with the service directly from our component file by making use of dependency injection.

Displaying the Data in an HTML Table

To display the data on a table, we head to our app.component.ts file. Here we implement the following code below:

We begin by importing the DataService in line 3, and then injecting it in the constructor in line 24.
Next, we created the interface called Post between line 5 and line 11.
In line 21 and line 22, we created two variables. The first variable called posts, which is assigned a type of Post, has an initial value of an empty array([]). This variable will hold the data fetched from the REST API. The second variable called errorMessage will hold our error message, if any exists.
Finally, within our ngOnInit lifecycle hook we implement the logic to consume the data from our DataService. In line 27, we called the getAllPosts() function from our DataService. We then subscribed to the getAllPosts() function, returning two Observers from the subscription. The first Observer is called next in line 28. Here we called the posts variable we created earlier in line 21, and attached the data from the next argument to it, which is also called posts. Next, in line 32, we created the error Observer and then attached any possible error that may occur to the errorMessage variable.

With this implementation, if we save all the files and then run the ng serve --open command, a new tab will open in the browser. In our app.component.ts file, we have a console.log method in line 30, which allows us to view the data when we open the console as seen in the image below:

To display the data in the console inside of a table, we head to the app.component.html, clear the boilerplate code and then paste the code below:

<table>
  <tr>
    <th>id</th>
    <th>title</th>
    <th>body</th>
  </tr>
  <tr *ngFor="let post of posts">
    <td>{{post.id}}</td>
    <td>{{post.title}}</td>
    <td>{{post.body}}</td>
  </tr>
  <tr>
</table>

Above, we made use of the *ngFor directive within the tr tag to loop through the data. We then made use of interpolation({{}}) to display data for the id, title, and the body.

If we save, we can now have the results below in the browser:

Conclusion

In this tutorial, you have learned how to fetch data for standalone applications by making use of the provideHttpClient in Angular. If you want access to the code base, you can either fork or clone the repo here on Github.

If you find this article helpful, you can kindly show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like JavaScript, React, Angular, Node.js, WordPress, and more.

Build a To-Do Application with React and Firebase

deji adesoga — Mon, 23 Jan 2023 13:16:36 +0000

To-do applications are one of the ways you can use to manage a set of tasks. As developers, learning how to build a to-do application will also help to understand certain concepts one of which includes an understanding of how to build an application with a database.

In this article, you will learn how to build a to-do web app by making use of React.js and Firebase Database.

Prerequisites
How to Create the Firebase Project
Creating the Firestore Database
How to Create the React Project
Setting up the Project Structure
How to Integrate Firebase in React
Integrate Bootstrap 5 into React
Designing the User Interface
Adding Data to the Firestore in React
Fetching Data from the Firestore in React
Deleting Data from the Firestore in React
Updating Data in the Firestore in React
How to Integrate the Checkbox Functionality
How to order Data by Timestamp in Firebase
Conclusion

Watch the video version of this article below, or on my YouTube channel

Prerequisites

To install the npm packages needed for this React application such as Firebase, you need to have Node.js downloaded.

Visual Studio code serves as the code editor we will use to build this project.

The Firebase Console serves as the backend as a service database that helps us to store and manage our data, through the use of the Cloud Firestore.

How to Setup the Firebase Project

To set up firebase, you head to the firebase console website and create a new project by using your Google account. Once you are logged into firebase you will see an existing project, you can click on the add project button, as seen below.

Firebase console dashboard

After clicking on the add project button, we get navigated to a new page which requires 3 steps before the firebase project is created:

The first step requires us to name the firebase project, which we will call todo.
The second step asks if we want to enable Google Analytics, you should disable it by using the toggle button.
Finally, we can now click on the create project button.

Once the project is created, we click on the continue button which navigates us to the next screen, which is now our default firebase project dashboard.

Firebase dashboard

We have now completed the creation of a new Firebase project.

Creating the Firestore Database

Inside the firebase dashboard, on the left-hand panel we take the following steps:

• Click on the Build dropdown.

• Within the Build dropdown, select Firestore Database, this displays a page where we can click on the Create database button.

• Next, a modal pops up asking if we want Production mode or Test mode. You can choose Test mode since the app is currently in the development stage.

• The next step asks for where we want our Cloud Firestore to be located, you can choose the location closest to your area due to the possibility of latency.

Once we click on enable, we get redirected to the Cloud Firestore page which will currently have an empty Collection.

How to Create the React Project

We are going to create a new React project by making use of CRA (Create-React-App). Since we have node.js installed, we can run the following commands:

npm i create-react-app

Once the installation of CRA is complete, we can now create a new React project with the following command below:

npm init react-app todo
cd todo
code .

We have now created a new React project called todo, navigated into the project directory, and opened the project in Visual Studio Code.

We can now begin the set up of the React application.

Setting up the Project Structure

To set up the architecture of our React project, you can implement the steps below:

In the src directory, create two folders named components and services.
The components folder will contain two new document files. The first js file is called Todo.js, while the second file is called EditTodo.js.
In the services folder, create a js file called firebase.config.js. This file will contain the configuration of the firebase which we can export to different components.
Finally, still within the src directory, we head to the App.js file. Here, we clear the boilerplate inside of the div with the className of App and then import the Todo.js component as seen in the following lines of code:

import './App.css';
import Todo from './components/Todo';

function App() {
return (
<div className="App">
 <Todo />
</div>
 );
}
export default App;

With the above, we now have the basic structure of our React project set up.

How to Integrate Firebase in React

To add the firebase web SDK to our new app, the first thing we need to do is run the following command inside our terminal:

npm install firebase

Next, you open up the firebase.config.js file inside of the services folder and then use the following imports to configure firebase into the React app:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

Furthermore, you need to grab the project configuration settings from the firebase dashboard. On the left-hand panel of the dashboard, click on project overview and select project settings.

Scroll to the bottom of the page and select the web icon as shown below:

Web icon for firebase project settings

Once the web icon gets selected, a new page shows up asking you to give the app a nickname. You can proceed to call it todo or any other word you prefer, then click on register app. Firebase will now generate the firebase configuration settings, which contains the apikey, storage bucket, auth domain, project id, app id, e.t.c as seen below:

Firebase config settings

We can now grab this and paste it inside our firebase.config.js file:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyC5u80wO6iaPl8E9auM0IRXliYGKyDQHfU",
    authDomain: "todo-b74fc.firebaseapp.com",
    projectId: "todo-b74fc",
    storageBucket: "todo-b74fc.appspot.com",
    messagingSenderId: "872116099545",
    appId: "1:872116099545:web:9bb66d12ca15f2f39521c8"
};

The final step needed to complete the firebase configuration is to initialize firebase by making use of the config variable and then export it so it becomes available in all our components, as seen in the following lines of code:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
const config = {
    apiKey: "AIzaSyC5u80wO6iaPl8E9auM0IRXliYGKyDQHfU",
    authDomain: "todo-b74fc.firebaseapp.com",
    projectId: "todo-b74fc",
    storageBucket: "todo-b74fc.appspot.com",
    messagingSenderId: "872116099545",
    appId: "1:872116099545:web:9bb66d12ca15f2f39521c8"
};
const app = initializeApp(config);

export const db = getFirestore(app);

With this, our firebase configuration is successfully created and we do not need to make use of any other firebase services.

Integrate Bootstrap 5 into React

To integrate Bootstrap 5 you will need to head over to the Bootstrap 5 website and grab the CDN link for both the CSS and JavaScript. You can then head back to the React project in VS Code, open the public directory, and proceed to select the index.html file.

In the index.html file, we can paste the CDN links for both the CSS and JavaScript within the head section. With that we should have the result below:

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>

Now we have access to all Bootstrap 5 classes across our components.

Designing the User Interface

To implement the design for the React project you will start by clearing the boilerplate code inside of the App.css file. You can now proceed to open the index.css file and then paste the following styles:

body{
  margin-top:20px;
  background: #f8f8f8;
}

.todo-list {
  margin: 10px 0
}

.todo-list .todo-item {
  padding: 15px;
  margin: 5px 0;
  border-radius: 0;
}

div.checker {
  width: 18px;
  height: 18px
}

div.checker input{
  width: 18px;
  height: 18px
}

div.checker {
  display: inline-block;
  vertical-align: middle;
}

.done {
  text-decoration: line-through;
}

Above, what we did was ensure all the elements that will be displayed on the browser are properly arranged.

Next, proceed to the Todo.js file and paste the code below within the return statement of the jsx:

import React from 'react'

const Todo = () => {
  return (
  <>
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <div className="card card-white">
            <div className="card-body">
              <button
                data-bs-toggle="modal"
                data-bs-target="#addModal"
                type="button"
                className="btn btn-info">Add Todo
              </button>

             <div className="todo-list">
              <div className="todo-item">
               <hr />
                <span>
                 <div className="checker" >
                 <span className="" >
                  <input
                    type="checkbox"
                   />
                 </span>
                  </div>
                  &nbsp; Go hard or Go Home<br />
                      <i>10/11/2022</i>
                 </span>
                  <span className=" float-end mx-3">
                     <EditTodo /></span>
                    <button
                      type="button"
                      className="btn btn-danger float-end"
                    >Delete</button>
                   </div>
                  </div>
                 </div>
                </div>
              </div>
            </div>
          </div>

          {/* Modal */}
       <div
         className="modal fade"
         id="addModal"
         tabIndex="-1"
         aria-labelledby="addModalLabel"
         aria-hidden="true">
         <div className="modal-dialog">
          <form className="d-flex">
             <div className="modal-content">
             <div className="modal-header">
               <h5
                 className="modal-title"
                 id="addModalLabel">
                 Add Todo
               </h5>
             <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close">
             </button>
             </div>
             <div className="modal-body">
                <input
                  type="text"
                  className="form-control"
                  placeholder="Add a Todo"
                />
             </div>
              <div className="modal-footer">
                 <button
                   className="btn btn-secondary"
                   data-bs-dismiss="modal">Close
                 </button>
                 <button className="btn btn-primary">Create 
                        Todo</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </>
  )
}

export default Todo

In the above code:

The div with the className of .container displays the card that contains all items in our Todo list, while the div with the id of addModal contains the modal where all the todo can be created using the save button called Add todo.

The final part of our design is in the EditTodo.js file. The EditTodo.js file will only contain the modal that allows us to edit each todo list item. The code can be seen below:

import React from 'react'

const EditTodo = () => {

 return (
     <>
      <button
         type="button"
         className="btn btn-primary"
         data-bs-toggle="modal"
         data-bs-target="#exampleModal"
       >
          Edit Todo
       </button>

       <div
         className="modal fade"
         id="exampleModal"
         tabIndex="-1"
         aria-labelledby="editLabel"
         aria-hidden="true">
       <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5
                className="modal-title"
                id="editLabel">
                Update Todo Details
              </h5>
              <button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close">
              </button>
             </div>
             <div className="modal-body">

              <form className="d-flex">
                 <input
                   type="text"
                   className="form-control"
                 />
              </form>

              </div>
              <div className="modal-footer">
               <button
                 type="button"
                 className="btn btn-secondary"
                 data-bs-dismiss="modal">Close
               </button>
               <button
                 type="button"
                 className="btn btn-primary"
               >Update Todo</button>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
export default EditTodo

The design for the application is now complete. If you run the command npm start in the terminal and the code compiles, you should see the result below in the browser:

Complete page design

Adding Data to the Firestore in React

To implement the Add data functionality in our todo application, we start by importing some modules from firebase/firestore which can be seen below:

import { collection, addDoc, serverTimestamp } from 'firebase/firestore'

• A Collection is a folder that contains Documents and Data. All the data saved on our Todo application will be saved in a Collection called Todos, which we will create soon.

• addDoc is a high-level method used to add data to a Collection.

• The serverTimestamp contains the values of both time and date values for each Document in a Collection.

We then need to import the firebase.config.js file in our Todo.js file to allow us to have access to the firebase methods:

import { db } from '../services/firebase.config'

Using the import from our firebase.config.js file, we can now instantiate a reference to our Collection:

const collectionRef = collection(db, 'todo');

As seen in the code above, we created a variable called collectionRef. The collectionRef variable takes in the collection method. This method has two arguments. The first argument called db references the firebase service, while the second argument will create a new Collection called todo, which will contain all necessary Documents created.

Next, we create two variables using the useState hook:

const [createTodo, setCreateTodo] = useState("")

The first thing we did here is to import the useState hook in React:
import React, { useState } from 'react'
Then we created a getter and a setter called createTodo and setCreateTodo respectively.

To proceed, we move to the modal created within the JSX and implement the next couple of things:

Within the form tag, we create an onSubmit event handler called submitTodo.
<form className="d-flex" onSubmit={submitTodo}>
In the input tag within the form tag, we create an onChange event handler that allows us to get the value typed inside of the form:

onChange={(e) => setCreateTodo(e.target.value)}`

The final implementation we need to make before adding data to the database becomes functional is to configure the onSubmit event handler previously created. The code for this can be seen below:

//Add Todo Handler
const submitTodo = async (e) => {
e.preventDefault();

try {
   await addDoc(collectionRef, {
   todo: createTodo,
   isChecked: false,
   timestamp: serverTimestamp()
  })
   window.location.reload();
  } catch (err) {
    console.log(err);
  }
}

Above, we made the submitTodo variable asynchronous by making use of the async/await keyword in JavaScript.
We then created a parameter in the arrow function called e, which serves as an event. This ensures we are able to make use of the e.preventDefault() method which prevents the form from reloading after submission.
Next within the try/catch block, we call the addDoc method which takes two arguments. The first argument is the collectionRef variable we created previously, while the second argument contains the object to be passed into the firestore database.

These objects include the todo values inside of the input field, the checkbox value which is currently set as false, and then the timestamp in which the todo was created in the database.

We then make use of the window.location.reload() function in JavaScript to refresh the form upon successful submission, while making use of catch to handle the error.

With this, we can now create a new todo and view it in our database.

Creating the Todo

Fetching Data from the Firestore in React

To fetch the data from the Firestore in Firebase, we need to make two importation in our Todo.js file. These include the useEffect hook in React and the getDocs from firebase/firestore:

import React, { useState, useEffect } from 'react'
import { collection, addDoc, serverTimestamp, getDocs } from 'firebase/firestore'

We then need to create the setter(setTodo) and getter(todos) variables to help us access the data from the Firestore:

const [todos, setTodo] = useState([])

The data can now be fetched inside of the useEffect hook:

useEffect(() => {
const getTodo = async () => {
   await getDocs(collectionRef).then((todo) => {
   let todoData = todo.docs.map((doc) => ({ ...doc.data(), id: 
   doc.id }))
   setTodo(todoData)
}).catch((err) => {
   console.log(err);
})
}
   getTodo()
}, [])

Inside the useEffect hook, we created a variable called getTodo that takes in an asynchronous arrow function.
Then we called the getDocs method from Firebase. The getDocs method requires an argument, so we pass in the collectionRef.The getDocs returns a promise which we need to chain to using .then.
The promise returns an array that we need to map through to access the required data from the database, which are the todo list items as well as the id.
The todoData variable holds the data coming from the database. To have access to the data in our JSX, we will then put the todoData as an argument in our setter which is called setTodo.
We then proceed to handle the error in case there is any using the catch keyword before we finally call the getTodo function to initialize it on page load.

Now that we have access to our data from the database, we need to make it visible on the page. The data we have comes in form of an array and we need to loop through it in the HTML file. This will be done within the div with the className of todo-list as seen below:

{todos.map(({ todo, id }) =>
 <div className="todo-list" key={id}>
   <div className="todo-item">
     <hr />
      <span>
       <div className="checker" >
         <span className="" >
          <input
            type="checkbox"
          />
          </span>
          </div>
           &nbsp;{todo}<br />
           <i>10/11/2022</i>
          </span>
          <span className=" float-end mx-3">
           <EditTodo />
          </span>
         <button
            type="button"
            className="btn btn-danger float-end"
         >Delete
         </button>
       </div>
  </div>
)}

• In the code above, we call the todos getter that contains our data which comes in an array format.

• Next, we make use of the map array method to loop through the data, restructured the data by making use of curly brackets {}, and then extract the todos as well as the id.

• Finally, we called the key attribute in React, pass in the id so as enable React to track the data loaded on the page. The static text beside the   also gets cleared before replacing it with the todo data.

We can now proceed to save our changes.

Deleting Data from the Firestore in React

To implement the delete functionality, we need to import two firestore functions which are doc, deleteDoc.

import { collection, addDoc, serverTimestamp, getDocs, doc, deleteDoc } from 'firebase/firestore'

Next, we create a function called deleteTodo:

//Delete Handler
const deleteTodo = async (id) => {
    try {
      if (window.confirm("Are you sure you want to delete this Task!"))
    {
    const documentRef = doc(db, "todo", id);
    await deleteDoc(documentRef)
    window.location.reload()
    }
    } catch (err) {
      console.log(err);
    }
}

Within the try block, we start by displaying a prompt to the user if they want to proceed to delete the Todo.
We then create a new variable called documentRef. We then call the doc method which requires 3 arguments which are the firebase service, the collection name as well as the todo id that we want to delete.
Next, we call the deleteDoc method from firestore and then pass in the documentRef as an argument. This will enable the specific todo to be deleted from the database. Once this is done, we refresh the page by calling the window.location.reload(); function.
We then use the catch block to handle any possible error by login into the console.

Now that our delete function is ready, all we have to do is to initialize it inside our delete button as seen below:

<button
   type="button"
   className="btn btn-danger float-end"
   onClick={() => deleteTodo(id)}
   >Delete
</button>

All we did was make use of the onClick event handler to call the deleteTodo() function anytime a specific todo is deleted. It should also be noted that the id parameter passed inside of the function was made accessible to us in the documentRef variable we created earlier.

Updating Data in the Firestore in React

To implement the functionality to update data, we need to pass the data coming from the database as props to our EditTodo.js component:

{todos.map(({ todo, id }) =>
 <div className="todo-list" key={id}>
   <div className="todo-item">
    <hr />
     <span>
     <div className="checker" >
     <span className="" >
     <input
       type="checkbox"
     />
      </span>
      </div>
        &nbsp;{todo}<br />
        <i>10/11/2022</i>
      </span>
      <span className=" float-end mx-3">
       <EditTodo todo={todo} id={id} />
        </span>
    <button
       type="button"
        className="btn btn-danger float-end"
        onClick={() => deleteTodo(id)}
     >Delete
    </button>
    </div>
   </div>
)}

We passed both the todo data as well as the id as props and it now becomes accessible in the EditTodo.js file.

Inside the EditTodo.js, we extract the data by making use of curly brackets {}:

const EditTodo = ({ todo, id }) => {

We then make the necessary imports required to update the data, which include the following React and firebase terms:

useState (React Hook)
db (The Firebase Service instance)
doc (The Firestore Document reference)
updateDoc (Used to update a Document inside of a Collection)

The extracted data can now be set in state using the useState hook:

const [todos, setTodos] = useState([todo])

As seen above, we created new variables called todos, setTodos, and then set the initial value in the useState to the todo data coming from the database.

Next, we create the function that implements the update todo:

const updateTodo = async (e) => {
 e.preventDefault()
 try {
    const todoDocument = doc(db, "todo", id);
    await updateDoc(todoDocument, {
    todo: todos
   });
     window.location.reload();
   } catch (err) {
     console.log(err);
   }
 }

Above, we created a variable called updateTodo, which holds the asynchronous arrow function.
Next, we called the e.preventDefault(), to prevent the form from reloading.
Then we create a try/catch block. Within the try block, we create a variable called todoDocument. This variable holds document reference which requires 3 arguments(db, todo, id). With this, we are able to update a specific todo from the firebase database using its id.
In the next line, we call the updateDoc method that updates data in the firestore. This method takes two arguments. The first argument is the todoDocument, while the second is the updated todos text value which was the getter that was created earlier in the useState hook.
Lastly, we refresh the page when the request is successful or display an error on the console if one occurs.

There are two implementations left to do. One is making the modal dynamic, while the other is calling our update data function in the JSX.

To make the modal dynamic, we need to change the values of the id in the JSX, so we add the following code:

<button
   type="button"
   className="btn btn-primary"
   data-bs-toggle="modal"
   data-bs-target={`#id${id}`}      >
       Edit Todo
 </button>

<div
   className="modal fade"
   id={`id${id}`}
   tabIndex="-1"
   aria-labelledby="editLabel"
   aria-hidden="true">
   <div className="modal-dialog">
   <div className="modal-content">
   <div className="modal-header">
     <h5 className="modal-title" id="editLabel">Update Todo Details</h5>
   <button
     type="button"
     className="btn-close"
     data-bs-dismiss="modal"
     aria-label="Close">
   </button>
</div>

We begin by replacing the static text in the data-bs-target attribute called #exampleModal, with the dynamic id coming from the firestore.
Within our modal, we replace the static id called id="exampleModal", with the id from our firestore. The modal is now dynamic.

Next, to update the data, we need to call the setTodos setter inside the input field using the onChange event handler in React:

<input
   type="text"
   className="form-control"
   defaultValue={todo}
   onChange={e => setTodos(e.target.value)}
/>

The defaultValue helps to refill the form with the existing todo in the database.
The onChange event handler helps to get the values of the input field and save it into the setTodos setter.

Finally, we can call the updateTodo function inside our submit button:

<div className="modal-footer">
 <button
    type="button"
    className="btn btn-secondary"
    data-bs-dismiss="modal">
        Close
 </button>
 <button
    type="button"
    className="btn btn-primary"
    onClick={e => updateTodo(e)}
 >Update Todo
 </button>
</div>

As seen above, we can now successfully update a specific todo using the onClick event handler in React.

How to Integrate the Checkbox Functionality

To begin the checkbox implementation, we will create a variable using the useState hook:

const [checked, setChecked] = useState([]);

Next, we pass the data from the firestore into the setter called setChecked inside of the useEffect:

useEffect(() => {
 const getTodo = async () => {
    await getDocs(collectionRef).then((todo) => {
    let todoData = todo.docs.map((doc) => ({ ...doc.data(), id: 
     doc.id }))
    setTodo(todoData)
    setChecked(todoData)
   }).catch((err) => {
      console.log(err);
   })
  }
      getTodo()
}, [])

In the JSX, we will extract the isChecked value in the database and use it to conditionally set the CSS class used to line-through a specific todo which signifies the todo is done as seen below:

{todos.map(({ todo, id, isChecked }) =>
<div className="todo-list" key={id}>
<div className="todo-item">
<hr />
<span className={`${isChecked === true ? 'done' : ''}`}>

We proceed to configure the input field used for our checkbox by using the following code:

<input
  type="checkbox"
  defaultChecked={isChecked}
  name={id}
  onChange={(event) => checkHandler(event, todo)}
/>

Above we use the defaultChecked attribute to set the default value of the checkbox coming from the firestore which is a Boolean.
Next, we pass in the id into the name attribute.
Using the onChange event handler, we set the event and the todo data into a function called checkHandler, which we will create and configure below:

//Checkbox Handler
const checkHandler = async (event, todo) => {
 setChecked(state => {
 const indexToUpdate = state.findIndex(checkBox => checkBox.id.toString() === event.target.name);
 let newState = state.slice()
 newState.splice(indexToUpdate, 1, {
 ...state[indexToUpdate],
  isChecked: !state[indexToUpdate].isChecked,
 })
 setTodo(newState)
 return newState
});

The summary of the above function helps to track the state of a specific checkbox when checked and unchecked by using the findIndex method in JavaScript.
We then create a variable called newState. This variable makes use of the slice() and splice() methods in JavaScript. The slice() method helps us to return the selected checkbox(s) in the array, as a new array, while the splice() method helps us to save only elements that were checked into the array.
Next, we then save the newly modified array into the setTodo setter before we return data using the return keyword.

The final step we need to take is to save the selected checkbox values in the database. We will do this by, making use of the runTransaction method in JavaScript. The runTransaction method will be called within the checkHandler function:

// Persisting the checked value
try {
const docRef = doc(db, "todo", event.target.name);
await runTransaction(db, async (transaction) => {
      const todoDoc = await transaction.get(docRef);
        if (!todoDoc.exists()) {
           throw "Document does not exist!";
        }
      const newValue = !todoDoc.data().isChecked;
      transaction.update(docRef, { isChecked: newValue });
     });
      console.log("Transaction successfully committed!");
     } catch (error) {
       console.log("Transaction failed: ", error);
}

The first thing we need to do is import runTransaction from firebase/firestore.
We then checked the database if the particular document being queried exists or not. If it doesn't exist we throw a message that says "Document does not exist!".
If the document exists, we call the transaction.update method and then pass in the value of the isChecked variable which then updates it in the firestore database.

Gif showing runTransaction in action

How to order Data by Timestamp in Firebase

To order the data in our firestore database, the first thing to do is to clear all the current data we currently have by deleting the entire collection on the Firebase Database. This will allow the newly created documents to get ordered correctly.

We then need to import two methods from firebase/firestore called orderBy and query by using the following imports:

import { collection, addDoc, serverTimestamp, getDocs, doc, deleteDoc, runTransaction, orderBy, query } from 'firebase/firestore'

The orderBy method helps to sort the data coming from the database in either ascending, descending, or timestamp in which the data was created. In our case, we will be making use of the latter, while the query method as the name implies allows us to query data from the database.

Next, within the useEffect, we will remove the collectionRef we passed as a parameter into the getDocs method and replace it with a newly created query variable as seen below:

const q = query(collectionRef, orderBy('timestamp'))
          await getDocs(q).then((todo) =>{

Above, we create a variable called q, which uses the orderBy method to sort the data by the in which they were created. We then pass this variable to the getDocs method that gets the data from the Database.

To conclude this project, we will display the date and time on which the todo was created on the browser:

{todos.map(({ todo, id, isChecked, timestamp }) =>

We begin by extracting the timestamp value from the database.

We then need to clear the static date value inside of the italics(<li></li>) tag:

<i>{new Date(timestamp.seconds * 1000).toLocaleString()}</i>

We created a Date object and then get the seconds from the timestamp while multiplying it by 1000. This is because JavaScript works with time in milliseconds. We then proceed to use the toLocaleString() method to return the date object as a string.

With this, we have the result below:

Results showing the todo by timestamp as well as the dates created

Conclusion

You have now completed the tutorial! You now know the basics of how to create a todo application using React and Firebase Database. Now you can proceed to build your own web app from scratch and then integrate additional functionalities like firebase login and sign-in, Firebase tools, firebase deploy, and other firebase services into your React application.

Also, the link to the complete source code of this article can be found on this Github repository.

A First Look at How To Set Up React 18 Alpha with Snowpack and Vercel

deji adesoga — Tue, 20 Jul 2021 08:01:19 +0000

If you prefer watching a video...

Be sure to Subscribe to the Official Code Angle Youtube Channel for more videos.

Talk is cheap. Show me the code

― Linus Torvalds

Introduction
Installation and Setup of React using Snowpack
Folder Restructure
code overview
Running the app
Deployment Process Using Vercel
Conclusion

Introduction

Earlier this month the React Team released some updates concerning the release of React 18. These updates include the following:

Work has begun on the React 18 release, which will be the next major version.
A working group has been created to prepare the community for the gradual adoption of new features.
An Alpha version has already been published for library authors to try and provide valuable feedback.

The purpose of this tutorial is to set up the React 18 Alpha version using SnowPack, a lightning-fast frontend build tool, designed for the modern web. Then we deploy on Vercel.

Installation and Setup of React 18 Alpha using Snowpack

First, you need to have Node.js installed, once that is done then you can now install Snowpack. You can use the command below to install Snowpack.

npm install snowpack

Once that is installed, then you can head to a directory where you want to put your new project.

Now run the following command in your terminal to create a new directory called react-snowpack. This will automatically generate a minimal boilerplate template.

npx create-snowpack-app react-snowpack --template @snowpack/app-template-minimal

You can now head to the new directory with the following command

cd react-snowpack

Once inside this directory, we can finally install the React 18 Alpha version by running the command below.

npm i react@alpha react-dom@alpha

Once this is done, you can check your package.json file to confirm React 18 Alpha has been installed. It should look something like what we have below.

  "dependencies": {
    "react": "^18.0.0-alpha-cb8afda18-20210708",
    "react-dom": "^18.0.0-alpha-cb8afda18-20210708"
  }
}

Folder Restructure

React makes use of a templating language called JSX. JSX stands for JavaScript XML. It is an inline markup that looks like HTML that gets transformed to JavaScript at runtime*.*

The First step towards the folder restructure is to rename the index.js file with a jsx extension like so, index.jsx. Doing this will allow Snowpack to know that we are running a React project.

Next up we create an src and public folder. Once this is done, we move the index.jsx file inside the src folder, still inside the src folder, we will create a new file called app.jsx.

Both the index.html and index.css file will also be moved into the public folder.

In the end, we should have the folder structure below.

> public
  > index.css
  > index.html
> src
  > App.jsx
  > index.jsx
.gitignore
 package-lock.json
 package.json
 snowpack.config.mjs

Code Overview

We are going to have code modification in four files(index.html, App.jsx, index.jsx and snowpack.config.mjs) before we start up the app and deploy it on Vercel.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Starter Snowpack App" />
  <link rel="stylesheet" type="text/css" href="/index.css" />
  <title>Starter Snowpack App</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/dist/index.js"></script>
</body>

</html>

In the index.html code, three things have to be noted:

The id called root which we will refer to in the index.jsx file.
In the script tag, we have a type called module to enable snowpack to know we will be making use of ES6 syntax.
Also in the script tag, we have an src attribute to signify the path of our deployment directory which will be configured in the snowpack.config.mjs file.

App.jsx

import React from "react";

function App() {
  return (
    <div>
      <header>
        <img
          src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1625528354/react.png"
          alt="logo"
        />
        <p>React 18 Alpha Setup Deployed on Vercel with SnowPack</p>
      </header>
    </div>
  );
}
export default App;

Above in the app.jsx file, we generate a simple React boilerplate template using a functional component.

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

In the index.jsx file, we did three things to enable us startup the app.

First, we import React, ReactDOM and the App.jsx file.
Then we created a variable to get the id in the index.html file.
Finally we made use of the new createRoot API in React 18 to render the application.

snowpack.config.mjs

/\*\* @type {import("snowpack").SnowpackUserConfig } \*/
export default {
  mount: {
    /\* ... \*/
    public: '/',
    src: '/dist'
  },
  plugins: \[
    /\* ... \*/
  \],
  routes: \[
    /\* Enable an SPA Fallback in development: \*/
    // {"match": "routes", "src": ".\*", "dest": "/index.html"},
  \],
  optimize: {
    /\* Example: Bundle your final build: \*/
    // "bundle": true,
  },
  packageOptions: {
    /\* ... \*/
  },
  devOptions: {
    /\* ... \*/
  },
  buildOptions: {
    /\* ... \*/
  },
};

Every Snowpack app makes use of the snowpack.config.mjs file for any configurations like the deployment process. In this project, we will only edit the mount object by adding the public and src key.

These serve as a pointer to the path where our deployment folder will be built when we run the build command.

Running the Application

Now with all our files saved, we can head back to our terminal and run the start command npm run start, which will produce the page below in the browser.

Now our React 18 alpha app is successfully up and running.

Deployment Process using Vercel

Vercel enables developers to host websites and web services that deploy instantly and scale automatically all without any configuration.

-Vercel Documentation

The first step to take towards deployment is to run the command below at the root of our project.

npm run build

This will generate a build directory. Inside the build directory is a dist folder that contains the code we will push to Vercel.

Next up we do the following:

1). Install Vercel

To do this we run the command

npm i -g vercel

2). Login into Vercel

After installing Vercel globally on your machine. Type vercel in the terminal. This will prompt you to log into your account if you are not already logged in.

3). Project Setup and Deployment

To summarize the prompt question in the image above, the following questions will be asked:

Set up and deploy — Y (It's a new application).
Which scope do you want to deploy to? - Select the name of your account.
Found project "desoga10/snowpack-react". Link to it? - N (Because we want to deploy as a different project).*
Link to a different existing project? - N (Because we are creating a new project).
What’s your project's name? (react-snoww).
In which directory is your code created? ./build (It's in the build folder we generated with the npm run build command).
Want to override the settings? N(To prevent Vercel from making changes to or default settings ).

Vercel will now build the application, installing all dependencies in the process. When the installation is done, an inspect link will be available in the terminal. With this link, we can access the Vercel dashboard to see our deployed app.

4). Open the Deployed Project

You can now visit the newly deployed project by clicking on the “visit” button on your dashboard shown in the image above.

Conclusion

You can find the deployed code in my GitHub account.

I create Youtube tutorials too, make sure to subscribe, thank you.

Top 10 Date Pickers in React

deji adesoga — Wed, 10 Mar 2021 12:13:05 +0000

Never bend your head. Always hold it high. Look the world straight in the eye.

- Helen Keller

Table of Content

Introduction
10). @ y0c/react-datepicker
9). materialui-daterange-picker
8). React-DateTime-Picker
7). react-date-range
6). react-date-picker
5). react-big-calendar
4). react-datetime
3). react-day-picker
2). @material-ui/pickers
1). React Date Picker
Conclusion

Introduction

A Date Picker is a form of graphical user interface that allows users to select a date from a calendar and/or time from a time range. The common practice in which a date picker is implemented is by providing a text-box field, which when clicked upon to enter a date, displays a pop-up calendar, such that when one of the characters on the calendar is selected, it displays the value inside the text input field.

Some of the advantages of using a date picker include:

Entering dates becomes easier for the user and you can control the format of the data you receive.
Only valid dates can be entered.
Dates are properly formated to avoid confusion.
Date Pickers can help users out by including common holidays, for instance depending on the country chosen and integration of their own calendar.
Making the user enter a date by merely clicking on a date in the pop-up calendar as opposed to having to take their hand off the mouse to type in a date, reducing the chances of error in the process.

In this tutorial, we will take a look at the top ten date pickers in react, using the estimated weekly downloads from the least number to the most on NPM.

10). @ y0c/react-datepicker

This date picker is a flexible, reusable, mobile-friendly DatePicker component for React. Its previous versions rely on moment.js, but now it is changed to Day.js because of bundle size issues.

Brief Overview:

Version

1.0.4

License

MIT

Estimated-Weekly -Downloads

677

Unpacked-size

154kb

Link To Repository

@yoc/react-date picker

Code Demo / Example

In this short tutorial, I'll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i @y0c/react-datepicker

Step 2

app.js

import React from "react";
import { DatePicker, RangeDatePicker } from "@y0c/react-datepicker";
import "@y0c/react-datepicker/assets/styles/calendar.scss";

const YocReactDatePicker = () => {
  const onChangeValue = (date) => {
    const dateValue = date.toDate();
    console.log(dateValue);
  };

  const onChangeRangeValue = (title) => (...date) => console.log(date);

  return (
    <div>
      <h1>YOC DatePicker Example</h1>
      <DatePicker onChange={onChangeValue} />

      <br />
      <br />
      <h1>YOC Date Range Picker Example</h1>
      <RangeDatePicker onChange={onChangeRangeValue("date")} />
    </div>
  );
};

export default YocReactDatePicker;

What we did here was to create a new file. After this, we had to import React, DatePicker, RangeDatePicker as well as the assets for the CSS.

Next, we created a functional component that has two variables. The first one is called onChangeValue which takes in an argument, while the second one is called onChangeRangeValue. These variables allow us to log the data for the date in the console.

Finally in our code, we display the date pickers by calling both the and the that was imported earlier.

Each one has an onChange prop that takes in the variables that we created earlier.

Result

Possible Errors

There is a chance you may get an error that says, ERROR Cannot find module 'node-sass'. All you have to do when you get this error message is to run the command npm install node-sass in your terminal or command line.

9). materialui-daterange-picker

This is a react date range picker that makes use of @material-ui. Material-UI is the most popular React component library, with millions of users worldwide.

Brief Overview:

Version

1.1.92

License

MIT

Estimated-Weekly -Downloads

5,135

Unpacked-size

1.12 MB

Link To Repository

materialui-daterange-picker

Code Demo / Example

In this short tutorial, I'll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i materialui-daterange-picker

Step 2

app.js

import React from "react";
import { DateRangePicker } from "materialui-daterange-picker";

const MaterialUiDateRange = () => {
  const [open, setOpen] = React.useState(true);

  const toggle = () => {
    setOpen(open);
  };


  const setDateRange = (date) => {
    console.log(date.startDate, date.endDate);
    alert(date.startDate, date.endDate);
  };
  return (
    <div>
      <h1>Material UI Date Range</h1>
      <DateRangePicker
        open={open}
        toggle={toggle}
        onChange={(date) => setDateRange(date)}
      />
    </div>
  );
};

export default MaterialUiDateRange;

Here we import React and the DateRangePicker as expected. Then we created a functional component. In this component, we declared a React hook called useState that takes in a variable(open) and a function(setOpen).

We state the useState to true by default because that is how our date picker will get displayed on the page.

Next up, we assigned an anonymous function to a variable called toggle. This makes sure that our date picker is always open no matter the state.

We then create another variable called setDateRange. This variable takes in an anonymous function that logs and alert the value of the date selected. We get the value for both the start date and the end date.

Finally in our return, we assign each props in the <DateRangePicker /> component to each of the variables.

Result

8). React-DateTime-Picker

This is a fast, lightweight and easy to style date picker that only provides support for modern browsers. It is only compatible with 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-DateTime-Picker version.

React version	Newest compatible React-DateTime-Picker version
≥16.3	latest
≥16.0	2.x

Brief Overview:

Version

3.1.0

License

MIT

Estimated-Weekly -Downloads

20,973

Unpacked-size

193 kB

Link To Repository

react-datetime-picker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-datetime-picker

Step 2

app.js

import React, { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

const ReactDateTimePicker = () => {

  const [value, onChange] = useState(new Date());

  const getDateValue = (value) => {
    onChange(value)
    console.log(value)
    alert(value)
  }


  return (
    <div>
      <h2>React Date Time Picker</h2>
      <DateTimePicker
        onChange={getDateValue}
        value={value}
      />
    </div>
  )
}

export default ReactDateTimePicker

From the above, we import React, useState and DateTimePicker, then we created a functional component. Then we declared a React hook called useState that takes in a variable(value) and a function(onChange).

The value takes in the value of the current date which will be displayed by default in the input field.

Next up we created a variable called getDateValue. This variable takes in an anonymous function that enables us to log and alert the value of the selected date. Also, the onChange function is called inside the anonymous function, this makes the date values in the input field change based on the date that was selected.

Lastly, in our return, we pass in the variables to the props inside the component.

Result

7). react-date-range

This is a React Date Picker component for choosing dates and date ranges. It makes use of date-fns for date operations. Some of the qualities of this date picker include:

Stateless date operations
Highly configurable
Multiple range selection
Based on native js dates
Drag n Drop selection
Keyboard friendly

Brief Overview:

Version

1.1.3

License

MIT

Estimated-Weekly -Downloads

63,883

Unpacked-size

1.92 MB

Link To Repository

react-date-range

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-date-range

Step 2

app.js

import React, { useState } from "react";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file
import { Calendar } from "react-date-range";

const ReactDateRange = () => {

  const handleSelect = (date) => {
    console.log(date);
    alert(date);
  };


  return (
    <div>
      <h2>React Date Range</h2>
      <Calendar date={new Date()} onChange={handleSelect} />
    </div>
  );
};

export default ReactDateRange;

The first thing we did was import React, the CSS files for the theme and also the necessary component from react-date-range.

Next, we created a function called handleSelect, that helps log the date values to the console.

Finally, in our return, our first component called we declared some props and assigned some variables to it. The first is the date prop that takes in a new Date value, second is the onChange prop that takes in the handleSelect variable that logs out the date values to the console.

Result

6). react-date-picker

This is a fast, lightweight and easy to style date picker that only provides support for modern browsers. With this date picker you can pick days, months, years, or even decades.

It is only compatible with 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-DateTime-Picker version.

React version	Newest compatible React-Date-Picker version
≥16.3	latest
≥16.0	7.x

Brief Overview:

Version

8.0.7

License

MIT

Estimated-Weekly -Downloads

78,779

Unpacked-size

209 kB

Link To Repository

react-date-picker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-date-picker

Step 2

app.js

import React, { useState } from "react";
import DatePicker from "react-date-picker";

const ReactDatePicker = () => {
  const [value, onChange] = useState(new Date());

  const dateValue = (range) => {
    onChange(range)
    console.log(range);
    alert(value);
  };

  return (
    <div>
      <h2>React Date Picker</h2>
      <DatePicker onChange={dateValue} value={value} />
    </div>
  );
};

export default ReactDatePicker;

From the above, we import React, useState and DatePicker, then we created a functional component. Next, we declared a React hook called useState that takes in a variable(value) and a function(onChange).

The value takes in the result of the current date which will be displayed by default in the input field.

Next up we created a variable called dateValue . This variable takes in an anonymous function that enables us to log and alert the value of the selected date. Also, the onChange function is called inside the anonymous function, this makes the date values in the input field change based on the date that was selected.

Lastly, in our return, we pass in the variables to the props inside the <DatePicker /> component.

Result

5). react-big-calendar

This is an events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-based approach.

react-big-calendar makes use of three options for handling the date formatting and culture localization, depending on your preference of DateTime libraries. You can use either the Moment.js, Globalize.js or date-fns localizers.

Brief Overview:

Version

0.32.0

License

MIT

Estimated-Weekly -Downloads

126,292

Unpacked-size

1.13 MB

Link To Repository

react-date-calendar

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-big-calendar

Step 2

app.js

import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";

const ReactBigCalendar = () => {
  moment.locale("en-GB");
  const localizer = momentLocalizer(moment);

  const myEventsList = [
    {
      start: moment().toDate(),
      end: moment().add(1, "days").toDate(),
      title: "Play Nintendo Switch",
    }
  ];

  return (
    <div>
      <h2>React Big Calendar</h2>
      <Calendar
        localizer={localizer}
        events={myEventsList}
      />
    </div>
  );
};
export default ReactBigCalendar;

From the above, we import React, the necessary dependencies from react-big-calendar, moment.js as well as the needed CSS assets.

Next up we set the structure for moment.js, after which we declare a variable called myEventsList. This variable contains an array of objects that sets a start-date, end-date as well as the title of the event to take place on those days.

Finally, we return our <Calendar /> component which contains the props in which we passed the date and also the list of events.

Results

4). react-datetime

This Date-Picker can be used as a date picker, time picker or both at the same time. It is highly customizable and it even allows to edit date's milliseconds.

Brief Overview:

Version

3.0.4

License

MIT

Estimated-Weekly -Downloads

207,604

Unpacked-size

296 kB

Link To Repository

react-datetime

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-datetime

Step 2

app.js

import React from "react";
import "react-datetime/css/react-datetime.css";
import Datetime from "react-datetime";

const ReactDateTime = () => {
  let setDateTime = (e) => {
    const dateValue = e.toDate();
    console.log(dateValue);
    alert(dateValue)
  };
  return (
    <div>
      <h2>React Date Time</h2>
      <Datetime value={setDateTime} input={false} onChange={setDateTime} />
    </div>
  );
};

export default ReactDateTime;

Here we import React, the CSS assets and Datetime from the react-datetime library.

Inside our functional component, we created a variable called setDateTime. This variable takes in an anonymous function that will display the values of the date both inside the browser console and the alert box.

Finally, in our return, we create our <Datetime /> component and assign the necessary props to it, which makes our date-picker functional.

Results

3). react-day-picker

This is a date-picker that is highly customizable, localizable, with ARIA support, no external dependencies.

Brief Overview:

Version

7.4.8

License

MIT

Estimated-Weekly -Downloads

454,148

Unpacked-size

686 kB

Link To Repository

react-day-picker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-day-picker

Step 2

app.js

import React from "react";

import DayPickerInput from "react-day-picker/DayPickerInput";

import "react-day-picker/lib/style.css";

const ReactDayPicker = () => {

  const onDayChangeInput = (day) => {
    console.log(day);
    alert(day)
  };

  return (
    <div>
      <h3>DayPickerInput</h3>
      <DayPickerInput
        placeholder="DD/MM/YYYY"
        format="DD/MM/YYYY"
        onDayChange={onDayChangeInput}
      />
    </div>
  );
};

export default ReactDayPicker;

From the above code, we import React, the DayPickerInput and the CSS assets.

In our functional component, we created a variable called onDayChangeInput. Inside this variable is an anonymous function that logs the date valued to the console as well as showing an alert box.

Then finally, in our return, we include the props in our <DayPickerInput /> component.

Result

2). @material-ui/pickers

This date-picker is an accessible, customizable, delightful date & time pickers for React. It is one of the most high-quality date-picker out there.

It is based on Material-UI, the world’s most popular React component library.

Brief Overview:

Version

3.2.10

License

MIT

Estimated-Weekly -Downloads

608,421

Unpacked-size

1.49 MB

Link To Repository

material-ui pickers

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i @material-ui/pickers

Step 2

app.js

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

const MaterialUiPickers = () => {
  const [selectedDate, handleDateChange] = useState(new Date());

  const dateChangeValue = (date) => {
    handleDateChange(date);
    const dateValue = date;
    console.log(dateValue);
    alert(dateValue);
  };

  return (
    <div>
      <h2>Material UI Pickers</h2>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          variant="static"
          value={selectedDate}
          onChange={dateChangeValue}
        />
        {/\* <br /> \*/}
        <TimePicker value={selectedDate} onChange={dateChangeValue} />
        <DateTimePicker value={selectedDate} onChange={dateChangeValue} />
      </MuiPickersUtilsProvider>
    </div>
  );
};

export default MaterialUiPickers;

The code above shows how we import the necessary dependencies to run the project.

Then in our functional component, we created a useState hook that has a variable and a function called selectedDate and handleDateChange respectively.

Next, we created a variable called dateChangeValue that holds an anonymous function. Inside this function we do three things:

We call the handleDateChange function from our useSate, this helps us update the change event on the date-picker, shown on the page.
Next up we log and alert the value of the date that is clicked on the date-picker.

Finally. in our return, we have a <DatePicker />,<TimePicker /> and a <DateTimePicker />. Each of these components takes in props like value and onChange that have the appropriate variables assigned to them.

Result

Possible Errors

There is a possibility you run into this error: Module not found: Can't resolve '@date-io/date-fns'

When that happens, you can run the following commands to solve the issue:

$ npm i --save date-fns@next @date-io/date-fns@1.x

1). React Date Picker

This is a simple and reusable Datepicker component made for React. It is one of the most popular packages around the web, with hundreds of thousands of weekly downloads.

This date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English.

Brief Overview:

Version

3.6.0

License

MIT

Estimated-Weekly -Downloads

835,537

Unpacked-size

509 kB

Link To Repository

react-datepicker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-datepicker

Step 2

app.js

import React, {useState} from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

const ReactDatePicker = () => {
  const [startDate, setStartDate] = useState(new Date());

  const getDateValue = (date) => {
    setStartDate(date);
    console.log(date)
    alert(date)
  }
  return (
    <div>
      <h2>React Date Picker</h2>
      <DatePicker
        selected={startDate}
        onChange={getDateValue}
      />
    </div>
  );
};

export default ReactDatePicker;

Above we import all the necessary dependencies. Then in the functional component, we create a useState hook. This hook takes in a variable and a function called startDate and setStartDate respectively.

Next, we create a variable with an anonymous function called getDateValue.

In this variable, the setStartDate function from the useState is updated with the value of the current date as they change on the page. We also log and alert the date values on the console.

Finally in our return, we declare our <DatePicker /> component and assign the necessary props to it.

Result

Conclusion

So that is it for the top Date pickers in React. Date pickers are very popular and important components in the Frontend Development world. It is really great that we have so many Date Pickers out there, and we can easily implement anyone that seems like the right fit for our project.

If you have any difficulties in implementing any of the Date Picker discussed above, feel free to drop your issue in the comment section.

Also if you are looking for an open-source project to contribute to, a lot of the above Date Pickers provide an excellent opportunity for you to do so.

Also, here is the GitHub link to the code examples used in the article.

Subscribe to my Youtube Channel for more tutorials on web development content.

5 Reasons Why Dark Mode Matters

deji adesoga — Wed, 30 Dec 2020 16:20:27 +0000

When it is dark enough, you can see the stars.

― Ralph Waldo Emerson

Introduction
Reasons for Dark Mode
- Visual Attraction
- User Experience
- Eye Strain & Blue Light Removal
- Reduction of Photophobia
- Battery Saver
Factors to Consider When Selecting Dark Mode
Conclusion

Introduction

According to an American survey, children between the ages of 8-12 and 13-18 spend a daily average of 4 hours, 44 minutes and 7 hours, 22 minutes respectively, staring at screens.

The data for these numbers were collected in 2019. For adults, this figure is higher and according to an article on the Washington Post earlier this year, the amount of screen time increased considerably during the quarantine period due to COVID-19

Today, mobile devices take a large percentage of the amount of time people spend staring at screens, this is why there is a need for applications to have a Dark Mode option for its users.

Dark Mode according to Wikipedia, is a color scheme that uses light-coloured text, icons, and graphical user interface elements on a dark background and is often discussed in terms of computer user interface design and web design.

Now, let us look at the 5 reasons why Dark Mode really matters for the end-users of an application!

Reasons For Dark Mode

1). Visual Attraction

Dark Mode when applied in the right manner always looks really appealing to the eye. It provides the opportunity to present a unique user interface to the end-users of an application.

Also, in terms of data presentation for graphical contents like dashboards that contain graphs and charts, Dark Mode brings out the elegance in the design as shown below.

Unlike the drab white look that most applications have, the above image shows how Dark Mode can bring a significantly deeper and more attractive visual perception to an application.

2). User Experience

Providing the users of a product with the option of a Dark Mode is a good business decision, especially if the application requires users to spend lots of time on the application. A streaming site, for example, implementing a dark mode feature is a good business decision.

Streaming a video in light-mode under a dark environment or at night may not be a good experience for the eyes. Hence, applications that require people spending lots of screen time should provide an option for Dark Mode for a better user experience.

Above all, it is worthy to note that context is a key factor in making decisions on whether to implement the option of a Dark Mode.

3). Eye Strain & Blue Light Removal

By default, Dark Mode helps to reduce overall screen brightness. Although no study has outrightly confirmed that Dark Mode reduces eye strain, it can, however, be effective in low-light conditions.

Also, Dark Mode helps to reduce exposure to Blue Light. Blue light is a high-frequency colour in the "visible light spectrum" that can be seen by the human eye.

Blue Light can be found almost everywhere, from smartphones to computers and other digital devices. Another source of Blue Light is the sun, so by stepping out of your house, you are exposed to a certain degree of blue light.

Too many exposures to Blue Light can lead to digital eye strain.

Since not everyone can see well with Dark Mode, some mobile devices provide the option for Blue Light filters. This can be found in the display settings area and can be easily adjusted to the level of blue light exposure you want.

4). Reduction of Photophobia

Photophobia is a symptom of abnormal intolerance to the visual perception of light. The source of this light could be any form of light source including sunlight.

There are so many things that can cause photophobia, some of which includes:

Excessive light entering the eyes
Eye infection
Medications
Meningitis
Lack of eye pigment (Albinism)
Wearing contact lenses for an extended period of time, or wearing it wrongly.
Post Eye Surgery

Photophobia usually disappears once the underlying cause is treated. A good way to deal with photophobia is making use of the Dark Mode of a mobile device or an application. This helps to reduce the amount of bright light that goes directly into the eyes.

An extension you may consider installing on your desktop browser is Night Eye. It is supported by almost all major web browsers. It helps you enable Dark Mode and other features across almost all the websites you view, to help cope with the light sensitivity.

However, if light sensitivity persists, you may want to see your doctor!

5). Battery Saver

Another positive impact of Dark Mode is the impact it has on the battery life of mobile devices. Dark Mode can significantly help reduce the battery drain on devices which use OLED(Organic Light-Emitting Diode) screens.

Numerous studies have confirmed the fact that Dark Mode saves battery life. In an Android Dev Summit in November of 2018, Google also confirmed that themes on android devices have a significant impact on the battery life of a mobile device.

If you are using an Android device, you should consider using Dark Mode, especially at night. Not only is it easy on the eyes, but it also helps save your battery life.

Factors To Consider When Selecting Dark Mode

In as much as Dark Mode seems trendy, it is necessary to consider some factors before deciding to implement it in an application. Some of these factors are discussed below:

Readability and Visibility: Readability simply means the ease at which a reader can easily understand or perceive a written text. Applications that contain lots of text in their interface will have to be careful about how Dark Mode is implemented.

If the Dark Mode is not well implemented, this will lead to a poor user experience with the users struggling to read the texts. This defeats one of the purposes for which Dark Mode is created and could lead to eye strain.

Lots of research must go into how the backgrounds, text colour and font will work together.

Test Before Implementation: Testing helps to discover the strength and weakness of the Color scheme used in an application. Dark Mode does not work well for all applications. A website that contains lots of elements(text, images, tables) may make it difficult for Dark Mode to be implemented.

Other factors to consider include:

Determination of the target audience
Providing an option to switch between Light Mode and Dark Mode
The Environment
Accessibility

Conclusion

The decision to always use Dark Mode should always be a relative one. For users of an application, knowing when to use light mode and Dark Mode at different times of the day is very essential for the eye.

Subscribe to my newsletter here.

A Detailed Breakdown of HTML Form Event Attributes

deji adesoga — Tue, 08 Dec 2020 11:46:28 +0000

Don’t aspire to make a living, aspire to make a difference.

- Denzel Washington

Introduction
HTML Form Events
- onblur
- onchange
- oncontextmenu
- onfocus
- oninput
- oninvalid
- onreset
- onsearch
- onselect
- onsubmit
Conclusion

Introduction

HTML forms allow users on a web page to enter data that will be sent to a server for processing. HTML forms are a powerful way of interacting with a web application. They include various elements called controls like (Text Input, Checkboxes, Radio Box, Select Box, e.t.c).

The HTML forms are enclosed inside a <form></form> element. The <form> element has various attributes, some of which includes the action attribute, the target attribute and the method attribute.

The Action Attribute

The action attribute helps to determine the type of form data that will be sent to the server after the submission of a form.

<form action="/testpage.php">
  <label for="name">name:</label><br>
  <input type="text" id="name" name="name" value="Jane">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

From the above code, the form data is sent to a file called "testpage.php" with the help of the action attribute.

The Target Attribute

This attribute specifies to the browser the particular page to display the response that is received once the form has been submitted.

Also, The Target attribute can have the values below:

<form action="/testpage.php" target="\_blank">

The response is displayed in a new browser window or tab.

<form action="/testpage.php" target="\_self">

The response is displayed in the current window. This is the default value of the Target attribute.

<form action="/testpage.php" target="\_parent">

The response is displayed in the parent frame

<form action="/testpage.php" target="\_top">

The response is displayed in the full body of the window

The Method Attribute

The Method attribute specifies the particular Hypertext Transfer Protocol (HTTP) method to be used when submitting form data.

There are two types of HTTP method attribute that can be used with the element. They include the GET and POST.

The GET Attribute

<form action="/testpage.php" method="get">

The example above uses the GET method when submitting the form data.

The POST Attribute

<form action="/testpage.php" method="post">

The example above uses the POST method when submitting the form data.

Also, one of the most used elements in an HTML form is the <input> tag. The <input> tag can be displayed in so many ways within the HTML form. Some of which includes:

Displays a single-line text input field. It is the default type of the input element.

Shows a radio button (for selecting one of many choices).

Displays a checkbox (for selecting zero or more of many choices).

Shows a submit button (for submitting the form).

Displays a clickable button.

Now that we've covered the basics of the HTML form, let us dive into the various form events.

HTML Form Events

1). onblur Event

The onblur event renders when an object loses its focus. The onblur event is mostly used with form validation, that is, when a user leaves a form field.

SYNTAX in HTML

<element onblur="myFunction">

Example

Here, we will create an input field that displays an alert box once the input field loses focus,

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>
  <h4>HTML Form Events</h4>
  <input type="text" id="myInput" onblur="blurFunction()">

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

Above we have a function called blurFunction() which is declared inside an onblur attribute. Then we have our script tag linked top our JavaScript page, where we will perform the alert operation.

app.js

const inp = document.getElementById("myInput")

function blurFunction() {
const val =  document.getElementById("myInput").value

const blurry = "blurry"

if(val === blurry) {
  alert("My Eyes Are Getting Blurry.")
}
}

In the JavaScript file, we:

Accessed the input field by its id called myInput inside the blurFunction function.
Declared a variable called blurry
Then we created a condition that if the value typed in the form is called blurry, then an alert box should pop up once the input field loses focus.

RESULT

2). onchange Event

The onchange event occurs when the value of an element is changed. It is used in HTML elements such as and .

SYNTAX in HTML

<element onchange="myFunction">

Example

Here, we will create a select element that returns different values on the DOM, based on the change event.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>

  <label>Choose your favorite Football Club:
    <select class="club" name="club" onchange="clubSelect()">
      <option value="">Select One …</option>
      <option value="Newcastle United">Newcastle United</option>
      <option value="Liverpool">Liverpool</option>
      <option value="Barcelona">Barcelona</option>
    </select>
  </label>

  <div class="result"></div>

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

In the HTML page, we have a select element that shows various options with their values. The two important things to take note of here is:

The clubSelect() function in the onchange event attribute.
The div that contains the result class. This is where we will display the value of our event.

app.js

function clubSelect() {
  const result = document.querySelector('.result');
  result.textContent = \`I Support ${event.target.value}\`;
}

Here what we simply did was:

Declare the clubSelect() function created in the HTML page. This gives us access to the change event.
Create a result variable that accessed the .result class.
Assigned the result variable to the textContent method, which helps us to set a given text to the node like so.

RESULT

3). oncontextmenu Event

The oncontextmenu event performs its action when the user right-clicks the mouse on an object on the window. The oncontextmenu event is supported in all browsers.

SYNTAX in HTML

<element oncontextmenu="event">

Example

In this example, we will be displaying an alert box within a div when we right-click, instead of the context menu options.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
</head>
    <body>

    <div oncontextmenu="myAlert()">
      <h3>Right click to see the alert box</h3>
    </div>  
  <script src="app.js"></script>
</body>
</html>

In the HTML file, we have a div that contains the oncontextmenu event attribute. The attribute contains the function called myAlert(), which will be used in the JavaScript file to create the alert box.

app.js

function myAlert() {
  alert("Here is your Alert Box");
}

In the app.js file, we called the myAlert() function and declared an alert box within it when the oncontextmenu is fired within the div.

style.css

div {
  background: chartreuse;
  border: 2px solid black;
  padding: 10px;
}

RESULT

4). onfocus Event

The onfocus event fires when a user sets the focus of the mouse on a particular element on the web page. It is the opposite of the onblur event.

It is mostly used with the <input>, <select>, and <a> HTML elements.

SYNTAX in HTML

<element onfocus="myFunction">

Example

Here we will display an alert box when the input field is in focus.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>

  <h4>HTML Form Events</h4>
  <input value="focus" type="text" id="myInput" onfocus="focusFunction()">

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

In the file above, we:

declared the onfocus event inside an input element.
created a value attribute with the word focus
Then we linked the file to out JavaScript file, where the magic happens.

app.js

function focusFunction() {
  const val =  document.getElementById("myInput").value

  const focus = "focus"

  if(val === focus) {
    alert("Focus is Set.")
  }
  }

In the app.js file we:

Called the focusFunction() function.
Created the val and focus variables. The val variable accessing the input field, while the focus variable holds the word focus.
Then finally, we created a condition that says if the value of the form contains the word "focus" and the input field is in an onfocus event state, an alert box should be displayed.

RESULT

5). oninput Event

The oniput event fires when the value of a text element like the or is changed. Similar to the onchange event, the main difference is that the input event gets triggered immediately when there is a change, whereas the onchange event occurs only when the element has lost focus.

SYNTAX in HTML

<element oninput="myFunction">

Example

Here, we will display the value of the input field on the page as the value gets changed.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>
  <h4>HTML Form Events</h4>
  <input type="text" id="myInput" oninput="myFunction()">
  <div id="demo"></div>

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

Above we:

Created an input tag. Inside which we have an id called "myInput", which we will refer to in the JavaScript file.
We also have the oniput event attribute declared.
As well as a div containing the id called "demo".

app.js

function myFunction() {
  let values = document.getElementById("myInput").value;
  document.getElementById("demo").textContent = \`You wrote: ${values}, which contains ${event.target.value.length} character(s) \`;
}

The app.js file is straight forward. All we did was:

Refer to our myFuction() function from the HTML page.
Declared a variable called values, that accesses the input element.
Then we accessed the div with the id of demo, which is where we will display the text from the input field.
With the help of the textContent method, we can assign the texts to the div tag.

RESULT

6). oninvalid Event

The oninvalid event occurs when a submittable input element is invalid and does not meet certain conditions. In most case, an error message is shown stating why the input submission is not valid.

SYNTAX in HTML

<element oninvalid="myFunction">

Example

Here we display an alert box that shows a message when an empty is submitted in the input field.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>

  <form>
    Username: <input type="text" oninvalid="testValidity()" required>
    <input type="submit" value="Submit">
  </form>  

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

From the HTML file above, we created an input field that is expected to take in a username. Inside the input field, we have a function called testValidity(). This function will be used to display our alert box in the JavaScript file.

app.js

function testValidity() {
  alert('Field Cannot Be Empty')  
}

Here we simply reference the function called testValidity() set inside the oninvalid event attribute in the HTML file. Anytime the form is submitted with an input empty filed, the alert box will display the message "Field Cannot Be Empty".

RESULT

7). onreset Event

The onreset event occurs when a user clicks on a reset button within a form. This set the form back to the predefined state.

SYNTAX in HTML

<element onreset="myFunction">

Example

In this example, we will create an input field that gets cleared once the reset button is clicked. Once this event fires, we will log the time in which the form was clicked on the browser page.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>

  <form id="form" onreset="resetForm()">
    <label>Enter Text: <input type="text"></label>
    <button type="reset">Reset form</button>
  </form>
  <p id="display"></p>

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

Here we:

Created a form tag that takes in an id and an onreset event attribute.
Created an input field that takes in some text.
A reset button that sets the state of the form to empty.
Lastly, we create a p tag that carries an id called* display to show the time the form was reset.

app.js

function resetForm() {
  const display = document.getElementById('display');
  display.textContent = \`Form Got Reset on: ${(new Date())}\`;

}

In the JavaScript file we simply:

Made reference to our resetForm() function.
Accessed the display id from the HTML page.
Next, we append the textContent method to display the current date as at when the rest button is clicked.

RESULT

8). onsearch Event

The onsearch event occurs when a user initiates a search inside an element. The will have a type of "search" for this to get fired.

SYNTAX in HTML

<element onsearch="myFunction">

Example

We will create an input field that allows users to search once the enter button is pressed. The searched value will be shown on the page.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>

    <h2>Write in the Input Field and Press Enter To Search</h2> 
    <input type="search"placeholder="Search" id="searching" onsearch="searchInput()"> 

    <p id="display"></p> 

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

In the index.html file, we:

Created an input element that has an id called searching. We also declared the onsearch event attribute that takes in a function
Lastly, we created a p element that has an id called to display to help show the value of the input field on the page.

app.js

function searchInput() { 
  const search = document.getElementById("searching"); 
  document.getElementById("display").textContent = 
   \`Searching: ${search.value}\` 
}

In the app.js file, we:

Made reference to the function called searchInput() declared in the HTML file.
Accessed the id's in the HTML file.
Lastly, we displayed the value of the input field on the page once the ENTER key is pressed.

RESULT

9). onselect Event

The onselect event only occurs when a particular text has been selected on either the or elements.

SYNTAX in HTML

<element onselect="myFunction">

Example

In this example, we will create an input field. The goal is to display the number of text selected in the input field inside an alert pop box.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>

  <h4>Select Some Text in The Input Field:</h4> 
  <input type="text" value="Happiness is Free" onselect="selected()">
<script src="app.js"></script>
</body>
</html>

In the index.html file above, we:

Created an input field which contains the value "Happiness is Free".
Also, we have our onselect attribute with a function called selected()

app.js

function selected() {
  const highlighted = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
  alert(\`You Selected ${highlighted.length} Words\`);
}

Here we:

Referenced the selected() function from the HTML page.
Created a variable called highlighted. Inside this variable, we get the value of text inside the input field, while getting the index at the beginning and the end of the input field.
Lastly, when the text gets selected, we display an alert box showing the number of words that were selected in the input field.

RESULT

10). onsubmit Event

The onsubmit event gets triggered when a form is submitted on a page, by a user.

SYNTAX in HTML

<element onsubmit="myFunction">

Example

In this example, we will be submitting the values inside a form. We will get a confirmation message from another page.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Events</title>
</head>
<body>

  <form action="./submit.html" onsubmit="myFunction()">
    Enter name: <input type="text">
    <input type="submit" value="Submit">
  </form>

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

In the index.html page, we:

Have a form element with an action that routes to a submit.html page when the form is submitted.
Inside the form, we also have the onsubmit event attribute, which takes in the function called myFunction()
Also, have two input elements. One takes in the name input, while the other is a button that helps us submit the form.

app.js

function myFunction() {
  alert("Your Name is about to be Submitted, Click OK to continue.");
}

In the JavaScript file, we simply called the myFunction() declared in the HTML page, then we created an alert box that displays a message when the form is submitted.

submit.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Submit Page</title>
</head>
<body>

  <h2>Congratulations. Your Name Has Been Submitted To The Database!</h2>
</body>
</html>

The submit.html file is the page that gets displayed when the form is submitted.

RESULT

Conclusion

This article aims to cover the basics of how the HTML form event attribute work.

Also, here is the GitHub link to the code examples used in the article.

Subscribe for more tutorials here.

4 Ways to Create a Modal Popup Box with Html, CSS and Vanilla JavaScript

deji adesoga — Thu, 08 Oct 2020 09:05:08 +0000

Knowing is not enough; We must apply. Willing is not enough; We must do.
― Bruce Lee

Table of Content

Introduction
Sample 1
Sample 2
Sample 3
Sample 4
Conclusion

Introduction

When creating the design of a web page, one of the most important things to be into consideration is user interactivity. A good example of user interactivity is the Modal box.

A modal box mostly appears as a message box in the Browser based on an action performed by a user. The modal box comes in different forms and shapes which includes the Alert box, Flash notification box, Dialog box, Lightbox. Etc.

The unique feature of the modal box is the fact that it disables the main window in the browser but keeps it visible, with the modal window showing as a child window in front of the web page.

Some of the important cases for using a modal in an application include:

Showing warnings for a certain course of action that may be irreversible.
Flash notifications on a new piece of information.
Increase in user interaction and engagement.

Modals have their disadvantages too, in that:

They can interrupt a user workflow.
They immediately demand the attention of the user.
They disable the contents in the background, which could be frustrating in some cases.

Now let us get started with the creation of the modals.

Sample 1

The flow of the tutorial will see us create three files, the index.html, style.css and app.js files, over four samples. Then we give a detailed breakdown of the code in each of these files.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script 
   src="https://kit.fontawesome.com/a71707a89a.js" 
   crossorigin="anonymous">
</script>
<link rel="stylesheet" href="./style.css"/>
<title>Popup Box</title>
</head>
<body>
<div id="popUpOverlay"></div>
<div id="popUpBox">
<div id="box">
<i class="fas fa-check-circle fa-5x"></i>
<h1>Here Goes Your Popup</h1>
<div id="closeModal"></div>
</div>
</div>
<button 
onclick="Alert.render('You look very pretty today.')" 
class="btn">
Show Alert
</button>
<script src="./app.js"></script>
</body>
</html>

In the index markup page above, we have a Font Awesome script within the head tag, which we will be using inside the modal box to display an icon. We also linked the CSS and javascript pages on the index page.

In the body of the index page, we have some important HTML attributes like the id's which will be used later in our javascript file to manipulate the page.

Then lastly in our button tag, we have an onclick event attribute which has an Alert function that gives us the functionality to display the modal message on the page.

style.css

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

.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: pink;
  font-size: 20px;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
}

#popUpBox{
  width: 500px;
  overflow: hidden;
  background: pink;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 10px;
  text-align: center;
  display: none;
}

In the style.css file, we set the box-sizing of our page to border-box. This property allows us to include the padding and border in an element's total width and height.

Then we styled our button with the .btn class. This allows us to position the button that allows us to display the modal at the centre of the page.

Lastly, using the #popUpBox, we can position the modal at the centre of the page.

With the z-index property, we can stack the modal in front of the other elements in the page.

The most important thing to take note of in the style.css file is the fact that we set the initial state of the display property as none. The reason for this will be explained in the app.js file.

app.js

var Alert = new CustomAlert();

function CustomAlert(){
  this.render = function(){
      //Show Modal
      let popUpBox = document.getElementById('popUpBox');
      popUpBox.style.display = "block";
      //Close Modal
      document.getElementById('closeModal')
        .innerHTML ='<button onclick="Alert.ok()">OK</button>';
  }

this.ok = function(){
  document.getElementById('popUpBox').style.display = "none";
  document.getElementById('popUpOverlay').style.display = "none";
}
}

Here, we have a global variable called Alert, which instantiates a function called CustomAlert(). Inside this function, we:

Accessed the #popUpBox (id). With this, we set the display as block which shows the modal when the button tag is clicked. Remember, the initial state was set as none in the CSS file.
Closed the modal by accessing the closeModal (id) in the HTML file. With this we able to set an HTML Button tag, with an onclick event attribute. In there we declared a function called ok().
Finally, referencing the ok() function, we set the CSS properties of the modal to none, when the button gets clicked.

With that, we should have the result below:

Sample 2

We start with the index.html, style.css and app.js files respectively.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
    content="width=device-width, initial-scale=1.0"
>
<script 
src="https://kit.fontawesome.com/a71707a89a.js" crossorigin="anonymous">
</script>
  <link rel="stylesheet" href="./style.css"/>
  <title>Popup Box</title>
</head>
<body>
    <input 
      type="button" 
      value="Test the alert" 
      onclick="alert('...but something went wrong');" 
      class="btn"
      />
<script src="./app.js"></script>
</body>
</html>

From the above, we have the relevant links to our CSS and JavaScript files. Then in the body of the index page, we have an input tag with the type of Button.

We also have an onclick event attribute, with an alert() method containing a text that will be displayed in the modal.

style.css

.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(48, 48, 177);
  font-size: 20px;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
}

#modalContainer {
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:10000;
}

#alertBox {
    position:relative;
    width:500px;
    min-height:100px;
    margin-top:250px;
    border:1px solid #666;
    background-color: pink;
    background-repeat:no-repeat;
    background-position:20px 30px;
}

#alertBox h1 {
    margin:0;
    font:bold 0.9em verdana,arial;
    background-color:white;
    color: black;
    border-bottom:1px solid #000;
    padding:2px 0 2px 5px;
}

#alertBox p {
    font:0.7em verdana,arial;
    height:50px;
    padding-left:5px;
    margin-left:55px;
}

#alertBox #closeBtn {
    display:block;
    position:relative;
    margin:5px auto;
    padding:7px;
    border:0 none;
    width:70px;
    font:0.7em verdana,arial;
    text-transform:uppercase;
    text-align:center;
    color:#FFF;
    background-color:#95b9d8;
    border-radius: 3px;
    text-decoration:none;
}

Here we:

Styled our button with the .btn class that was declared in the index.html file
Then we have modalContainer, alertBox, alertBox h1, alertBox p, alertBox #closeBtn ID's. All these are created in the app.js file. A different approach from how we created the modal in Sample 1

app.js

var titleAlert = "It Pops!!!";
var closeModal = "Ok";

if(document.getElementById) {
    window.alert = function(txt) {
        createCustomAlert(txt);
    }
}

//Function To Create Custom Alert
function createCustomAlert(txt) {
    doc = document;

    if(doc.getElementById("modalContainer")) return;

 //Create Div For Modal Container Body
modalObject = doc.getElementsByTagName("body")[0\].
appendChild(doc.createElement("div"));
    modalObject.id = "modalContainer";
    modalObject.style.height = 
      doc.documentElement.scrollHeight + "px";

   //Create Div For Alert Box Container Body
    alertObj = modalObject.appendChild(doc.createElement("div"));
    alertObj.id = "alertBox";
    if(doc.all && !window.opera) alertObj.style.top = 
     document.documentElement.scrollTop + "px";
    alertObj.style.left = 
    (doc.documentElement.scrollWidth - alertObj.offsetWidth)/2 
     + "px";
    alertObj.style.visiblity="visible";

   //Create Element For Title Alert
    h1 = alertObj.appendChild(doc.createElement("h1"));
  h1.appendChild(doc.createTextNode(titleAlert));

   //Create Tag For Alert Body Content
    msg = alertObj.appendChild(doc.createElement("p"));
    msg.appendChild(doc.createTextNode(txt));
    msg.innerHTML = txt;

     //Create Tag To Close Modal Button
    btn = alertObj.appendChild(doc.createElement("a"));
    btn.id = "closeBtn";
    btn.appendChild(doc.createTextNode(closeModal));
    btn.href = "#";
    btn.focus();
    btn.onclick = function() { removeCustomAlert();return false; }

    alertObj.style.display = "block";

}

   //Function To Remove Custom Alert
function removeCustomAlert() {
document.getElementsByTagName("body")[0].
removeChild(document.getElementById("modalContainer"));
}

Here we break things down into 6 different parts:

First, we set two global variables called closeModal and titleAlert which both hold the text that will be displayed in the modal box.
We declared a createCustomAlert() function. This is where we create the body of our modal, displayed on the page.
Then we created a div inside the body tag, assigned the modalContainer ID to it and then set the height to the scroll height of the page
The div for the body of the alert box was created next. We assigned the alertBox ID to it. We then set the modal to be at the centre of the page, while also setting the style to be visible.
Next, we set the title of the modal box by creating an h1 tag. The titleAlert text variable is then appended to the h1 tag to show the "It Pops!!!" message. We did something similar to the body of the modal, by creating a p tag and assigning a text node to it.
Lastly, we created a function called removeCustomAlert() to close the modal box. We do this by creating an a tag, adding a closeBtn ID to it and creating an onclick event handler that references the function that closes the modal.

With that, we should have the result below:

Sample 3

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script 
src="https://kit.fontawesome.com/a71707a89a.js" crossorigin="anonymous">
</script>
  <link rel="stylesheet" href="style.css"/>
  <title>Pop Up</title>
</head>
<body>

  <a class="btn" onclick="pop()">Show Box</a>
  <div id="box">
    <i class="fas fa-check-circle"></i> 
    <h1>Good Job</h1>
    <a class="close" onclick="pop()">Close Box</a>
  </div>
<script src="app.js"></script>
</body>
</html>

There is also two pop() functions declared in on the page, which we will be referring to in the app.js file.

style.css

.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: pink;
  font-size: 20px;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
}

#box{
  width: 500px;
  overflow: hidden;
  background: pink;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 10px;
  text-align: center;
  display: none;
}

#box span{
  color: hotpink;
  font-size: 40px;
  display: block;
  margin: 20px 0;
}

#box h1{
  color: brown
}

.close{
  font-size: 18px;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  background: rgb(111, 111, 223);
  display: inline-block;
  border-radius: 1px solid #000;
}

The styling above is straight forward. It is worthy to note that we set our #btn ID to a display of none, at the initial stage. We will be toggling the display property in the app.js file.

app.js

var modal = null
 function pop() {
   if(modal === null) {
     document.getElementById("box").style.display = "block";
     modal = true
   } else {
     document.getElementById("box").style.display = "none";
     modal = null
   }
 }

We start by setting a global variable called modal to null. Then we refer to the pop() function from the index.html page, afterwards, we set the conditional state of the modal.

If the modal is null at first and it gets clicked, we set the display to block and the modal variable to true to show the modal, and if the close button is clicked, we then set the display to none and the modal variable to null to remove the modal.

With this, we should have the result below:

Sample 4

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css"/>
  <title>Pop Up</title>
</head>
<body>

  <button class="show btn">Click To See Modal </button>
  <div class="modal">
    <div class="modal-box">
        <span class="close-button">X</span>
        <h1>Hello, my name is modal</h1>
    </div>
</div>

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

Here we will be making use of CSS classes instead of ID'S to manipulate the state of our modal. We have a button tag to sho the modal and a span with the letter "X" to close the modal.

style.css

.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: pink;
  font-size: 20px;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
}


.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
}
.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}
.close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
}

Here we styled our button and our modal. The .modal class has an initial state, whose visibility is hidden. We will toggle this with a javascript function to show the modal.

app.js

let modal = document.querySelector(".modal");
let show = document.querySelector(".show");
let closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

show.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

We are doing three things from the above:

We get access to our HTML classes through the querySelector. The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
Then we created a toggleModal() function that toggles the show-modal class in the CSS.
Then finally, we added event listeners to our functions to toggle the state of the modal based on a certain condition when the button is clicked.

With this, we should have the result below:

Conclusion

So there goes the implementation for our 4 Modals. You can style it however you want and implement it in any project you are working on. I know the design may not be the best, but the goal of the article was more focused on the javascript implementation rather than the design.

The link to the code can be found here on Github.

Subscribe for more tutorials here.

Angular vs React vs Vue - Getting Started

deji adesoga — Fri, 18 Sep 2020 10:28:37 +0000

The only way to learn a new programming language is by writing programs in it.

― Dennis Ritchie

Table of Content

Introduction
History
- Angular
- React
- Vue
Requirements & Installation Process
- Angular
- React
- Vue
Conclusion

Introduction

This article provides a step by step guide on how to install the three most popular javascript framework/library in the world of frontend web development. Many articles explain how this is done, but in this article, I try to break things into a precise and concise manner you can always refer to this anytime you want to install or setup a React, Vue or Angular application

As we all know, Javascript is the heart and soul of frontend web development. To build complex web applications, using vanilla javascript is probably not the right choice as you may end up pulling the hair out of your head.

To make things easier and product development faster, a library like jQuery was introduced in 2006.

Later on, in 2010 Angular js was created by Google. It became the first framework that provided a complete architecture for front-end application development.

Fast forward to today, and we have the big 3 that dominate the world of frontend web development (Angular, React and Vue)

Each of these tools is unique and can perform the same function effectively. One fact that cannot be ignored is that there will always be a debate about which is better among the three, but in this article, our focus is on how to set them up on our machine.

History

Angular

Initially released by Google on 14th September 2016.It is completely different from Angular Js which was created years earlier by the Google team. Angular was created to serve as an alternative to Angular Js which has been placed on long term support until December 31, 2021.

At first release, Angular was initially called "Angular 2". However, this caused a lot of confusion and the name Angular without any suffix was chosen.

Angular is written in Typescript, which is a superset of Javascript. The Angular team are committed to making a major release once every 6 months.

As of today, the latest release is version 10 which was released June 24, 2020.

React.js

Also known as React or React.js. It is an open-source JavaScript library. React was created by Jordan Walke, a software engineer at Facebook.

Initially released on May 29, 2013, it is maintained by Facebook and a community of developers.

React is written in Javascript and it is regarded as the most popular and widely used between Angular and Vue.

The current stable version is 16.13.1, released on March 19, 2020.

Vue.js

Also called Vue is also an open-source JavaScript library just like React. It makes use of the model–view–viewmodel structure.

Created by Evan You, it was released in February of 2014. The creator Evan You worked on Angular Js originally at Google.

Vue Js is written in Javascript. The current stable release is on August 20, 2020.

Requirements & Installation Process

ANGULAR

We are going to install and run the Angular application in 4 easy steps:

Step 1: Download Node.js

To use Angular, the first step is to install Node.js. Node.js is an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

The installation of Node comes along with NPM(Node Package Manager). NPM is the tool we will be using in the terminal to install other 3rd party libraries needed to run an Angular application.

If you don't have Node.js installed on your machine, you can do that here

Step 2: Install The Angular CLI

Once Node.js has been installed on your machine, this stage involves installing the Angular CLI. We can do this by opening the terminal and running the command below:

npm install -g @angular/cli

Once the installation process is complete, you can type ng v in the terminal to confirm if it was successfully installed. That command will display the version of Angular you have running on your machine.

Step 3: Create a New Angular Project

Now that the Angular CLI has been installed, we now have access to the ng command in our terminal.

To create a new project we can run the command below:

ng new my-first-project

ng represents the angular command*, new* represents the fact it's a new project and my-first-project signifies the name of our project.

Once the installation process is complete and the needed dependencies and files downloaded, the next thing to do is to navigate into the project directory. We can do this by running the cd my-first-project command in the terminal*.*

Step 4: Run The Application

To run the application and display it on the browser, we will run another command from the terminal, shown below:

ng serve --open

Once this command has executed successfully, a tab should open in the browser showing the Angular boilerplate template

We just successfully run an Angular application. By default, our application will be running on localhost:4200

Addition

To prepare and bundle our app for production, we can run the ng build --prod command in the terminal. This will minimise and bundle our application making it ready for deployment.

REACT.JS

We will work on two different ways of setting up a React project. The first one will be done using the create-react-app command, and the second one will be set up using Webpack and Babel.

Using The create-react-app Command

This will be done in two(2) easy steps.

Step 1: Install create-react-app

To have access to the create-react-app command, we need to install it on the terminal using npm. The command to that is shown below:

npm i create-react-app

Step 2: Create Project With NPX

We can now create a new project using npx. npx is a package runner tool that comes with npm version 5.2 and above. It allows us to create a new React project from the terminal by running the command below:

    npx create-react-app my-first-app
    cd my-first-app
    npm start

Above we created a new project called my-first-app , we moved into the newly created project directory and started the project with npm.

By default, our project will be running on localhost:3000 in the browser. To prepare and bundle our app for production, we can run the npm run build command in the terminal.

Using Webpack and Babel

This involves a much longer process to run React. It will be done in 7 steps.

Step 1: Create The Project Folder

To install React using this method, we will create a new folder to install all the required dependencies. We can do this with the command below:

C:\\Users\\user> mkdir my-first-react-app
C:\\Users\\user> cd my-first-react-app

Step 2: package.json

To install any dependencies, a package.json file is required to be installed in the project. To do this, we will run the npm init command in our project directory, from the terminal.

C:\\Users\\user\\my-first-react-app> npm init

The above command will require some information like the name, author, description version etc. to be filled in the terminal. A sample of this can be found below:

C:\Users\user\my-first-react-app>npm init
Wrote to C:\my-first-react-app\package.json:

{
   "name": "my-first-react-app",
   "version": "1.0.0",
   "description": "My First React App",
   "main": "index.js",
   "scripts": {
      "test": "echo \\"Error: no test specified\\" && exit 1"
   },
   "keywords": \[\],
   "author": "",
   "license": "ISC"
}

You can skip filling all the data above by adding a -y flag to the npm init command.

npm init \-y

Step 3: Install React and React Dom

So for React to work on our project, we need to install React and React Dom. To do this, we will run the command below:

C:\\Users\\user\\my-first-react-app\> npm install react
C:\\Users\\user\\my-first-react-app\> npm install react-dom

Step 4: Install Webpack and Babel

Let's start with Webpack. Webpack is going to require three things to be installed.

The Webpack CLI, the Webpack Dev Server and Webpack itself. All this can be done with the command below:

C:\\Users\\user\\my-first-react-app\>npm install webpack webpack-dev-server webpack-cli --save

Next up to install is Babel. Some of the Babel dependencies we are going to install include:

babel preset env - This package allows the compiling modern Javascript down to ES5.
babel preset react - This package allows the compiling JSX down to Javascript
babel-loader - This package allows transpiling JavaScript files using Babel and webpack.
babel-core - Gives us access to the Node API.

Now let us install them by running the command below:

C:\\Users\\user\\my-first-react-app\>`npm i @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev`

Babel is now installed!

Step 5: Create All Necessary Files

We need to create the files needed for us to set up and bootstrap the application. These files are going to be created in the root folder (my-first-react-app) of the application. They include:

index.html
App.js
index.js
webpack.config.js

Step 6: Configure Rules, Loaders and Dev Servers

Next step is to open up the files and complete the setup. We start with the index.html file*.*

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First App</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

The important thing to take note of in our index.html file is the div with the id called app.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
            <h1>Hello World</h1>
      );
   }
}
export default App;

This is the part of our code that will be shown in the browser. When we eventually run the application, we should see a Hello world text.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

The App.js is imported into the index.js file, this enables us to render it into the browser.

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(\_\_dirname, 'dist'),
    filename: 'index\_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: \[
      { test: /\\.(js)$/, use: 'babel-loader' },
      { test: /\\.css$/, use: \[ 'style-loader', 'css-loader' \]}
    \]
  },
  mode: process.env.NODE === 'production' ? 'production' : 'development',
  plugins: \[
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  \],
  devServer: {
    historyApiFallback: true
  }
}

From the above code, we set the entry point of the application as index.js. Then the output path is where we will bundle the app for production. This will be done inside the dist folder.

In the mode object, we can either set the app to be bundled for either production or development mode. This will be done in the package.json file

Step 7: Setup package.json File

"scripts": {
    "start": "webpack-dev-server",
    "build-for-windows": "SET NODE\_ENV='development' && webpack"
  },
  "babel": {
    "presets": \[
      "@babel/preset-env",
      "@babel/preset-react"
    \],
    "plugins": \[
      "@babel/plugin-proposal-class-properties",
      "@babel/syntax-dynamic-import"
    \]
  }

On opening the package.json file, you may come across "test" "echo \"Error: no test specified\" && exit 1" inside the scripts object. You should clear it off and post the above code in the scripts object.

In the build-for-windows object, we set up our app to run in development mode. We can change it to production when we are ready to deploy the app.

Now inside the root of our application, we can start our application with the command below, like so:

C:\\Users\\user\\my-first-react-app\>npm start

The app will run on http://localhost:8080 by default. If we go to this address on the browser, we should see Hello World on display.

To generate the bundle needed for deployment, we can run the command below in the terminal.

C:\\Users\\user\\my-first-react-app\>npm run build-for-windows

So that is how React can be created using Babel and Webpack.

VUE.JS

We will be setting up Vue with the Vue CLI. This will be done using yarn in 3 easy steps.

Note: In case you don't have yarn installed on your machine, you can install it with npm by running the npm i yarn command.

Step 1: Install The Vue CLI

We do this by running the command below:

yarn install -g vue-cli

With this, we have installed Vue globally on our machine.

Step 2: Create a New Vue Project

To complete this step we run the command below:

    vue create first-vue-app

This will show the options below in the terminal.

    Vue CLI v4.5.6
    Please pick a preset: (Use arrow keys)
    > default (babel, eslint)
      Manually select features

To keep things at a basic level, we can select the default option.

Step 3: Run Vue App

To run the application, we need to move into the project directory which is first-vue-app with the command below:

    cd first-vue-app
    yarn serve

Now, the project will become accessible at http://localhost:8080/ by default in your browser!

Conclusion

So that is pretty much everything that is needed to set up an Angular, React or Vue application. If you have any issue during the installation process, please feel free to drop a comment, I will be sure to respond to it.

Also, you can subscribe to my newsletter

The A-Z of Web Development

deji adesoga — Mon, 24 Aug 2020 10:18:36 +0000

Give a man a program, frustrate him for a day.

Teach a man to program, frustrate him for a lifetime.

― Muhammad Waseem

Introduction

As we all know, web development is a very vast and wide field. The career path in this field can come in a different way, shape or form.

It is not uncommon to have individuals who want to come into the industry ask, "what path should I start with?"

The different career paths that can be taken in web development includes Mobile App Development, UI/UX Design, Game Development, Software Testing, Database Administration, Systems Analysts, SEO Specialists and a lot more.

The goal of this article is not to discuss the aforelisted professions. The goal, however, is to look at some of the various technical terms which are used in the world of Web Development from A - Z.

AJAX

This stands for Asynchronous Javascript and XML. It first appeared on March 1999.

It is a tool used by web developers to build interactive web applications. AJAX enables developers to send and receive data without refreshing a web page.

AJAX relies on Html and CSS to render a markup, and javascript to get data asynchronously from the server.

Accessibility

This involves the practice of making a website or an application accessible to everyone, especially people with disabilities.

The benefits of making a website accessible to everyone cannot be over-emphasised.

It is important for both the developers and the users of an application.

The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Accessibility can be the difference between a product being seen as high or low quality in the market, and should not be ignored.

API

API stands for Application Programming Interface. It means how different software components should interact with each other.

It is a set of instructions that allows data to shared between different software components, through making requests.

Browser

This is a very familiar term. Simply put, this is a software application that enables users to access data on the internet. Some of the most popular Browsers today include Google Chrome, Mozilla Firefox and the newly updated Microsoft edge.

Each of these browsers is being powered by an engine.

For instance, Google Chrome is powered by V8, Firefox is powered by Spider Monkey.

CSS

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe how the documents of a page, written in a markup language(Html) is being presented. Initially released on December 17, 1996, it is among the essential languages of the open web.

The specifications for CSS are maintained by the World Wide Web (W3C).

CDN

This simply means a Content Delivery Network. It is a network of servers distributed across various geographical locations of the world.

The goal of using a CDN is to have a good user experience in terms of speed and preventing a website from crashing in the event of a high traffic surge.

Lots of websites with huge traffic makes use of a CDN. Daniel Lewin was the inventor of CDN.

CMS

A Content Management System is a software application, that provides a digital solution with the building, managing and modifying of contents on a website. All this can be done without the technical knowledge of writing codes from scratch.

Some of the most popular CMS out there includes WordPress, Drupal, Shopify, Joomla and Magneto.

It is worthy to note that WordPress has the largest market share and powers more than 37.7% of all websites on the internet.

Domain Name

A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet.

Wikipedia

Breaking it down further, a domain name simply means the physical address of a website. According to Verisign, a global provider of Domain name registry services, there was an estimation of 334.6 Million registered domain names across all TLDs at the end of the second quarter of 2016.

Typically, A domain name can only be up to 63 characters (letters, numbers or combination) long plus the 4 characters used to identify the domain extension.

Deployment

Deployment means all the process involved in making software available for use. The Deployment process involves different types of environment, ranging from the local environment to the development environment and then staging environment.

The number of deployment environment needed to be set up in the shipping of a software depends on the structure of a project.

DevOps

Also known as Development (Dev) and Operations (Ops). It is the combination of a set of tools, people and product aimed at delivering software at a faster pace.

DevOps enhances continuous integration to provide a quality product to the end-users.

Some of the DevOps tools used in this process include Docker, Github, Jenkins, Slack. E.t.c.

EcmaScript

ECMAScript is a general-purpose programming language, that can be used to build both client-side and server-side application.

It is standardized by ECMA International, which determines the new features that can be added to the language.

The language is also 100% backwards compatible, which means any code written today will be supported in the future.

FrameWork

A FrameWork is a platform used for developing software applications. It comes with a pre-defined way of building web applications.

The advantage of this is that the development process of an application is streamlined. Software Developers do not need to re-invent the wheel.

Some popular frameworks out there include Angular, Laravel, Django & ASP.net.

Git

Initially released on 7th April 2005. Git is an integral part of the Web Development process.

It is a free and open-source version control system, designed to manage both small and large scale projects.

It helps developers track the changes made when writing a piece of code. In summary, git provides flexibility, security and high performance to developers.

HTTP

HyperText Transfer Protocol is an application-layer protocol used to transmit data between the client-side and the server-side, servers.

The flow involves the Browser sending a request to the server, the request gets processed by the server and the server returns an HTTP response to the Browser.

The first documented version of HTTP was documented in 1991.

IDE

An Integrated Development Environment (IDE) is a software application that combines a variety of tools and features, to enable programmers to write code more efficiently and effectively.

Also, IDEs enhances the productivity of programmers by making available the various utilities required to put together an application, without having to set it up manually.

Some popular IDEs include IntelliJ, Eclipse and Visual Studio.

JSON

Stands for Java*Script Object N*otation. It is a lightweight data-interchange format.

Derived from JavaScript, it has been adopted by many programming languages.

Supported by most modern Browsers, JSON helps to easily transfer data between a server and a Client. JSON is an alternative to XML.

Keyword Optimization

This is mostly about driving traffic to a particular website. It involves the process of utilizing keywords and phrases on a web page, making it easier for people to find that content.

It should be noted a lot of research is needed to know the right keywords to use.

There are premium tools out there which make this process easier, by providing valuable data and statistics.

LAMP

Linux, Apache, MySQL, PHP/Perl/Python is a popular open-source web stack used for web application development and deployment.

Open-source applications like WordPress and Drupal make use of the LAMP stack.

This stack provides the flexibility needed to scale a product to meet its required needs.

Library

Similar to a framework, A Library can be described as a collection of configured data and scripts, with the end goal of automating the process of writing code.

In the case of a framework, where most of the processes are predefined, a Library gives you a high degree of control of how the flow or architecture of the software would be designed.

Examples of Libraries in the world of frontend web development include jQuery, Twitter Bootstrap, Angular JS and React JS.

MVC

MVC stands for Model, View, and Controller. It is a software pattern found is almost all programming languages.

The Model determines how the data is structured, the View represents the user interface, while the Controller handles the request made by the client which is mostly through an HTTP request.

It focuses on the principle of separation of concern, by dividing an application into three components(Model, View, and Controller).

A popular Framework that makes use of MVC's separation of concern principle out of the box is Angular, by generating four separate files for a single component.

MVP

A Minimum Viable Product (MVP) in web development means the version of a new product that can be made available to consumers, to get data that can be used to make informed decisions on a product.

It is the first step to be taken in product development. Taking this approach has a lot of advantages, especially for startups.

It helps to cut cost and minimise risk, in the event where the product fails.

Companies like Facebook, Dropbox, Twitter, Aardvark, started as MVPs.

Node.js

Created by Ryan Dahl and Released on May 27, 2009. It is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a web browser.

Node.js enables developers to write javascript on the server, to enable the creation of dynamic web pages.

It is used by big corporations like Microsoft, Netflix, Uber*,* Medium.

OOP

Object-oriented programming (OOP) is a programming concept that organises software designs as objects.

By adopting the use of objects, OOP has some advantages such as creating software that is readable, reusable, accessible and scalable.

Some programming language that makes use of OOP includes JavaScript, Java, C++, C#, Python, PHP & Ruby.

Plugin

A Plugin is a piece of software component that is added to a program, to give it additional functionalities.

Some of the places where a plugin could be added include a website or a browser.

Plugins are very vital, in the sense that they help to enhance the functionalities, features and performance of a program.

Query

A Query simply means a request made to a database to get some set of data. This can be done through a Structured Query Language*(SQL)**. *

Regular Expression

A Regular Expression also called Regex or Regexp can be said to be a set of strings, used to match a specific pattern.

Regex makes it much easier to perform search operations, especially with a very large dataset.

It is worthy to note that Regexp is not specific to a particular programming language.

REST

REST stands for Representational State Transfer. Roy Fielding defined REST in the year 2000.

REST is an architectural pattern used for designing web services. A web service built on the principles of REST can be called a RestFul web service.

REST supports different types of data format like Plain text, HTML, XML, JSON, etc.

A RestFul web service is built over an HTTP and can make you use of terms such as GET, POST, PUT, PATCH and DELETE to perform its function.

SOAP

SOAP stands for Simple Object Access Protocol was designed in 1998 by Dave Winer. It is an XML-based protocol for accessing web services.

It does not support different data formats such as Plain text, HTML and JSON.

SOAP was created to ensure the easy exchange of data between programs built on different platforms in a secure manner

SSL

SSL stands for Secure Sockets Layer. It is the industry standard for keeping the internet secure from hackers.

It was first developed by Netscape in 1995, to ensure privacy and protect sensitive data transferred between different systems.

One of the ways to know if a website is secured with SSL is when The URL says "https://" and not "http://".

TLS

Transport Layer Security is the successor to SSL. It performs the same function as SSL, with a very slight difference in execution.

TDD

TEST DRIVEN DEVELOPMENT (TDD)is a software development approach that emphasises on the need to write tests before shipping code to production.

The purpose of TDD is to write clean and bug-free code.

TDD typically involves 5 cycles:

Develop and design a test
Run a test and confirm the Test Fails
Write the code to pass the test
Run test to confirm if the test pass
Refactor code and repeat the process.

Text Editor

A Text Editor is a software that Web Developers use to create and develop web applications.

Some Text Editors have simple features, while others have complex functionalities.

The type of text editor to use depends on the application a developer is trying to build.

Most text editor comes with basic features such as copy and paste, search and replace, undo and redo. Etc.

Some popular text editors include Notepad++, Visual Studio Code, Atom and Sublime Text.

UI & UX Design

User Interface (UI) and User Experience(UX) in web development are two separate concepts that are crucial in the design process of a particular product. They work hand-in-hand.

UI focuses on the visual aspect of the design of a product. It is the aspect a user will interact with on a product, such as a video, document, text, images and the likes.

UX, on the other hand, focuses on the overall experience of a user on a website or application. That is, it tries to focus on the emotion of a user towards a product.

The combination of both UI and UX ensures the user of an application gets the best possible experience in terms of functionality, satisfaction and usability, which is the desire of a successful product.

Version Control

Also known as source control is a system that allows users to keep track of changes made in a file, document or any form of information collection source.

Version control is mainly used for tracking changes made to a piece of code.

As the code used to build an application becomes more and more complex, the need for a version control becomes important to bring some degree of sanity.

Version Control can be divided into two major categories, Centralized and Decentralized system.

An example of a popular Version Control system is GIT, which is free and open source.

Web Standards

W3C standards define an Open Web Platform* for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device.*

- www.w3.org/standards

The web has come a long way to where it is today. It has grown in leaps and bounds and has become an integral part of society today.

Due to this massive growth, it is only fitting to have independent bodies that govern the way the web works, to prevent developers from incorrectly doing things.

XSS

XSS also known as Cross-Site Scripting is a web security vulnerability that allows hackers or attackers to infiltrate and inject malicious scripts into a web page.

This is usually done through the Browser through bypassing access controls such as the same-origin policy.

Preventive measures that can be taken against XSS attacks include:

Keeping software updated
Sanitizing of input fields
Using a web firewall application
Adopting both Client-side and Server Side validation
Selectively disabling scripts on the Browser

YAML

YAML is the abbreviated form of “YAML Ain’t Markup Language”. Established on 11th May 2001.

It is a human-friendly data serialization language that works well with other programming languages.

ZIP

ZIP is an archive file format that takes up less storage and can be easily transferred to other devices.

The ZIP file format permits several compression algorithms. It was initially released on February 14, 1989.

Conclusion

So there you have it, this list contains about 40 phrases you are most likely to come across in the world of Web Development.

Feel free to add more to the list in the comment section, for the benefit of learning.

Also, subscribe to my newsletter here.

Forem: deji adesoga

A Summary of the Battery Status API

Explainer

Additional Context

Angular's Evolution: Embracing Change in the Web Development Landscape

Introduction

The Rise and Challenge of Angular

Learning Angular: A Steep Curve

Angular's Transformation: The Angular 16 Era

The Angular Developer Community

Conclusion

Angular Tips: Transforming Observables into Signals for Enhanced Reactivity

Introduction

Understanding Observables and Signals in Angular

The toSignal API: The Hero We All Needed

Implementing Reactive Primitives for Efficient State Management

Integrating Signals into Angular Components

The Benefits of Converting Observables to Signals

Conclusion

How to Fetch Data using the provideHttpClient in Angular

Prerequisites

Table of Contents

How to Install and Create a Standalone App in Angular 16

Generating the Angular service

How to Configure the provideHttpClient

Integrating the JSON Placeholder REST API

Displaying the Data in an HTML Table

Conclusion

Build a To-Do Application with React and Firebase

Table of Contents

Prerequisites

How to Setup the Firebase Project

Creating the Firestore Database

How to Create the React Project

Setting up the Project Structure

How to Integrate Firebase in React

Integrate Bootstrap 5 into React

Designing the User Interface

Adding Data to the Firestore in React

Fetching Data from the Firestore in React

Deleting Data from the Firestore in React

Updating Data in the Firestore in React

How to Integrate the Checkbox Functionality

How to order Data by Timestamp in Firebase

Conclusion

A First Look at How To Set Up React 18 Alpha with Snowpack and Vercel

If you prefer watching a video...

Be sure to Subscribe to the Official Code Angle Youtube Channel for more videos.

Table of Contents

Introduction

Installation and Setup of React 18 Alpha using Snowpack

Folder Restructure

Code Overview

index.html

App.jsx

index.jsx

snowpack.config.mjs

Running the Application

Deployment Process using Vercel

Conclusion

Top 10 Date Pickers in React

Table of Content

Introduction

10). @ y0c/react-datepicker

Brief Overview:

Version

License

Estimated-Weekly -Downloads

Unpacked-size

Link To Repository

Code Demo / Example

Step 1

Step 2

app.js

Result

Possible Errors

9). materialui-daterange-picker

Brief Overview:

Version

License