DEV Community: The Dev Drawer

Create A Restaurant Bill and Tip Calculator in JavaScript

The Dev Drawer — Wed, 08 Nov 2023 21:59:37 +0000

In this tutorial, I will show you how to create a simple restaurant bill and tip calculator using vanilla JavaScript, HTML, and SASS. You can use this tutorial to build your own and help you figure out the total bill amount per person and even what each person will need to tip based on selectable percentages.

This is a quick and easy project that anyone learning JavaScript can do. It uses Bootstrap for styling and we create a custom vanilla JavaScript class to handle the integration and calculations. All of it is wrapped up nicely in a visually appealing package that you can convert to an app or just use on your website.

View This On YouTube

File Structure

index.html
/sass
     style.scss
/calculator.js
/css (generated by Sass)
   style.css
   style.min.css

Our HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tip Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
</head>

<body>
    <div class="container mt-5">
        <h1 class="text-center">Tip Calculator</h1>
        <br>
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-currency-dollar"></i>
                            </span>
                            <input type="number" class="form-control form-control-lg total" min="0" step="0.01"
                                placeholder="Total Check">
                        </div>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-people-fill"></i>
                            </span>
                            <input type="number" class="form-control form-control-lg people" min="1"
                                placeholder="Total # of Guests">
                        </div>
                        <div class="text-center">
                            <label class="form-label">Select Tip Percentage</label>
                            <div class="form-check">
                                <div class="radio-button-label">
                                    <input type="radio" name="percentage" id="percentage0" class="percentage" checked value="0">
                                    <label for="percentage0">0%</label>
                                </div>
                                <div class="radio-button-label">
                                    <input type="radio" name="percentage" id="percentage10" class="percentage" value="10">
                                    <label for="percentage10">10%</label>
                                </div>
                                <div class="radio-button-label">
                                    <input type="radio" name="percentage" id="percentage15" class="percentage" value="15">
                                    <label for="percentage15">15%</label>
                                </div>
                                <div class="radio-button-label">
                                    <input type="radio" name="percentage" id="percentage18" class="percentage" value="18">
                                    <label for="percentage18">18%</label>
                                </div>
                                <div class="radio-button-label">
                                    <input type="radio" name="percentage" id="percentage20" class="percentage" value="20">
                                    <label for="percentage20">20%</label>
                                </div>
                            </div>
                        </div>
                        <br>
                        <p class="text-center">
                            <button type="button" class="btn btn-primary btn-lg calculateBtn">Calculate Tips</button>
                        </p>
                    </div>
                </div>
                <br>
                <div class="result">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    <h3>Total<span>Per Person</span></h3>
                                    <span class="perperson">$0.00</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    <h3>Tip<span>Per Person</span></h3>
                                    <span class="tipamount">$0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/calculator.js"></script>
</body>

</html>

We are using Bootstrap to create the HTML layout. In this layout, we will have an input for the total check, an input for the total number of guests, and finally a radio button object for the percentages.

I use Bootstrap cards to display this form, but you do not need to rely on Bootstrap for this type of interface. I implemented it to make it easier to get started with.

The Calculator Class

class TipCalculator {
    constructor() {
        // Create elements for the calculator
        this.button = document.querySelector(".calculateBtn");
        this.totalElement = document.querySelector(".total");
        this.peopleElement = document.querySelector(".people");
        this.percentageElements = document.querySelectorAll(".percentage");
        this.resultElement = document.querySelector(".result");

        // Attach the event listener in the constructor
        this.button.addEventListener("click", () => {
            this.calculateTip();
        });
    }

    calculateTip() {
        // Get the values from the inputs, format as needed
        const total = parseFloat(this.totalElement.value);
        const people = parseInt(this.peopleElement.value);
        let percentage = 0;

        // Use a variable to track validation errors
        let invalid = 0;

        // Remove 'is-invalid' class before revalidation
        this.totalElement.classList.remove("is-invalid");
        this.peopleElement.classList.remove("is-invalid");

        // Validate total and people inputs
        if (isNaN(total) || total <= 0) {
            this.totalElement.classList.add("is-invalid");
            invalid++;
        }

        if (isNaN(people) || people <= 0) {
            this.peopleElement.classList.add("is-invalid");
            invalid++;
        }

        if (invalid > 0) {
            return;
        }

        // Find the checked percentage
        this.percentageElements.forEach((element) => {
            if (element.checked) {
                percentage = parseInt(element.value);
            }
        });

        // Calculate tip and total per person
        const tipAmount = (total * (percentage / 100)) / people;
        const totalPerPerson = total / people + tipAmount;

        // Update the result element
        this.resultElement.querySelector(
            ".tipamount"
        ).textContent = `$${tipAmount.toFixed(2)}`;
        this.resultElement.querySelector(
            ".perperson"
        ).textContent = `$${totalPerPerson.toFixed(2)}`;
    }
}

I added comments to the JS so you can understand what it is doing but this is the general gist of it:

use a constructor to create class variables based on the HTML DOM
create a function that parses the values (if they exist, if not, return nothing and show an error), then it grabs the selected percentage and does some simple math to run the calculations.

At the end of this file, you can add the following code or you can add it after the script call in the index.html file.

// Create an instance of the TipCalculator
const calculator = new TipCalculator();

This will call the class and run it. If you add it to the index.html file, make sure you wrap it in <script></script> tags.

With that, you should have a working calculator. To make it styles like mine, you can start on the CSS. Again, this is not required but it will make it look nicer and more functional.

SASS

For the form, I am using the Bootstrap icons, so make sure that is imported into your SASS file. It is not required but helps to be informational.

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

The main customization you need to worry about is the radio buttons and making them look like buttons. This is easy to accomplish by hiding the radio and using the label as a button. You can do that with the following:

form-check {
    padding-left:0;
    .radio-button-label {
        display:inline-block;
        cursor:pointer;

        & input[type="radio"] {
            display:none;
            &+label {
                border:2px solid #38a4ef;
                background-color:#fff;
                padding:6px 10px;
                border-radius:5px;
                color:#38a4ef;
            }
            &:checked+label {
                background-color:#38a4ef;
                color:#fff;
            }
        }
    }
}

That is really all you need to make it work like my video or the image above. If you want it to look exactly like mine, you can add the entire SASS stylesheet code to your project.

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

body {
    font-size:1.25rem;
    color:#fff;
    background-color:#38a4ef;

    .card {
        border:0px;
        box-shadow: 0 5px 5px 5px rgba(0,0,0,.10);
    }
    .form-check {
        padding-left:0;
        .radio-button-label {
            display:inline-block;
            cursor:pointer;

            & input[type="radio"] {
                display:none;
                &+label {
                    border:2px solid #38a4ef;
                    background-color:#fff;
                    padding:6px 10px;
                    border-radius:5px;
                    color:#38a4ef;
                }
                &:checked+label {
                    background-color:#38a4ef;
                    color:#fff;
                }
            }
        }
    }
    span.input-group-text {
        background-color: #38a4ef;
        color:#fff;
        font-weight:bold;
        padding:0 1rem;
        border:2px solid #38a4ef;
        height:50px;
    }

    .form-control {
        margin-bottom:1rem;
        border:2px solid #38a4ef;

        &::placeholder {
            opacity: .5;
        }
    }

    .btn-primary {
        background-color: #38a4ef;
        border-color:#38a4ef;

        &:hover {
            background-color:#3383c7;
            border-color:#3383c7;
        }
    }

    .result {
        .card {
            margin-bottom:1rem;
        }
        margin-top:1rem;
        text-align:center;
        h3 {
            font-size:1.5rem;
        }
        span {
            display:block;
            font-size:1rem;
            color:rgba(0,0,0,.5);
            &.perperson, &.tipamount {
                font-size: 2.5rem;
                font-weight: bold;
                color:#38a4ef
            }
        }
    }
}

Conclusion

A simple class to make your bill-splitting time easier and more efficient. You can make modifications to the calculations or percentages pretty easily to make this your own, but as of now, the project should work as intended. I hope this gives you ideas. Let me know what you think and if you have any questions.

Read more articles on DevDrawer

Creating A Single Page Application Using Mustache and PHP

The Dev Drawer — Fri, 24 Mar 2023 20:04:55 +0000

Ever wanted to master Mustache single-page application development? Did you know you can use PHP with it? In this tutorial, we go over how you can create a single-page application using Mustache and PHP.

In today's fast-paced world, users expect websites and applications to load quickly and provide a seamless experience. Single-page applications (SPAs) have emerged as a popular solution to meet these expectations. With Mustache and PHP, developers can build dynamic, responsive, and scalable SPAs that deliver content and functionality without requiring page reloads. However, mastering these technologies can be challenging, especially for those new to web development.

In this tutorial, we will dive deep into the world of Mustache and PHP to help you master single-page application development. We will cover the basics of SPAs, discuss the benefits of using Mustache and PHP, and provide step-by-step guidance on how to build a SPA from scratch. Whether you're a beginner looking to learn more about web development or an experienced developer seeking to expand your skills, this tutorial will provide you with valuable insights and practical tips to take your SPA development to the next level.

View This On YouTube

File Structure

index.php
autoload.php
.htaccess
/controllers
   Nav.php
   Templates.php
/sass
     style.scss
/css (generated by Sass)
   style.css
   style.min.css
/views
   404.html
   about.html
   contact.html
   home.html
   partials/
      /contact
         forms.mustache
      footer.mustache
      header.mustache
      styles.mustache

htaccess File

We are using the .htaccess file to redirect all page calls to the index.php file. So if you go to / it will show the index.php and if you go to /about it will show the same index.php. We will use this as the basis of our routing.

<IfModule mod_rewrite.c>
    Options +FloowSymLinks
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) index.php [L]
</IfModule>

Install Mustache

You can either download Mustache from their website or use Composer to install it. For this tutorial, we will be using Composer.

composer require mustache/mustache

This will give us access to the vendor and autoloader via Composer.

Setup our index.php

Since this file will be used for all requests on this website, we need to configure it in a way it acts as a router.

<?php
require_once 'vendor/autoload.php';
require_once 'autoload.php';

Mustache_Autoloader::register();

Create Our Autoloader (for our application classes)

In a previous video I created, I went over how to create your own Autoloader for your custom classes. You can see that video here:

This code comes in handy when you are creating your own custom classes and don't want to have to require or include them. In this case, we will use it to pull our custom classes from the controllers folder.

<?php
function autoload($class) {
    include 'controllers/'.$class.'.php';
}

spl_autoload_register('autoload');

Create Our Templates Class

The template class will have some key methods in it that use Mustache and render the content/data.

In our __contruct method, we will initialize the Mustache Engine and add our partials to the object. This will help when we go to use our partials below.

Next, we create the render method. This method will get the content from the view HTML and parse it using Mustache. For the purposes of the next block of code, we have coded a $data array that will be used for the home page. In a few steps below, we will create a method data that uses a switch statement to get the content for multiple pages.

Finally, we have getPageURL. This method grabs the current page from the URL and allows us to use the render function to pull the appropriate template from the views folder.

<?php
class Templates {
    private $m;

    public function __construct(){
        $this->m = (new \Mustache_Engine(
            [
            'partials_loader' => new \Mustache_Loader_FilesystemLoader('views/partials'),
            ]
        ));
    }

