DEV Community: Emmanuel C. Okolie

How To Build An Interactive Quiz Project Using Vanilla JavaScript

Emmanuel C. Okolie — Mon, 10 Mar 2025 12:23:23 +0000

Introduction

One fun thing about JavaScript is that it can be used to do a lot of mind-blowing things. Now, for educational purposes, I’ve always longed for an Interactive Quiz Project that beginners can easily follow.

So for this Guide, we’ll be looking at how To Build An Interactive Quiz Project.

After following the step-by-step guide in this tutorial, the Interactive Quiz Project will be up and running in your browser interface. Without wasting much of your time, let’s jump into this tutorial.

Prerequisite

To achieve the Interactive Quiz Project, you should be familiar with the following languages:

HTML
CSS
JavaScript

Step-by-Step Process Of Making An Interactive Quiz Session

So, we’re about to dive into the process of making a quiz session for this project! Note. We’ll be using basic arithmetic as our example.

Without further delay, let’s head on.
First, you’ll create a folder. In our case, we’re calling it Quiz_Tutorial Then you’ll create a file inside of this folder and name it index.html Then you’ll open it in your code editor.

so the index.html will contain codes like this

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Quiz Tutorial</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
        <div class="center">
                <div id="quiz"></div>
                <button id="submit">Get Results</button>
                <div id="results"></div>
        </div>

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

</body>
</html>

After doing this, your interface will look something like this 👇

Once you get to this point, you know you’re on the right track. And we need to add some styling to it. To make it presentable, create another file called style.css and add the following codes inside it.

body{
        font-size: 20px;
        font-family: sans-serif;
        color: #333;
}
.center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Adjust as needed */
}

.question{
        font-weight: 600;
}
.answers {
    margin-bottom: 20px;
}
#submit{
        font-family: sans-serif;
        font-size: 20px;
        background-color: #297;
        color: #fff;
        border: 0px;
        border-radius: 3px;
        padding: 20px;
        cursor: pointer;
        margin-bottom: 20px;
}
#submit:hover{
        background-color: #3a8;
}

After doing this, the interface will change to something like this: 👇

If you notice, the aritimatics are not showing, and it wasn’t added in the HTML. Good, that is because we’re fetching the maths questions from our JavaScript. To see how we did that, create another file and name it as main.js and add the codes below

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');


var myQuestions = [
        {
                question: "What is 10/2?",
                answers: {
                        a: '3',
                        b: '5',
                        c: '115'
                },
                correctAnswer: 'b'
        },
        {
                question: "What is 30/3?",
                answers: {
                        a: '3',
                        b: '5',
                        c: '10'
                },
                correctAnswer: 'c'
        }
];


function generateQuiz(questions, quizContainer, resultsContainer, submitButton){

        function showQuestions(questions, quizContainer){
                // code will go here
                // we'll need a place to store the output and the answer choices
                var output = [];
                var answers;

                // for each question...
                for(var i=0; i<questions.length; i++){

                        // first reset the list of answers
                        answers = [];

                        // for each available answer to this question...
                        for(letter in questions[i].answers){

                                // ...add an html radio button
                                answers.push(
                                        '<label>'
                                                + '<input type="radio" name="question'+i+'" value="'+letter+'">'
                                                + letter + ': '
                                                + questions[i].answers[letter]
                                        + '</label>'
                                );
                        }

                        // add this question and its answers to the output
                        output.push(
                                '<div class="question">' + questions[i].question + '</div>'
                                + '<div class="answers">' + answers.join('') + '</div>'
                        );
                }

                // finally combine our output list into one string of html and put it on the page
                quizContainer.innerHTML = output.join('');
        }

        function showResults(questions, quizContainer, resultsContainer){
                // code will go here


                // gather answer containers from our quiz
                var answerContainers = quizContainer.querySelectorAll('.answers');

                // keep track of user's answers
                var userAnswer = '';
                var numCorrect = 0;

                // for each question...
                for(var i=0; i<questions.length; i++){

                        // find selected answer
                        userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;

                        // if answer is correct
                        if(userAnswer===questions[i].correctAnswer){
                                // add to the number of correct answers
                                numCorrect++;

                                // color the answers green
                                answerContainers[i].style.color = 'lightgreen';
                        }
                        // if answer is wrong or blank
                        else{
                                // color the answers red
                                answerContainers[i].style.color = 'red';
                        }
                }

                // show number of correct answers out of total
                resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
        }

        // show the questions
        showQuestions(questions, quizContainer);

        // when user clicks submit, show results
        submitButton.onclick = function(){
                showResults(questions, quizContainer, resultsContainer);
                // on submit, show results
        }
}

generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

The above code makes the math question display and also display the result once you click Get Result. Here’s a GIF that shows your end result: 👇

Conclusion

Building an interactive quiz project using Vanilla JavaScript is an exciting way to enhance your web development skills while creating a dynamic and engaging user experience. By following a step-by-step approach, you can break down the project into manageable tasks, such as structuring the HTML, styling with CSS, and implementing JavaScript functionalities for question handling, answer validation, and score tracking.

Through this process, you gain hands-on experience with JavaScript concepts like event listeners, DOM manipulation, and data handling, which are crucial for interactive web applications. Additionally, you can enhance the quiz by adding features such as timers, progress tracking, and animations to make it more engaging.

With practice and creativity, you can expand your quiz project into a more sophisticated application, integrating APIs or databases for a richer experience. The key takeaway is that Vanilla JavaScript provides a solid foundation for interactive web development, empowering you to build projects that are both functional and user-friendly. Keep experimenting, and you'll continue to improve your skills as a JavaScript developer! 🚀

About The Author

His stacks include ReactJs Laravel PHP JavaScript, and other languages and frameworks.
As a freelancer, he creates websites for clients and writes technical guides to show people how to do what he does.

If given the chance, Emmanuel Okolie would enjoy speaking with you. Please follow him on his website, Github, LinkedIn, and Twitter.

How To Build A YouTube API Connection (Project) Using Vanilla JavaScript

Emmanuel C. Okolie — Mon, 25 Nov 2024 08:39:36 +0000

Introduction

As a developer, you will use API at some point in your web-developing Journey. The use of API is almost an undeniable fact for a developer.

So for the sake of this Guide, we’ll be looking at how the YouTube API Connection can be done. The YouTube Data API retrieves video data and presents it on a webpage when building a YouTube API connection project with vanilla JavaScript. Here is a straightforward, step-by-step setup guide for this project.

Without wasting your precious time! Let's dive into this guide.

Prerequisite

The things you need to achieve building an outstanding YouTube API Connection Project. are as follows:
You must have a basic knowledge of

HTML
CSS
JavaScript(Basic)
Understand API

What Is An API

Application Programming Interfaces, or APIs, are a collection of guidelines and conventions that facilitate communication between various software programs. Imagine it as a bridge that spans two distinct systems, enabling them to communicate or carry out activities without having to comprehend one another's inner workings.

Here’s a breakdown of how an API works and its purpose:
1. The Operation of APIs

An application can send a request to another application through an API, and the other application will reply with the information or action that was requested. To ensure that both programs can understand one another, the format of these requests and answers is standardized.

- Endpoints and URLs: Applications can access particular features or data by using endpoints, also known as URLs, which are usually provided by APIs. For instance, you can search for videos on YouTube using the https://www.googleapis.com/youtube/v3/search endpoint in the YouTube API.

- Data Format: JSON (JavaScript Object Notation) and XML are two typical formats used by APIs to exchange data. These formats organize the data in a way that both programs can understand.

2. The Significance of APIs

Facilitate Interconnectivity: APIs enable them to interact and cooperate Whether two systems are located on the same server or on different continents.
Encapsulate Complexity: Applications can request functionality or data using APIs without having to understand how the other application operates internally. For example, a weather app can simply ask a weather API for the current weather without having to understand how weather data is gathered.
Increase Functionality: APIs enable developers to include features from other platforms or services. For instance, an application may display a map using the Google Maps API rather than creating mapping features from the ground up.

3. Practical Applications of APIs

Social Media: To show social media content or enable sharing straight to Facebook, Instagram, or Twitter, many apps leverage their APIs.
Payment Processing: Online retailers can take payments without managing private financial information by using payment APIs, such as those offered by PayPal or Stripe.
Weather Data: The most recent weather data for any area may be retrieved and displayed by apps and websites using a weather API.

4. Types of APIs

Web APIs: Allow applications to communicate over the internet, often using HTTP requests. Examples include REST APIs and GraphQL.
Library APIs: Allow code libraries within a programming language to interact with each other, like a math library’s API in Python or JavaScript.
Operating System APIs: Allow applications to interact with the underlying operating system, like Windows API or iOS API.

5. REST APIs (Representational State Transfer)
REST APIs are a common type of web API that follow specific architectural principles, making them stateless and standardized. REST APIs operate over HTTP and are designed to work with resources represented as URLs.

Example: Making an API Request to a Weather Service

Imagine you want to know the weather in New York City. You could send an HTTP request to a weather API, like so:

Why is API knowledge necessary?

Understanding APIs (Application Programming Interfaces) is crucial for contemporary software development since they act as a link between various software systems, facilitating smooth functionality and communication. For the following reasons, it is essential to comprehend APIs:

1. Makes Work Easier
Through the use of integration APIs, developers can integrate features without having to start from scratch by allowing various apps or services to communicate with one another. For example:

To show videos on your website, use the YouTube API.
Incorporate payment gateways such as PayPal or Stripe.
Obtain meteorological information from outside sources.

2. Increases Output
Instead of having to start from scratch, the developer can concentrate on creating distinctive features for their apps by utilizing APIs.
For instance:

You can utilize APIs like OAuth or Firebase in place of developing a user authentication mechanism.
Time is saved by APIs that offer readily usable data and features, such as OpenWeather and Google Maps.

3. Facilitates Scalability
Applications can expand by adding functionality thanks to APIs without having to completely redo the system.
For instance:

Create a basic app first, then use the Google Analytics API to add features like user analytics.
Integrate third-party services to improve functionality while maintaining the app's flexibility and modularity.

4. Motivates Interoperability
Communication across different platforms, programming languages, and technologies is standardized by APIs. This guarantees that:

A React-developed front-end can communicate with Python or Node.js built back-end.
APIs allow data to be shared easily across IoT devices, web apps, and mobile apps.

5. Crucial to Contemporary Web Development
To provide dynamic and real-time functionality, the majority of contemporary web and mobile applications mostly rely on APIs:

Social media sharing and analytics APIs (Facebook, Twitter).
Cloud storage APIs for file management (e.g., Dropbox, Google Drive).
APIs for user customization, like Netflix's recommendation API or Spotify's playlist API.

In a nutshell
In today's digital ecosystem, APIs serve as the foundation for connectivity. Knowledge of APIs enables you to integrate, innovate, and grow effectively, making it a crucial ability for developers regardless of the size of the project or application.

Examples Of Scenarios API Can Be Use

Application Programming Interfaces, or APIs, are strong instruments that facilitate data sharing and communication across various software systems.
Here are five significant situations in which APIs can be applied:

1. Social Media Integration Scenario:
Users can sign in on a website or application using their Google, Twitter, or Facebook accounts.
Social media login APIs, such as the Google OAuth and Facebook Graph APIs, were utilized.

Benefits

It makes it easier for users to log in.
With permission from the user, it enables developers to safely retrieve user profile data.

2. Applications of Weather
Situation: Real-time weather data for locations is shown on a travel app.
Weather APIs, such as OpenWeatherMap and WeatherStack, were utilized.

Benefits

Current weather information, such as temperature, humidity, and predictions, is provided.
Location-based weather services are made possible.

3. Gateways for payments
Situation: Consumers can use digital wallets like PayPal or Stripe or credit/debit cards to make payments on an e-commerce site.

Payment APIs, such as PayPal and Stripe, were utilized.
Benefits

Facilitates safe online transaction processing.
Features like fraud detection and recurring payments are supported.

4. Location and Map Services
Situation: A food delivery app watches the delivery driver in real-time and displays the customer's position.
Mapbox and Google Maps are two examples of mapping APIs that are used.

Benefits

Provides real-time tracking, route optimization, and geolocation.
Interactive maps improve the user experience.

5. Platforms for E-Learning
Scenario: A virtual meeting tool for live courses and video conferencing is integrated into an online learning platform.
Video communication APIs, such as the Zoom and Twilio APIs, were utilized.

Benefits

It makes it possible to arrange and schedule live classes with ease.
Offers live chat, transcribing, and recording features.

The Reasons APIs Are Essential
APIs make development easier, improve functionality, and guarantee effective service-to-service communication. Instead of starting from scratch, they enable developers to concentrate on generating distinctive features.

Step By Step Process On Building The YouTube Connection Project

Now this is the part we’ve been waiting for. Let’s Go…

So Note that the YouTube Data API is used to retrieve video data and present it on a webpage when building a YouTube API connection project using vanilla JavaScript. Here is a straightforward, step-by-step setup tutorial for this project.

1. Set Up Your Google API Key

Visit the Google Cloud Console. then you’ll see the interface below, that says welcome! the that will take you to the next step.
Create a new project or select an existing one.
from the image below we created a new project that gave us this view, now you’ll move to the next step.
Go to APIs & Services as shown below, and then it will take you to a page with a diagram that looks like statistics. Make sure you are meticulous about this, cause we're getting there…

On that page, look at the left side of your screen. You’ll see > Library. Click on it, and it will take you to a fresh-looking page, where you can search for any API Library of your choice. See the image below for more explanation.

You will search "YouTube Data API v3" in the search bar as displayed below.

When you click enter for search, you will get the YouTube Data API, this is the API we need which will enable us to make the API connection in our Local Project. The Image Below is an example of what you’ll see after searching…

