DEV Community: Piyush | Coding Torque

Color picker using HTML and CSS

Piyush | Coding Torque — Sat, 26 Nov 2022 07:03:00 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Color picker using HTML and CSS. This will be a step-by-step guide. Let's get started 🚀.

Visit codingtorque.com for more projects like this!

Step 1: Import Google Fonts

Import the fonts using Google Fonts API. Below is the code for the Poppins Font. Paste the below code in the <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Step 2 : HTML Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Custom Color picker using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <div style="text-align: center;">
            <h1>Coding Torque</h1>
            <div style="display: flex; justify-content:center">
                <input type="text" id="hex">
                <input type="color" id="color">
            </div>
        </div>
    </div>
</body>

</html>

Output Till Now

Step 2: CSS Code

body {
    background: linear-gradient(90deg, #8A2387, #E94057, #F27121);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: poppins;
}

.container {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 20rem;
    height: 10rem;
    padding: 32px;
}

input[type="color"] {
    background-color: white;
    border: none;
    border-radius: 5px;
    height: 40px;
    width: 40px;
    transition: 0.3s;
}

input[type="color"]:hover {
    background-color: deepskyblue;
}

input[type="text"] {
    border: none;
    padding: 10px;
    border-radius: 5px;
    outline: none;
    margin-right: 10px;
}

Output Till Now

Step 3: JavaScript Code

let colorInput = document.querySelector("#color");
let hexInput = document.querySelector("#hex");
colorInput.addEventListener('input', () => {
    let color = colorInput.value;
    hexInput.value = color;
    document.querySelector('h1').style.color = color;
});

Developer Profile Card using HTML and CSS

Piyush | Coding Torque — Fri, 25 Nov 2022 07:00:00 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Developer Profile Card using HTML and CSS. This will be a step-by-step guide. Let's get started 🚀.

Step 1: Import Google Fonts

Import the fonts using Google Fonts API. Below is the code for the Poppins Font. Paste the below code in the <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Step 2 : HTML Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Neomorphic profile card using html and css - @code.scientist x @codingtorque</title>

</head>

<body>
    <div class="profile_card">
        <div class="user_img">
            <img src="../imgs/coding-torque-logo.png" height="100" width="100" alt="profile">
        </div>
        <div class="user_details">
            <h5>Piyush Patil</h5>
            <span>Web Developer</span>
            <p>Develop's Dynamic Websites and Design Web Templates.</p>
            <a href="#">Hire Me</a>
        </div>
        <hr>
        <ul class="social-media-icons">
            <li>
                <a href="#" style="background: linear-gradient(45deg, #2980b9, #2c3e50);"><i
                        class="fab fa-facebook"></i></a>
                <p>13.8k</p>
                <span>Followers</span>
            </li>
            <li>
                <a href="#" style="background: linear-gradient(45deg, #00c9ff, #92fe9d);"><i
                        class="fab fa-twitter"></i></a>
                <p>15.8k</p>
                <span>Followers</span>
            </li>
            <li>
                <a href="#" style="background: linear-gradient(45deg, #833ab4,#fd1d1d, #fcb045);"><i
                        class="fab fa-instagram"></i></a>
                <p>30k</p>
                <span>Followers</span>
            </li>
        </ul>
    </div>
</body>

</html>

Output Till Now

Step 3: CSS Code

@import url("https://fonts.googleapis.com/css2?family=Baloo 2&family=Roboto:wght@300&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", cursive;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10rem;
    background-color: rgba(0, 0, 0, 0.9);
}

.profile_card {
    width: 310px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 35px 40px;
    border-radius: 20px;
    position: relative;
    background: black;
    box-shadow: 0px 0px 40px -8px gray;
}

.user_img {
    position: absolute;
    top: -60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user_img::before {
    content: "";
    position: absolute;
    height: calc(100% + 10px);
    width: calc(100% + 10px);
    border-radius: 50%;
    background: linear-gradient(45deg, deeppink, deepskyblue);
    box-shadow: 0px 0px 18px -6px #fff200;
    animation: animate 1s linear infinite;
}

@keyframes animate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.user_img img {
    border-radius: 50%;
    z-index: 1;
}

.user_details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 12px 14px;
}

.user_details h5 {
    font-size: 22px;
    letter-spacing: 2px;
    margin: 12px 0px;
    font-weight: 600;
}

.user_details span {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    color: gray;
    font-size: 12px;
}

.user_details p {
    margin: 12px 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    color: gray;
}

.user_details a {
    text-decoration: none;
    background: linear-gradient(45deg, #ff00cc, #333399);
    color: white;
    padding: 10px 30px;
    margin: 14px 0;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 14px;
    box-shadow: 0px 6px 22px -6px gray;
    transition: 0.3s ease-in-out;
}

.user_details a:hover {
    background: transparent;
}

hr {
    width: 100%;
    border: 1px solid darkgray;
    background: darkgray;
    margin-bottom: 20px;
}

.social-media-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-media-icons li {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px 12px;
}

.social-media-icons li a {
    height: 60px;
    width: 60px;
    font-size: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    margin: 10px 0;
}

.social-media-icons li p {
    font-size: 20px;
    margin: 11px 0;
    font-weight: 700;
}

.social-media-icons li span {
    font-size: 15px;
    color: gray;
    font-weight: 700;
}

Output Till Now

QR Code Generator using HTML, CSS and JavaScript

Piyush | Coding Torque — Thu, 24 Nov 2022 07:00:00 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a QR Code Generator using HTML, CSS, and JavaScript. This will be a step-by-step guide. Let's get started 🚀.

Visit codingtorque.com for more projects like this!

Step 1: Import Google Fonts

Import the fonts using Google Fonts API. Below is the code for the Poppins Font. Paste the below code in the <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Step 2 : HTML Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />


    <title>QR Code Generator using JavaScript - @code.scientist x @codingtorque</title>

</head>

<body>
    <form>
        <h2 class="heading">QR Code Generator</h2>

        <input type="url" id="website" name="website" placeholder="https://codingtorque.com" required />

        <div id="qrcode-container">
            <div id="qrcode" class="qrcode"></div>
        </div>

        <button type="button" class="generateBtn" onclick="generateQRCode()">Generate QR Code</button>
    </form>

</body>

</html>

Output Till Now

Step 3: CSS Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

body {
    display: flex;
    font-family: poppins;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    height: 600px;
}

form {
    height: 30rem;
    width: 20rem;
    background-color: white;
    color: black;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.heading {
    text-align: center;
    background: deepskyblue;
    color: white;
    margin: 0;
    margin-bottom: 20px;
    padding: 10px 0;
    width: 100%;
}

#website {
    width: 80%;
    height: 30px;
    outline: none;
    border: none;
    background: gainsboro;
    padding: 0 10px;
    margin-bottom: 20px;
}

input {
    font-family: poppins;
    transition: 0.3s;
    border-radius: 5px;
    border: none;
    outline: none;
}

.generateBtn {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: black;
    color: white;
    cursor: pointer;
    margin: 20px;
}

Output Till Now

Step 4: Import QRcodejs CDN

Import the below script tag before your javascript code.

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

Step 5: JavaScript Code

function generateQRCode() {
    let website = document.getElementById("website").value;
    if (website) {
        let qrcodeContainer = document.getElementById("qrcode");
        qrcodeContainer.innerHTML = "";
        new QRCode(qrcodeContainer, website);

        document.getElementById("qrcode-container").style.display = "block";
    } else {
        alert("Please enter a valid URL");
    }
}

Pricing cards using HTML and CSS

Piyush | Coding Torque — Wed, 23 Nov 2022 07:00:00 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Pricing cards using HTML and CSS. This will be a step-by-step guide. Let's get started 🚀.

Step 1: Import Fontawesome CDN

Import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons on a website.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

Step 2 : HTML Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Pricing Cards - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <h5 class="badge">Pricing Plans</h5>
        <h1 class="heading">Choose Your Best Pricing Plan</h1>
        <div class="card_group">
            <div class="pricing-card">
                <i class="fab fa-telegram-plane"></i>
                <span>Basic</span>
                <h4 class="price">$4.99</h4>
                <ul class="package_list">
                    <li>Unlimited Website</li>
                    <li>Unlimited Storage</li>
                    <li>Free SSL Certificate</li>
                    <li>24/7 Support</li>
                </ul>
                <a href="#" class="get_started_btn">Get Started</a>
            </div>
            <div class="pricing-card">
                <i class="fas fa-plane"></i>
                <span>Intermediate</span>
                <h4 class="price">$12.99</h4>
                <ul class="package_list">
                    <li>Unlimited Website</li>
                    <li>Unlimited Storage</li>
                    <li>Free SSL Certificate</li>
                    <li>24/7 Support</li>
                </ul>
                <a href="#" class="get_started_btn">Get Started</a>
            </div>
            <div class="pricing-card">
                <i class="fas fa-rocket"></i>
                <span>Advanced</span>
                <h4 class="price">$19.99</h4>
                <ul class="package_list">
                    <li>Unlimited Website</li>
                    <li>Unlimited Storage</li>
                    <li>Free SSL Certificate</li>
                    <li>24/7 Support</li>
                </ul>
                <a href="#" class="get_started_btn">Get Started</a>
            </div>
        </div>
    </div>
</body>

</html>

Output Till Now

Cursor effect using HTML, CSS & JavaScript

Piyush | Coding Torque — Tue, 22 Nov 2022 07:05:00 +0000

Hello Guys! In this blog, I'm going to explain to you how to make a cursor effect using HTML, CSS, and JavaScript. This will be a step-by-step guide. Let's get started 🚀.

Visit codingtorque.com for more projects like this!

Step 1: HTML Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Cursor effect using JavaScript - @code.scientist x @codingtorque</title>

</head>

<body>
    <div class="cursor"></div>
</body>

</html>

No output here...

Step 2: CSS Code

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: poppins;
}

.cursor {
  z-index: 999;
  position: fixed;
  background: #2696E8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 20px #2696E8,
      0 0 60px #2696E8,
      0 0 100px #2696E8;
  animation: colors 5s infinite;
  transform: translate(-50%, -50%);
  display: none;
}

@keyframes colors {
  0% {
      filter: hue-rotate(0deg);
  }

  100% {
      filter: hue-rotate(360deg);
  }
}

.cursor:before {
  content: '';
  position: absolute;
  background: #2696E8;
  width: 50px;
  height: 50px;
  opacity: 0.2;
  transform: translate(-30%, -30%);
  border-radius: 50%;
}

Output Till Now

Step 3: JavaScript Code

const cursor = document.querySelector(".cursor");
var timeout;

//follow cursor on mousemove
document.addEventListener("mousemove", (e) => {
    let x = e.pageX;
    let y = e.pageY;

    cursor.style.top = y + "px";
    cursor.style.left = x + "px";
    cursor.style.display = "block";

    //cursor effects when mouse stopped
    function mouseStopped() {
        cursor.style.display = "none";
    }
    clearTimeout(timeout);
    timeout = setTimeout(mouseStopped, 5000);
});

//cursor effects when mouseout
document.addEventListener("mouseout", () => {
    cursor.style.display = "none";
});

Tip Calculator using HTML, CSS & JavaScript

Piyush | Coding Torque — Mon, 21 Nov 2022 11:00:00 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a tip calculator using HTML, CSS, and JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Here is the final HTML code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Tip Calculator using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="calculator">
        <label for="totalBill">Bill</label>
        <input type="number" oninput="calculateTip()" onchange="calculateTip()" id="totalBill"
            placeholder="Enter Your Bill">
        <label for="tipPercentage" style="display: flex; justify-content:space-between;">
            <span>Tip %</span>
            <span id="tipPercentageText">15%</span>
        </label>
        <input type="range" oninput="calculateTip()" onchange="calculateTip()" id="tipPercentage">
        <label for="numOfPerson" style="display: flex; justify-content:space-between;">
            <span>
                No. of people
            </span>
            <span id="numOfPersonText">15</span>
        </label>
        <input type="range" oninput="calculateTip()" onchange="calculateTip()" id="numOfPerson">
        <div class="result" id="result">
            <h5 style="margin: 8px 0;display: flex; justify-content:space-between;">
                <span>Tip</span>
                <span style="font-size:1.2rem;">__.__</spam>
            </h5>
            <h5 style="margin: 8px 0;display: flex; justify-content:space-between;">
                <span>Total</span>
                <span style="font-size:1.2rem;">__.__</spam>
            </h5>
            <h5 style="margin: 8px 0;display: flex; justify-content:space-between;">
                <span>Each Person Pay</span>
                <span style="font-size:1.2rem;">__.__</spam>
            </h5>
        </div>
    </div>

</body>

</html>

Neomorphic Analog Clock using HTML, CSS & JavaScript

Piyush | Coding Torque — Sun, 20 Nov 2022 07:00:00 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Neomorphic analog clock using HTML, CSS, and JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Here is the final HTML code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Neomorphic Analog Clock using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
<div class="clock">
    <div class="outer-clock-face">
        <div class="marking marking-one"></div>
        <div class="marking marking-two"></div>
        <div class="marking marking-three"></div>
        <div class="marking marking-four"></div>
        <div class="inner-clock-face">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
        </div>
    </div>
</div>

</body>

</html>

Output Till Now

FAQ Page using HTML, CSS & JavaScript

Piyush | Coding Torque — Sat, 19 Nov 2022 06:30:00 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make FAQ Page using HTML, CSS, and JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

<h2>Frequently Asked Questions</h2>
<button class="accordion">What is codingtorque.com?</button>
<div class="panel">
    <p>Coding Torque (codingtorque.com) is a free platform to learn coding for free by making amazing projects. Here
        we share source code of projects that you can copy or keep on secondary screen and type yourself by looking
        into it.</p>
</div>

<button class="accordion">How can I downlaod your app?</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
        repellat magni!</p>
</div>

<button class="accordion">How can I buy your ebook?</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
        repellat magni!</p>
</div>

Here is the final HTML code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>FAQ Page using HTML CSS, and JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <h2>Frequently Asked Questions</h2>
    <button class="accordion">What is codingtorque.com?</button>
    <div class="panel">
        <p>Coding Torque (codingtorque.com) is a free platform to learn coding for free by making amazing projects. Here
            we share source code of projects that you can copy or keep on secondary screen and type yourself by looking
            into it.</p>
    </div>

    <button class="accordion">How can I downlaod your app?</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
            repellat magni!</p>
    </div>

    <button class="accordion">How can I buy your ebook?</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
            repellat magni!</p>
    </div>
</body>

</html>

Output Till Now

Glassmorphic Calculator using JavaScript

Piyush | Coding Torque — Sun, 13 Nov 2022 17:27:29 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Glassmorphic Calculator using HTML, CSS, and JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

<div class="calculator">
    <div class="circle"></div>
    <div class="circle"></div>
    <input type="text" class="screen" placeholder="0" id="screen">
    <table>
        <tr>
            <td>
                <button style="color: #ff0000;" onclick="clr()">C</button>
            </td>
            <td>
                <button style="color: deepskyblue;" onclick="dis('/')">/</button>
            </td>
            <td>
                <button style="color: deepskyblue;" onclick="dis('%')">%</button>
            </td>
            <td>
                <button style="color: deepskyblue;" onclick="backspace()">
                    <i class="fas fa-backspace"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="dis('7')">7</button>
            </td>
            <td>
                <button onclick="dis('8')">8</button>
            </td>
            <td>
                <button onclick="dis('9')">9</button>
            </td>
            <td>
                <button style="color: deepskyblue;" onclick="dis('*')">x</button>
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="dis('4')">4</button>
            </td>
            <td>
                <button onclick="dis('5')">5</button>
            </td>
            <td>
                <button onclick="dis('6')">6</button>
            </td>
            <td>
                <button style="color: deepskyblue;" onclick="dis('-')">-</button>
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="dis('1')">1</button>
            </td>
            <td>
                <button onclick="dis('2')">2</button>
            </td>
            <td>
                <button onclick="dis('3')">3</button>
            </td>
            <td>
                <button style="color: deepskyblue;" onclick="dis('+')">+</button>
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="dis('0')">0</button>
            </td>
            <td>
                <button onclick="dis('.')">.</button>
            </td>
            <td>
                <button class="equalsToBtn" onclick="solve()">=</button>
            </td>
        </tr>
    </table>
</div>

Detect Capslock using HTML, CSS and JavaScript

Piyush | Coding Torque — Sun, 13 Nov 2022 12:52:52 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Detect Capslock using HTML, CSS and JavaScript. This will be a step-by-step guide. Let's get started 🚀.

Step 1: Import Fontawesome CDN

Import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons on a website.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

Step 2: HTML Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Detect caps lock using JavaScript - @code.scientist x @codingtorque</title>

</head>

<body>
    <div class="center">
        <p>
        <div class="container">
            <h3>Detect Caps Lock using JavaScript</h3>

            <input id="myInput" placeholder="Some text..">
            <div style="display: flex;align-items: center;">
                <div id="signal"></div>
                <p id="message">Capslock is ON!</p>
            </div>

        </div>
        </p>
    </div>

</body>

</html>

Output Till Now

Step 3: CSS Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

body {
    display: flex;
    font-family: poppins;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    height: 600px;
}

.container {
    padding: 40px;
    border: 2px solid deepskyblue;
    border-radius: 10px;
}

#text {
    display: none;
    color: red
}