    public function render($template) {
        $data['content'] = [
           'title' => 'Home',
           'heading' => 'Welcome to the home page!',
           'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        ];
        $template = @file_get_contents('views'. $template.'.html');
        if($template === false) {
            $template = file_get_contents('views/404.html');
        }
        return $this->m->render($template, $data);
    }

    public function getPageURL() {
        $url = explode('?', $_SERVER['REQUEST_URI']);
        return ($url[0] == '/' ? '/home' : $url[0]);
    }
}

Notice the @ symbol on the file_get_contents method. This will prevent warnings from showing if the file is not found. We will handle that with our 404 template call.

Setup Our First Template

We are now going to use the {{}} Mustache variables in our simple HTML.

When you see the {{ variable }}, this will print out a variable that matches the data being sent over. In our code, we use {{ content.title }} for the title. This tells the template to look for an array content and add the value from the title object. If you need the template to produce a rendered object, you would need to use {{{ variable }}}, otherwise, it just displays as text.

You will also notice {{> styles }} in the below code. This adds partials that match that name. We will get into that a bit more below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ content.title }}</title>
    {{> styles }}
</head>
<body>
    {{> header }}
    <main>
        <h1>{{ content.heading }}</h1>
        <p>{{ content.content }}</p>
    </main>
    {{> footer }}
</body>
</html>

For the most part, you can duplicate this for each additional page unless you are adding different content or data to the template.

There are certain tags you use in Mustache. I will list the most common ones out here:

{{ variable }}
this allows you to add text from a variable.

{{{ variable }}}
this allows you to add rendered text (it is different from the {{}}).