After the searching, you’ll click on the YouTube Icon and it will bring you here, all you have to do is to Enable the API, by clicking the Enable Button. As shown Below.

After enabling the API you click on the Credentials link it’s usually by the left side of your screen directly under where you have Library.
There, you will see the YouTube API you just Generated. where the arrow in the image is pointing. You then click on SHOW KEY the API key will pop up and you will now copy it and keep it somewhere safe in case of implementing it soon.

But note that API Key 1 has a warning beside it, which means your API is not restricted to only the use of YouTube API, and leaving it like that could be very dangerous, so it needs restriction let’s go...

So to remove the warning sign what we will do is to click on the word API Key. The word is a Link that will take us to a page where we can make some changes, when you get to the new page scroll down you’ll see a section called API Restrictions.

By default it’s in the Don’t restrict key checkbox, you’ll change it and click on the Restrict Key.

As shown Below.

Immediately a dropdown will display and you will click on the YouTube Data API v3 and then click the ok right beneath the dropdown. After that, you’ll now click on the save button below.

Immediately you save, it will take you back to the page you were coming from, but this time with a green verified-looking badge. The moment you follow these steps you are good to go.

The image below is the last step. so from here, it’s to make use of the API key you copied, you’ll need it to authenticate requests.

Basic HTML Structure

Start with a simple HTML structure where you’ll display search results or video information.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YouTube API Project</title>
  <style>
    /* Basic styling */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #search-container {
      margin-top: 20px;
    }
    .video {
      margin: 15px 0;
    }
  </style>
</head>
<body>
  <h1>YouTube Video Search</h1>
  <div id="search-container">
    <input type="text" id="query" placeholder="Search for videos" />
    <button onclick="searchVideos()">Search</button>
  </div>
  <div id="results"></div>

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

3. Make the app.js JavaScript file.
Write the JavaScript code in app.js to communicate with the YouTube API and retrieve video information.

Step-by-Step Code

Establish Your API Key: Specify the YouTube Data API's base URL.
Describe the search. Videos Function: Retrieve videos in response to user queries.
Display Results: Include the video results in the HTML #results div.

Here's how to accomplish it:
Below is the Javascript controlling it. Note: the API_KEY below will be replaced with the copied API_KEY from your YouTube API

// app.js

const API_KEY = 'AIzaSyDGpbbfEO5x89tDGePuCRD8kaev4B26y7Q'; // Replace with your actual API key
const BASE_URL = 'https://www.googleapis.com/youtube/v3/search';

async function searchVideos() {
  const query = document.getElementById('query').value;

  try {
    const response = await fetch(`${BASE_URL}?part=snippet&q=${query}&type=video&key=${API_KEY}`);
    const data = await response.json();

    if (response.ok) {
      displayResults(data.items);
    } else {
      console.error('Error fetching videos:', data.error.message);
    }
  } catch (error) {
    console.error('Network error:', error);
  }
}

function displayResults(videos) {
  const resultsContainer = document.getElementById('results');
  resultsContainer.innerHTML = ''; // Clear previous results

  videos.forEach((video) => {
    const videoElement = document.createElement('div');
    videoElement.classList.add('video');

    videoElement.innerHTML = `
      <h3>${video.snippet.title}</h3>
      <img src="${video.snippet.thumbnails.medium.url}" alt="${video.snippet.title}" />
      <p>${video.snippet.description}</p>
      <a href="https://www.youtube.com/watch?v=${video.id.videoId}" target="_blank">Watch Video</a>
    `;

    resultsContainer.appendChild(videoElement);
  });
}

Key Parts Explained
API Endpoint and Parameters: BASE_URL, the part parameter (snippet for title, description, and thumbnails), and the q parameter for the search query are used to create the URL endpoint.

To obtain just video results, use type=video filters.

Show Results:
You may utilize the snippet.title, snippet.thumbnails, and snippet.description that are included in each video object to fill in the HTML.
Linking to the YouTube video URL is aided by the video.id.videoId.
Managing Errors: Try-catch ensures that API and network errors are detected and recorded.

Execute and Evaluate Your Project

Launch a web browser and open the index.html file.
Click "Search" after entering a search word. The results container will show the results.

Advice for Improvement

To retrieve additional results, use pagination.
While the data is being retrieved, use a loading indication.
Use more filters, such as publication date or relevance sorting.

With just vanilla JavaScript, this configuration offers a simple yet useful YouTube API connection project!

Here’s the result I got.

without searching anything you’ll see this, then you search for anything of your choice. As long as it’s on YouTube you’ll see it.
Below I searched for Nickelodeon, and here’s the result.

After searching, you’ll get the above interface as your result. You can go ahead and find anything you wish. Note that this can be customized to whatever you want in your projects.

Conclusion

An enjoyable method to improve your knowledge of APIs and asynchronous programming is to create a YouTube API connection project with vanilla JavaScript. Following this tutorial, you now know how to:

Use an API key to set up and use the YouTube Data API.
Use' fetch' To handle asynchronous data and make API queries.
Display the retrieved video results by dynamically updating the DOM.
Put error management into practice to guarantee a seamless user experience.

This project shows how powerful JavaScript and APIs are for creating dynamic, data-driven websites. To make the project more aesthetically pleasing and user-friendly, think about incorporating features like pagination, sophisticated search filters, or design improvements as you work on it.

Investigating and implementing these concepts can distinguish your project and strengthen your front-end web development abilities.

But for now, see you next time…

About The Author

Full-stack Laravel developer Emmanuel Okolie has 4+ years of experience in software development. He has developed full-fledged skills by combining software development, writing, and instructing others in what he does.
His stacks include ReactJs Laravel PHP JavaScript, and other languages and frameworks.
As a freelancer, he creates websites for clients and writes technical guides to show people how to do what he does.
If given the chance, Emmanuel Okolie would enjoy speaking with you. Please follow him on his website, Github, LinkedIn, and Twitter.

How To Build A Star Rating Project Using Vanilla JavaScript (For Beginners)

Emmanuel C. Okolie — Wed, 25 Sep 2024 22:34:10 +0000

Introduction

As you use most Applications/Websites there’ll be a time they’ll ask you to rate the App/Site, making this possible they’ll display a set of stars, and then you’ll click to your test according to your satisfaction on the App or website.

This is what we’ll be accomplishing in this tutorial, you’ll be able to use Vanilla Javascript to make star rating possible in the site/app.

Without wasting your precious time! Let's dive into this guide.

Prerequisite

Here are the things you need to know before being able to build the star rating project.

HTML
CSS
JavaScript

Step By Step Approach To Building A Star Rating Project

We will start first by creating a simple HTML page. That will contain the icons of the star itself, this HTML page is the interface that you're able to see.

Below is the code that you’ll write on your index.html page.

In this HTML code snippet page, apart from the document's basic structure, there’s a procedure of span tag that contains the onclick, attribute! and it is named simultaneously, eg! gfg(1), gfg(2), etc… This Span tag also includes HTML entities characters for displaying a star shape with the text content of the span tag.

Below is the view you’ll see after completing the above snippet.

It’s time to style the interface above, the snippet below should be added to your style.css page

Be certain the classes are well-targeted, then you’ll get a new interface like the one below.

Now, the next thing is to make the star icon a rating once you click it. So therefore we’ll make use of a JavaScript Event called **Onclick** this event helps you to interact with the JavaScript.

Name the onclick like this, **onclick="gfg()"** on your HTML page as shown above. Then you go to your JavaScript, call the onclick function gfg(), and write your code like the one you see below. This is the functionality of the star you see.

Note the JavaScript will be an external script meaning, you’ll write it in a separate file just like the **index.html**, **style.css**, and **script.js** then link properly as it’s done in the **index.html** as seen below.

<!-- index.html -->

<!DOCTYPE html>
<html>

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

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

</html>

This link shows that the pages are external.

After applying all these snippets on the tutorial, here’s the Interface you’ll get on your screen, and then you’ll know what you did is correct. The star will change color according to each click!

Conclusion

In conclusion, adding a Star Rating functionality in the site FAQs is a modern web application development. And a Javascript beginner can adapt this technique to his/her development skill

Building a star-rating project using vanilla JavaScript is a great way for beginners to enhance their understanding of core JavaScript concepts while working with real-world projects. Following this tutorial, you learned how to create dynamic and interactive star ratings, which can be incorporated into various web applications.

Through this project, you gained hands-on experience with event listeners, DOM manipulation, and CSS styling to create a seamless user experience. Additionally, you explored how to handle user input by capturing and storing rating data.

This project serves as a foundation to explore more advanced topics in web development, such as data validation, server-side integration, and user feedback systems. As you continue to practice and build more projects, your JavaScript skills will improve, enabling you to take on more complex challenges. Keep experimenting and expanding on this project to make it more robust and adaptable to different applications.

I hope you found this tutorial incredibly valuable! Until next time, goodbye.

About The Author

His stacks include ReactJs Laravel PHP JavaScript, and other languages and frameworks.

As a freelancer, he creates websites for clients and writes technical guides to show people how to do what he does.
If given the chance, Emmanuel Okolie would enjoy speaking with you. Please follow him on his website, Facebook, Github, LinkedIn, and Twitter.

How To Use PHP As A Backend Using React For Frontend

Emmanuel C. Okolie — Tue, 09 Jul 2024 10:30:52 +0000

Introduction

Developing dynamic and interactive web apps is crucial in the dynamic and ever-changing world of web development. The speed and versatility of React, a JavaScript toolkit for creating user interfaces, have led to its great popularity. However, PHP is still a strong option for server-side programming. This tutorial will show you how to easily combine the functionality of a PHP backend and React front-end to utilize their respective strengths fully.

Understanding the Distinct Roles of PHP and React

What Is PHP

The term PHP is an acronym for Hypertext Preprocessor. It is a server-side scripting language that is used for web development. It can be easily embedded with HTML files. HTML codes can also be written in a PHP file.

Merits Of PHP

Below are a few Merits of PHP
Ease of Learning and Use:

PHP is known for its straightforward syntax, which is relatively easy for beginners. This simplicity helps new developers start building web applications quickly.

Wide Adoption and Community Support:

PHP has a large and active community. This means extensive documentation, numerous tutorials, and a wealth of online resources. Community support also translates into a vast pre-written code, frameworks, and plugin library.

Integration Capabilities:

PHP integrates seamlessly with various databases (such as MySQL, PostgreSQL, SQLite), web servers (like Apache and Nginx), and other services. This makes it a versatile choice for web development.

Open Source:

PHP is free to use and distribute. This lowers the cost of development, especially for small businesses and startups.

Cross-Platform Compatibility:

PHP can run on multiple platforms, including Windows, Linux, and macOS. This flexibility ensures that PHP applications can be deployed in diverse environments without compatibility issues.

Demerits Of PHP

Below are a few Demerits of PHP.

Inconsistent Function Naming and Parameter Order:
- One of the common criticisms of PHP is its inconsistent function naming conventions and parameter order. For example, functions may have different naming patterns (str_replace vs. strpos) and parameter orders (array_filter($array, $callback) vs. array_map($callback, $array)). This inconsistency can lead to confusion and errors, especially for new developers.
Historical Security Issues:
- PHP has had a history of security vulnerabilities, partly due to its widespread use and partly due to the way it was designed. While modern PHP has significantly improved in terms of security features, legacy codebases and bad practices from earlier versions can still pose security risks.
Performance Compared to Other Languages:
- While PHP has made great strides in improving performance (especially with PHP 7 and later), it can still be slower compared to some other languages like Node.js or Go for certain tasks. This can be a drawback for applications requiring extremely high performance and low latency.
Weak Typing:
- PHP’s weak typing system, which allows implicit type conversions, can lead to unexpected behavior and bugs that are difficult to track down. For example, comparing a string to a number may yield unexpected results ("123" == 123 is true, but "123" === 123 is false). This can be problematic, especially for large, complex codebases.
Over-Reliance on Older, Procedural Code:
- Many PHP applications and tutorials still use older, procedural programming techniques rather than modern, object-oriented, or functional programming practices. This can lead to less maintainable and harder-to-read code. While modern frameworks encourage better practices, the legacy of procedural code can still be a significant issue.

What Is React

React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library, responsible only for the view layer of the application. It is maintained by Facebook.

Merits Of React Js

Below are a few Merits of React Js.

Component-Based Architecture:
- React follows a component-based architecture, which allows developers to build reusable UI components. This modularity leads to cleaner, more maintainable, and scalable code. Components can be reused across different parts of an application, reducing redundancy and improving development efficiency.
Virtual DOM for Improved Performance:
- React uses a Virtual DOM (Document Object Model) to optimize rendering performance. When the state of an application changes, React updates the Virtual DOM first, which then efficiently updates the actual DOM only where necessary. This minimizes direct manipulation of the DOM, leading to faster and more efficient updates, particularly beneficial for complex applications with frequent UI changes.
Declarative UI:
- React's declarative approach to building UIs makes code more predictable and easier to debug. Developers describe what the UI should look like for a given state, and React takes care of updating the actual UI based on state changes. This simplifies the process of developing interactive user interfaces and makes the code more readable.
Rich Ecosystem and Community Support:
- React has a vast ecosystem with numerous libraries, tools, and extensions that enhance its functionality. The strong community support ensures that developers have access to extensive resources, tutorials, and third-party components. Additionally, the backing of Facebook and contributions from a large number of developers worldwide ensure React remains up-to-date and continuously improving.
Strong Support for JSX:
- React uses JSX (JavaScript XML), a syntax extension that allows HTML to be written within JavaScript. JSX simplifies the process of creating React components and makes the code more readable by visually separating the structure (HTML) from the logic (JavaScript). This tight integration of markup with logic enhances development efficiency and reduces context switching for developers.