input {
    font-family: poppins;
    width: 200px;
    height: 30px;
    transition: 0.3s;
    border-radius: 5px;
    padding: 0 5px;
    border: none;
    outline: none;
}

#signal {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: red;
    box-shadow: 0 0 7px red;
    margin-right: 10px;
}

Custom Checkbox using HTML and CSS

Piyush | Coding Torque — Tue, 08 Nov 2022 06:22:43 +0000

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Custom Checkbox using HTML and CSS. This will be a step-by-step guide. Let's get started 🚀.

Get more projects of web development on codingtorque.com

Step 1: Import Fontawesome CDN

Import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons on a website.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

Step 2: Import Google Fonts

Import the fonts using Google Fonts API. Below is the code for the Poppins Font. Paste the below code in the <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Step 3: HTML Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Custom radio button using css - @code.scientist x @codingtorque</title>

</head>

<body>
    <div class="container">
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-youtube"></i>
                <p>YouTube</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-facebook-f"></i>
                <p>Facebook</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-instagram"></i>
                <p>Instagram</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-telegram"></i>
                <p>Telegram</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-twitter"></i>
                <p>Twitter</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-github"></i>
                <p>GitHub</p>
            </div>
        </div>
    </div>
</body>

</html>

Output Till Now

Step 4: CSS Code

@import url("https://fonts.googleapis.com/css2?family=Poppins");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 500px;
    margin-top: 10rem;
}

.checkbox {
    height: 40px;
    width: 160px;
    position: relative;
    margin: 5px;
}

.checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 2px solid gainsboro;
    border-radius: 10px;
}

.box i {
    margin-right: 4px;
}

.checkbox input:checked~.box {
    border-color: deeppink;
    color: deeppink;
}

Output Till Now

Internet Connectivity Checker using JavaScript

Piyush | Coding Torque — Fri, 04 Nov 2022 09:27:30 +0000

Hello Guys! Welcome to Welcome to Coding Torque In this blog, I'm going to explain to you how to make an internet connectivity checker using javascript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Now let's design the container in our <body> tag. In the below HTML code, we have created a container that contains a div for status (message). Next, we have the button with the onclick listener attribute, to check connectivity status by clicking on the button.

<div class="container">
    <div class="status" id="status">
        Click button to check status
    </div>
    <button onclick="checkConnectivityStatus()">Check Status</button>
</div>

Here is the final HTML code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Internet Connectivity Detector using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <div class="status" id="status">
            Click button to check status
        </div>
        <button onclick="checkConnectivityStatus()">Check Status</button>
    </div>

</body>

</html>