DEV Community: Flurabula

How to create an Internet status viewer using JavaScript?

Flurabula — Mon, 27 Feb 2023 01:11:46 +0000

In this tutorial, we are sharing the source code a simple internet status viewer using HTML, CSS and JavaScript. This tool will looks like:

As you can see from the image above, the connection status will be visible. If
the network is off then the connection status will be “no connection” in red
colour ( look the second image).

I have used font-awesome to display the wifi icon. Also I am connected the
project with font-awesome using URL.

Files and folder

For this project you want to create a folder containing the files called
index.html and style.css. I am added the javascript with the html file.

Index.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>connection test</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body ononline="myfunction()">
    <div class="network">
        <i class="fa fa-wifi"></i>
        <h3 id="message">No connection</h3>

    </div>
</body>
<script>
    let message = document.getElementById("message");
    let wifi = document.querySelector(".fa-wifi");
        let messageOnline = () => {
            message.textContent = "Connected";
            message.style.cssText = "color: #689f38";
            wifi.style.cssText = "color: white; background-color:#689f38;";
        };
        let messageOffline = () => {
            message.textContent = "No Connection";
            message.style.cssText = "color: #d32f2f";
            wifi.style.cssText = "color: red; background-color:white;";
        };
        if (window.navigator.onLine) {
            messageOnline();
        } else {
            messageOffline();
        }
        window.addEventListener("online", messageOnline);
        window.addEventListener("offline", messageOffline);
</script>
</html>

style.css


*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
.network{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
.network i{
    padding: 30px;
    font-size: 35px;
    background-color: rgb(245, 244, 244);
    border-radius: 50%;
    transition: 2s;
    border: 2px solid;
}
.network h3{
    padding-left: 15px;
    color: brown;
    font-size: 25px;
}

simple contact form using HTML CSS and JavaScript
Rich text editor using HTML CSS and JavaScript
Download the Youtube video thumbnail using JavaScript

How to create an HTML-to-PDF converter?

Flurabula — Sun, 12 Feb 2023 11:03:07 +0000

In this post, I am mainly discussing a simple JavaScript library that helps us to create PDFs from HTML. I have created an awesome-looking PDF processor using the JavaScript library.

HTML to PDF JS library

html2pdf is the library that we are discussing. This library converts HTML to PDF by converting HTML into canvas (image) with the help of html2canvas and converting the image to pdf through jsPDF another javascript library with contacts the image into pdf.

There are several libraries are available to do this function. You can also use the jsPDF library. I am using the html2pdf library to do this project. If you want a tutorial on other HDMI to PDF converter libraries, comment in the comment section.https://www.youtube.com/embed/p0DBDoT3jKY

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HTML-to-PDF Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- html2pdf CDN link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
        integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <center>
        <h1>hello world</h1>
        <h2>HTML TO PDF TUTORIAL FLURATECH.COM</h2>
    </center>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci, voluptatibus. Itaque assumenda quia quis
        temporibus vero voluptatum velit ex, quod earum! Modi iste laboriosam blanditiis soluta nisi iusto amet
        excepturi.</p>

    <button id="download-button">Download as PDF</button>
    <script>
        const button = document.getElementById('download-button');
        function generatePDF() {
            // Choose the element that your content will be rendered to:here i am choosing BODY tag
            const element = document.querySelector('body');
            // Save the PDF for your user.
            html2pdf().from(element).save();
        }

        button.addEventListener('click', generatePDF);
    </script>
</body>

</html>

Rich text editor using HTML CSS and JavaScript

Author box HTML CSS

Detect browser using JavaScript – with source code

Flurabula — Sun, 12 Feb 2023 10:54:35 +0000

Hello guys, welcome back to the source code tutorial series of fluratech.com. Today I am going to share with you the source code of an awesome-looking browser detector using javascript.

This code will help you to get a browser name even if it is Chrome, Firefox, Safari, Opera and Edge with font-awesome icons. Else it will show “We can’t able to find the name of your browser”.

<!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>speaker</title>
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-image: linear-gradient(45deg, rgb(229, 255, 0), rgb(255, 81, 0));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        h1 {
            color: rgb(255, 255, 255);
            text-shadow: 6px 5px 4px black;
        }
    </style>
</head>

<body onload="browserDetect()">
    <h1>hello</h1><br>
    <script>
        function browserDetect() {

            let userAgent = navigator.userAgent;
            let browserName;

            if (userAgent.match(/chrome|chromium|crios/i)) {
                browserName = "chrome <i class='fa fa-chrome'></i> ";
            } else if (userAgent.match(/firefox|fxios/i)) {
                browserName = "firefox <i class='fa fa-firefox'></i>";
            } else if (userAgent.match(/safari/i)) {
                browserName = "safari <i class='fa fa-safari'></i>";
            } else if (userAgent.match(/opr//i)) {
                browserName = "opera <i class='fa fa-opera'></i>";
            } else if (userAgent.match(/edg/i)) {
                browserName = "edge <i class='fa fa-edge'></i>";
            } else {
                browserName = "No browser detection";
            }

            document.querySelector("h1").innerHTML = "You are using " + browserName + " browser";
        }
    </script>
</body>

</html>