Demerits Of React Js

Below are a few Demerits of React Js.

Steep Learning Curve:
- React's flexibility and the wide array of tools and libraries in its ecosystem can make the learning curve steep for beginners. Understanding concepts like JSX, components, state management, and the intricacies of the Virtual DOM can be challenging for new developers.
Boilerplate and Complexity:
- Setting up a React project often involves considerable boilerplate code and configuration. Tools like Create React App simplify the initial setup, but as projects grow, the complexity can increase, requiring additional configuration and understanding of build tools like Webpack and Babel.
Rapidly Changing Environment:
- The React ecosystem evolves quickly, with frequent updates and new tools emerging regularly. Keeping up with the latest best practices, updates, and libraries can be overwhelming for developers. This fast pace of change can also lead to issues with outdated documentation and compatibility between different libraries and versions.
Poor SEO:
- By default, React renders applications on the client side, which can lead to poor SEO performance because search engine crawlers might have difficulty indexing the dynamic content. Although solutions like server-side rendering (SSR) with frameworks like Next.js exist, implementing them adds complexity to the project.
State Management Complexity:
- Managing state in large React applications can become complex. While React's built-in state management works well for small applications, scaling up requires more sophisticated state management solutions like Redux, MobX, or the Context API. These solutions add another layer of complexity and require additional learning and setup.

The Synergy Between PHP and React in Modern Web Applications

The synergy between PHP and React in modern web applications leverages the strengths of both technologies to create robust, dynamic, and scalable applications. Here’s an in-depth look at how these technologies complement each other and the benefits of combining them:

5 Benefits of using PHP with React

Note: the benefits are more than five but here are the listed few!

1. Full-Stack Versatility

Frontend and backend integration:

Seamless Data Handling: React effectively manages the front end, while PHP can handle server-side logic and data exchanges, resulting in a coherent development environment.
API-Driven Development: By supplying data to the React frontend via GraphQL or RESTful endpoints, PHP may function as a potent backend API, allowing for a clear division of responsibilities.

Efficiency of Development:

Parallel Development: Teams working on front-end and back-end projects simultaneously can speed up development and eliminate bottlenecks.
reused Components: Frontend development is more modular and manageable because of React's component-based design, which guarantees that UI elements are reused.

2. Scalability

Managing a Higher Load:

Effective Backend: PHP frameworks like Laravel are designed to manage massive amounts of data and user requests effectively, handling intricate and scalable backend processes.
Frontend Optimisation: Even with intricate and data-intensive apps, React's virtual DOM and effective diffing technique guarantee quick and responsive UI changes.

Architecture of Microservices:

Modular Approach: Different services can scale independently when PHP is included in a microservices architecture. React facilitates scalability by allowing it to use these services as required.
Burden Distribution: The program as a whole can manage more traffic skillfully by dividing the burden between PHP, which handles server-side operations, and React, which handles client-side interactions.

3. Performance

Quick load times:

Server-Side Rendering (SSR): Initial HTML may be pre-rendered by PHP and sent to the client, thereafter React can hydrate it. This method boosts the user experience and speeds up the initial load time.
Asynchronous Data Fetching: By using React, data may be fetched from the PHP backend asynchronously, maintaining a responsive user interface and effective handling of data changes.

Enhanced Communication:

Effective State Management: React's state management features, such as context and hooks, enable better handling of UI state changes, which minimizes the need for pointless re-renders.
Caching and Optimisation: PHP can use server-side caching techniques to speed up the serving of static material and lower database demand, therefore improving performance.

4. Rich User Interfaces

UIs that are interactive and dynamic:

Component-Based design: React's component-based design enables programmers to create complex, interactive user interfaces that are simple to update and expand.
Real-Time Updates: React is capable of handling dynamic content changes and real-time updates with efficiency, making for a smooth and interesting user experience.

Improved User Experience:

Contemporary UI Libraries: React works nicely with contemporary UI libraries and frameworks (such as Material-UI and Ant Design), enabling programmers to design aesthetically pleasing and intuitive user interfaces.
Building responsive and adaptable user interfaces (UIs) that function effectively on a variety of devices and screen sizes is made simple using React.

5. SEO-Friendly

Better Optimisation for Search Engines:

Server-Side Rendering (SSR): Pre-rendering HTML content using PHP before providing it to the client guarantees better search engine indexing and SEO.
Meta Tags and Dynamic material: Using information from the PHP backend, React can dynamically manage and update meta tags, titles, and other SEO-relevant material.

Better Crawlability:

Static Site Generation (SSG): React may produce static pages at build time, improving the application's SEO while retaining PHP for dynamic content, by utilizing solutions like Next.js, which supports both SSR and SSG.
URL Structure: React can handle routing and navigation, making sure that visitors and search engines can explore the site with ease, while PHP can manage clear, SEO-friendly URL structures.

Developers may construct robust, scalable, and performance-optimized online apps with rich user experiences and search engine optimization by integrating PHP with React. Because of their synergy, frontend and backend technologies may be combined to create a strong and adaptable development process.

Creating a PHP and React Development Environment

At this point, we are about to start an actual project using React.js and PHP as the front end.

Prerequisites

There are things you need to know as a developer or things you need to have to be able to make php work as a backend with React. Here is the essential list!

Have Basic Knowledge of PHP
Know your React.Js
Make Sure Node.js accompanied by npm is installed on your machine.
Have PHP installed in your system Apache or Nginx

Step By Step Process On How To Use PHP As a Backend Using React As A Front-end

The step to use PHP as a backend alongside React is quite simple and it’s as follows.

Building The Frontend

Step 1: Open your terminal and run the following command below:

npx create-react-app my-react-app

Note: before running this command, you have to cd into the directory where you want your react folder to be! the way to cd to your desired directory is by adding this command to your terminal

cd Documents

After this, you’ll wait for your React app to be created.

Step 2: Navigate to your project folder:
The project you just created needs to be visited in the terminal

cd my-react-app

Step 3: Start the development server:

npm start

Building the PHP Backend
It's time to construct the PHP backend now that your React application is operational:

Step 1: Create a new folder for your PHP files within your React app directory.
to achieve this, run the following command on your terminal

mkdir php_backend

By running this command you’ll see a folder named php_backend

Step 2: Inside the php-backend folder, create a file named index.php.
Note: you’re free to call it any name, in my case I decided to use the index.php.

Step 3: In the index.php you can start defining your PHP endpoints and logic.
Below is what is written in my php-backend/index.php if you’re a PHP developer you’ll be familiar with this syntax.

<?PHP 
$serverName="localhost";
$userName="root";
$password="";
$databaseName="react_php";
$conn = mysqli_connect($serverName, $userName, $password, $databaseName);

$recText = $_POST['text'];

$query = ("INSERT INTO react_php (texts) VALUES('$recText')");

if (mysqli_query($conn, $query)) {
  echo "Data has been inserted successfully";
}else {
  echo "Error";
}
?>

Now the next thing to do is go to the React Code you created earlier and open the folder in your code editor you’ll see a folder like src/App.js and add this syntax below.

import React, { Component } from 'react';
 // import logo from './logo.svg';
import axios from 'axios'; //Import Axios
import './App.css';

class App extends Component{
state = {
  text : ""
}
handleAdd = async e =>{
 await this.setState({
   text : e.target.value
 }) 
}
handleSubmit = e =>{
 e.preventDefault();
 console.log(this.state.text);
 let formData = new FormData();
 formData.append("text", this.state.text);
 const url = "http://localhost:80/react-backend/"
 axios.post(url,formData)
 .then(res=> console.log(res.data))
 .catch(err=> console.log(err))
}
render(){
  return(
    <div className="App-header">
     <input 
       onChange={this.handleAdd}
       className="form-control" 
       // value={this.state.text}
       type="text" 
       id='text' 
       placeholder='Enter Some Text!'/> 
       <br/>
       <button 
        onClick={this.handleSubmit}
        className="btn btn-success" 
        id='submit'>  Save</button>
    </div>
  );
}

}

export default App;

Note: what allows the PHP to work is the **Axios**. Look at the code snippet below you’ll see how we used it!

In the public folder of your project, you’ll see an index.html file in that file I added a bootstrap cdn as a framework I'm using,

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

So Here’s a little styling.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
   animation: App-logo-spin infinite 20s linear;
  }
}

 .App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }

 .App-link {
   color: #61dafb;
 }

 @keyframes App-logo-spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

After trying all these here’s the view it will give to you.

Her is the database controlling the backend. once you fill in the text and click save the text will display in the database automatically.

hereafter I wrote **Freddie** and I clicked on Browse, in the top right corner of the image displayed below. Once you see this know that you have done the right thing.

That’s the step I used in React and PHP in a single application.

Conclusion

In conclusion, integrating PHP as a backend with React as a frontend offers a robust and versatile solution for modern web application development. As discussed, this combination leverages the strengths of PHP's server-side capabilities and React's dynamic, component-based architecture to create scalable, high-performance applications. PHP efficiently handles server-side logic, database interactions, and API creation, while React ensures a rich, responsive user interface and seamless data handling.

This synergy between PHP and React not only enhances the development process but also results in web applications that are interactive, engaging, and SEO-friendly. Embracing this powerful integration empowers developers to build comprehensive and user-centric web applications with ease and efficiency.

I hope you found this tutorial incredibly valuable! Until next time, goodbye.

About The Author

His stacks include ReactJ, Laravel, PHP, JavaScript, and other languages and frameworks.
As a freelancer, he creates websites for clients and writes technical guides to show people how to do what he does.

If given the chance, Emmanuel Okolie would enjoy speaking with you. Please go to and follow him on his website, Facebook, Github, LinkedIn, and Twitter.

POV: What Is The Weirdest Thing You Know About The Framework LARAVEL

Emmanuel C. Okolie — Fri, 15 Mar 2024 09:08:34 +0000

As we all know, Laravel is one of the most popular PHP frameworks but here’s what I feel, I feel it has lots of Weird abilities as a framework around it!

I want you to share your opinion on why laravel is weird!

Me: What I Find weird is the too many Upgrades, Before you master the use of Version 9, version 10 is out! and now version 11.

So this is what I find Weird. Share your Thoughts!