{{# variable }} whatever you want here {{/ variable }}
if a variable is true

{{^ variable }} whatever you want here {{/ variable }}
if a variable is false

{{# array }}
   {{ item }}
{{/ array}}

get items from an array as a loop or use {{ array.item }} to get a single item

{{> folder/template }}
get a mustache partial from a folder, remember the templates in this folder must have the extension .mustache since it is rendered via the Mustache code.

Setup Partials

In this part of the tutorial, we are going to create a header, footer, and style partial. Think of a partial as a include or require file you would normally use in PHP.

In the views/partials folder, create the following files:

header.mustache

<header>
    {{# nav.header }}
        <div class="logo">[logo]</div>
        <ul>
            {{# links }}
                <li><a href="{{ url }}">{{ name }}</a></li>
            {{/ links }}
        </ul>
    {{/ nav.header }}
</header>

footer.mustache

<footer>
    {{# nav.footer }}
        <ul>
            {{# links }}
                <li><a href="{{ url }}">{{ name }}</a></li>
            {{/ links }}
        </ul>
    {{/ nav.footer }}
</footer>

styles.mustache

<link href="/css/style.min.css" rel="stylesheet">

You can create as many partials as you need, but for this tutorial, we will only be using these 3.

Create Your Nav Class

In your controllers folder, create your Nav.php file. We will use this to dynamically generate the header and footer links.

<?php

class Nav {

    public function header() {
        $header = [
            'links' => [
                ['url'=>'/', 'name'=>'Home'],
                ['url'=>'/about', 'name'=>'About'],
                ['url'=>'/contact', 'name'=>'Contact'],
            ]
        ];
        return $header;
    }

    public function footer() {
        $footer = [
            'links' => [
                ['url'=>'/about', 'name'=>'About'],
                ['url'=>'/contact', 'name'=>'Contact'],
            ]
        ];
        return $footer;
    }
}

Now that we have created the nav class, we can add it to our template class.

In your Templates.php file, add a new variable below private $m;, so it now says

private $m;
private $nav;

This will declare our class variable. So, now, in your constructor add $this->nav = new Nav(); under the Mustache_Engine variable. This will give us access to the nav class.

We will use this in a moment.

Create Dynamic Data

In the first part of the code, we added only data for the home page.

$data['content'] = [
    'title' => 'Home',
    'heading' => 'Welcome to the home page!',
    'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
];

We want to take this and make it more dynamic. Create a new function in the Templates.php file called data(). We are going to add our header, footer, and switch statement for the data. Your final code should look something like this:

public function data($page) {
    $data['nav']['header'] = $this->nav->header();
    $data['nav']['footer'] = $this->nav->footer();
    switch ($page) {
        case '/home':
            $data['content'] = [
                'title' => 'Home',
                'heading' => 'Welcome to the home page!',
                'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            ];
            break;
        case '/about':
            $data['content'] = [
                'title' => 'About',
                'heading' => 'Welcome to the about page!',
                'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                'additional' => ['item 1', 'item 2', 'item 3']
            ];
            break;
        case '/contact':
            $data['content'] = [
                'title' => 'Contact',
                'heading' => 'Welcome to the contact page!',
                'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
            ];
            break;
        default:
            $data['content'] = [
                'title' => '404',
                'heading' => 'Oops! Page Not Found',
                'content' => 'This page cannot be found, please try again.'
            ];
            break;
    }
    return $data;
}

This should allow us to create other HTML templates in our view (about.html,contact.html,404.html) as well as link to our header and footer partials.

Go ahead and create those pages if you have not already done so.

They should look like the home.html we have already created.

Update index.php For Template Changes

We initially created the index.php with a reference to the Mustache_Autoloader. We can now finish this page.

Add the following code to the end of the index.php:

$templates = new Templates();
$page = $templates->getPageURL();
$data = $templates->data($page);

echo $templates->render($page, $data);

That code should now pull in the Templates class and call the functions we created to display the data and get the templates.

Conclusion

You should be able to run your code now and see the different pages and content from your methods.

This is a simple way to create a dynamic website, and the cool thing is Mustache does not care where the data comes from. In this tutorial, we are hard-coding it in the method, but you can pull it from a database, an API, a JSON file, or even a CSV. As long as you are sending the data to the template, Mustache will display it where the {{ variable }} is.

The only thing you have to remember is, Mustache is a "logic-less" template engine. So you cannot do logic statements. The data has to be prepared prior to entering the template. So if you need to do a if statement, you will need to do it in the PHP code before rendering the template. Outside of that, it is a very useful tool for creating dynamic, data-driven websites.

Watch the video above or download the full codebase using my GitHub profile here: https://github.com/thedevdrawer/mustache-php.

Good luck coding with Mustache.

Read more articles on DevDrawer

Learn the Basics of RegEx in JavaScript

The Dev Drawer — Wed, 22 Feb 2023 17:32:50 +0000

In JavaScript, regular expressions (RegEx) can be used to match strings or parts of strings. To create a regular expression, you can use the RegEx constructor or the literal notation (/pattern/flags).

View This On YouTube

Using the RegExp Constructor

let pattern = new RegExp("hello");
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

Using the Literal Notation

let pattern = /hello/;
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

In addition to the test() method, you can use other methods such as exec(), match(), search(), and replace() to work with regular expressions.

Using match() Method

let pattern = /\d+/g;
let input = "I have 5 apples and 2 oranges.";
let result = input.match(pattern); // ["5", "2"]
console.log(result);

RegEx Flags

You can also use flags to modify the behavior of the regular expression. Some common flags include g (global), i (case-insensitive), and m (multiline).

Here is an example of using the i flag:

let pattern = /hello/i;
let input = "Hello World";
let result = pattern.test(input); // true
console.log(result);

In this example, the i flag makes the regular expression case-insensitive, so it matches Hello as well as hello.

Patterns and What They Mean

What does pattern /\d+/g mean in my third example?

The regular expression /\d+/g is made up of three parts: the forward slashes (/), the pattern \d+, and the flag g.

The forward slashes / define the start and end of the regular expression.
The pattern \d+ is a character set that matches one or more digits. The \d shorthand character is set for any digit (0-9), and the + quantifier specifies that one or more of the preceding elements must be present. So, it will match one or more digits together.
The flag g stands for global, which means it will find all matches rather than stopping after the first match. Without this flag, the regular expression would only return the first match.

So, the regular expression /\d+/g matches one or more digits together and returns all occurrences of that match in the input string.

In the third example code, it will match all digits in the input string.

What About String ReGex Using Expressions?

In JavaScript, you can also use regular expressions with string methods such as match(), search(), replace(), and split(). These methods allow you to work with strings in a more powerful way, using the pattern-matching capabilities of regular expressions.

match() Method

let input = "Hello World";
let result = input.match(/world/i); // ['World', index: 6, input: 'Hello World', groups: undefined]
console.log(result);

In this example, the match() method searches the input string for the first occurrence of the pattern world, case-insensitive. It returns an array containing the matched string.

replace() Method

let input = "Hello World";
let result = input.replace(/world/i, "javascript"); // "Hello javascript"
console.log(result);

In this example, the replace() method searches the input string for the first occurrence of the pattern world, case-insensitive, and replaces it with "javascript".

search() Method

let input = "Hello World";
let result = input.search(/world/i); // 6
console.log(result);

In this example, the search() method searches the input string for the first occurrence of the pattern world, case-insensitive. It returns the index of the first character of the matched string.

split() Method

let input = "Hello World";
let result = input.split(/\s+/); // ["Hello", "World"]
console.log(result);

In this example, the split() method splits the input string into an array of substrings, using the pattern \s+ (one or more whitespaces) as the separator.

You can also pass the regular expression object to these methods instead of a string representation of the pattern. For example, you can reference how it was done in the third example.

Getting Domain Variables From a String

This regex is very helpful if you are creating your own single-page application router. You may have seen it in my other tutorials or even in my other videos.

To get the domain from a string using a regular expression, you can use the match() method along with a regular expression pattern that captures the domain part of a URL. Here's an example of how you can do this:

let input = "https://thedevdrawer.com/path?query=value#hashtag";
let pattern = /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/im;
let result = input.match(pattern);
console.log(result[0]); // https://thedevdrawer.com
console.log(result[1]); // thedevdrawer.com

In this example, the regular expression pattern is as follows:

^ matches the start of the string
(?:https?:\/\/)? matches the optional "http://" or "https://" protocol, the ? quantifier makes this group optional
(?:[^@\/\n]+@)? matches the optional username and "@" symbol, which typically comes before the domain in a URL. The ? quantifier makes this group optional
(?:www\.)? matches the optional "www." subdomain, the ? quantifier makes this group optional
([^:\/?\n]+) matches one or more characters that are not ":", "/", "?", or a newline, and captures the domain name.
/im are the flags, i for case-insensitive and m for multiline

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, the domain is captured in the first group (result[1]) of the returned array.

In this example the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be "https://thedevdrawer.com" at index 0 and "thedevdrawer.com" at index 1.

Get The Query and Hash

To get the query and hash from a URL using a regular expression, you can use the match() method along with separate regular expression patterns for each part. Here's an example of how you can do this:

let queryPattern = /\?([^#]*)/
let hasOnlyPattern = /#(.*)/
let query = input.match(queryPattern)[1]
let hash = input.match(hasOnlyPattern)[1]
console.log(query)
console.log(hash)

In this example, we use two regular expression patterns:

/\?([^#]*)/ uses [^#]* to match any character except the '#' symbol, and captures everything after the question mark up until the '#' symbol (if any).
/#(.*)/ matches the hash symbol followed by zero or more characters .*, and captures everything after the hash. The parentheses () around .* create a capturing group that allows us to extract just the hash fragment.

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, we extract the captured group at index 1 (the second item in the array) to get just the query string and hash fragment.

In this example, the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be:

query: "query=value"
hash: "hashtag"

Get The Query Value

To just get the value from the query string using a regular expression, you can modify the regular expression pattern to capture only the value part of the key-value pair. Here's an example of how you can do this:

let queryOnlyPattern = /(?:[?&])(query)=([^&#]+)/
let match = input.match(queryOnlyPattern)[2]
console.log(match)

In this example, the regular expression pattern is as follows:

(?:[?&]) matches either the question mark or ampersand character that starts a key-value pair, but doesn't capture it.
(query) captures the key "query" in a group.
=([^&#]+) matches the equal sign and captures everything after it up until the next ampersand or hash symbol. The parentheses () around [^&#]+ create a capturing group that allows us to extract just the value part of the key-value pair.

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, we extract the captured group at index 2 (the third item in the array) to get just the value of the "query" key.

In this example, the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be:
value: "value"

NOTE: Keep in mind that this regex pattern is designed to match a specific format of URL, and may not work for all types of URLs or query/hash strings. It may require tweaking or additional patterns to match other formats.

Hopefully, this helped you understand regular expressions in JavaScript in case you had any questions about some of my previous videos that used them. If you have any questions, feel free to leave a comment below.

Read more articles on DevDrawer

How to Count Words and Characters in JavaScript

The Dev Drawer — Wed, 18 Jan 2023 23:11:56 +0000

Most if not all developers have used some sort of character counter online to validate SEO, or to just see how many characters a string has. You can do this on your own website or internal tooling. It is simple JavaScript and can have a wide variety of uses throughout your career as a JavaScript developer.

In this tutorial, we'll be exploring how to count words and characters in JavaScript. We'll be using the String constructor and the length property to get the word and character count for a string.

View This On YouTube

File Structure

index.html
/sass
     style.scss
/js
     Count.js
/css (generated by Sass)
   style.css
   style.min.css

Our HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character and Word Counter</title>
    <link rel="stylesheet" href="/css/style.min.css">
</head>
<body>
    <div class="main">
        <h1>Count Your</h1>
        <h2>Words and Characters</h2>
        <div class="card">
            Words
            <span class="word-count">0</span>
        </div>
        <div class="card">
            Characters
            <span class="character-count">0</span>
        </div>
        <textarea class="count__textarea">This is sample text that should be counted on load.</textarea>
        You've written <span class="word-count">0</span> words and <span class="character-count">0</span> characters.
    </div>
    <script src="/js/Count.js"></script>
</body>
</html>

The basic HTML is simple and has a textarea and different spans (2 displayed as cards, and 2 inline texts) to show the counts.

Our Count JS Class

class Count {
    constructor() {
        this.textArea = document.querySelector(".count__textarea")
        this.wordCount = document.querySelectorAll(".word-count")
        this.charCount = document.querySelectorAll(".character-count")
        /*
        bind(this) is used to make sure that the this keyword inside the updateCount method refers to the Count class
        */
        window.addEventListener("load", this.updateCount.bind(this))
        this.textArea.addEventListener("input", this.updateCount.bind(this))
    }

    /**
     * trim() removes whitespace from both sides of a string
     * if the value is empty, return 0
     * split() splits a string into an array of substrings, and returns the new array
     * @returns {number} the number of words in the textarea
     */
    countWords() {
        const value = this.textArea.value.trim()
        if(!value) return 0
        return value.split(/\s+/).length
    }

    /**
     * length returns the length of a string
     * @returns {number} the number of characters in the textarea
     */
    countChars() {
        return this.textArea.value.length 
    }

    /**
     * update the word and character count
     * forEach() calls a function once for each element in an array, in order
     * toString() converts a number to a string
     * @returns {void}
     */
    updateCount() {
        const numWords = this.countWords()
        const numChars = this.countChars()

        this.wordCount.forEach((wordCount) => {
            wordCount.textContent = numWords.toString(10)
        })

        this.charCount.forEach((charCount) => {
            charCount.textContent = numChars.toString(10)
        })
    }
}

new Count() // create a new instance of the Count class

This is a really easy-to-use and simple class that gets the spans and textarea. Once it has those it either listens on page load or when the textarea input is changed.

Once one of those events happens, it simply counts the words and characters and then displays the count in the spans we created in the HTML.

Sample Styles

I created a sample style in Sass. You don't have to use it for your project, but it basically displays the cards and makes the inline text spans bold. You can copy the following to make it look just like my tutorial.

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

$font-family: 'Open Sans', sans-serif;
$font-size:16px;
$primary-color: #38a4ef;

body {
    font-size: $font-size;
    font-family: $font-family;
    width:100%;
    min-height:100vh;
    background-color:$primary-color;
    padding:0;
    margin:0;
    color:#fff;
    overflow:hidden;
    .main {
        width:60%;
        text-align:center;
        margin:10% auto;
        h1,h2 {
            margin:0;
            padding:0;
        }
        .card {
            background-color:#fff;
            padding:3rem;
            border-radius: 5px;
            width:200px;
            display:inline-block;
            margin:1rem;
            color:#333;
            box-shadow: 15px 15px 0px 0px rgba(0,0,0,.2);
            span {
                font-size: 2rem;
                display:block;
            }
        }
        textarea {
            display:block;
            width:calc(100% - 2rem);
            height:200px;
            border:0;
            margin:1rem 0;
            padding:1rem;
            font-size: $font-size;
            border-radius: 5px;
            &:focus {
                outline:none;
            }
        }
        .word-count, .character-count {
            font-weight: bold;
        }
    }
}

Conclusion

There you go. With a few lines of code, you can create your own internal character and word counters using vanilla JS. I hope this helps. Let me know if you have any questions.

Read more articles on DevDrawer

An Introduction to Laravel Development: Features, Benefits, and Getting Started

The Dev Drawer — Wed, 04 Jan 2023 04:39:13 +0000

Laravel is a free, open-source PHP web framework used for web application development. It was created by Taylor Otwell in 2011 and has since become one of the most popular PHP frameworks, with a large and active community of developers. Laravel is known for its elegant syntax, extensive documentation, and robust set of features, making it a popular choice for developers building modern web applications.

Watch Which PHP Framework Should You Use in 2023? on YouTube.

In this article, we will explore the key features and benefits of Laravel development, as well as how it compares to other popular PHP frameworks. We will also delve into the basics of Laravel development, including installation, routing, and working with controllers and views.

Features and Benefits of Laravel

One of the main reasons developers choose Laravel is its rich set of features and tools that make it easy to build modern, feature-rich web applications. Some of the key features and benefits of Laravel include:

MVC architecture: Laravel follows the model-view-controller (MVC) architectural pattern, which separates an application into three components: the model, which represents the data and business logic; the view, which represents the user interface; and the controller, which handles user input and communicates with the model and view. This architecture helps to ensure a clean, modular codebase and makes it easier for developers to write and maintain code.

Eloquent ORM: Laravel comes with a built-in object-relational mapper (ORM) called Eloquent, which allows developers to work with databases using simple PHP objects. This makes it easier to query and manipulate data, and helps to reduce the amount of SQL code that needs to be written.

Artisan console: Laravel includes a command-line interface called Artisan, which provides a number of useful commands for tasks such as migrating and seeding databases, creating controllers and models, and more. Artisan can also be extended with custom commands, making it easy to automate repetitive tasks and build custom workflows.

Blade template engine: Laravel uses the Blade template engine to generate HTML views, making it easy to create dynamic and reusable templates. Blade provides a number of helpful features, such as conditional statements, loops, and template inheritance, which can help to simplify view code and reduce the amount of duplication.

Homestead: Laravel includes Homestead, a pre-packaged Vagrant box that provides a convenient development environment for Laravel applications. Homestead includes a Linux-based virtual machine with PHP, MySQL, and other tools pre-installed, making it easy to get up and running with Laravel development.

Dependency injection: Laravel uses dependency injection to manage class dependencies, making it easier to manage and test code. Dependency injection allows developers to specify the dependencies of a class in the constructor, making it easier to swap out different implementations and mock dependencies for testing.

Reverse routing: Laravel's reverse routing feature allows developers to use named routes to generate URLs, making it easier to refactor routes and maintain a consistent URL structure across an application.

Package ecosystem: Laravel has a large and active community of developers who have created a wide range of packages and tools that can be easily integrated into Laravel applications. These packages can help to add new features and functionality to an application, such as payment processing, social media integration, and more.

Comparing Laravel to Other PHP Frameworks

Laravel is not the only popular PHP framework available, and developers may consider other options when choosing a framework for a new project. Some of the other popular PHP frameworks include:

CodeIgniter: CodeIgniter is a lightweight, fast and widely used. It has been around for a long time so it has the longevity and support you need for your project. CodeIgniter is extremely versatile and is almost was popular was Laravel.

Symfony: Symfony is a set of reusable PHP components that can be used to build web applications. It is known for its modular design and flexibility, and is often used as the foundation for large, complex projects. Symfony is generally considered to be more flexible and configurable than Laravel, but may require more setup and configuration.

Zend Framework: Zend Framework is a collection of PHP libraries and components that can be used to build web applications. It is known for its focus on security and performance, and is often used in enterprise-level projects. Zend Framework may be more suitable for developers who need a high level of control and customization, but may require a steeper learning curve than Laravel.

Yii: Yii is a high-performance PHP framework that is well-suited for building web applications with complex requirements. It is known for its fast performance and efficient database access, and is often used in large-scale projects. Yii may be a good choice for developers who need to optimize the performance of their application, but may be less beginner-friendly than Laravel.

Getting Started with Laravel Development

To get started with Laravel development, you will need to have PHP and a web server (such as Apache or Nginx) installed on your machine. Laravel also requires a database management system, such as MySQL or PostgreSQL.

Once these prerequisites are installed, you can use the Laravel installer tool to create a new Laravel project. This can be done by running the following command:

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

This will create a new Laravel project in a directory with the specified name. You can then navigate to the project directory and start the Laravel development server by running the following command:

php artisan serve

This will start the development server and make your Laravel application accessible at http://localhost:8000.

Routing in Laravel

In Laravel, routes are used to define the URLs that map to different parts of your application. Routes can be defined in the routes/web.php file, which is located in the root of your Laravel project.

Here is an example of a simple route that defines a URL and a corresponding controller action:

Route::get('/', 'HomeController@index');

In this example, the get method specifies that this route should be accessible via an HTTP GET request, and the / URL maps to the index action of the HomeController controller. When a user navigates to the / URL, the index action will be executed and the corresponding view will be displayed.

Laravel also supports route parameters, which can be used to pass data to a controller action. For example:

Route::get('users/{id}', 'UserController@show');

In this example, the {id} parameter will be passed to the show action of the UserController controller, and can be used to display data for a specific user.

Controllers and Views in Laravel

In Laravel, controllers are used to handle user input and communicate with the model and view layers of an application. Controllers are typically defined in the app/Http/Controllers directory, and are usually organized by the feature or resource they are responsible for.

Here is an example of a simple controller that defines an index action:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view('home.index');
    }
}

In this example, the index action returns a view called home.index, which is located in the resources/views directory.

Views are used to define the user interface of an application and are typically written in HTML, with embedded PHP code used to display data and logic. Laravel uses the Blade template engine to make it easy to create dynamic and reusable views.

Here is an example of a simple Blade template that displays a list of users:

@extends('layout.app')

@section('content')
    <h1>Users</h1>
    <ul>
        @foreach ($users as $user)
            <li>{{ $user->name }}</li>
        @endforeach
    </ul>
@endsection

In this example, the @extends directive specifies that this view should extend a layout view called layout.app, which defines the overall structure of the page. The @section directive defines a content block that can be overridden by child views, and the @foreach loop iterates over a list of users and displays their names.

Conclusion

Laravel is a powerful and popular PHP framework that makes it easy to build modern, feature-rich web applications. Its rich set of features and tools, including MVC architecture, Eloquent ORM, Artisan console, Blade template engine, and dependency injection, make it a popular choice for developers building all kinds of web applications. Whether you are a beginner or an experienced developer, Laravel offers a friendly and powerful development environment that can help you build high-quality web applications quickly and efficiently.

View More On YouTube

Check out my video where I give you the pros and cons of popular PHP frameworks you should use in 2023. You can see the embedded video below or click the link at the beginning of the article to watch it on YouTube.

Read more articles on DevDrawer

Which PHP Framework Should You Use in 2023?

The Dev Drawer — Fri, 09 Dec 2022 19:02:11 +0000

If you're looking to start a new project or update an existing one, then be sure to check out this explainer and the accompanying video! We'll give you some tips on which PHP framework to use in 2023, based on the needs of your project.

View This On YouTube

Most of the PHP frameworks in this explainer are frameworks I have familiarity with, some recently, some a long time ago. So, I try to be as objective as possible.

What is a PHP framework?

Before we list which are the best PHP frameworks to use, we need to first understand what a PHP framework is. PHP frameworks power anything from simple websites to big, complex web applications that manage millions of registrations and daily visits.

PHP frameworks have been in use for decades now (Phplib, the first PHP framework, dates back to pre-2000), and they’ve taken different forms, but their main purpose has stayed mostly the same. That purpose is: to help PHP developers by providing sets of commonly used functions, as well as libraries for common functionalities, and enforce to the use of best coding practices.

Think of a PHP framework as a skeleton that already provides a running system where you can embed your code without having to go through every detail from scratch.

When to use a PHP framework?

It may sound like a good idea for PHP programmers to use a PHP framework in almost every project, but there are many cases where using one might not be the best idea. It all depends on the project.

Let’s have a quick look at some of the pros and cons of using a PHP Framework.

Cons

Slower execution - A PHP framework usually adds complexity and overhead to a project. A PHP framework will always load some number of classes and libraries before running it. Sometimes the best solution might be to just write some custom code at the lowest abstraction level that will be faster and less complex than using a framework.
General Solutions for specific problems – A PHP framework provides a skeleton of libraries and functionality that’s ready to use and that should solve the most common problems a developer finds. When you’re choosing a framework, you should be careful to understand if it solves your problem, and then you should check if it fits the rest of your needs.
Learning curve - Frameworks pull us towards good, structured code and best practices, however, it may take time and effort to learn and master. If you can’t master the framework, you may end up with a big mess instead of structured code.
Limited control – When you use a PHP framework you are introducing an external dependency. With this, you’re accepting that the people in charge of the framework might stop supporting it at any time or move its development in a different direction. You also have to take into consideration the time needed to upgrade the framework to newer versions and having to deal with all the code updates that an upgrade might bring.

Pros

Quicker development times - A well-selected PHP framework already contains implementations for the most common problems you must solve built into it. It also usually provides a well-structured application architecture — Model-View-Controller or MVC. By using a framework, you get a fully functional template and only have to focus on building the features specific to your project. Don’t forget about the command-line tools most frameworks offer, they greatly reduce development time.
Security - PHP applications do not have good security by default and some developers may not be the best at creating their own security measures. By using a PHP framework, you’re using solutions that are continuously tested, reviewed, and scrutinized by the PHP community. Because most of them are open source, security issues are usually quickly noticed and fixed.
Easier collaboration - Using a PHP framework makes it easier for new developers to get started on the project. Even if they’re not already familiar with the framework, they’ll probably have access to complete documentation and tutorials for it to make the transition easier. It's difficult to get a definitive list of PHP frameworks. Wikipedia lists 40 PHP frameworks, but some of those are better described as content management systems. There are probably many more to choose from.

Here are some of the best PHP frameworks in use today.

Laravel - https://laravel.com/
Symfony - https://symfony.com/
CodeIgniter - https://www.codeigniter.com/
Zend Framework / Laminas Project - https://getlaminas.org/
CakePHP - https://cakephp.org/
Yii - https://www.yiiframework.com/
Slim - https://www.slimframework.com/
FuelPHP - https://fuelphp.com/

Laravel

Let’s get started with Laravel since it is the most popular today.

You can download it and review the documentation here: https://laravel.com/

Laravel was launched in 2011 and is currently on version 9, which was released in 2022. To use version 9, you must be on a PHP version greater than 8.

It's easy to get started with Laravel Homestead, an out-of-the-box virtual development environment. Laravel Homestead is an official pre-packaged Vagrant box that provides you with a wonderful development environment without requiring you to install PHP, a web server, or any other server software on your local machine. No more worrying about messing up your operating system.

If you're a Mac user, you also have the choice of using Laravel Valet as your development environment. Laravel Valet also supports Symfony, CakePHP 3, Slim, and Zend, as well as WordPress

Laravel uses a templating engine called Blade. One advantage it has over other templating engines is that you can use PHP within Blade.
Packalyst, a collection of Laravel packages, has more than 15,000 packages you can use in your projects to help you get started quicker.
Laravel provides a range of security features and methods: for authentication, authorization, email verification, encryption, hashing, and password reset.
Laravel's Eloquent ORM and fluent query builder guard against SQL injection attacks as they use PDO parameter binding.
Cross-Site Request Forgery protection, which uses a hidden CSRF form token, is also enabled by default.
The artisan console command line tool that Laravel has speeds up development by allowing developers to automate repetitive tasks and generate skeleton code fast.
Laravel was the fastest of the PHP frameworks I tried and The Laravel ecosystem has several useful tools, such as
Mix for compiling CSS and JS assets
Socialite for OAuth authentication

Laravel also benefits from a large community of developers, like WordPress. You can find them at Laracasts, a learning portal with courses, a blog, podcasts, and a forum. Laravel.io, is a community portal with over 45,000 users and Laravel even has a subreddit, home to 50,000 Laravel artisans.

Symfony

Next, we have Symfony, the second most used PHP framework.

You can download it and review the documentation here: https://symfony.com/

Symfony was launched in 2005 and is currently on version 6.1.5, which was released in 2022. To use version 6.1.5, you must be on a PHP version greater than 8.

Symfony is both a PHP framework and a collection of PHP components for building websites. Symfony is an excellent choice for websites and apps that need to be scalable. Its modular component system is very flexible and lets you choose the components you need for your project without forcing you to use bloatware.

Out of the most popular PHP frameworks, Symfony supports the most database types like Drizzle, MySQL, Oracle, PostgreSQL, SAP Sybase SQL Anywhere, SQLite, and MSSQL.

The best way to interact with your databases is via the Doctrine ORM. Symfony uses database mappers to map objects to the database. This keeps your object model and the database schema separate meaning that if you change the database column, you don't need to make any changes in your code base.

Debugging Symfony projects is pretty straightforward with its built-in toolbar. Symfony uses the Twig templating engine, which is easy to learn, it's fast and it's secure.

Packagist lists over 4,000 Symfony packages available to you to download and use.

Symfony has commercial backing from SensioLabs. This means there's professional support available, unlike most other PHP frameworks it also has long-term support releases that have three full years of support.

In addition, the Symfony community is huge with over 600,000 developers actively involved.

CodeIgniter

Let’s move on to CodeIgniter.

You can download it and review the documentation here: https://www.codeigniter.com/

CodeIgniter was launched in 2006 and is currently on version 4.1, which was released in 2022. To use version 4.1, you must be on a PHP version greater than 7.4.

CodeIgniter helps you build web apps quickly as it has minimal configuration and is known for its speed. It was the second fastest of the four PHP frameworks I tried in my tests.

The framework has a light footprint of only 1.2 megabytes. So, no bloat. You can add exactly the components you need. CodeIgniter is flexible and encourages development with the MVC architecture, but you can code non-MVC applications too.

The framework includes defenses against CSRF and XSS attacks. Plus, context-sensitive escaping and a content security policy.
CodeIgniter supports multiple methods of caching to help with speeding up your apps. CodeIgniter has an easy learning curve compared to the other frameworks and is quite extensible.

CodeIgniter's community consists of a forum and Slack group.

Zend Framework / Laminas Project

Another favorite of hard-core developers is The Zend Framework.
The Zend Framework was launched in 2006 and is a long-established PHP framework that is now transitioning to the Laminas Project. Migration to Laminas is strongly recommended as Zend is no longer updated.

You can download it and review the documentation here: https://getlaminas.org/

The Laminas Project consists of three parts:

Laminas components and MVC
Mezeo
Laminas API tools

The Zend Framework has had more than 570 million installations and is the most used PHP framework by enterprises and businesses.

Like Symfony, you can use just the components you need.
The Laminas community has a forum and Slack group for collaboration and support.

The Zend Framework probably has the hardest learning curve compared to all of the other frameworks, but it can help you establish yourself as a full-stack developer at many larger corporations if your career is going that route.

CakePHP

Next is an oldie but a goodie.

You can download it and review the documentation here: https://cakephp.org/

CakePHP was launched in 2005 and is currently on version 4.4, which was released in 2022. To use version 4.4, you must be on a PHP version greater than 7.4.

CakePHP serves up fast and clean PHP development and configuration is minimal.

You don't have to mess around with XML or YAML files. Once you set up your database, you can begin coding. CakePHP even has its own built-in ORM, which is quick and simple to use.

Security features include methods for encryption, password hashing, safeguarding form data, and CSRF protection.

CakePHP's components and helpers simplify development and reduce the number of daily tasks you must complete. GitHub has a helpful list of CakePHP resources and plugins that you can use in your project.

You can learn CakePHP through their Cookbook documentation, online training, and CakeFest conferences. You can also find friendly CakePHP bakers through their forums; Stack Overflow, IRC, and Slack.

Pro support is available too from CakeDC, run by CakePHP founder, Larry Masters.

Yii Framework

Next up, Yii.

You can download it and review the documentation here: https://www.yiiframework.com/

Yii was launched in 2006 and is currently on version 2.0.46, which was released in 2022. To use version 2.0.46, you must be on a PHP version greater than 7.4.

Yii means simple and evolutionary in Chinese. It also stands for, Yes It Is.

You can get up and running with Yii within minutes because the documentation is well-written and easy to follow. Yii is fast, lightweight, and easy to get started with.

Yii framework has several security measures, such as bCrypt password hashing, encryption, authentication, and authorization.

Yii has a code generator called Gii that helps you quickly build skeleton code, saving you development time.

The community offers live support via Slack or IRC. There's also a discussion forum and social media channels. The community rewards its active members with badges and entries in a hall of fame to keep the community involved and helpful.

Slim

Need something smaller, try Slim.

You can download it and review the documentation here: https://www.slimframework.com/

Slim was launched in 2010 and is currently on version 4.10.4, which was released in 2022. To use version 4.10.4, you must be on a PHP version greater than 7.4.

Slim is a stripped-down agile micro-PHP framework that focuses on receiving an HTTP request, invoking a callback, and returning an HTTP response.

Slim's code base is lean as it has no third-party dependencies. As a result, it's very fast. Slim is particularly suited to building small apps and APIs.

If you need more from the framework, Slim integrates with both first-party and third-party components. It is easy to learn and understand and you can build a Hello World app in minutes.
Professional support for Slim is available from Tidelift.

FuelPHP

Finally, the youngest framework on my list, FuelPHP.

You can download it and review the documentation here: https://fuelphp.com/

FuelPHP was launched in 2014 and is currently on version 1.9, which was released in 2021. To use version 1.9, you must be on a PHP version greater than 5.3.

FuelPHP is a community-driven PHP framework with over 300 contributors over its lifetime.

FuelPHP uses MVC but also supports HMVC. This adds another layer between the controller and the view. The advantages of the HMVC design pattern are better code organization, greater modularity, more extensibility, and encourages code reuse. You can choose the file and folder structure you want for your project as there are few constraints.

FuelPHP takes security seriously, with features like output encoding, CSRF protection, input, URI, and XSS filtering and escaping user input passed into SQL statements.

FuelPHP has its own command line utility, Oil, which you can use to run tasks, debug code and generate common components.

The FuelPHP ORM is potent yet lightweight.

You can join the FuelPHP community in their forums and on Facebook and Twitter.

What is the best PHP framework for beginners?

The best frameworks for beginners are the ones that are simpler and leaner. If you are just starting out with PHP framework development, keep it small and learn more about the commonly used MVC architecture. Learn this and then move to more robust solutions.

This means Yii, CakePHP, and Slim.

If you have experience with MVC architecture, you may be able to start with Laravel or CodeIgniter since their documentation is phenomenal.

If you are going into the corporate world, maybe Zend / Laminas Project would be the best route for you to learn due to its business implementation capabilities but be warned, there is a learning curve.

Which framework you opt for will depend on the type of app you're building. There are PHP frameworks for all tastes, ranging from the ultra-minimal to everything but the kitchen sink.

Read more articles on DevDrawer

Digital Clock with Alarm in JavaScript + HTML

The Dev Drawer — Tue, 04 Oct 2022 20:18:36 +0000

Have you ever wanted to build your own alarm clock but lacked the tools and hardware needed? Well, why not make one using JavaScript and HTML?

In this tutorial, I show you how to make your own alarm clock that gives you the ability to display the time digitally and set an alarm that works. Simple code using vanilla JavaScript, HTML, and CSS only.

Build your own alarm clock in just 30 minutes.

View This On YouTube

File Structure

index.html
/sass
     style.scss
/js
     clock.js
/css (generated by Sass)
   style.css
   style.min.css
/sounds
   alarm.mp3
bg.jpg
logo.png

Our HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock with Alarm</title>
    <link rel="stylesheet" href="/css/style.min.css">
</head>
<body>
    <div class="main">
        <div id="time"></div>
        <div id="alarm">
            <span></span>
            <button type="button" id="turnoff_alarm">Turn Off Alarm</button>
            <audio id="alarm_audio" loop muted autoplay src="/sounds/alarm.mp3"></audio>
        </div>
    </div>
    <script src="/js/clock.js"></script>
</body>
</html>

The basic HTML is simple and has a time div, an alarm div, a place for the alarm audio, and a button.

Our Clock JS Class

class Clock {
    constructor(timeDiv, alarmDiv, alarmTime) {
        this.timeDiv = timeDiv; // div to display time
        this.alarmDiv = alarmDiv; // div to display alarm
        this.alarmTime = alarmTime; // time to set alarm
        this.alarmAudio = document.querySelector(this.alarmDiv + " #alarm_audio"); // audio element to play alarm

        // set time on initial load
        let tim = document.querySelector(this.timeDiv);
        let t = new Date();
        let time = t.toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
        });
        tim.innerHTML = time;

        // set alarm on initial load
        this.setAlarm();

        // update time every second
        setInterval(this.updateTime.bind(this), 1000);
    }

    updateTime() {
        let tim = document.querySelector(this.timeDiv);
        let t = new Date();
        let time = t.toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
        });
        tim.innerHTML = time;

        if (time == this.alarmTime) {
            this.playAlarm();
        }
    }

    setAlarm() {
        const alarm = document.querySelector(this.alarmDiv + " span");
        alarm.innerText = `Alarm (${this.alarmTime})`;
    }

    /**
     * Play alarm when the time matches the alarm time
     */
    playAlarm() {
        this.alarmAudio.currentTime = 0; // reset audio to start
        this.alarmAudio.muted = false; // unmute audio
        this.alarmAudio.volume = 0.5; // set volume
        this.alarmAudio.play(); // play audio

        document.querySelector(this.alarmDiv + " button").style.display = "block";
        document
            .querySelector(this.alarmDiv + " button")
            .addEventListener("click", () => this.turnOffAlarm(this.alarmAudio));
        document.body.style.background = "#38a4ef";
    }

    turnOffAlarm(alarmAudio) {
        alarmAudio.muted = true; // mute audio
        document.querySelector(this.alarmDiv + " button").style.display = "none";
        document.body.style.background = 'url("/bg.jpg")';
    }
}

This is a simple class that gathers variables for the divs and time that will be used in the project. Once it has the variables, it then creates the clock and adds the current time which changes every second to implement a second-based digital clock.

It then sets the alarm based on the this.alarmTime variable sent to the constructor.

Finally, it implements the second change using setInterval. This will allow it to rerun the code once every second.

Based on the following code, it will check to see if it needs to play an alarm.

if (time == this.alarmTime) {
    this.playAlarm();
}

If the time equals the value set by the user, it then runs the playAlarm method. The playAlarm method starts the music in the background and changes the background color. Once this is done, it adds a button so the user can turn off the alarm and the entire process starts again.

To initialize the Clock class, you simply need to add the following code to either your main JS file or your HTML if you are copying my code as it is:

new Clock('#time', '#alarm', '02:38:00 PM')

Our Clock Styles

The clock styles are simple and just display a background image with large-format text for the clock itself.

body {
    font-family: 'Fjalla One', sans-serif;
    text-align:center;
    background-color:#000;
    position: relative;
    height:100vh;
    overflow:hidden;
    background-image:url('/bg.jpg');
    background-size:cover;
}

.main {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -60%);
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    #time {
        color:#fff;
        text-shadow: 3px 3px 0px #6d6d6d;
        font-size:100px;
        margin: 1rem 0;
    }
    #alarm {
        color: rgba(255,255,255,.5);
        font-size:30px;
        button {
            background-color: transparent;
            border:1px solid #fff;
            color:#fff;
            padding:15px 20px;
            font-size:20px;
            cursor: pointer;
            width:250px;
            margin:20px auto;
            display:none;
        }
    }
}

Conclusion

This will give you a simple clock with an alarm feature you can use on your website or as a simple alarm on your own local machine.

NOTE In order to use the audio element with modern browser policies, you must have user interaction. If you are using this as a personal alarm, you can simply "Allow Audio" in your site settings within your browser. If you are using this as a public alarm, you will need to add a button to the page that will allow the user to interact with the audio element.

Read more articles on DevDrawer

Simple Countdown Timer Using JavaScript

The Dev Drawer — Tue, 20 Sep 2022 18:23:48 +0000

One of the standard tools you need to know how to do in JavaScript is...how to manipulate time. To demonstrate this, we will build a countdown timer using vanilla JavaScript and CSS.

This is a simple project, but one that shows you how to manipulate time in JS, customize attributes in CSS, and finally add custom parameters to your JS class.

View This On YouTube

File Structure

index.html
/sass
     style.scss
/js
     init.js
     countdown.js
/css (generated by Sass)
   style.css
   style.min.css

Our HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Clocks</title>
    <link rel="stylesheet" href="/css/style.min.css">
</head>
<body>
    <h2>Countdown Clock 1</h2>
    <div class="clock" id="clock1">
        <div data-value="days"></div>
        <div data-value="hours"></div>
        <div data-value="minutes"></div>
        <div data-value="seconds"></div>
    </div>
    <script src="/js/countdown.js"></script>
    <script src="/js/init.js"></script>
</body>
</html>

Now that we have the basic HTML structure down, we can create the JS class that adds data. Notice we are using data-value so we don't need to add a string in the HTML there, we will modify that will CSS.

Our Countdown JS Class

// class to create a countdown timer
class CountdownTimer {
    // setup timer values
    constructor({ selector, targetDate, backgroundColor = null, foregroundColor = null }) {
        this.selector = selector;
        this.targetDate = targetDate;
        this.backgroundColor = backgroundColor;
        this.foregroundColor = foregroundColor;

        // grab divs on frontend using supplied selector ID
        this.refs = {
            days: document.querySelector(`${this.selector} [data-value="days"]`),
            hours: document.querySelector(`${this.selector} [data-value="hours"]`),
            mins: document.querySelector(`${this.selector} [data-value="minutes"]`),
            secs: document.querySelector(`${this.selector} [data-value="seconds"]`),
        };
    }

    getTimeRemaining(endtime) {
        const total = Date.parse(endtime) - Date.parse(new Date());
        const days = Math.floor(total / (1000 * 60 * 60 * 24));
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        const mins = Math.floor((total / 1000 / 60) % 60);
        const secs = Math.floor((total / 1000) % 60);
        return {
            total,
            days,
            hours,
            mins,
            secs,
        };
    }

    updateTimer({ days, hours, mins, secs }) {
        this.refs.days.textContent = days;
        this.refs.hours.textContent = hours;
        this.refs.mins.textContent = mins;
        this.refs.secs.textContent = secs;
    }

    updateColors() {
        if (this.backgroundColor != null) {
            this.refs.days.style.background = this.backgroundColor;
            this.refs.hours.style.background = this.backgroundColor;
            this.refs.mins.style.background = this.backgroundColor;
            this.refs.secs.style.background = this.backgroundColor;
        }

        if (this.foregroundColor != null) {
            this.refs.days.style.color = this.foregroundColor;
            this.refs.hours.style.color = this.foregroundColor;
            this.refs.mins.style.color = this.foregroundColor;
            this.refs.secs.style.color = this.foregroundColor;
        }
    }

    startTimer() {
        const timer = this.getTimeRemaining(this.targetDate);
        this.updateTimer(timer);
        this.updateColors();
        setInterval(() => {
            const timer = this.getTimeRemaining(this.targetDate);
            this.updateTimer(timer);
        }, 1000);
    }
}

This class will control the div and data-values we need to replace. We create this as a class so we can simply add a few lines of code to add the countdown on any page through our init.js file.

This class takes the selector, the targetDate, and optionally a backgroundColor and foregroundColor. We will pass these values when we call the class.

Calling Our Class

In your init.js file, you can call the countdown class using something like this:

const timer = new CountdownTimer({
    selector: "#clock1",
    targetDate: new Date("September, 21 2022 18:00:00"),
});

That code will initialize our class and start a countdown to the date we provided. You can also add a background and foreground color to make it a little more custom. They are not required but it would look something like this:

const timer = new CountdownTimer({
    selector: "#clock1",
    targetDate: new Date("September, 21 2022 18:00:00"),
    backgroundColor: "rgba(0,0,0,.15)",
    foregroundColor: "rgba(0,0,0,.50)",
});

timer.startTimer();

You must use both background and foreground colors if you customize one or the other. We have it set up for a null value, but in the end, if you use one, you must use the other.

It is that easy. Now that you have your class set up, you can add your countdown to any div you want. You can also add multiple countdowns on one page. For example:

<h2>Countdown Clock 1</h2>
<div class="clock" id="clock1">
    <div data-value="days"></div>
    <div data-value="hours"></div>
    <div data-value="minutes"></div>
    <div data-value="seconds"></div>
</div>

<h2>Countdown Clock 2</h2>
<div class="clock" id="clock2">
    <div data-value="days"></div>
    <div data-value="hours"></div>
    <div data-value="minutes"></div>
    <div data-value="seconds"></div>
</div>

// setup timer with set textual date in the future
const timer1 = new CountdownTimer({
    selector: "#clock1",
    targetDate: new Date("September, 21 2022 18:00:00"),
});

timer1.startTimer(); 

// setup timer with date set in the future
const timer2 = new CountdownTimer({
    selector: "#clock2",
    targetDate: new Date("September, 21 2022 18:00:00"),
    backgroundColor: "rgba(0,0,0,.15)",
    foregroundColor: "rgba(0,0,0,.50)",
});

timer2.startTimer();

Note In order to use this class on multiple divs, you must pass a unique selector that matches the div ID. In this case, we are using #clock1 and #clock2 that matches our div IDs.

Our Countdown Styles

This part is pretty standard if you have ever used CSS or Sass. Note in the Sass, we are customizing the countdown divs using their data-value attribute. This is where we add the text for our div (Days, Hours, Mins, Secs).

body {
    background-color: #38a4ef;
    color:#fff;
    font-size:16px;
    text-align:center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.clock {
    display:block;
    margin: 0 auto;
    max-width:80%;
    div {
        background-color:rgba(255,255,255,.25);
        color:#fff;
        display:inline-block;
        padding:2rem;
        margin: 0 1rem;
        font-size:2.5rem;
        width: calc(10% - 2rem);
        text-align:center;
        font-weight:bold;
        border-radius:5%;
        &[data-value*="days"]:after, &[data-value*="hours"]:after, &[data-value*="minutes"]:after, &[data-value*="seconds"]:after {
            display:block;
            font-size:.75rem;
            margin-top:.25rem;
            font-weight: 300;
        }
        &[data-value*="days"]:after {
            content:"Days"
        }
        &[data-value*="hours"]:after {
            content:"Hours"
        }
        &[data-value*="minutes"]:after {
            content:"Minutes"
        }
        &[data-value*="seconds"]:after {
            content:"Seconds"
        }
    }
}

@media screen and (max-width: 820px) {
    .clock {
        max-width:90%;
        div {
            width:calc(15% - 2rem)
        }
    }
}

@media screen and (max-width: 767px) {
    .clock {
        max-width:100%;
        div {
            width:calc(30% - 4rem);
            margin:.5rem;
            padding: .5rem;
            font-size:1rem;
            &[data-value*="days"]:after, &[data-value*="hours"]:after, &[data-value*="minutes"]:after, &[data-value*="seconds"]:after {
                font-size:.5rem;
            }
        }
    }
}

We are simply using the :after CSS selector to add the words to the div. This prevents us from having to edit it each time we place it on a page.

I have also added the responsive media queries to our Sass stylesheet so it should work on tablets and mobile phones.

Conclusion

There you have it, a vanilla JavaScript countdown timer. It is a simple project, yet goes over some pretty cool things you can do with JS and CSS. I hope it helps in your future projects.

Read more articles on DevDrawer

Dynamically Create A PDF Using PHP

The Dev Drawer — Fri, 02 Sep 2022 15:33:43 +0000

In this tutorial, I am going to show you how to use PPH to dynamically create a PDF. We will be using mPDF as our generator since it has the most functionality of all of the PDF generator packages.

View This On YouTube

Download mPDF

To get started, we need to get mPDF into our project. Open your project in either a terminal or CMD and run the following composer call.

composer require mpdf/mpdf

This will add mPDF to your project under the vendor folder. From there, you need to create a index.php file and require the composer autoloader using the following code.

require_once __DIR__ . '/vendor/autoload.php';

Now that you have included the autoloader, you can simply call the mPDF class using the following code:

$mpdf = new \Mpdf\Mpdf();

This will allow you to initiate the package when you need it. You can test it by adding the following to your file:

$mpdf->WriteHTML('<h1>Hello World</h1>');
$mpdf->Output();

Now, just browse out to your website and you should see a PDf with the words Hello World on it.

Password Protection

Just in case you need it, you can add a password to your document. You can either set the password to be used when the document is viewed, printed, or saved.

To do this, you use the following function. Add it just below where the $mpdf = new \Mpdf\Mpdf(); code you wrote previously.

SetProtection ([$permissions], $user_password, $owner_password, $length)

$mpdf->SetProtection([], 'UserPassword', 'MyPassword');

Your protection permissions are as follows:

'copy'
'print'
'modify'
'annot-forms'
'fill-forms'
'extract'
'assemble'
'print-highres'

Set File Properties

You can easily add or change the file properties by adding the following methods just below the $mpdf = new \Mpdf\Mpdf(); code you wrote previously or if you are using the password protection above, just below that.

$mpdf->SetTitle('The DevDrawer Is Awesome'); // add a document title
$mpdf->SetAuthor('The DevDrawer'); // add the author name

Headers and Footers

Prior to adding any content to your PDF, you may want to set up your header or footer. The standard header and footer have a line attached to them. Once you set up your header or footer you can easily remove this line.

Header:

$mpdf->defaultheaderline = 0; //remove this if you want the line
$mpdf->setHeader('|Document Title|');

Footer:

$mpdf->defaultfooterline = 0; // remove this if you want the line
$mpdf->setFooter('Document Title|{DATE F j, Y}|{PAGENO}');

In both the header and the footer, you may notice the pipe characters(|). These allow you to space out your header or footer using left, center, and right. So essentially, something like this: left|center|right.

You can also use abstract shortcodes for certain things like a date {DATE F j, Y} or page number {PAGENO}. The date uses standard PHP date formatting.

Add A Stylesheet

You can use the basic formatting of the PDF (the best way is tables blah), but you can also use inline CSS or external CSS stylesheets.

First, create your stylesheet. Keep in mind that never every style will translate well into the PDF. In our case, we will create a simple /style.css to go with our PDF.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
body {
    font-family: 'Open Sans', sans-serif;
}
h1 {
    font-family: 'Roboto', sans-serif;
}
ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

Now, we can use PHP to get the stylesheet and use it on our PDF. Add the following code prior to any HTML content.

$stylesheet = file_get_contents('style.css');
$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);

This code will get the stylesheet and add it to our header to be used with the PDF. Keep in mind that you can also use inline CSS if you need to.

Add A Watermark

Sometimes you need to watermark your documents for legal or aesthetic purposes. You can add a watermark on every page pretty easily.

$mpdf->SetWatermarkText('THE DEV DRAWER'); // set the watermark
$mpdf->showWatermarkText = true; // make it show
$mpdf->watermarkTextAlpha = .1; // set the opacity

Add A Barcode

This is a pretty cool feature if you want to add a barcode to your PDF. You could add a barcode for tracking or accounting purposes if needed.

Simply add the barcode HTML to your document and it will parse it out for you. I recommend using ISBN for common barcodes.

$mpdf->WriteHTML('<br><barcode code="123-456-7890" text="ISBN" class="barcode" />');

Using PHP to Generate HTML

You can also call a class or method that produces HTML for the PDF instead of inline like we did previously.

For example, we can create a class called Foo.php in a folder called includes. It may look something like this:

class Foo {
    public function bar() {
        $test = 'This is a test from a class';
        $test .= '<br><img src="images/1.jpg" style="width:300px; height:auto;">';
        $test .= '
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>';
        return $test;
    }
}

Then, we can add code to our index.php file to pull in the class so we can call it:

require_once __DIR__ . '/includes/Foo.php';

Then we call it using:

$mpdf->WriteHTML((new Foo())->bar());

There, now you have HTML code coming from an external class that you can build methods around.

PDF Output

You can either display your PDF in the browser or you can save it to a folder on your server or just have it download when it is called.

The standard display of the PDF is called like we have it in the first part of this tutorial above:

$mpdf->Output();

You can add flags to this call, to make it download (D) or save to your server (F). Those options would look like this:

$mpdf->Output('filename.pdf', 'D');

$mpdf->Output('filename.pdf', 'F');

Keep in mind, that you can only do one of the 3 options. The first one called is the one that mPDF uses.

mPDF Documentation

You can view more about mPDF by going to their website and viewing their documentation. There are a lot of features. In this tutorial, I cover the basics and most commonly used features.

Full mPDF Documentation

Conclusion

Now you should be able to successfully make a PDF using only PHP. The more content in the PDF the longer it takes to load, but this small library is a big resource when you need to make dynamic PDFs on the fly.

Read more articles on DevDrawer

Collapse / Expand Sidebar Menu Using JavaScript, HTML, & CSS

The Dev Drawer — Mon, 25 Jul 2022 16:16:05 +0000

Learn how to collapse / expand a sidebar menu using JavaScript, HTML, & CSS only. In this tutorial, we will build a fully responsive sidebar menu that can be expanded and collapsed using a button. This is commonly seen on modern administration dashboards.

Using CSS and JS we make our sidebar menu look tremendous and functional with a search bar/popup. I also tested and coded for responsive media queries so not only does it work on desktops, but also on mobile phones so your sidebar panel can look great for your entire project. Keep in mind this is a look-only tutorial but you can use it as the basis for your entire project's navigation.

View This On YouTube

Folder Structure

index.html
/images
   avatar.jpg
   logo.png
   mobile.svg
/sass
   style.scss
/js
   init.js
/css (generated by Sass)
   style.css
   style.min.css

Our HTML

The HTML of this tutorial is very simple. Essentially, we have a sidebar with a top and a bottom, then a main for the page content. This tutorial will not use BootStrap for its styling but we will use the icons so make sure to either use their icons by adding a reference to the bootstrap icons stylesheet or by adding your own.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collapse / Expand Sidebar Tutorial</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/style.min.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="sidebartop">
                <div class="logo">
                    <img src="/images/logo.png" alt="">
                </div>
                <div class="logo-mobile">
                    <img src="/images/mobile.svg" alt="">
                </div>
                <div class="menu">
                    <i class="bi bi-list"></i>
                </div>
            </div>
            <div class="search">
                <form action="">
                    <button type="submit" class="callSearch"><i class="bi bi-search"></i></button><input type="text" placeholder="Search" class="searchInput">
                </form>
            </div>
            <nav>
                <ul>
                    <li><a href="#"><i class="bi bi-speedometer"></i><span class="text">Dashboard</span></a></li>
                    <li><a href="#"><i class="bi bi-file-earmark"></i><span class="text">Pages</span></a></li>
                    <li><a href="#"><i class="bi bi-pencil-square"></i><span class="text">Posts</span></a></li>
                    <li><a href="#"><i class="bi bi-people"></i><span class="text">Users</span></a></li>
                    <li><a href="#"><i class="bi bi-gear"></i><span class="text">Settings</span></a></li>
                </ul>
            </nav>
            <div class="account">
                <div class="avatar">
                    <img src="/images/avatar.jpg" alt="">
                </div>
                <div class="name">
                    <h4>The DevDrawer</h4>
                    Adminstrator
                </div>
                <div class="logout">
                    <a href="#"><i class="bi bi-box-arrow-left"></i></a>
                </div>
            </div>
        </div>
        <div class="main">
            [page content here]
        </div>
    </div>
    <div class="searchWindow">
        <button type="button" class="cancelSearch"><i class="bi bi-x"></i></button>
        <h2>Search Our Site</h2>
        <form action="">
            <input type="text" placeholder="Enter your text">
            <button type="submit">Search</button>
        </form>
    </div>
    <script src="/js/init.js"></script>
</body>
</html>

Our Basic Sass

The stylesheet is an important part of this tutorial so you can copy over what I have below or use the classes and make them match your own branding.

There are a lot of styles but the following should get you started with placement and layout. I am using Open Sans for the font so I import that directly from Google Fonts.

Please keep in mind, that I have a Sass addon in my VS Code that helps generate the style.css and style.min.css that are referenced in the HTML code. You can download it here if you do not have it already: https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

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

$primary-color:#333;
$white: #fff;

body {
    color:$primary-color;
    padding:0;
    margin:0;
    position: relative;
    min-height:100vh;
    overflow:hidden;
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
}

.container {
    display:flex;
    flex-flow:row wrap;
    .sidebar {
        background-color:$primary-color;
        color:$white;
        width:30%;
        height:100%;
        padding:0 1rem;
        position: fixed;
        top:0;
        left:0;
        transition: width .10s ease-in-out;
        a {
            color:$white;
            text-decoration: none;
        }
        .sidebartop{
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding-top:1rem;
            height:55px;
            .logo {
                width:70%;
                img {
                    height:auto;
                    width:100%;
                }
            }
            .menu {
                width:20%;
                text-align:end;
                i {
                    cursor:pointer;
                    font-size:1.75rem;
                }
            }
            .logo-mobile {
                display:none;
            }
        }
        .search {
            display:flex;
            flex-direction:row;
            justify-content: space-between;
            align-items: flex-start;
            position: relative;
            margin:1rem 0;
            button {
                cursor:pointer;
                width:auto;
                background-color:transparent;
                border:0;
                color:$white;
                position: absolute;
                font-size:1.25rem;
                left:1.5rem;
                top:50%;
                transform: translate(-50%, -50%);
            }
            input {
                background-color:lighten($primary-color, 5%);
                border:0px;
                padding:1rem;
                border-radius: .5rem;
                width:calc(100% + 1rem);
                &::placeholder {
                    padding-left:1.5rem;
                }
            }
        }
        nav {
            ul {
                padding:0;
                margin:0;
                list-style:none;
                li {
                    display:block;
                    align-items:center;
                    padding:1.25rem 0;
                    position: relative;
                    background-color:transparent;
                    transition: background-color .25s ease-in-out;
                    a {
                        display:block;
                        i {
                            font-size:1.25rem;
                        }
                        .text {
                            position: relative;
                            left:1rem;
                            top:-.2rem;
                        }
                    }
                }
            }
        }
        .account {
            display:flex;
            justify-content: space-between;
            align-content:center;
            align-items:center;
            width:calc(100% - 2rem);
            position: absolute;
            bottom:1rem;
            .avatar {
                margin-right:1rem;
                width:20%;
                img {
                    border-radius:50%;
                    height:50px;
                    width:50px;
                }
            }
            .name {
                flex: 1 1 auto;
                h4 {
                    padding:0;
                    margin:0;
                }
            }
            .logout {
                flex: 1 1 auto;
                text-align: end;
                i {
                    font-size:1.5rem;
                }
            }
        }
    }
    .main {
        margin-left:calc(30% + 2rem);
        padding:1rem;
    }
}

Our JS

Our JS is what adds or removes our short class. Essentially, if will take the menu click and add a body class that shows the sidebar collapsed or expanded. You can run the code below and you should see a new class being added to the HTML body.

NOTE: You will not see the changes to the styles yet because we have not added the short class to our Sass but you should see the class being added.

NOTE: The JS below also adds a local storage item so that it will keep the selected state of the sidebar for the user.

const menu = document.querySelector(".menu"); // get menu item for click event

menu.addEventListener("click", function () {
    expandSidebar();
    showHover();
    getSearch();
});

/**
 * expand sidebar if it is short, otherwise collapse it
 */
function expandSidebar() {
    document.querySelector("body").classList.toggle("short");
    let keepSidebar = document.querySelectorAll("body.short");
    if (keepSidebar.length === 1) {
        localStorage.setItem("keepSidebar", "true");
    } else {
        localStorage.removeItem("keepSidebar");
    }
}

/**
 * show hover effect on sidebar
 */
function showHover() {
    const li = document.querySelectorAll(".short .sidebar li a");
    if (li.length > 0) {
        li.forEach(function (item) {
            item.addEventListener("mouseover", function () {
                const text = item.querySelector(".text");
                text.classList.add("hover");
            });
            item.addEventListener("mouseout", function () {
                const text = item.querySelector(".text");
                text.classList.remove("hover");
            });
        });
    }
}

/**
 * get search button click if short sidebar or mobile
 */
function getSearch() {
    document.querySelector(".callSearch").addEventListener("click", function (e) {
        e.preventDefault();
        if (
            document.querySelector("body").classList.contains("short") ||
            window.innerWidth <= 844
        ) {
            document.querySelector(".searchWindow").classList.toggle("active");
        }
    });
    document
        .querySelector(".cancelSearch")
        .addEventListener("click", function () {
            document.querySelector(".searchWindow").classList.toggle("active");
        });
}

/**
 * check local storage for keep sidebar
 */
function showStoredSidebar() {
    if (localStorage.getItem("keepSidebar") === "true") {
        document.querySelector("body").classList.add("short");
        showHover();
        getSearch();
    }
}

showStoredSidebar(); // show sidebar if stored in local storage

Adding Our Short Class to Sass

Now that we have the short class being added to the body of the HTML, we need to style it. So open your style.scss file and add the following to the bottom of it (outside of your current CSS).

This class will handle the collapse / expand look as well as hide unneeded items in the sidebar.

.short {
    .sidebar {
        width:5%;
        text-align:center;
        .logo, .searchInput, .text, .avatar, .name {
            display:none;
        }
        .sidebartop {
            display:block;
            height:75px;
            .logo-mobile {
                display:none;
            }
            .menu {
                width:100%;
                text-align:center;
            }
        }
        .text.hover {
            display: block !important;
            background-color:rgba(255,255,255,.9);
            color:$primary-color;
            padding:.5rem;
            box-shadow: 1px 1px 5px 0 rgba(0,0,0,.25);
            position: absolute;
            left:3rem;
            top:1rem;
            border-radius:.25rem;
        }
        .account {
            display:block;
            .logout {
                width:100%;
                text-align:center;
            }
        }
        .search {
            margin:1.75rem -.2rem;
        }
    }
    .main {
        margin-left:calc(5% + 2rem)
    }
}

Also, you should now be able to over the icons on the collapsed sidebar to see the hover text associated with them.

Search Popup

In the JS above, we added a function for a search that was unused at that time, but now we need to create a popup when the collapsed sidebar search icon is clicked since the search itself is not available from that screen.

So, first, let's add the Sass to show the popup correctly.

.searchWindow{
    position: fixed;
    height:100vh;
    width:100vw;
    background-color:rgba(51,51,51,.9);
    z-index:1;
    top:0;
    padding:1rem;
    text-align:center;
    color:$white;
    padding-top:20vh;
    display:none;
    input {
        background-color:darken($white, 25%);
        border:0px;
        padding:1rem .5rem;
        border-radius:.5rem;
        width:60vw;
        &::placeholder {
            padding-left:.5rem;
        }
    }
    button {
        background-color:transparent;
        border:2px solid $white;
        font-size:1rem;
        padding:1rem 2rem;
        color:$white;
        border-radius: .5rem;
        cursor:pointer;
        &.cancelSearch {
            border:0px;
            font-size:2rem;
            position: absolute;
            top:0;
            right:2vw;
        }
    }
    &.active {
        display:block;
    }
}

Now, using the JS function above and the CSS you should see a pop-over for the search window when you click the search icon on the collapsed sidebar.

Mobile Styling

Finally, we need to add mobile styling. This styling does not cover every type of mobile device but you should be able to use it to cover at least an iPhone for now. You can modify the styles to cover other screen sizes.

Below we cover the vertical and horizontal views on a phone.

@media (max-width:844px) {
    .container {
        .sidebar {
            width:5%;
            text-align:center;
            .logo, .searchInput, .text, .avatar, .name {
                display:none;
            }
            .sidebartop {
                display:block;
                height:auto;
                .logo-mobile {
                    display:block;
                    img {
                        height:auto;
                        width:80%
                    }
                }
                .menu {
                    display:none;
                }
            }
            nav {
                ul {
                    li {
                        padding:0;
                        a {
                            padding:0.6rem 0;
                        }
                    }
                }
            }
            .account {
                display:block;
                .logout {
                    width:100%;
                    text-align:center;
                }
            }
            .search {
                margin:1.5rem -.2rem;
            }
        }
        .main {
            margin-left:calc(5% + 2rem)
        }
    }
}

@media (max-width:390px) {
    .container {
        .sidebar {
            width:8%;
            nav {
                ul {
                    li {
                        padding:0;
                        a {
                            padding:2rem 0;
                        }
                    }
                }
            }
            .search {
                margin-top:4rem;
                margin-bottom:3rem;
                margin-left:-.5rem;
            }
        }
        .main {
            margin-left:calc(8% + 2rem)
        }
    }
    .searchWindow{
        padding:0;
        padding-top:10vh;
        input {
            width:calc(100% - 2rem);
        }
        button {
            width:calc(100% - 1rem);
            margin-top:.5rem;
        }
    }
}

Conclusion

Now, you should be done with your code and you should have a collapsable and expandable sidebar that keeps your settings in a local storage object and that works on mobile. Good luck.

Read more articles on DevDrawer

Geolocation Tutorial - Get User Location using Vanilla JS

The Dev Drawer — Tue, 05 Jul 2022 20:29:13 +0000

If you often use maps on your website, you may be interested in getting the geolocation of your user's location. In this tutorial, we go over how to find the latitude and longitude of your user after asking permission. Once we have those coordinates, we use an open-source map to plot their exact location within a visual interface.

NOTE: This tutorial uses Leaflet + OpenStreetMap but you can use the same methods to integrate Google maps.

View This On YouTube

This simple tutorial will only use 2 files. Your main index.html and your init.js.

Creating Our Frontend

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Geolocation Request Tutorial</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
<style>
    #map { height: 80vh; display:none; }
    #result { font-size:1.5rem; font-weight:bold; text-align:center; margin-bottom:.5rem; display:none; }
</style>
</head>
<body>
    <button type="button" id="showPosition">Show Position</button>
    <div id="result"></div>
    <div id="map"></div>
</body>
<script src="/js/init.js"></script>
</html>

Getting Location Permission

class Geolocation {
    // on success
    successCallback(position){
        let result = document.querySelector("#result") // get the result div
        result.style.display = "block" // show the result div
        result.innerText = "Lat: " + position.coords.latitude + ", Long: " + position.coords.longitude // display the latitude and longitude
    }

    // on error
    errorCallback(error){
        let result = document.querySelector("#result") // get the result div
        result.style.display = "block" // show the result div
        if(error.code == 1) { // if the user denied the request
            result.innerText = "You have not given permission to access your location."
        }else if(error.code == 2) { // if the position is unavailable
            result.innerText = "Your location is unavailable."
        }else if(error.code == 3) { // if the request times out
            result.innerText = "The request to get your location timed out."
        }else{ // if something else went wrong
            result.innerText = "An unknown error occurred."
        }
    }


    showPosition(){
        if(navigator.geolocation) { // if the browser supports geolocation
            navigator.geolocation.getCurrentPosition(
                this.successCallback,
                this.errorCallback
            ) // get the user's location
            let result = document.querySelector("#result")
            result.style.display = "block"
            result.innerText = "Getting the position information..."
        }else{
            alert('Your browser does not support geolocation') // if the browser doesn't support geolocation
        }
    }
}

const showPosition = document.querySelector("#showPosition")
showPosition.addEventListener("click", function (e) {
    e.preventDefault()
    let result = document.querySelector("#result")
    result.style.display = "block"
    new Geolocation().showPosition() // show the user's location
})

Once you run the code above, your browser should ask you for permission to use your location. If you accept, it will display your latitude and longitude in the #result div.

If you decline, it will show your error message in the same div.

Adding A Map

In the HTML code we added in the first section, you may have noticed a reference to Leaflet. This is what we are using for the map in this tutorial since it is open-source and free, however, you can simply use Google maps the same way once you get your latitude and longitude.

In your init.js file, add the following in your successCallback function.

let mapContainer = document.querySelector("#map") // get the map container
mapContainer.style.display = "block" // show the map container

const map = L.map("map").setView(
    [position.coords.latitude, position.coords.longitude],
    13
) // create a map and set the view to the user's location

const tiles = L.tileLayer(
    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    {
        maxZoom: 19,
        attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }
).addTo(map) // add the tiles to the map

const marker = L.marker([
    position.coords.latitude,
    position.coords.longitude
]).addTo(map) // add a marker to the map

Place it directly after your last result.innerText code. Once you run the combined code, you should see a map with a marker with the exact location you are supplying.

Conclusion

It is a simple script and can be used for other things or other scripts, not just a point on a map. Once you have access to your user's location, you can use it to direct them to specific pages or display specific content...so go wild and have fun with your new geolocation script.

Read more articles on DevDrawer

Implementing reCAPTCHA V3

The Dev Drawer — Sat, 25 Jun 2022 16:57:12 +0000

If you are being bothered by spam and bot submissions on your website or a client website, reCAPTCHA is your answer. reCAPTCHA is powered by Google and stands up to most bot spam. You may have used it before or you may be interested in using it now, but with V3 you may not know where to start.

In this tutorial, we will implement reCAPTCHA V3 from start to finish and use Vanilla JS to validate and submit our form using fetch.

View This On YouTube

NOTE: This tutorial uses WAMP as the server since we use PHP to process the sending of the email and validation of reCaptcha. You can use your own server setup. I used WAMP since it is easiest for most users to get started with.

Folder Structure

We are using a basic HTML structure with a single PHP file for processing the reCaptcha validation and sending the email. You can set up your files however you like but for the sake of this tutorial, you can replicate what I have below.

index.html
thanks.html
send.php
/assets
   /js
      init.js
   /sass
      style.scss
/css (generated by Sass)
   style.css
   style.min.css

Creating Our Form

We are using a basic HTML form without any processors. I have added Bootstrap for visual appearance but it is not required for this tutorial. I also included a CSS reference to the style.min.css file that is created by Sass.

In the form HTML, you will see the form elements and their error messages using the class invalid-feedback. Make sure you have the error message div as our JS relies on it. Also, make sure you have the entire form wrapped in a formfields div as I do below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <title>reCAPTCHA V3 Demo</title>
</head>
<body>
    <div class="container">
        <br>
        <h1 class="text-center">reCAPTCHA V3 Demo</h1>
        <br>
        <form method="post" id="contact" class="contact">
            <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
            <div class="formfields">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-element">
                            <input type="text" name="fname" id="fname" class="form-control form-control-lg" placeholder="First Name *">
                            <div class="invalid-feedback">
                                Please enter your first name.
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="col-md-6">
                        <div class="form-element">
                            <input type="text" name="lname" id="lname" class="form-control form-control-lg" placeholder="Last Name *">
                            <div class="invalid-feedback">
                                Please enter your last name.
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
                <div class="form-element">
                    <input type="text" name="email" id="email" class="form-control form-control-lg" placeholder="Email Address *">
                    <div class="invalid-feedback">
                        Please enter your email address.
                    </div>
                </div>
                <br>
                <div class="form-element">
                    <textarea name="message" id="message" cols="30" rows="10" class="form-control" placeholder="How can I help you? *"></textarea>
                    <div class="invalid-feedback">
                        Please enter a message.
                    </div>
                </div>
                <br>
                <button type="submit" class="btn btn-lg btn-primary" id="submit-button">Send Message</button>
                <br>
                <br>
                <p class="text-center">
                    <small>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</small>
                </p>
            </div>
            <div id="alert" class="text-center"></div>
        </form>
    </div>
</body>
</html>

That is it for the HTML for now. If you view this page, you should see a standard form.

JS Validation

In this section, we will handle the JS validation and display of our error or success messages. First, we load JS then we grab the form. Once the form is submitted we loop through the fields and validate them one by one. If they do not contain any data, we simply display an error message and highlight the field. If they are good, we highlight the field with a green border.

Once all fields are validated and are correct, we hide the form and display a waiting message.

window.addEventListener("load", function(){ // Wait for the page to load

    "use strict"; // Strict mode for JavaScript

    const form = document.querySelector(".contact") // Get the form

    form.addEventListener("submit", function (event){
        event.preventDefault() // Prevent the default action of the form
        let fields = document.querySelectorAll(".contact .form-control") // Get all the fields
        let valid = true
        for (var i = 0; i < fields.length; i++) {
            fields[i].classList.remove("no-error") // Remove the no-error class from all fields
            if(fields[i].value === ""){ // If the field is empty
                fields[i].classList.add("has-error")
                fields[i].nextElementSibling.style.display = "block"
                valid = false
            }else{ // If the field is not empty
                fields[i].classList.remove("has-error")
                fields[i].classList.add("no-error")
                fields[i].nextElementSibling.style.display = "none"
            }
        }
        if(valid){ // If all the fields are valid
            document.querySelector(".formfields").style.display = "none"
            document.querySelector("#alert").innerText = "Processing your submission, please wait..."
        }
    })
})

Just after your HTML body, add the following code to reference your JS file:

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

If you made it this far, then you should have a form that validates your inputs but does not show in color. We do that next with the CSS.

Sass

The CSS is how I like my fields to look so you can change it to however you want it to look or you can keep it like mine.

NOTE: Keep in mind I am using Sass to compile my CSS so you will need a processor like Live Sass Compiler for VS Code. I have it set up so it processes my Sass, it adds a style.css and style.min.css to my CSS folder.

body {
    color:#333;
}

.form-control {
    border-radius: 0px;
    border: 1px solid #333;
    &.form-control-lg {
        height:calc(3.5rem + 2px);
        padding:1rem 0.75rem;
        font-size:1rem;
    }
    &::placeholder {
        font-size:1rem
    }
    &.has-error {
        border:1px solid red;
    }
    &.no-error {
        border:1px solid green;
    }
}

.error {
    color:red;
}

.success {
    color: green
}

.btn {
    border-radius: 0;
    border:0;
    &.btn-primary {
        background-color:#38a4ef;
        &:hover {
            background-color: #2786c9;
        }

Now if you test your current code, you should see the validation as well as the colored error message or success box.

Creating Your reCAPTCHA V3 Keys

Sign in or create a new Google reCAPTCHA Admin Console account. You can use the following link to do so: https://www.google.com/recaptcha/admin

Once there, you can create a new V3 reCAPTCHA site by clicking the + sign. Make sure you use reCAPTCHA V3. Complete the fields and you are good to go. Once completed, you should be presented with a site and private key. If not, you can open your site and click the cog menu item on the top right.

Adding reCAPTCHA to Your Website

In your HTML, right above the init.js reference, add the following code, replace yoursitekey with your actual site key from above:

<script src="https://www.google.com/recaptcha/api.js?render=yoursitekey"></script>

Within your init.js, add the following code on the line after document.querySelector("#alert").innerText = "Processing your submission, please wait..."

Replace yoursitekey with your actual site key from above.

grecaptcha.ready(function() { // Wait for the recaptcha to be ready
                grecaptcha
                    .execute("yoursitekey", {
                        action: "contact"
                    }) // Execute the recaptcha
                    .then(function(token){

                        let recaptchaResponse = document.getElementById("recaptchaResponse")
                        recaptchaResponse.value = token // Set the recaptcha response

                        fetch("/send.php", {
                            method: "POST",
                            body: new FormData(form), // Send the form data
                        })
                            .then((response) => response.text())
                            .then((response) => {
                                const responseText = JSON.parse(response) // Get the response
                                if(responseText.error !== "") { // If there is an error
                                    document.querySelector("#alert").innerText = responseText.error
                                    document.querySelector("#alert").classList.add("error")
                                    document.querySelector(".formfields").style.display = "block"
                                    return
                                }
                                document.querySelector("#alert").innerText = responseText.success
                                document.querySelector("#alert").classList.add("success")
                                window.location.replace("/thanks") // Redirect to the thanks page
                            })
                    })
            })

Your new, complete JS file should look like this:

window.addEventListener("load", function(){ // Wait for the page to load

    "use strict"; // Strict mode for JavaScript

    const form = document.querySelector(".contact") // Get the form

    form.addEventListener("submit", function (event){
        event.preventDefault() // Prevent the default action of the form
        let fields = document.querySelectorAll(".contact .form-control") // Get all the fields
        let valid = true
        for (var i = 0; i < fields.length; i++) {
            fields[i].classList.remove("no-error") // Remove the no-error class from all fields
            if(fields[i].value === ""){ // If the field is empty
                fields[i].classList.add("has-error")
                fields[i].nextElementSibling.style.display = "block"
                valid = false
            }else{ // If the field is not empty
                fields[i].classList.remove("has-error")
                fields[i].classList.add("no-error")
                fields[i].nextElementSibling.style.display = "none"
            }
        }
        if(valid){ // If all the fields are valid
            document.querySelector(".formfields").style.display = "none"
            document.querySelector("#alert").innerText = "Processing your submission, please wait..."
            grecaptcha.ready(function() { // Wait for the recaptcha to be ready
                grecaptcha
                    .execute("yoursitekey", {
                        action: "contact"
                    }) // Execute the recaptcha
                    .then(function(token){

                        let recaptchaResponse = document.getElementById("recaptchaResponse")
                        recaptchaResponse.value = token // Set the recaptcha response

                        fetch("/send.php", {
                            method: "POST",
                            body: new FormData(form), // Send the form data
                        })
                            .then((response) => response.text())
                            .then((response) => {
                                const responseText = JSON.parse(response) // Get the response
                                if(responseText.error !== "") { // If there is an error
                                    document.querySelector("#alert").innerText = responseText.error
                                    document.querySelector("#alert").classList.add("error")
                                    document.querySelector(".formfields").style.display = "block"
                                    return
                                }
                                document.querySelector("#alert").innerText = responseText.success
                                document.querySelector("#alert").classList.add("success")
                                window.location.replace("/thanks") // Redirect to the thanks page
                            })
                    })
            })
        }
    })
})

Once you have made it here, we can get to work on the send.php file that will be used to get your reCAPTCHA score and process your form.

Once the form is validated and submitted, it will redirect to a thanks.html page if you included that in the structure above.

Validating reCAPTCHA Using PHP

In order to secure your website and protect from bots and spam, you need to hit Google's API server and validate what is being sent. Google does not give too much info away about how to process spam requests but we know a score > 0.5 is usually enough to prevent spam and bot submissions. So we will code for that metric.

This PHP file will double-verify that your required form elements have been submitted, then it will run those elements against Google's reCAPTCHA API to give you a score. Once you have your score you can process your email.

NOTE: Please change yoursecretkey to your actual secret key from above.

<?php
/**
 * Check to see if all fields that are required have been submitted
 *
 * @return boolean
 */
function isValid(){
    if(
        $_POST['fname'] != '' &&
        $_POST['lname'] != '' &&
        $_POST['email'] != '' &&
        $_POST['message'] != ''
    ) {
        return true;
    }
    return false;
}

// Declare variables to prepare for form submission
$success_output = '';
$error_output = '';

if (isValid()) {
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'; // URL to the reCAPTCHA server
    $recaptcha_secret = 'yoursecretkey'; // Secret key
    $recaptcha_response = $_POST['recaptchaResponse']; // Response from reCAPTCHA server, added to the form during processing
    $recaptcha = file_get_contents($recaptcha_url.'?secret='.$recaptcha_secret.'&response='.$recaptcha_response); // Send request to the server
    $recaptcha = json_decode($recaptcha); // Decode the JSON response
    if($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == "contact"){ // If the response is valid
        // run email send routine
        $success_output = 'Your message was sent successfully.'; // Success message
    }else{
        $error_output = 'Something went wrong. Please try again later'; // Error message
    }
}else{
    $error_output = 'Please fill out all of the required fields.'; // Error message
}
// Output error or success message
$output = [
    'error' => $error_output,
    'success' => $success_output
];

// Return the output in JSON format
echo json_encode($output);

This PHP file will return a JSON object that will be used in your JS file above to either display an error or display a success or in our case, redirect to a thank you page.

NOTE: In the code, I have left you space to add your own mail function. It is denoted like this:
// run email send routine

Remove that line and add your PHP mail routine. Typically, it would be like mail($to, $subject, $message, $headers);. If you need help with this, you can visit PHP's website for more details: https://www.php.net/manual/en/function.mail.php

Last Steps

When you add Google's V3 reCAPTCHA to your website, you will notice a small badge on the bottom right. This is not required if you follow the next few steps, but you need to either have it or display a message.

In your HTML, add the following code right below your button.

<br>
<br>
<p class="text-center">
    <small>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</small>
</p>

Now that you have the required message, you can add this to your Sass and remove the badge.

.grecaptcha-badge {
    display:none;
}

Conclusion

Now that you have all of the pieces in place, you can refresh your page and test your form. Everything should work as expected and you can now be bot-free.

Read more articles on DevDrawer