I Remain [Emmykolic](https://emmykolic.github.io) ****you can always reach out to me! Till next time Bye

How To Use WebRTC With Laravel

Emmanuel C. Okolie — Thu, 01 Feb 2024 23:33:52 +0000

Introduction

Real-time communication has become a basic need in the ever-changing world of web development to create interesting and interactive user experiences. Developers may now create seamless audio, video, and data-sharing applications thanks to WebRTC (Web Real-Time Communication), a potent technology that enables peer-to-peer communication directly within web browsers. The well-liked PHP web application framework Laravel offers a solid framework for developing feature-rich, scalable web applications.

To integrate WebRTC features into Laravel apps, use this instructional series, "How To Use WebRTC With Laravel," as your go-to resource. We will start our quest to comprehend the fundamentals of WebRTC in this first section and set the stage for a smooth integration with Laravel. By the time this series ends, you will have the know-how to add real-time communication functionality to your Laravel applications, making them dynamic and engaging user experiences. Let's explore WebRTC with Laravel together to uncover the possibilities for improved user interaction and teamwork.

Without wasting much of your time, let's dive into this tutorial!

Prerequisites

Before diving into the exciting world of WebRTC integration with Laravel, it's essential to ensure that you have the following prerequisites in place:

Laravel Installed: Verify that Laravel is installed and operational on your development computer. For installation instructions, go to the official Laravel documentation at https://laravel.com/docs.
Composer: Composer is used by Laravel for dependency management. Verify that Composer is installed on your computer. Composer is available for download and installation at https://getcomposer.org/.
Node.js and npm: Frontend development is frequently involved in WebRTC apps, and asset compilation is typically accomplished using Laravel Mix, a webpack wrapper. Make sure npm and Node.js are installed. These are available for download and installation at https://nodejs.org/.
Text Editor or IDE: Install and set up your preferred code editor or integrated development environment (IDE) for Laravel development. Popular options include PHPStorm, Sublime Text, and Visual Studio Code.
Have a Basic Understanding of Laravel: Learn the fundamentals of Laravel, including views, controllers, and routing. Consider watching the introductory lessons on the Laravel documentation if you are unfamiliar with Laravel.
WebRTC Basics: Although it's not required, it will help to have a basic understanding of WebRTC principles like media streams, peer connections, and signaling. For an overview, you can consult the official WebRTC documentation at https://webrtc.org/.
Database Setup(if needed): Ensure that your Laravel application's database setup is configured appropriately, taking into account the requirements of your particular project.

These requirements must be satisfied for you to effectively integrate WebRTC capabilities into your Laravel application and follow the subsequent instructions.

What Is WebRTC

WebRTC, which stands for Web Real-Time Communication, is an open-source project that enables real-time communication directly between web browsers. It provides a set of APIs (Application Programming Interfaces) and communication protocols that allow web applications to establish peer-to-peer connections for various types of media, including audio, video, and data.

Features Of WebRTC
1. Peer Connection: WebRTC eliminates the need for middle servers by enabling direct browser-to-browser communication. A collection of protocols for signaling, negotiating, and creating a secure connection are used to create this peer-to-peer connection.
2. getUserMedia: This API makes it possible for web apps to access a user's microphone and camera, allowing them to record audio and video feeds. It is an essential component in developing real-time audio and video communication applications.
3. RTCPeerConnection: At the heart of WebRTC, this API controls peer-to-peer communication, taking care of things like codec negotiation, security, and data, video, and audio transmission.
4. RTCDataChannel: This API allows peers to communicate any kind of data in real-time. Applications requiring the conveyance of non-media information will find it very helpful.
5. Signaling: Signalling: Before establishing a connection, WebRTC peers must exchange information using a signaling mechanism. Coordinating communication, exchanging session descriptions, and negotiating parameters are under the purview of signaling.
6. STUN and TURN Servers: To overcome network address translation (NAT) problems and create connections even when peers are behind firewalls or routers, WebRTC makes use of STUN (Session Traversal Utilities for NAT) and TURN (Traversal Using Relays across NAT) servers.

A wide range of real-time communication applications, such as online games, audio calls, video conferences, live streaming, and collaboration tools, are frequently built using WebRTC. For developers creating dynamic and captivating online apps, its open architecture, standardized APIs, and broad browser compatibility (supporting Chrome, Firefox, Safari, and Edge) make it a potent and easily obtainable technology.

How To Implement WebRTC In Your Laravel Project

The process of integrating the frontend and backend components required for real-time client communication in a Laravel project is known as WebRTC implementation. This is a detailed how-to for integrating WebRTC into your Laravel project:

1. Set Up a New Laravel Project:
Use Composer to start a new Laravel project if you don't already have one:

composer create-project laravel/laravel your-project-name

Navigate to your project directory:

cd your-project-name

2. Install Necessary Packages:
Use npm to install Laravel Mix and other frontend dependencies:

npm install

3. Set Up a Vue Component for WebRTC:
Create a Vue component to handle the frontend part of your WebRTC implementation. This component will be responsible for capturing media streams, establishing peer connections, and handling real-time communication.

4. Install Simple-Peer Library:
Use npm to install the simple-peer library, which simplifies the WebRTC peer connection process:

npm install simple-peer

5. Create WebRTC Methods in Vue Component:
In your Vue component, create methods to handle WebRTC functionality. This includes capturing audio and video, establishing a peer connection, handling signaling, and managing data channels.

// Example methods in your Vue component
methods: {
  async startWebRTC() {
    // Code to initiate WebRTC
    // Capture audio and video, establish peer connection, etc.
  },

  handleSignalingData(data) {
    // Code to handle signaling data
    // Exchange offer, answer, and ICE candidates
  },

  // Other WebRTC-related methods
}

6. Set Up WebRTC Signaling in Laravel:
Create Laravel routes and controllers to handle WebRTC signaling. This involves setting up endpoints for exchanging offers, answers, and ICE candidate information between clients.

php
// Example routes/web.php
Route::post('/offer', 'WebRTCController@offer');
Route::post('/answer', 'WebRTCController@answer');
Route::post('/ice-candidate', 'WebRTCController@iceCandidate');
php
// Example app/Http/Controllers/WebRTCController.php
class WebRTCController extends Controller {
    public function offer(Request $request) {
        // Handle offer signaling data
    }

    public function answer(Request $request) {
        // Handle answer signaling data
    }

    public function iceCandidate(Request $request) {
        // Handle ICE candidate signaling data
    }
}

Database Setup (Optional):

Establish a database connection and perform any necessary migrations if your application calls for room management or user authentication.

Use HTTPS:

To comply with WebRTC security standards, make sure your application is provided over HTTPS.

Turning on and off servers:

To manage NAT traversal, take into consideration installing STUN and TURN servers. Use servers that are accessible to the public or create your own.

Examining

Make sure you test your WebRTC solution thoroughly in a variety of browsers. For troubleshooting, use resources like the WebRTC internals of Google Chrome.

Record-keeping:

Keep a record of your WebRTC implementation, including information on peer connection management, signaling protocol, and other pertinent aspects.
You should be able to successfully integrate WebRTC and enable real-time communication capabilities in your Laravel project by following these instructions. Hold on to

Things That WebRTC Can Be Used To Achieved

Numerous real-time communication and collaboration functions in online apps may be achieved with the help of WebRTC (online Real-Time Communication), a potent technology. The following are some examples of use cases and tasks that WebRTC may perform:

Video Conferencing: Create apps that enable real-time group collaboration on discussions, virtual meetings, and video conferences among several people.
Voice Calling: Provide people the option to make phone calls straight from their web browsers, without requiring any extra software or plugins.
Creating systems for live-streaming events, seminars, games, and other material with real-time audio and video capabilities is known as live streaming.
File Sharing: Enable users to safely transfer files directly between their browsers by implementing peer-to-peer file-sharing features.
Screen Sharing: To improve collaboration and communication, allow screen sharing for presentations, remote help, and group projects.
Collaborative Tools: Provide real-time collaboration for numerous users by developing collaborative tools like code pairing, interactive whiteboards, and document editing.
Online Education: Provide interactive learning environments, live virtual classrooms, and one-on-one tutoring as features for your online education platforms.
Gaming: Real-time communication tools, such as audio and video chat between participants, can improve multiplayer online gaming experiences.
Customer help: By incorporating live chat, audio, or video help straight into websites or applications, you may enhance your customer support offerings.
Healthcare Applications: Develop telemedicine applications that enable video conversations between patients and medical professionals at a distance.
The Internet of Things (IoT): WebRTC integration allows objects to communicate in real time, facilitating remote monitoring and control.
Social networking: Incorporate capabilities such as live streaming video, video calls, and instantaneous user interactions into social networking platforms.
Virtual Events: Organise online conferences, trade exhibitions, or events where attendees may interact with one another.
Virtual Events: Organise online conferences, trade exhibitions, or events where attendees may communicate with one another via chat, audio, and video.
Webinars and Workshops: Hold interactive webinars and workshops that let attendees and presenters have in-the-moment conversations.
Security Surveillance: Use real-time video surveillance software to keep an eye on and secure real estate or areas.
Real-Time Translation Services: Make real-time translation services available so that users may converse in many languages while using automatic translation tools.

Conclusion

In conclusion, exploring the integration of WebRTC into your Laravel project opens up a world of possibilities for real-time communication and collaboration. As discussed, WebRTC empowers developers to implement features like video conferencing, voice calling, live streaming, collaborative tools, and much more directly within web browsers. The combination of Laravel's robust backend capabilities and WebRTC's versatility on the front end creates a powerful synergy for building interactive and engaging web applications.

We’ll call it a day here, we’ll look at How To Use WebRTC To Build Something!
Read Carefully!!!
Hope you’ve gained tons of value from this tutorial! Till next time bye.

About The Author

If given the chance, Emmanuel Okolie would enjoy speaking with you. Please go to and follow him on his website, Facebook, Github, LinkedIn, and Twitter.

How To Make Car Game Using Vanilla JavaScript (Beginners)

Emmanuel C. Okolie — Sun, 03 Dec 2023 22:35:16 +0000

Introduction

Growing up as a child, I've always wanted to make games. Especially the car game! I love car games, so as a developer I found out that you can be a beginner in Programming with little knowledge of some programming languages and be able to build a simple car game.

In this tutorial, we are going to see the step-by-step way, to make a car game using HTML, CSS, and JavaScript! And we will be precise.

Without wasting Your time, Let's Jump into this Guide!

Prerequisites

The prerequisites for making a car game using vanilla JavaScript are as follows:

HTML & CSS: You need to know this base! cause it’s the view that people see and interact with. so before jumping on the guide, you should the basic programming languages HTML And CSS.
Vanilla JavaScript: Here you need to know how to use plain JavaScript that doesn’t contain OOP.

Note: You should at least be conversant with functions using vanilla Js. Once you've met these requirements, you may go on to proceed and make your car using vanilla JavaScript:

Now you are good to go!

Step By Step On How To Make A Car Game

Step 1: Make An HTML Page
Now The first thing to do is this, have an index.html page.
Note: This is the first page to run when you load it on your browser. so in the index page, you’ll create links using the link tag <link> to link to other pages in the folder such as the style.css page, etc. The remaining code snippet will be the view, it contains classes and ID’s used for easy targeting of the CSS and JavaScript classes. The index.html has the following code snippet below.

  <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>3D Car Drive!</title>
  </head>
  <body onload="done()">
    <div id="scoreDiv">
      <span id="score">0</span>
      <img src="https://image.ibb.co/jRAp0y/coin.png" id="cn">
    </div>
    <div class="gameHome" id="startPage">
      <div id="gameTitle">3D Car Drive!</div>
      <button onclick="ld()" id="playBtn">
          <span style="font-size:18px">Loading Assets<br>Please Wait...<br>This may take a few seconds for first time</span>
      </button><br>
      <div id="ldc"><div id="loading"></div></div>
      <p>Rotate your phone & tilt left/right or tap left/right side of screen to move the car<br>Use left/right arrow key on your PC</p>
    </div>

    <div id="mainContainer" style="background:#0f0" >
        <img id="city" src="https://image.ibb.co/jCGU0y/cty.jpg">
        <canvas id="myCanvas" style="/*background:#9de732*/" ></canvas>
    </div>
    <img class="aImg" id="t1" src="https://image.ibb.co/dZi5Ly/t1.png">
    <img class="aImg" id="t2" src="https://image.ibb.co/jajjDJ/t2.png">
    <img class="aImg" id="t3" src="https://image.ibb.co/it4jDJ/t5.png">
    <img class="aImg" id="t4" src="https://image.ibb.co/ksy0nd/t4.png">
    <img class="aImg" id="c1" src="https://image.ibb.co/f4v7YJ/c2.png">


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

  </body>
</html>

After Running the HTML snippet what you’ll see in the view after refreshing your web browser would look like this!

So without wasting time the next thing is to write the CSS code for the HTML. After writing the CSS code, the above view won’t be seen until you’ve added the JavaScript!

Step 2: Make A CSS Page
Secondly, what you should do is create a page and call it style.css what this page does it’s responsible for the beautification of our Car Game. and it is the page that holds the ID’s and classes in the index.html, then it’s targeted in the style.css.
Below is the code snippet for the style.css

body{
    margin:0;
    height:100vh;
    width:100vw;
}

#mainContainer {
    position:absolute;
    top:0;
    left:0;
    transform-origin:0% 0%;
    width:100%;
    transform:  translateX(0px) rotate(0deg);
    overflow: hidden;
}

#city {
    position:absolute;
    top:0;
    left:0;
    height:30vw;
    width:100%;
    z-index:-1;
    display: block;
}

#myCanvas {
    background:transparent;
    z-index: 100;
}

.aImg {
    display:none;
}

#mainContainer {
    display:none;
}

#scoreDiv {
    position:absolute;
    right:0;
    background:transparent;
    display:inline-block;
    border:3px solid red;
    padding:3px 50px 3px 10px;
    border-radius:20px;
    font-weight:700;
    font-size:24px;
    height:30px;
    margin:10px;
    z-index:1000;
    transform-origin:100% 0%;
}

#cn {
    height:52px;
    width:52px;
    background:red;
    position:absolute;
    right:-8px;
    top:-8px;
    border-radius:50%;
}

.gameHome {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    height:100vh;
    width:100vw;
    transform-origin:0% 0%;
    text-align:center;
}

#gameTitle {
    text-align:center;
    font-family:cursive;
    font-size:35px;
    margin-top:50px;
    font-weight:800;
}

#playBtn {
    font-size:20px;
    display:inline-block;
    background:#1642ea;
    color:#fff;
    padding:3px 25px;
    margin-top: 100px;
    border:none;
    border-radius:10px;
    box-shadow:3px 4px #000;
    outline:none;
}

#gameConf {
    width:50%;
    height:100%;
    background:red;
}

#gameDifficulty {
    width:100%;
    height:50%;
    background:blue;
    padding:0;
    margin:0;
}

.diffOpt {
    background:green
    font-family:cursive;
    font-size:20px;
    text-align:center;
}

#loading {
    height:60px;
    width:60px;
    background:transparent;
    display:inline-block;
    border:10px solid transparent;
    border-bottom-color:red;
    border-left-color:red;
    border-radius:50%;
    animation:ld 1s linear infinite;
}

After running the CSS code Snippet below is the View you’ll see.

The reason for this view is that CSS works hand-in-hand with JavaScript. In this case, no matter how you click on that button it won’t respond because there’s no JavaScript yet.

Step 3: Make A JavaScript Page
Lastly, create a page and name it script.js script.js will contain a lot of JavaScript that will work with the ID’s and classes as well! This Javascript plays a vital role in the accomplishment of this car game. Below is the JavaScript code snippet.

(function(){
    "use strict"
    var hw = window.innerWidth || 360;
    var hh = window.innerHeight || 560;
    var gameHome = document.getElementById("startPage");
    var scoreDiv = document.getElementById("scoreDiv");
    if(hh > hw){
        gameHome.style.height = hw+"px";
        gameHome.style.width = hh+"px";
        gameHome.style.transform = "translateX("+hw+"px) rotate(90deg)";
        scoreDiv.style.bottom = 0;
        scoreDiv.style.transform = "rotate(90deg) translateX(40px)";
    }
})();

var ld;
var loaded = false;

function done(){
    document.getElementById("ldc").innerHTML="";
    document.getElementById("ldc").style.display = "none";
    document.getElementById("playBtn").innerHTML = "PLAY";
    loaded = true;
}

(function(){
    var w = window.innerWidth || 360;
    var h = window.innerHeight || 560;

    if(h > w){
        var nh = h;
        h = w;
        w = nh;
        document.getElementById("mainContainer").style.transform = "translateX("+(h)+"px) rotate(90deg)";
    }
    document.getElementById("mainContainer").style.width = w+"px";
    document.getElementById("mainContainer").style.height = h+"px";

    document.getElementById("city").style.height = h*.3+"px";
    document.getElementById("city").style.width = w+"px";

    var c = document.getElementById("myCanvas");
    c.height = h;
    c.width = w;

    var ctx = c.getContext("2d");

function loadGame(){
    "use strict";

    var roadWidth = 5*w/36;
    var roadTop = h-h*0.7;
    var roadLeft = (w-roadWidth)/2;
    var roadConstant = roadLeft/(h-roadTop);
    var score = 0;
    var scoreC = document.getElementById("score");
    function updateScore(ds){
        score+=ds;
        scoreC.textContent = score;
    }
    updateScore(0);

    var rso = [];
    var ratio = 0.8;
    var totalRso = 20;
    var maxHF = h*(1-ratio)/(2.25*(1-Math.pow(ratio,totalRso)));
    var maxH = maxHF;
    var totalHeight = 0.7*h;
    var minWidth = 1;
    var maxWidth = 26;
    var dif = maxWidth - minWidth;
    var changedHeight = totalHeight-maxH*ratio;
    var cnst1 = Math.pow(ratio,totalRso)/(1-ratio);
    var stp = h-totalHeight;
    var tMaxH = h*20/36;
    var treeCnst = tMaxH/roadLeft;

    var gameDifficulty = 100;



    function TreeBuilder(src,src2,start,left){
        this.src = treeSrc[src];
        this.src2 = treeSrc[src2];
        this.y = start;
        this.x = 0;
        this.h = 0;
        this.w = 0;
        this.dy = 0.01;
        this.r = 1.009;
        this.left = left;
    }

    TreeBuilder.prototype.draw = function(){
        this.y += this.dy;
        this.dy *= this.r;
        this.x = (h-this.y)*roadConstant - this.w - this.w*this.left;
        this.h = (roadLeft-this.x-this.w*this.left)*treeCnst;
        this.w = this.h*2/3;

        ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
        ctx.drawImage(this.src2,w-this.x-this.w,this.y-this.h,this.w,this.h);

        if(this.y >= h){
            this.y = stp;
            this.h = 0;
            this.w = 0;
            this.left = Math.random()*3;
            this.dy = 0.5;
        }
    }

    function _i(x){
        return document.getElementById(x);
    }
    var treeSrc = [_i("t1"),_i("t2"),_i("t3"),_i("t4")];

    var trees = [];
    for(var n = 0; n < ((h*0.7)/50-2); n++){
        trees.push(new TreeBuilder(Math.floor(Math.random()*4),Math.floor(Math.random()*4),stp+n*50,2));
    }


    var carWCnst = roadLeft*2/totalHeight;
    var carW = (w > 560) ? 120 : 90;
    var carH = carW*2/3;

    function CarBuilder(src,start,lane){
        this.src = carSrc[src];
        this.y = start;
        this.x = 0;
        this.h = 0;
        this.w = 0;
        this.dy = 0.5;
        this.lane = lane;
    }

    CarBuilder.prototype.draw = function(){
        this.dy *= 1.01;
        this.y += this.dy;
        this.x = (carWCnst/2)*(h-this.y)+(w-(carWCnst*(h-this.y)))*this.lane/8;
        this.w = carW-carW*carWCnst*(h-this.y)/w;
        this.h = 1.7*this.w/3;

        ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
        if(this.y >= h-20){
            if(Math.abs(this.x-cx) <= carH && Math.abs(this.y-h+carH) <= carH){
                clearInterval(intv);
                setTimeout(function(){
                    document.getElementById("mainContainer").style.display = "none";
                    document.getElementById("startPage").style.display = "block";
                },1000);
            }
        }
        if(this.y >= h+100){
            this.y = stp;
            this.h = 0;
            this.w = 0;
            this.left = Math.random()*3;
            this.dy = 0.5;
            this.lane = 1+Math.random()*5;
        }
    }

    var carSrc = [_i("c1"),_i("c1"),_i("c1")];

    var cars = [];
    for(var n = 0; n < ((h*0.7+100)/gameDifficulty); n++){
        cars.push(new CarBuilder(Math.floor(Math.random()*3),stp+n*gameDifficulty,1));
    }

    //Coin.....
    var coinW = (w > 560) ? 75 : 60;
    function CoinBuilder(start,lane){
        this.src = coinSrc;
        this.y = start;
        this.x = 0;
        this.h = 0;
        this.w = 0;
        this.dy = 0.5;
        this.lane = lane;
    }

    CoinBuilder.prototype.draw = function(){
        this.dy *= 1.01;
        this.y += this.dy;
        this.x = (carWCnst/2)*(h-this.y)+(w-(carWCnst*(h-this.y)))*this.lane/8;
        this.w = coinW-coinW*carWCnst*(h-this.y)/w;
        this.h = this.w;

        ctx.drawImage(this.src,this.x,this.y-this.h,this.w,this.h);
        if(this.y >= h-20){
            if(Math.abs(this.x-cx) <= coinW && Math.abs(this.y-h+coinW) <= coinW){
                this.y = stp;
                this.h = 0;
                this.w = 0;
                this.left = Math.random()*3;
                this.dy = 0.5;
                this.lane = Math.floor(1+Math.random()*5);
                updateScore(1);
            }
        }
        if(this.y >= h+100){
            this.y = stp;
            this.h = 0;
            this.w = 0;
            this.left = Math.random()*3;
            this.dy = 0.5;
            this.lane = Math.floor(1+Math.random()*5);
        }
    }

    var coinSrc = _i("cn");

    var coins = [];
    for(var n = 0; n < ((h*0.7+100)/(gameDifficulty-50)); n++){
        coins.push(new CoinBuilder(stp+n*(gameDifficulty-50),6));
    }



    //End Coin...



    function rectPoints(n,ho){
        n = totalRso-n-1;
        var y1 = stp+maxH*cnst1*(Math.pow(1/ratio,n)-1);
        var x1 = roadLeft-roadConstant*(y1-stp);
        var y2 = y1;
        var x2 = x1 + minWidth+(y1-stp)*dif/totalHeight;
        var y3 = y1 + maxH*cnst1*(Math.pow(1/ratio,n+1)-1);
        var x3 = roadLeft-roadConstant*(y3-stp);
        var y4 = y3;
        var x4 = x3 + minWidth+(y3-stp)*dif/totalHeight;

        return [x1,y1,x2,y2,x4,y4,x3,y3];
    }


    for(var n = 0; n < totalRso; n++){
        rso.push(rectPoints(n,h));
        rso\[n\][8] = (n%2==0) ? "#000" : "#fff";
    }

    function draw(){
        ctx.beginPath();
        ctx.moveTo((w-roadWidth)/2,stp);
        ctx.lineTo((w-roadWidth)/2+roadWidth,stp);
        ctx.lineTo(w,h);
        ctx.lineTo(0,h);
        ctx.fillStyle="#555";
        ctx.fill();
        ctx.closePath();
        for(var n = 0; n < totalRso; n++){
            ctx.beginPath();
            ctx.moveTo(rso\[n\][0],rso\[n\][1]);
            ctx.lineTo(rso\[n\][2],rso\[n\][3]);
            ctx.lineTo(rso\[n\][4],rso\[n\][5]);
            ctx.lineTo(rso\[n\][6],rso\[n\][7]);
            ctx.lineTo(rso\[n\][0],rso\[n\][1]);
            ctx.lineWidth = 2;
            ctx.fillStyle = rso\[n\][8];//"rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
            ctx.fill();
            ctx.closePath();

            ctx.beginPath();
            ctx.moveTo(w-rso\[n\][0],rso\[n\][1]);
            ctx.lineTo(w-rso\[n\][2],rso\[n\][3]);
            ctx.lineTo(w-rso\[n\][4],rso\[n\][5]);
            ctx.lineTo(w-rso\[n\][6],rso\[n\][7]);
            ctx.lineTo(w-rso\[n\][0],rso\[n\][1]);
            ctx.lineWidth = 2;
            ctx.fillStyle = rso\[n\][8];//"rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
            ctx.fill();
            ctx.closePath();


        }

    }

    var cx = (w-carW)/2;
    var cl = false, cr = false;
    var car = _i("c1");
    var ms = 3*w/560;
    function drawCar(){
        if(cl) if(cx+carW+50 < w) cx+=ms;
        if(cr) if(cx-50 > 0) cx-=ms;
        ctx.drawImage(car,cx,h-carH,carW,carH);
    }


    var m = 0;
    var intv = setInterval(function(){
        try{
        ctx.clearRect(0,0,w,h);
        maxH+=0.5;
        changedHeight = maxH*cnst1*(Math.pow(1/ratio,totalRso-1)-1);//maxH*(1-Math.pow(ratio,totalRso-5))/(1-ratio);
        if(changedHeight >= totalHeight){
            maxH = maxHF;
            m++;
        }
        for(var n = 0; n < totalRso; n++){
            rso[n]=rectPoints(n,h-totalHeight+changedHeight);
            if(m%2==0) rso\[n\][8] = (n%2==0) ? "#000" : "#fff";
            else rso\[n\][8] = (n%2==1) ? "#000" : "#fff";
        }
        draw();
        for(var n = 0; n < trees.length; n++){
            trees[n].draw();
        }

        for(var n = 0; n < coins.length; n++){
            coins[n].draw();
        }

        for(var n = 0; n < cars.length; n++){
            cars[n].draw();
        }


        drawCar();
        }catch(err){

        }

    },10)
    //draw();

    //Game Control

    //Touch
    function getTouch(e){
        e.preventDefault();
        var to = e.changedTouches[0];
        var ty = parseInt(to.clientY);
        if(ty>(h/2)){
            cl = true;
        }
        else{
            cr = true;
        }
    }
    function getTouchEnd(){
        cl = false;
        cr = false;
    }

    c.removeEventListener("touchstart",getTouch);
    c.removeEventListener("touchend",getTouchEnd);
    c.addEventListener("touchstart",getTouch);
    c.addEventListener("touchend",getTouchEnd);
    //Key..
    function getKey(e){
        e.preventDefault();
        var ty = e.keyCode;
        if(ty===39){
            cr = false;
            cl = true;
        }
        else if(ty===37){
            cl = false;
            cr = true;
        }
    }
    function getKeyEnd(e){
        var ty = e.keyCode;
        if(ty === 39) cl = false;
        else if(ty === 37) cr = false;
    }

    document.body.removeEventListener("keydown",getKey);
    document.body.removeEventListener("keyup",getKeyEnd);
    document.body.addEventListener("keydown",getKey);
    document.body.addEventListener("keyup",getKeyEnd);
    //Accelarometre

    function driveCar(e){
        var y = e.accelerationIncludingGravity.y;

        if(y > 0){
            if(cx+carW+50 < w) cx += y*ms;
        }
        else{
            if(cx-50 > 0) cx += y*ms;
        }
    }

    if(window.DeviceMotionEvent){
        window.removeEventListener("devicemotion",driveCar)
           window.addEventListener("devicemotion",driveCar,false)
    }
    //End
}
ld = function(){
    if(loaded){
        document.getElementById("startPage").style.display = "none";
        document.getElementById("mainContainer").style.display = "block";
        loadGame();
    }
}
})();

Below is the view you'll see immediately after you apply the JavaScript Snippet above. But the difference between this view and the previous one is that the button is now clickable.

So After implementing this code correctly Below is what you’ll see on your screen.

Conclusion

Wow, we have come to the end of this Guide. Hope you’ve gained a measure of value from it. Briefly, we have seen the step-by-step way, to build a car game.

Note: the entire JavaScript code is called vanilla JavaScript cause I didn’t use any Library or Framework to write any line!

Please follow me on my various social media platforms, and feel free to send me an email when necessary!

Without wasting much of your time till next time, bye.

About The Author

If given the chance, Emmanuel Okolie would enjoy speaking with you. Please go to and follow him on his website, Facebook, Github, LinkedIn, and Twitter.

Efficient API Interaction And Consumption With Laravel: A Beginner's Guide

Emmanuel C. Okolie — Thu, 21 Sep 2023 21:12:04 +0000

Introduction

Laravel is a popular PHP framework for developing and building web applications and API. As a developer, there will come a time when you will need to create your API or Consume an External API, and Interact with it. this is one phase you can’t run away from, so as a Laravel Developer There are ways to consume and interact with an API which is what we will be looking at.
API is an acronym that stands for Application Programming Interface. API does Cool things and That is one reason developers accept it.
So without wasting much of Your Time, jump straight into This Tutorial.

Prerequisites

The prerequisites for creating and interacting with an API are as follows:

PHP: Make sure you know PHP and how to use OOP to be precise. Laravel is a framework of PHP so you need to have PHP installed on your system. Note: you should have a PHP version greater than version 7.8 installed in your system.
Composer: A PHP dependency management is called Composer. It is used to manage and install the dependencies that Laravel needs. The composer must be set up on your computer.
Web Server: To serve your Laravel application, you'll need a web server like Xampp OR Wamp server. Both servers enable you to use MySQL.

Once you've met these requirements, you may go on to proceed and interact with an API in Laravel:
Now you are good to go!

Steps By Step Process: Interact And Consume an API using Laravel

To interact and consume an API using Laravel, there are two steps which I will show you below:
Two Steps to Consume An API**

The first step is to consume a free API, using the routes/web.php to interact and consume the API. Below are Steps to achieve that.

Step 1: Install Laravel

Open your terminal and run the following command to create a new Laravel project:
composer create-project --prefer-dist laravel/laravel my-API-project
Change to the project directory:
cd my-api-project

Step 2: Get your API.
For the Sake of this project, we’ll be using Free API Which I got from Free API *****so you can get yours from there or any free API site. The API we are using is a Random Joke API.*
Step 3: Visit the web.php

Visit your routes/web.php in the project you just created:
Create a view using the Route::get() to interact and consume the API. We will be using the

welcome page to view the outcome of our API.
Below is the code snippet that you will code in your **routes/web.php**

    <?php
    use Illuminate\Support\Facades\Route;
    use Illuminate\Support\Facades\Http;

    Route::get('/', function(){
      $response = Http::get('https://official-joke-api.appspot.com/random_joke');
      $data = $response->json();

       return view('welcome', 
        ["type" => $data['type']],
        ["setup"=> $data['setup']],
        );
    });

In summary, this code defines a route that, when accessed, requests an API to fetch a random joke. It then renders a view called "welcome" and passes the retrieved joke data to the idea for display or further processing. Note an API returns Extensible Markup Language (XML) OR JavaScript Object Notation(JSON).
Step4: Display The API In Your View
Now to view this API, my view is **welcome.blade.php** We will echo the value of the API in an HTML tag it will display the resource of the API on the browser. Let’s have an example of what I’m saying without wasting much of your time.
In your **views/welcome.blade.php** Below is the following code snippet to output what we wrote previously in the **routes/web.php** file. We used the **{{ }}** syntax to output the value of the variable in the generated HTML.

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>API</title>

            <!-- Fonts -->
            <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

        </head>
          <body class="antialiased">

            <div class="container my-3">
              <div class="row justify-content-center">
                <div class="col-lg-6">
                  <div class="card shadow" style="width: 18rem;">
                    <div class="card-body">
                      <h3 class="fw-bold text-uppercase">{{ $type }}</h3>
                      <p class="card-text lead text-muted">{{ $setup }}</p>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
        </body>
    </html>

Note: in the above code snippet we used Bootstrap 5 to have a better view, whenever you refresh the page in the browser the output will change. Below is how what we’ve done looks like.

The Second way is to consume an API with a key using the **app\Http\controllers\** to interact and consume the API. Below are Steps to achieve this.

First, visit the **routes/web.php**

Create a route that will take you to your desired controller.

Once you visit the web.php file you’ll write a line of code that’s the route that will be interacting with the Controller and API at the same time.
Below is the code snippet that you will code in your **routes/web.php**

    <?php
    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\ConsumeController;

    /*
    |--------------------------------------------------------------------------
    | Web Routes
    |--------------------------------------------------------------------------
    |
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider and all of them will
    | be assigned to the "web" middleware group. Make something great!
    |
    */

    Route::get('/consume', [ConsumeController::class,'index']);

The Code Above code snippet was named in my way, so you are free to use your naming conventions.
To make your Controller, you’ll write:

php artisan make:controller ConsumeController

Then visit the **app\http\controllers\ConsumeController** on your folder directory, then you’ll see a file named **ConsumeController.php** Open the file you’ll see a code snippet like this.

    <?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    class ConsumeController extends Controller
    {
      //
    }

So because we’re going to be interacting with the API In this Controller what we need to do is to add a little code snippet above. The code snippet we’ll add above is the code, that will allow us to use the Http class from the Illuminate\Support\Facades namespace in your code.
Below is the code snippet to place above, before your class controller name.

    <?php
    use Illuminate\Support\Facades\Http;

So far here’s how your code will look like

    <?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\Http;
    class ConsumeController extends Controller
    {
      //
    }

Secondly, you’ll create a function that will house all the API interactions. In this case, we will use the **index** naming convention for the naming of our process.

    <?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\Http;
    class ConsumeController extends Controller
    {
      public function index(){
         //   
      }
    }

Now, the next thing to do is to get the API and API Keys and store them in a variable.
The name of our variable is **$apiKey** and **$apiUrl** Below is how to store the API in a variable.

    $apiKey = 'test_tf5WlMc5yVwKWk6dsQoeS4Qmz9mCkk8rZVnzCjjZ';
    $apiUrl = 'https://api.nettoolkit.com/v1/account/test-api-keys';

The main purpose of storing your API in a variable is so you’ll be able to call the severally.
We’re going to get the HTTP of the API, what this does is that it enables you to link to the specified API and apiKey from your laravel project.
Below is an example of what I explained not too long ago!

    $response = Http::get($apiUrl, [
        'api_key' => $apiKey,
        // Add other parameters as needed
    ]);

We saved the **HTTP** class in a variable called **$reponse** so we want to get the variable where our API is stored.
After getting it, we’ll do something like this!

$data = $reponse->json();

This implies Structured data from an HTTP **$response** is assigned to the variable **$data** in this code, and the JSON format is translated and processed into a useful object or array for further manipulation and processing.
Then we redirect to where we want the API to display, in our case the ***`view/consume.blade.php to redirect to this page by using the return keyword*` below is an example.

return view('consume', ['data' => $data]);

All that we’ve discussed in this section is just the entire controller, Decided to break it bit by bit.
Below is the code snippet.

    <?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\Http;
    class ContentController extends Controller
    {
        public function index() {
            $apiKey = 'test_tf5WlMc5yVwKWk6dsQoeS4Qmz9mCkk8rZVnzCjjZ';
            $apiUrl = 'https://api.nettoolkit.com/v1/account/test-api-keys';
            $response = Http::get($apiUrl, [
                'api_key' => $apiKey,
                // Add other parameters as needed
            ]);
            $data = $response->json();
            return view('consume', ['data' => $data]);
        }
    }

After running this code, you’ll go to the view and look for the **consume.blade.php** inside it add the code snippet below to be able to view something in your browser.

    <h1>API Data:</h1>
    <pre>
        {{ json_encode($data, JSON_PRETTY_PRINT) }}
    </pre>

After accomplishing the above task, refresh the page you’ll see the below content right on your screen.

We’ll talk more about API’s seat tight.

FAQ

What is Laravel API?
when we speak approximately Laravel API, we talk roughly about the API (software Programming Interface) improvement gear that the Laravel framework gives. a set of routes and strategies that permit interaction among outside programs and Laravel software is referred to as an API inside the context of Laravel.
What is RESTFUL API?
The architectural layout method called a RESTful API (Representational state switch API) is used to create networked programs. it's a method for creating web offerings that follow particular suggestions and boundaries resulting in web offerings that might be scalable, stateless, and simple to apply. Assets, which are things or entities the API can access, are the foundation of RESTful APIs.
RESTful APIs are popular because they are smooth to apply, scalable, and adaptable to many clients. They now function as the de facto enterprise general for creating net offerings, making an allowance for compatibility throughout diverse systems and operating systems.
What's the difference between JSON and XML?
even though XML and JSON are both commonly used facts transfer codecs, they range in phrases of syntax and functionality. JSON is a JavaScript item notation XML is an eXtensible Markup Language.
be aware: there are masses of variations, however, we’ll say few of them.
Subsequent are the principle variations between JSON and XML:**
1. clarity: JSON has a clean and recognizable shape just like JavaScript items, so it tends to be less complicated for human beings to recognize. due to its tag-based structure, XML can be more verbose and complex once in a while, making it tougher to read.

statistics types:** handiest a small wide variety of statistics kinds, which include strings, numbers, booleans, arrays, objects, and null values, are supported through JSON. By way of default, XML translates all information as text and necessitates explicit type definitions.

Conclusion

Finally, We have come to the end of this Tutorial. Hope you were able to grab tons of value from it. Briefly, we have seen how to set up our laravel project and interact with API.
Note! Laravel provides a powerful framework for creating and interacting with APIs, offering developers a seamless and efficient way to build robust web applications.
With its comprehensive set of features and intuitive syntax, Laravel simplifies the process of designing, implementing, and managing APIs. Using Laravel, developers can effortlessly create API routes, define controllers, and handle HTTP requests and responses.
The framework's built-in authentication and authorization mechanisms ensure secure access to API endpoints, granting developers fine-grained control over user permissions.
Till next time, bye.

About The Author

Full-stack Laravel developer Emmanuel Okolie has 2+ years of experience in software development. He has developed full-fledged skills by combining software development, writing, and instructing others in what he does.
His stacks include ReactJ, Laravel, PHP, JavaScript, and other languages and frameworks.
He creates websites for clients as a freelancer and writes technical guides to show people how to do what he does.
If given the chance, Emmanuel Okolie would enjoy speaking with you. Please go to and follow him on his website, Facebook, Github, LinkedIn, and Twitter.

Cookies-Based Authentication Vs Session-Based Authentication

Emmanuel C. Okolie — Fri, 17 Mar 2023 21:48:43 +0000

Introduction

If There’s one thing I would like to know previously, it is the entire way Authentication works, session authentication and cookie authentication are both types of token-based authentication. So we will be talking about Cookie-Based and Session-Based Authentication. As a developer, there will come a time when you will see the need of using authentication in your web application.

What images do you have in mind when you hear the terms sessions and cookies? Cookies are kept on the client directly (Browser). Whereas sessions make use of a cookie as a kind of key to link with the information kept on the server side. Because the actual values are concealed from the client and the developer has control over when the data expires, sessions are preferred by the majority of developers.

Without wasting your time let’s jump straight into this guide.

What Is Authentication

Verifying a user or entity's identity to access a system, network, or application is known as authentication. It entails confirming that the user's or an entity's identity credentials, such as a username and password, a security token, biometric information, or a digital certificate, are accurate.

To ensure that only authorized parties or individuals are given access to sensitive data and resources, authentication is a crucial component of security. To offer a secure and dependable access control system, it is frequently used in conjunction with other security measures including authorization, encryption, and multi-factor authentication.

What Is Session Authentication

When a user logs into an application or website, session authentication, a sort of token-based authentication, creates a special session ID for them. The server-side storage of this session ID is used to verify user requests made after that point.

The server generates a fresh session ID and links it to the user's account each time they log in. The user's browser then receives this session ID as a cookie, which is saved on the user's device. With each successive request, the user's browser subsequently sends the session ID back to the server, enabling it to confirm the user's identity and grant access to secured resources.

Web apps and websites frequently utilize session authentication to provide users access to their accounts without requiring them to enter their passwords again each time they change pages or do other actions. It frequently works in tandem with other security measures like multi-factor authentication and encryption to offer a strong and dependable access control solution.

Pron Of Session-Based Authentication

Session-based authentication has advantages, below are the advantages while using Session-Based authentication.

Security: By asking the user to enter login information for each session, session-based authentication aids in preventing unwanted access to a user's account. As a result, it becomes more challenging for attackers to access a user's account because they would need to be aware of the login information for each session.
User Experience: Since a user only needs to log in once and their session is kept active for a while, session-based authentication can make using the system easier (e.g. 30 minutes or an hour). This indicates that the user can go between pages of the website or application without repeatedly entering their login information.
Scalability: As the server just needs to keep track of active sessions rather than keeping login information for each user, session-based authentication can be readily scaled up to handle huge numbers of users.

Cons Of Session-Based Authentication

Session-Based Authentication's drawbacks.

One of the largest threats to session-based authentication is session hijacking, in which an attacker takes control of a user's session and assumes their identity. Using safeguards like SSL encryption, secure session cookies, and session timeouts can help to mitigate this. ##
Session Fixation: This potential flaw in session-based authentication occurs when a user's session ID is established by an attacker before the user logs in, giving the attacker control of the user's session after the user logs in. By creating a fresh session ID after the user logs in, this can be avoided. ##
Resource Consumption: Because the server must keep track of all active sessions, session-based authentication can be very resource-intensive. This is because this procedure uses a lot of memory and processing power. By putting in place restrictions like session timeouts and a cap on the number of active sessions per user, this can be lessened.

What Are Cookies Authentication

Websites and web apps employ cookies authentication as a user authentication technique. After a person logs in to a website, little text files known as cookies are used and kept on their device.

A cookie with a special identifier linked to the user's account is created by the website when a user checks in. The user's device then receives and stores this cookie in their browser. The website may recognize the user and authenticate them without them having to log in again by sending the cookie back to the website on subsequent visits.

As users do not need to log in repeatedly to access their accounts, cookies authentication can be used to offer a simple and seamless user experience. To avoid jeopardizing the security of the user's account, it is crucial to make sure that the cookies used for authentication are safe and difficult to manipulate. Also, because it could not always offer enough security, cookie authentication might not be appropriate for all websites or applications.

Pron Of Cookies-Based Authentication

Cookies-Based Authentication's Advantages

Convenience: Cookies-based authentication makes it easier for users to access the website or application since they don't need to continuously enter their login information after closing their browser or powering off their device.
Scalability: Because the server only needs to keep track of each user's active sessions, cookies-based authentication may be scaled up to handle enormous numbers of users.
Personalization: By collecting users' preferences and behavior on the website or app, cookies-based authentication enables websites or applications to tailor the user experience.

Cons Of Cookies-Based Authentication

Negative aspects of cookies-based authentication

Security Risks: Cross-site scripting (XSS) attacks and session hijacking are two security vulnerabilities that cookies-based authentication may be subject to. Session timeouts, SSL encryption, and the use of secure cookies are among the countermeasures that can be used to lessen this risk.
Cookies-based authentication can present privacy issues because the website or application may be gathering and storing personal information about the user. By putting policies in place like making clear privacy policies and receiving explicit user agreements for data collecting, this can be lessened.
Users who share devices or use public computers might not have the optimal user experience using cookies-based authentication because other users may be able to access their login information if it is kept on the device. Using safeguards like giving users the choice to log out of the session and erasing the cookies when a user signs out can help to mitigate this.

Difference Between Cookies-Based Authentication And Session-Based Authentication

Common methods for preserving user authentication over numerous requests in web applications include cookies-based authentication and session-based authentication.

Cookies-based authentication involves putting authentication data in a cookie that is saved on the user's browser, including their login credentials. To identify the user and preserve their authorized state, the server sends this cookie along with every subsequent request the user makes to the web application.

On the other hand, session-based authentication includes saving the authentication data on the server side. An exclusive session ID is generated and linked to an account when a user checks in. This session ID is then provided to the server with each subsequent request and saved on the user's browser as a cookie. The user's authentication details can then be looked up by the server using the session ID, which helps to keep the user in an authenticated state.

The location of the authentication data storage is the primary distinction between cookies-based authentication and session-based authentication. Although session-based authentication stores the authentication data on the server, cookies-based authentication stores it on the user's browser.

In general, cookies-based authentication is simpler to implement because the server doesn't need to keep track of any session data, which is a benefit. Cookies-based authentication is more susceptible to security threats, like cookie theft and session hijacking, though.

As the authentication data is retained on the server and inaccessible to the user, session-based authentication is typically thought to be more secure. Nevertheless, because the server must manage session timeouts and expiration as well as session information, session-based authentication might be trickier to implement.

In the end, the web application's demands and requirements will determine whether to use cookies-based authentication or session-based authentication.

Which one should I use?

Every developer is entitled to His/Her opinion on which authentication to use. But my advice is to use session-based authentication because it’s safer. While building your site or application, you may need to go for any of them. Below are the use cases for Session and Cookies authentication.

Use case for Cookies Authentication
When a person registers to a website, cookies authentication is frequently used. The server creates a distinct session ID after verifying the user's credentials once they submit their username and password. The user's browser's cookie then contains the session ID. Each time the user makes a new request to the server, the cookie is sent along with it, enabling the server to recognize the user and deliver customized information. Because it is reasonably simple to implement and is widely supported by web browsers, cookies authentication is a popular option.

Use case for Session Authentication
When a user interacts with a web application that necessitates repeated requests to complete a job, session authentication is frequently used. To place an order on an e-commerce website, for instance, a user may need to add items to their cart, enter shipping details, and enter payment information. The server constructs a session object linked to the user's login credentials to preserve the state of the order across multiple requests. An individual session ID is delivered in a cookie to the user's browser along with this session object, which is saved on the server. The server can obtain the session object and keep track of the order's status because each future request from the user includes the session ID. To enable safe, stateful interactions between the user and the web application, session authentication is frequently combined with cookie authentication.

Best Practices for Cookies-Based Authentication

Authentication Using Cookies: Best Practices:

With the HttpOnly and Secure flags set, use secure cookies.
Consider the sensitivity of the data and the user's behavior when setting the cookie expiration time.
To prevent tampering, encrypt the cookie contents using powerful encryption methods.
To stop replay attacks, give each cookie a special identification number.
In stateless apps or other situations where cookies are inappropriate, take into account utilizing a token-based strategy as an alternative to cookies for authentication.

Best Practices for Session-Based Authentication

Session-based authentication best practices

Use a private, random session identification and save it on the server.
To lessen the chance of a session being hijacked, limit the session's lifespan.
Use secure session archiving techniques, such as an encrypted file or database system.
To protect the session data while it is in transit, use SSL/TLS encryption.
When logging out or after a predetermined amount of inactivity, invalidate the session.

In both situations, it is crucial to routinely evaluate and audit the authentication procedures to spot and fix any potential security flaws. Users must also be instructed about best practices, such as not disclosing their login information to others and staying away from public computers when conducting sensitive business.

Conclusion

Finally, we’re done with this guide, hope you’ve gained a ton of value! Going through this guide entirely you will learn the basics of Cookies and Sessions authentication, and learn more about authentication itself.

We also saw a lot of differences between them, you’ll bet me that going through this guide was a waste. Feel free to drop a comment in the comment section, like this guide, and follow me for More.

Thanks, till next time!!!

About The Author

Full-stack Laravel developer Emmanuel Okolie has 2+ years of experience working in the software development sector. By combining software development, writing, and instructing others in what he does, he has developed full-fledged skills.
His stacks include ReactJs, Laravel, PHP, JavaScript, and other languages and frameworks.

He creates websites for clients as a freelancer and writes technical guides to show people how to do his work.

If given the chance, Emmanuel Okolie would enjoy speaking with you. Please go to and follow him on his website, Facebook, Github, LinkedIn, and Twitter.

How To Build Random Quotes Project Using Vanilla JavaScript

Emmanuel C. Okolie — Thu, 23 Feb 2023 22:52:51 +0000

Introduction

What comes to your mind when you hear the word random quote using vanilla JavaScript? As far as I'm concerned, anything may be the case. And there may be another scripting language that can make random quotes, but one of the most distinguished of them is using JavaScript to make a random quote.

You might have seen some social media apps that display people’s posts, but you must keep scrolling to see more posts. But according to what we will be building, you will have to click on a button to view a new quote.

Note: in this tutorial we will make use of an API, the API is used to fetch the quotes randomly acrross the web. By just clicking on the button the API fetches a new quotes.

So without wasting much of your time, let's dive into this guide.

Prerequisite

You need to have basic knowledge of HTML
You need to have basic knowledge of CSS
You need to have basic knowledge of JavaScript
Also have a code editor(Sublime or VS code) etc.

Step-by-step JavaScript Random Quote Generator

A random quote pulls quotes randomly from an API or an array. In this article, we'll use JavaScript to produce quotes from an array as we design a random quote generator from scratch using HTML, CSS, and JavaScript only.

Below is a step-by-step guide to going through to accomplish the random quote task.

Step 1: Is Making a New Project
The project you’re about to build contains three pages: HTML, CSS, and JavaScript. so you’ll name the various pages will be named like this. index.html, style.css, script.js. After doing this you’re ready to move on to the next step.

Step 2: Constructing the framework
This step will enable you to add a few HTML codes that will give your project structure.
Note: This section is probably the first thing to do after creating the folder and the files as stated above.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!--META information-->
   <meta name="description" content="Random Quote Generator">
   <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API">
   <meta name="author" content="EmmyKolic">
   <!--End of META information-->
   <title>Random Quotes</title>
   <!--LINK CUSTOM CSS FILE-->
   <link rel="stylesheet" href="style.css">
   <!--FONTAWESOME CDN-->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="crossorigin="anonymous">
</head>
<body>
    <!-- Quote Container -->
    <div class="container">
      <!-- Quote to be Displayed Here -->
      <h1>
        <i class="fas fa-quote-left"></i>
        <span class="quote" id="quote"></span>
        <i class="fas fa-quote-right"></i>
      </h1>
      <!-- Author to be Displayed Here -->
      <p class="author" id="author"></p>
      <hr />
      <div class="button">
        <!--Button to tweet the quote -->
        <a class="twitter" id="tweet" href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>

        <!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated-->
        <button class="next" onclick="getNewQuote()">Next quote</button>
      </div>
    </div>

    <!--LINK CUSTOM JS FILE-->
    <script src="script.js"></script>

</body>
</html>

Step 3: Adding Styles for the Classes
In this section, we will be adding styles to the code using CSS, to build the quote generator. Note: This section is the next thing to do after creating the index.html file, you will create another file named style.css the style.css file will be linked to the HTML file.

Then you to style the layout of the HTML. Here’s the CSS code below.

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

body {
  min-height: 100vh;
  transition: 0.5s;
  transition-timing-function: ease-in;
  background-image: linear-gradient(
    to right bottom,
    rgb( 51, 255, 141 ),
    #acc9ffa8
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5);
  border-radius: 15px;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 10px;
}
.fa-quote-left,
.fa-quote-right {
  font-size: 35px;
  color: rgb(170, 0, 0);
}
.quote {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}
.author {
  margin: 10px;
  text-align: right;
  font-size: 25px;
  font-style: italic;
  font-family: cursive;
}
hr {
  margin: 10px 0;
  width: 100%;
  border: 1px solid black;
  background-color: black;
}
.button {
  width: 100%;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
  margin: 9px;
}
.twitter {
  border: 1px solid rgb(102, 179, 255);
  border-radius: 4px;
  background-color: rgb(102, 179, 255);
  color: white;
  padding-bottom: 15px;
  text-align: center;
  font-size: 1.8em;
  width: 60px;
  height: 35px;
  line-height: 40px;
}
.next {
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px;
  margin-top: 5px;
  font-weight: bold;
  color: white;
  background-image: linear-gradient(
    to right bottom,
    rgb(22, 210, 248),
    #bcd7ffa8
  );
}
.container:hover {
  box-shadow: 0 10px 10px rgb(0, 180, 230);
}

Step 4: Incorporate a few lines of JavaScript code.
In this step, we will incorporate some JavaScript code to build the quote generator. Note: This section is an essential part of this tutorial, Now you’ll create another file call it script.js.
Go through the code below you’ll see what was done clearly, We interacted with an API by using a link and saving inside a variable named url.

To make this guide brief, go through the script.js you’ll notice a comment before each section. Here’s the JavaScript code below.

const text = document.getElementById("quote");
const author = document.getElementById("author");
const tweetButton = document.getElementById("tweet");

const getNewQuote = async () => {
  //api for quotes
  var url = "https://type.fit/api/quotes";

  // fetch the data from api
  const response = await fetch(url);
  console.log(typeof response);
  //convert response to json and store it in quotes array
  const allQuotes = await response.json();

  // Generates a random number between 0 and the length of the quotes array
  const indx = Math.floor(Math.random() * allQuotes.length);

  //Store the quote present at the randomly generated index
  const quote = allQuotes[indx].text;

  //Store the author of the respective quote
  const auth = allQuotes[indx].author;

  if (auth == null) {
    author = "Anonymous";
  }

  //function to dynamically display the quote and the author
  text.innerHTML = quote;
  author.innerHTML = "~ " + auth;

  //tweet the quote
  tweetButton.href =
    "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth;
};

getNewQuote();

Conclusion

We’ve come to the end of this tutorial, hopefully, you’ve gained a ton of value. On how to build random quotes project using vanilla JavaScript.

We’ve seen how to interact with an API, although that's not the only way or should I say best way to interact with an API. and how to tweet a quote from our JS code to your Twitter account.

Just discussing this tutorial has shown us a lot. So feel free to drop a comment! And if you want more tutorials, please follow me.

Till next time, Enjoy your day!

About The Author

Emmanuel Okolie is a full-stack laravel developer with 2+ years of experience in the software development industry. He has built full-fledged skills by fusing software development, writing, and teaching others what he does. His stacks are ReactJs, Laravel, PHP, JavaScript, and more.

He works as a freelancer, building websites for clients and writing technical manuals to instruct others on how to carry out his work.

Emmanuel Okolie would welcome the opportunity to speak with you. Kindly visit and follow him on Linked-In, Facebook, Github, Twitter, or his Website.

How To Use Mod_Rewrite To Remove Your (.PHP) Extension From Your Work

Emmanuel C. Okolie — Tue, 07 Feb 2023 20:20:31 +0000

Introduction

There was a time I wanted to remove my (.PHP) extension from my project URL it became an extreme challenge for me, and I was bored cause I wished my .php not to show, then I stumbled into mod_rewrite. Ever since then, I have appreciated mod_rewrite functionality.

How I was able to achieve remove my extension in my project was the use of my .htaccess. this tutorial will explain everything you should know about removing the php extension.

Before then, if you have no idea about php mod_rewrite I’ll advise you to read my tutorial titled: What You Should Know About PHP Mod_Rewrite And Mod_Security. it will help you have an idea about Mod rewrite, and having this idea will make this tutorial more understandable for you.

Now, without wasting much of your time, let’s jump right into this guide!

What is a .htaccess

the .htaccess is a file used for configuration by the apache web server to control the behavior of the websites. It is frequently used to handle error pages, redirect online traffic, enforce security regulations, limit access to a website, and carry out other website-related duties.

Note: the root directory of a website is where the .htaccess file is stored and it’s typically hidden from view. The .htaccess file can be edited with a text editor and all the changes will take effect immediately, which makes the file a flexible and powerful tool for web administrators.

Features Of The .htacess File

Below are the things the .htaccess file enables you to do

URL Redirection: Users can be redirected from an outdated URL to a new URL using the .htaccess file.

Password Protection: A website, directory, or particular file can be password-protected using the .htaccess file.

Restricting Access to Specific Files and Directories: The .htaccess file may be used to limit access to specific files or directories.

Custom Error Pages: You may make custom error pages for HTTP error codes like 404 (Not Found) and 500 using the .htaccess file (Internal Server Error).

Rewrite Rules: To make URLs more user- or SEO-friendly, rewrite them using the .htaccess file.

MIME Types: You may define the MIME type of a file in the .htaccess file.

Prevent Hotlinking: You may stop other websites from creating hotlinks to your photos and other media assets by using the .htaccess file.

Activate Compression: The .htaccess file may be used to activate GZIP compression, which can accelerate a website's loading time.

Compel HTTPS: The .htaccess file may be used to force HTTPS encryption for all traffic to a website.

Block Spam Bots: To stop spam bots from visiting a website, the .htaccess file may be used to block particular IP addresses or user agents.

In this tutorial, we’ll be focusing only on rewriting URLs.

Removing The .php Extension

You must first enable mod rewrite on the Apache web server before moving on. The procedures to activate mod_rewrite (.htaccess) on the Apache web server are listed below first.

Open htaccess File

Run the following command in a terminal window to view the .htaccess file. Please modify the file path of the .htaccess file according to your needs.

$ sudo nano /var/www/html/.htaccess

Eliminating the.php Extension from the URL

To remove the .php extension from the URL of your website, you can use the following code in your .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

With the help of this code, the Apache web server will be instructed to drop the .php extension from the URL while still serving the proper .php file. For instance, the Apache web server will deliver the file page.php without displaying the.php suffix in the URL if a user attempts to visit the URL http://example.com/page.

Remember: Before making changes, always create a backup of your .htaccess file. Your website may malfunction or become unavailable if you make incorrect modifications to the .htaccess file.

Restart the Apache web server

The Apache server may be restarted using the following command.

$ sudo systemctl restart httpd

Or you can do the restarting on your xampp as well.

Adding a trailing slash at the end

Many people asked me how to add a trailing slash at the end, for instance: yoursite.com/page/

Put the code below in and disregard the first snippet. The removal of the extension is addressed in the first four lines, and the insertion of the trailing slash and redirection is addressed in the remaining lines.

Server-side redirects:
Apache: You can use the .htaccess file to add a rewrite rule to redirect the URL. Here is an example:

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_URI} !(.*)/$
    RewriteRule ^(.*)$ http://%{HTTP_HOST}/$1/ [L,R=301]

Nginx: You can use the following configuration in your nginx.conf file:

    location / {
        if (!-e $request_filename){
            rewrite ^(.*)$ /$1/ permanent;
        }
    }

Redirects that happen on the client side: You can use JavaScript to change the URL in the browser. Here's an illustration:

if (location.pathname.substr(-1) !== '/') {
        location.pathname = location.pathname + '/' + location.search + location.hash;
    }

Note: Depending on your unique use case and configuration, you should apply the approaches stated above.

Conclusion

We’ve come to the end of this tutorial, hopefully, you’ve been enlightened on How to use mod_rewrite to remove your (.php) extension from your URL.

We’ve learned how to remove the extensions using mod_rewrite in the .htaccess file. And how to add a trailing slash and lots more.

We’ve seen a lot by just talking about this tutorial. So feel free to drop a comment! And if you want more instructions, please follow me.

Till next time, have a wonderful day!

About The Author

Emmanuel Okolie is a full-stack laravel developer with 2+ years of experience in the software development industry. Combining software development, writing, and teaching others what he does, he has developed full-fledged capabilities. His stacks contain ReactJs, Laravel, PHP, JavaScript, and more.

He works as a freelancer, creating websites for customers and creating technical guides to show others how to accomplish what he does.

Emmanuel Okolie is ready and willing to talk with you. Kindly visit and follow him on Linked-In, Facebook, Github, Twitter, or his Website.

How To Master JavaScript DOM: Beginners Guide

Emmanuel C. Okolie — Fri, 27 Jan 2023 12:33:52 +0000

Introduction

There is one functionality JavaScript has, which is the DOM. the Dom is a vital aspect of JavaScript programming that shouldn’t be neglected. As far as I’m concerned you can’t achieve much in JavaScript without knowing what the DOM is all about. JavaScript is widely growing and becoming versatile the use of the DOM becomes more Essential and strongly needed.

in this tutorial, I'm going to walk you through the things you should know about the DOM. I promise you that if you stick with me until the end and practice all that I write about, the whole DOM thing won't be an issue for you ever again.

Without wasting much of your time, let’s jump straight in.

DOM Definition and Fundamental Principles

The DOM is an acronym which stands for Document Object Model. The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, with each object representing a part of the document, such as an element, attribute, or text node.

JavaScript can be used to interact with the DOM, allowing developers to create dynamic web pages that can update and respond to user input. The JavaScript DOM allows you to manipulate and access the elements, attributes, and content of an HTML or XML document, changing the structure, layout, and content of a web page without reloading it.

the image below explains what the DOM trees look like.

The document object is shown here. This serves as the DOM's foundation and core. You must first gain access to the document object in order to carry out any kind of DOM modification.

The HTML root element, a subclass of the document object, comes next.

The bodyand headelements, which are cousins and offspring of the HTML element, are listed next.

You may probably agree that the title element, which is located underneath the head element, is the parent of the text node “my text” and a child of the head element.

Two components (a tag and an h1 tag) that are siblings and offspring of the body element are located immediately underneath the body element.

Last but not least, the tag's descendants include the href property and the text node “my link.” The text node “My header” belongs to the h1 element in the same exact way.

If you're just getting started, this could seem a little difficult, but it always gets easier (with the practice of course).

How to Select Elements in the DOM

You must choose that specific element in the DOM before you can make changes to it. We have four main approaches to choosing components, which is fortunate for us.

How to Use the getElementById Method to Choose DOM Elements
Using the element's id is the most used method of accessing an HTML element.

The getElementById() function in the example below utilized the parameter id="master" to locate the element.

<p id="controller">i'm a javascript lover</p>

 <script>
const controllerEl = document.getElementById('controller')
console.log(controllerEl) //<p id="controller">i'm a javascript lover</p> 
 </script>

The ID takes the case into account. For instance, the ids "master" and "Master" are completely different.

After choosing an element, you may modify its properties, apply styles to the element, and navigate to its parent and child elements.

Choosing Elements within the DOM using the getElementsByClassName() Technique.
This function returns a collection of all the document components that belong to the given class.

Our HTML page below, for instance, has three components with the class="master2" attribute, and I chose the button with the id of btn.

When you click the button, all the elements with the class name master2 are selected, and the innerHTML of the third element is changed.

 <p class="master2">i'm a javascript lover</p>
      <p class="master2">i love react too well</p>
      <h1 class="master2">i want a remote job</h1>

        <button id="btn">click me</button>

 <script>

 const btn = document.getElementById('btn')

        btn.addEventListener('click', function master(){
            var master = document.getElementsByClassName("master2");
            master[2].innerHTML = 'i need a remote job';
        })

</script>

You see the following before the button is clicked:

Clicking the button results in the following:

Choosing DOM elements using the getElementsByTagName() method
This function takes a tag name as an input and returns every element of the given tag name in the order in which they occur in the document.

The following code retrieves all of the p elements on the page and modifies the content of the second element to demonstrate the syntax of the getElementsByTagName() function.

<p>GitHub</p>
<p>Firebase</p>
<p>HTML</p>
<button id="btn">click me</button>

  const btn = document.getElementById("btn");
btn.addEventListener("click", function master() {
  let master = document.getElementsByTagName("p");
  let masterEl = (master[1].innerHTML = "Code editors");
  console.log(masterEl); //Code editors
});

How to Use CSS Selectors to Choose DOM Elements
. querySelector()
This gives back the first value that matches the specified selection. By accepting all CSS style selectors, this approach enables selection by tag, class, or ID.

<div id=master>i am a frontend developer</div>

<script>
const master = document.querySelector("#master") 
</script>

The first element that matches the CSS selector is returned by the method above, which only accepts one input, a selection.

.querySelectorAll()
Similar to the previous method, this one also provides a node list collection of all matched items.

     <p class="director">Coffee Script</p>
     <p class="director">Typescript</p>
     <p class="director">Next.js</p>

<script>
const director = document.querySelectorAll(".director") 
console.log(director[1])  //<p class="master">Typescript</p>
</script>

Overview of How to Choose DOM Elements
There are four alternative approaches to doing a certain task (selecting an element or elements) when you need to select a DOM element.

So you use the second if you can't recall the first. And you still have alternatives 3 and 4 if you somehow forget both. Does JavaScript really make our life simpler, or is that just me?

Personally, I advise sticking with Option 1 or Option 4a (querySelector with an Id). When you first started learning HTML, you probably realized that elements shouldn't have the same id; an element's id is a unique identifier within a page.

In light of this, choosing an element based on its id is a "safe bet" as you can't apply the same "modification" to several items at once (unless perhaps that's what you want to do in which case feel free to utilize other possibilities).

Getting Around the Document

Hopefully, at this point, you've realized that every node in an HTML document is a node. Additionally, text nodes are what makeup HTML components' text.

With the HTML DOM, you may access nodes in the tree using the node relationships we discussed previously (parent, child(ren), sibling(s), etc.) and browse the node tree.

A little review
Except for the top node, each node has exactly one parent (which has no parent).
More than one kid can be born to a node.
Brothers and sisters are nodes that share the same parent.

This section will demonstrate how to obtain an element's parent element, siblings, and offspring. To accomplish these goals, I'll be using the following node properties:

parent
Node youngsters
firstElementChild last Nodes
next ElementChild
prior ElementSibling
ElementSibling

Furthermore, I'll simply utilize the HTML page below to demonstrate how to use each of these node features. I'll also demonstrate how to alter the DOM using the information from part 4 above.

This article's goal is to teach the reader how to alter the DOM. If you don't know how to control the DOM, it doesn't really matter if you can pick elements and navigate them. Understanding how to add CSS style, make and add elements, set innerHTML, and manage events is crucial.

Please stick with me because it is the article's main point. Let's go on.

 ```<div id="parent">
        <div id="firstchild">i am a first child</div>
        <p id="secondchild">i am the second child</p>
        <h4>i am alive</h4>
        <h1>hello world</h1>
        <p>i am the last child</p>
    </div>

    const parent = document.getElementById('parent').lastElementChild
    console.log(parent) //<p>i am the last child</p>

    const parent2 = document.getElementById('parent').children[3]
    console.log(parent2) //<h1>hello world</h1>

    const secondchild = document.getElementById('secondchild')
    console.log(secondchild) //<p id="secondchild">i am the second child</p>

    console.log(secondchild.parentNode) //<div id="parent">...</div>

    console.log(secondchild.nextElementSibling) //<h4>i am alive</h4>

    console.log(secondchild.previousElementSibling) //<div id="firstchild">i am a first child</div>

How to Manipulate Elements in the DOM

We will examine the following in this section:

ways to make components
How to modify an element's innerHTML/text content
How to add a component
Putting one element before another: How to do it
Replace a child element with this
Getting rid of a child element


<div id="parent">
            <div id="firstchild">i am a first child</div>
            <p id="secondchild">i am the second child</p>
            <h4>i am alive</h4>
            <h1>hello world</h1>
            <p>i am the last child</p>
        </div>

How to Create Elements
A parent element and five children elements are displayed in the code above. Let's imagine that we wish to use JavaScript to create another div tag. We would undoubtedly need to use the createElement() function to create a new element, like in:

 const createEl = document.createElement('div')
 console.log(createEl) //<div></div>

How to Set innerHTML
Despite the fact that we successfully built a div element, it does not yet have a text node. To add its text node, we'll utilize the .innerHTML() attribute.

const innerhtml = createEl.innerHTML = 'i am a frontend developer'
console.log(createEl) //<div>i am a frontend developer</div>

How to Add Styling with CSS

We learned how to build an element and add it to the designated parent element from the examples before.

Therefore, we must add a CSS class to an element in order for it to have a style. In this instance, JavaScript will be used.

I'll demonstrate more than just how to add a class. I'll also demonstrate how to delete a class and switch between classes.

Relax; it's not tough. Every step of the way, I'm here to help you.

How to Add a CSS Class
Currently, there is no style given to a standard HTML button with the id "master." Look at the picture below:

The CSS style for the button will be created as our first task.

In order for JavaScript to automatically apply the CSS style with the class of "button" when you click the button, I will next add an event listener to the button in our JavaScript.

<style>
body {
  background-color: blue;
  display: flex;
  margin: 30%;
  justify-content: center;
  align-items: center;
}
.button {
  background-color: blueviolet;
  width: 200px;
  border: none;
  font-size: 2rem;
  padding: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
}
</style>

<button id="master">Click me</button>

<script>
const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)
 function addFunction(){
     buttonEl.classList.add('button')
  }
  </script>

You'll see the following after clicking the button. Wonderful, huh?

How to Remove a Class
The CSS style will be eliminated using the same example as earlier, but this time we'll use JavaScript's classList.remove() function. Most likely, you already knew what would occur.

Yes, the button will return to its original condition.

const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)

function addFunction(){
    buttonEl.classList.remove('button')
 }

How to Toggle a Class
Let's imagine you don't want the CSS style to be fully removed. Toggling between the stylized and unstyled button is what you need.

You may do it using the JavaScript function classList.toggle().

Most social media networks, including Twitter, commonly employ the classList.toggle() function. It gives you the option to always like and dislike posts using the same button.

JavaScript then determines if the button has the CSS class.

If the class is present and you click the button, it is RELEASED. When you click the button if the class is missing, it is added.

const buttonEl = document.getElementById('master')

buttonEl.addEventListener('click', addFunction)

function addFunction(){

    buttonEl.classList.toggle('button')

 }

Event handling

What are HTML events?
HTML events are "things" that happen to HTML components, such as a button being clicked, the text being entered into a text box, etc. You may write JavaScript code, which we refer to as an event handler, that will be performed when an event like the one mentioned above happens.

JavaScript functions are used as these event handlers. As a result, the handler function is called whenever an event happens on an element.

Event listeners
So far, we have used event listeners in pretty much all of the examples given. This ought to demonstrate the significance of event listeners in DOM manipulation.

We need a method called addEventListener in order to add an event listener to an element or any other DOM object (). This approach is preferred to the previous one, in which the event to be handled was included in the HTML markup.

This separates JavaScript from HTML markup, making the code simpler and easier to comprehend.

If you're like me and appreciate the notion of separate JS, separate CSS, and so on, you'll like this event listener.

A listener for events accepts three parameters.

The first is the category of the event, such as "click" and so on.
The function will be used as the second parameter.
A boolean value indicating whether to employ event capturing or event bubbling is the third argument. This element is not required.

Conclusion

Wow! Finally, we have come to the end of this tutorial hope you’ve learned a lot from this tutorial. Knowing how to manipulate the DOM is an essential part of JavaScript that is necessary and you going through this tutorial will help you achieve it.

You might be able to create small JS applications if you comprehend the examples and pictures I provided above. The value of developing projects cannot be emphasized enough if you want to be a skilled developer.

Till next time Enjoy!

About The Author

Emmanuel Okolie is a full-stack laravel developer with 2+ years of experience in the software development industry.

He has grown full-blown skills in combining Software Development, Writing, and Teaching others what he does. His stacks include JavaScript, PHP, ReactJs, Laravel, and more.

He is currently freelancing, building websites for clients, and writing technical tutorials teaching others how to do what he does.

Emmanuel Okolie is open and available to hear from you. Kindly visit and follow him on Linked-In, Facebook, Github, Twitter, or his Website.