Forem: Foolish Developer

CSS Only Animated Background Particles Effects

Foolish Developer — Thu, 28 Dec 2023 11:02:01 +0000

In the realm of web design, capturing the attention of users often involves incorporating visually stunning and dynamic elements.

CSS-only animated background particles effects have emerged as a popular choice for designers seeking to add an extra layer of interactivity and charm to their websites.

CSS Background Particles Animation

In this article, we'll explore the magic of CSS-only animated particles effects and showcase how they can elevate the aesthetics of your web projects.

The overall effect is an animated particle background where each color moves and rotates randomly across the screen.

HTML:

<div class="purple"></div>
<div class="medium-blue"></div>
<div class="light-blue"></div>
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="cyan"></div>
<div class="light-green"></div>
<div class="lime"></div>
<div class="magenta"></div>
<div class="lightish-red"></div>
<div class="pink"></div>

These HTML div elements represent different colors, and each div is given a class corresponding to its color name. These elements will be used as particles in the animated background.

CSS (SCSS):

$colors: (
  purple: #241379,
  medium-blue: #2185bf,
  light-blue: #1fbce1,

  // ... other color definitions ...

  pink: #ff4293
);

// ... other CSS styles ...

@each $color-name, $color-hex in $colors {
  // ... styling and animation rules for each color ...
}

Here, you are defining a map of colors using the SCSS variable $colors. Each color is associated with a name and a hex code.

@function random-num($min, $max) {
  @return floor(random() * ($max - $min) + $min);
}

This SCSS function random-num generates a random number between $min and $max. It's used later to create random sizes and positions for the particles.

@function random-calc($number) {
  $max: 100 - $number;
  $min: $number * -1;
  @return random-num($min, $max);
}

Another SCSS function random-calc takes a number and calculates a random number within a range that depends on this input. This is used for creating animated random positions for particles.

@keyframes #{$color-name} {
  50% {
    transform: translate3d($random3 + vw, $random4 + vh, 0);
  }
  100% {
    transform: translate3d($random5 + vw, $random6 + vh, 0);
  }
}

This defines a keyframe animation #{$color-name} for each color, creating a movement between two sets of random positions for the particles.

@keyframes #{$color-name}-pseudo {
  33% {
    transform: translate3d(random-calc($random3) + vw, random-calc($random4) + vh, 0) rotate((random(360)) + deg);
  }
  100% {
    transform: translate3d(random-calc($random5) + vw, random-calc($random6) + vh, 0) rotate((random(360)) + deg);
  }
}

Similarly, this defines a keyframe animation #{$color-name}-pseudo for each color's pseudo-elements (::before and ::after), creating animated movements and rotations.

CSS-only animated background particles effects offer a versatile and lightweight way to breathe life into your web design projects. Hope you like this CSS Particle Backgrounds design.

Related Post:

I Love You in Code Language

Foolish Developer — Mon, 30 Oct 2023 17:28:36 +0000

In this article you will know how to write I Love You in Code Language. In the world of programming, expressing emotions might seem unconventional.

However, for those passionate about both coding and love, finding creative ways to say "I love you" in various programming languages can be a fun and endearing endeavor.

In this article, we'll explore how to express your affection in C, C++, Java, and Python.

I Love You in Code Language

Here I have told you how to say I Love You by many types of code languages. Besides, here you will know how to say I Love You in C Language, I Love You in C++ Language, I Love You in Java, I Love You in Binary etc.

Each programming language has its own syntax, but the message remains the same, reflecting the timeless nature of love itself.

I Love You in C Language

In C, we keep it simple. We declare a character array with the phrase "I Love You" and print it to the console. The message is clear and direct, just like your feelings.

#include <stdio.h>

int main() {
    char* love = "I Love You";
    printf("%s\n", love);
    return 0;
}

I Love You in C++ Language

C++ makes it a bit more elegant with the use of std::string. The message is the same, but the syntax is more modern, reflecting your deep and timeless affection.

#include <iostream>

int main() {
    std::string love = "I Love You";
    std::cout << love << std::endl;
    return 0;
}

I Love You in Java

In Java, we encapsulate our feelings within a class. This object-oriented declaration expresses the sentiment of love with the phrase "I Love You."

public class Love {
    public static void main(String[] args) {
        String love = "I Love You";
        System.out.println(love);
    }
}

I Love You in Python Code

Python's simplicity and readability shine through as you declare your love with just a few lines of code. It's a testament to the language's elegance, much like your own feelings of love.

love = "I Love You"
print(love)

I Love You in Binary

In binary, the phrase "I love you" is represented as a sequence of binary digits (0s and 1s). Here's how you can express it:

01001001 00100000 01101100 01101111 01110110 01100101 00100000 01111001 01101111 01110101

Each group of eight binary digits corresponds to a character in the ASCII character encoding. Here's the breakdown:

01001001: I
00100000: (Space)
01101100: l
01101111: o
01110110: v
01100101: e
00100000: (Space)
01111001: y
01101111: o
01110101: u

So, "I love you" in binary is represented by the binary values for each of these characters.

So whether you're a C enthusiast, a C++ aficionado, a Java developer, or a Python lover, there's a way to say "I love you" in the language you know best.

Related Post:

Just remember, no matter the language, love is a universal and beautiful emotion that transcends all boundaries.

Let me know how you like the method of writing I Love You in Code Language by commenting.

Simple Number Guessing Game in Java

Foolish Developer — Fri, 27 Oct 2023 12:54:34 +0000

In the world of programming, games provide a fascinating platform for honing your skills and creating engaging user experiences.

One such game that offers a perfect blend of fun and learning is the Number Guessing Game in Java.

In this article, we'll take you through the process of building a Number Guessing Game in Java, a versatile and widely-used programming language.

Number Guessing Game in Java

In this Number Guessing Game in Java, the computer randomly selects a number, and the player has to guess it.

The player keeps guessing until they guess the correct number. The program will provide feedback on whether the guess is too high or too low. Here's the code:

import java.util.Scanner;
import java.util.Random;

public class NumberGuessingGame {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        Random random = new Random();

        int lowerBound = 1; // Set the lower bound of the number range
        int upperBound = 100; // Set the upper bound of the number range
        int secretNumber = random.nextInt(upperBound - lowerBound + 1) + lowerBound;
        int numberOfTries = 0;
        boolean hasGuessedCorrectly = false;

        System.out.println("Welcome to the Number Guessing Game!");
        System.out.println("I've selected a random number between " + lowerBound + " and " + upperBound + ". Try to guess it.");

        while (!hasGuessedCorrectly) {
            System.out.print("Enter your guess: ");
            int userGuess = scanner.nextInt();
            numberOfTries++;

            if (userGuess < lowerBound || userGuess > upperBound) {
                System.out.println("Please guess a number between " + lowerBound + " and " + upperBound + ".");
            } else if (userGuess < secretNumber) {
                System.out.println("Too low. Try again.");
            } else if (userGuess > secretNumber) {
                System.out.println("Too high. Try again.");
            } else {
                hasGuessedCorrectly = true;
                System.out.println("Congratulations! You've guessed the number " + secretNumber + " in " + numberOfTries + " tries.");
            }
        }

        scanner.close();
    }
}

Step by Step Explanation

Here's an explanation of the code for the number guessing game in Java:

1. Import Statements:
These statements import necessary classes for handling user input (Scanner) and generating random numbers (Random).

import java.util.Scanner;
import java.util.Random;

2. Variable Initialization:

These variables set the lower and upper bounds for the range of numbers that the user can guess. In this example, the range is from 1 to 100.

int lowerBound = 1;
int upperBound = 100;

3. Generating the Secret Number:

This line generates a random number within the specified range using the Random class. It ensures that the secret number is within the specified bounds.

int secretNumber = random.nextInt(upperBound - lowerBound + 1) + lowerBound;

4. Game Variables:

numberOfTries keeps track of how many attempts the player has made, and hasGuessedCorrectly is a boolean variable to determine if the player has guessed the correct number.

int numberOfTries = 0;
boolean hasGuessedCorrectly = false;

5. Welcome Message:

These lines provide a welcoming message and inform the player about the range of numbers to guess from.

System.out.println("Welcome to the Number Guessing Game!");
System.out.println("I've selected a random number between " + lowerBound + " and " + upperBound + ". Try to guess it.");

6. Game Loop:

This while loop runs as long as the player has not guessed the correct number.

while (!hasGuessedCorrectly) {

7. User Input and Guessing Logic:

It reads the user's input as their guess and increments the numberOfTries counter.

int userGuess = scanner.nextInt();
numberOfTries++;

8. Checking User Input:

if (userGuess < lowerBound || userGuess > upperBound) {
    System.out.println("Please guess a number between " + lowerBound + " and " + upperBound + ".");
} else if (userGuess < secretNumber) {
    System.out.println("Too low. Try again.");
} else if (userGuess > secretNumber) {
    System.out.println("Too high. Try again.");
} else {
    hasGuessedCorrectly = true;
    System.out.println("Congratulations! You've guessed the number " + secretNumber + " in " + numberOfTries + " tries.");
}

If the user's guess is outside the specified range, it prompts the user to guess within the range.
If the guess is lower than the secret number, it informs the user that their guess is too low.
If the guess is higher than the secret number, it informs the user that their guess is too high.
If the guess matches the secret number, it sets hasGuessedCorrectly to true, and the game loop ends. It also displays a congratulatory message with the correct number and the number of tries.

9. Closing the Scanner:

This line closes the Scanner object when the game is over.

scanner.close();

Overall, this code creates a simple number guessing game where the player needs to guess a random number within a specified range.

It provides feedback on the player's guesses and counts the number of attempts it took to guess the correct number.

Related Post:

Creating a Number Guessing Game in Java is not only a fun and educational project but also a fantastic way to enhance your programming skills.

I Love You Code in C++

Foolish Developer — Thu, 26 Oct 2023 14:38:26 +0000

Writing I Love You in C++ is not about complex logic or intricate functions; it's about creating a program that displays these three magical words on the screen.

It's a delightful and creative way to share your feelings with someone who enjoys coding. The message can be displayed on the console or through a graphical user interface, depending on your preferences and programming skills.

I Love You Code in C++

Here's a simple C++ code snippet that displays "I Love You" on the console:

#include <iostream>

int main() {
    std::cout << "I Love You" << std::endl;
    return 0;
}

In this code, we include the iostream library to use the std::cout stream to display text.

The main() function is the entry point of the program, and it prints the "I Love You" message to the console. The return 0; statement indicates the successful execution of the program.

Personalizing the Message

While the above code is straightforward and conveys your feelings, you can personalize it further.

For example, you can ask the user to input the name of the person they love, making the message more intimate:

#include <iostream>
#include <string>

int main() {
    std::string name;

    std::cout << "Who do you love? Enter their name: ";
    std::cin >> name;

    std::cout << "I Love " << name << std::endl;

    return 0;
}

This code allows the user to input the name of their loved one, and the program responds with "I Love [Name]."

Code Explanation:

#include <iostream>
#include <string>

These lines include two libraries: iostream and string. iostream is used for input and output operations, and string is included for working with string data.

int main() {

Here, the program defines the main() function, which is the entry point for C++ programs.

All C++ programs must have a main() function from which execution begins.

std::string name;

This line declares a string variable called name. This variable will be used to store the name of the person that the user enters.

std::cout << "Who do you love? Enter their name: ";

This line uses std::cout to display the message "Who do you love? Enter their name: " on the console, prompting the user to input a name.

std::cin >> name;

This line uses std::cin to read input from the user. The input (in this case, the name of the person the user loves) is stored in the name variable.

std::cout << "I Love " << name << std::endl;

Here, the program uses std::cout again to display the message "I Love " followed by the name entered by the user.

The << operator is used to concatenate the text and the value of the name variable.

return 0;

The return 0; statement marks the end of the main() function and indicates a successful program execution.

By convention, returning 0 from main() suggests that the program has executed without any errors.

The I Love You code in C++ is not just limited to console output. In the world of programming, there's a place for love and affection.

Related Post:

So, if you're a programmer with a romantic side, don't hesitate to share your feelings through lines of code.

How to Say Happy Birthday in Binary Code

Foolish Developer — Wed, 25 Oct 2023 16:36:50 +0000

Wishing someone a happy birthday in binary code is an innovative and tech-savvy way to celebrate their special day.

This article will guide you through the fascinating world of binary code and teach you how to say "Happy Birthday" using this intriguing language of computers.

What is Binary Code?

Binary code is the fundamental language that computers use to communicate and process information. It consists of only two characters: 0 and 1.

Each of these binary digits, or "bits," represents a basic unit of information. In this system, 0 usually signifies "off" or "no," while 1 represents "on" or "yes."

By arranging these bits in sequences, we can represent complex data, characters, and numbers.

Why Say Happy Birthday in Binary Code?

Wishing someone a happy birthday in binary code is a novel and intriguing way to show you care.

It's perfect for tech-savvy individuals or those who appreciate a unique and thoughtful gesture. Moreover, it adds an element of surprise, making the birthday message even more special.

How to Say "Happy Birthday" in Binary Code

Understand the ASCII Code:

To translate "Happy Birthday" into binary, you'll need to understand the ASCII (American Standard Code for Information Interchange) code.

ASCII assigns numerical values to characters, symbols, and control codes. To convert letters into binary, you'll need to know the decimal ASCII values for each character.

Break Down the Message:

"Happy Birthday" is a simple phrase, but it's crucial to break it down into individual characters to convert it to binary code. Here's a breakdown:

H: ASCII value 72
a: ASCII value 97
p: ASCII value 112
p: ASCII value 112
y: ASCII value 121
[Space]: ASCII value 32
B: ASCII value 66
i: ASCII value 105
r: ASCII value 114
t: ASCII value 116
h: ASCII value 104
d: ASCII value 100
a: ASCII value 97
y: ASCII value 121

Convert to Binary:

Once you have the ASCII values for each character, you can convert them into binary. For example, the decimal value 72 becomes the binary value 1001000.

Arrange the Binary Values:

After converting each character, arrange the binary values together to form the complete message. Make sure to include spaces between the words.

So, "Happy Birthday" in binary code looks like this:

1001000 1100001 1110000 1110000 1111001 00100000 1000010 1101001 1110010 1110100 1101000 1100100 1100001 1111001

It demonstrates the power of technology and the effort you put into making their birthday memorable.

So, the next time you want to make a birthday extra special, consider saying Happy Birthday in code of computers.

Related Post:

Automatic Image Slideshow using HTML & CSS

Foolish Developer — Fri, 20 Aug 2021 16:21:56 +0000

In this article I have shown you how to create automatic image slideshow using HTML and CSS code. Earlier I showed you how to make an automatic image slider. I only used HTML and CSS code to create this design.

I have used 9 images in this image slideshow. We have created a circular circle by arranging each image neatly at a certain angle. In the case of a simple automatic image slideshow, all the images are in one box. Those images change from time to time. But in this case I have arranged each image at a certain angle. Here I have used 9 images so I have made a 360 degree circle by placing each image at a 40 degree angle.

Below I have given complete step-by-step how I made this design using HTML and CSS code.

Step 1: Create basic structure and add images

First I added the required images using the following HTML code. I have used 9 images, you can reduce or increase the amount of your choice if you want.

   <div class="slider">
     <div class="rotator">
        <div class="items">
           <img src="img1.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img2.jpg" />
        </div>
        <div class="items">
           <img src="img3.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img4.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img5.jpg" />
        </div>
        <div class="items">
           <img src="img6.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img7.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img8.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img9.jpg" alt="items photo" />
        </div>
     </div>
  </div>

Now I have set a specific background color for the web page.

    body{
      background: #0c3c53
    }

Step 2: Design the slideshow with css code

I have constructed the structure of this slider using the following CSS codes. Here we have used 350px width and 150px height of each slider. I have used animation: roter 29s linear infinite to rotate this slideshow.

Here I used 29 seconds to rotate the whole slider once. If you want to rotate this slider more quickly, you can change the value here.

 .slider {
    position: relative;
    width: 350px;
    margin: 50px auto;
    perspective: 1000px;
    padding-top: 120px;
    }
 .rotator {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 55%;
    height: 150px;
    transform-style: preserve-3d;
    animation: roter 29s linear infinite;
    }

Step 3: Set the size of the images and do the basic design

Now I have determined the size of each image. Here I have used 100% of the height and width of the images. This means that the image will be exactly equal to the structure in the slider at the top. I have also used a border around these images to enhance its beauty.

 .items {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: 2px solid white;
    }

 .items img {
    height: 100%;
    width: 100%;
    transition: all 3s ease;
    }

I have given a hover effect in the images. When you click on these images, the images will zoom in a bit. I used transform: scale (1.1) to zoom in on this.

If you want to increase the value of this zoom, you can increase the amount of quality here. Here I have used 1.1 You can use 1.4 or 1.5 if you want.

 .items:hover img {
    transform: scale(1.1);
    }

Step 4: Rotate the slider using @keyframes router

Now I have used CSS @keyframes to rotate this slider. This will cause the slider to rotate 360 along the y-axis.

 @keyframes roter {
    from {
    transform: rotateY(0deg);
    }
    to {
    transform: rotateY(360deg);
    }
    }

Step 5: Arrange the images at specific angles

As you can see in the picture above, only one of the 9 pictures can be seen here. This is because every picture has been added to that one place. Now I will arrange the images at a certain angle using the following CSS codes.

Transform: rotateY has been used for this. Since I have used 9 images, I have arranged each image at a 40 degree angle. As a result, 9 images are joined together to form a circle.

 .items:first-child {
    transform: rotateY(calc(40deg)) translateZ(300px);
    }

 .items:nth-child(2) {
    transform: rotateY(calc(80deg)) translateZ(300px);
    }

 .items:nth-child(3) {
    transform: rotateY(calc(120deg)) translateZ(300px);
    }

 .items:nth-child(4) {
    transform: rotateY(calc(160deg)) translateZ(300px);
    }

 .items:nth-child(5) {
    transform: rotateY(calc(200deg)) translateZ(300px);
    }

 .items:nth-child(6) {
    transform: rotateY(calc(240deg)) translateZ(300px);
    }

 .items:nth-child(7) {
    transform: rotateY(calc(280deg)) translateZ(300px);
    }

 .items:nth-child(8) {
    transform: rotateY(calc(320deg)) translateZ(300px);
    }

 .items:nth-child(9) {
    transform: rotateY(calc(360deg)) translateZ(300px);
    }

Above we have created the complete image slideshow. This slideshow takes 29 seconds to rotate once. That means we will see each picture after 29 seconds.

Below I have used a hover effect. This slider will stop rotating when you mouse over or click on these images. Above I have instructed to rotate the slideshow to Infinite using animations.

Now below I have instructed to stop using the animation-play-state: paused when you click on it.

 .rotator:hover {
    animation-play-state: paused;
    }

Hope you learned from this tutorial how I created this automatic image slideshow. You can watch the live demo if you want to know better how it works.

Related Post:

This type I have already made many more automatic image sliders. You can see those designs if you like this slider.

Responsive Navigation Menu Bar using HTML and CSS

Foolish Developer — Wed, 11 Aug 2021 16:18:52 +0000

In this article I have shared with you how to create a simple Responsive Navigation menu bar.
We all know the menu bar is a significant part of a website. The navigation menu plays a big role in determining the beauty and quality of the website. Many websites now use sidebar menus, but most websites now use the navigation menu bar.

I have designed many more navigation menus using HTML and CSS code. However, in this case I have used a small amount of JavaScript to execute the menu button. This is a very simple and simple design. If you know the basic HTML and CSS then you can understand the design.

Below is a YouTube video that lets you watch a demo and get an idea of how it's made.

Hopefully the video above has helped you to know how this design is made. Now I am sharing with you how to make it in full step by step below.

Step 1: Create the basic structure of navigation

First I designed the basic background of this navigation bar. Originally in the background here I used black color. You can use any other color if you want.



 <nav class="navbar">

 </nav>



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

    html {
        font-family: sans-serif;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #151617;
        padding: 1rem 1.5rem;
    }

Step 2: Add logo to navbar

Now I have used a logo. I have used font-size: 30px and color white of this logo.



<a href="#" class="nav-logo">Mystery Code</a>



    .nav-logo {
        font-size: 30px;
        font-weight: 500;
        color: white;
    }

Step 3: Add menu links

Now I have added the necessary menu items here. Here I have basically added five menu items you can increase the amount if you want. Margin-left: 3rem has been used to keep each menu a bit away from each other.

Here I have used the front size of the menu links 19 px and the color white. If you want to increase the size of these links a little, you can increase the size of the front here.



<ul class="nav-menu">
 <li class="nav-item">
   <a href="#" class="nav-link">Home</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Services</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Portfolio</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">About</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Contact</a>
 </li>
</ul>



    .nav-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-item {
        margin-left: 3rem;
    }

    .nav-link{
        font-size: 19px;

        color: white;
    }

    .nav-link:hover{
        color: #1ae5f7;
    }

Step 4: Create menu button

Above we have designed the Basic menu bar, now I will make it for Responsive Devices. First of all here I will create a menu button. Basically, in the case of responsive devices, menu items are completely hidden, instead we see a menu button.

When we click on that menu button, we can see the complete menu items. I made this button by three lines. Which is built using the following HTML and CSS codes. I used width: 25px, height: 3px and background-color: white of each line. The lines are 5 pixels apart.



<div class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>



    .hamburger {
        display: none;
    }

    .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: white;
    }

Step 5: Make the menu bar responsive with css

Now I will make it for Responsive Devices. In this case, I did not use any bootstrap or CSS library. I made it responsive using only css.



@media only screen and (max-width: 668px) {
        .nav-menu {
            position: fixed;
            left: -100%;
            top: 5rem;
            flex-direction: column;
            background-color: #3d3d3d;
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
            text-align: center;
            transition: 0.3s;

        }

        .nav-menu.active {
            left: 0;
        }

        .nav-item {
            margin: 2.5rem 0;

        }

Step 6: Determine what happens when you click on the menu button

The following CSS codes have been used to add animation effects to the menu button. When you click on that menu button, those three lines will join together to form a cross symbol.

In this case, the lines number one and number three move at an angle of 45 degrees to each other and the line number two is not visible. This results in the number one and three lines being joined together to form a cross mark.



       .hamburger {
            display: block;
            cursor: pointer;
        }

        .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active .bar:nth-child(1) {
            -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
        }

        .hamburger.active .bar:nth-child(3) {
            -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
        }

Step 7: Activate the menu button using JavaScript

Now I have activated these buttons using JavaScript code. First I set the constants to one of three class functions. Here '.hamburger', '.nav-menu', '.nav-link' have hamburger, navMenu, navLink constants respectively.



const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const navLink = document.querySelectorAll(".nav-link");

Then using the JavaScript below I activated those two menu buttons.



hamburger.addEventListener("click", mobileMenu);
navLink.forEach(n => n.addEventListener("click", closeMenu));

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}

Hope you know the basic JavaScript and understand the JavaScript structure above. If you have trouble understanding, you can watch the video tutorial above.

Related Post:

Hopefully in this article I have explained how to extend the menu bar on a simple navigation using HTML CSS and JavaScript code. You can download the required source code.

Javascript Age Calculator | Calculate Age from Date of Birth

Foolish Developer — Sun, 08 Aug 2021 13:51:36 +0000

JavaScript Age Calculator helps to determine user's current age from date of birth. This is a very easy and simple design. I have shared many more designswith you before. This is the first time I've made a simple JavaScript age calculator and shared it with you.

You can watch the live demo to see how this design works. First of all, I made a small box in a web page. Then below is a small submit button.

Here you can input dates, months and years in the Input field. After inputting your date of birth, click on the submit button and you will see your current age here.

Below is the complete information on how I made it, step-by-step.

Step 1: Create the basic structure

First of all I designed that web page using HTML and CSS code. Then I made a small box on it.



<div class="container">

</div>



* {
 box-sizing: border-box;
}

body{
 font-family: Arial, Helvetica, sans-serif;
 background-color: #c83deb;
 font-size: 15px;
 line-height: 1.5;
 padding: 0;
 margin: 0;
}

.container{
 width:520px;
 height: auto;
 min-height:100px;
 margin: 100px auto;
 background-color: #eee;
 border-radius: 5px;
}

Step 2: Add title or heading

Then here I created a title. I used the following HTML and CSS code to create this heading.



 <div class="base">
   <h4>Age Calculator</h4>
 </div>



.base{
 width: 100%;
 margin: 0;
 overflow: hidden;
 display: block;
 float: none;
}

.base h4{
 font-size: 26px;
 text-align: center;
 font-family: sans-serif;
 font-weight: normal;
 margin-top: 0px;
 box-shadow: 0px 2px #bababa;
 background: white;
 font-size: 34px;
 color: navy;
}

Step 3: Create a place to input the date of birth

There are three input boxes to input as you saw in the demo. To input the first date, second month and third year. The following HTML and CSS codes have been used to create it.



 <div class="block">
    <p class="title">Date</p>
    <input type="text" name="date" id="date" placeholder="dd" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
    <p class="title">Month</p>
    <input type="text" name="month" id="month" placeholder="mm" required="required" minlength="1" maxlength="2" />
  </div>
  <div class="block">
    <p class="title">Year</p>
    <input type="text" name="year" id="year" placeholder="yyyy" required="required" minlength="4" maxlength="4" />
  </div>



.block{
 width: 135px;
 padding: 5px 20px;
 margin-left: 20px;
 display: inline-block;
 float: left;
}

.title{
 font-size: 20px;
 text-align: left;
 font-family: sans-serif;
 font-weight: normal;
 line-height: 0.5;
 letter-spacing: 0.5px;
 word-spacing: 2.7px;
 color: #1073d0;
}

input[type=text] {
 width: 140px;
 margin: auto;
 outline: none;
 min-height: 50px;
 border: 2px solid #1073d0;
 padding: 12px;
 background-color: #f7f7f7;
 border-radius: 2px;
 color: #1073d0;
 font-size: 17px;
}

input[type=text]:focus{
 background-color: #ffffff;
 border: 2px solid orange;
 outline: none;
}

Step 4: Create a button to submit

Now I have made a submit button which if clicked the user will see his current age. The following HTML and CSS code helped to create and design it.



<div class="base">
 <input type="button" name="submit" value="Submit" onclick="age()" />
</div>



input[type=button]{
 width: 150px;
 margin-left: 35%;
 margin-top: 40px;
 outline: none;
 border: none;
 border-radius: 2px;
 background-color: #0761b6;
 color: #ffffff;
 padding: 14px 16px;
 text-align: center;
 font-size: 16px;
}

input[type=button]:hover{
 background-color: #003669;
}

Step 5: Create a display to see the age

This box has a small display at the bottom to see your current age. Now it is in hidden state. This can only be seen when it is executed by JavaScript.



<div id="age"></div>



#age{
 display: block;
 margin: 10px;
 margin-top: 35px;
 padding: 10px;
 padding-bottom: 20px;
 overflow: hidden;
 font-family: verdana;
 font-size: 23px;
 font-weight: normal;
 line-height: 1.5;
 word-spacing: 2.7px;
 color: navy;
}

Step 6: Activate the age calculator using JavaScript

Now I have implemented it with JavaScript code. I have used very simple code here and made it in general. If you know basic JavaScript, you must understand this structure.

Everyone's first date, month, year has been determined by a variable.



  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

Then I received the current date from the device using the new Date () function. Here we have taken d2, m2, y2 solids in which we have stored the current date. Here I have given the number of days in a month using var month.



  var date = new Date();
  var d2 = date.getDate();
  var m2 = 1 + date.getMonth();
  var y2 = date.getFullYear();
  var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];




  if(d1 > d2){
    d2 = d2 + month[m2 - 1];
    m2 = m2 - 1;
  }
  if(m1 > m2){
    m2 = m2 + 12;
    y2 = y2 - 1;
  }

Subtract the user's date of birth from the current time and store it at d, m, y constant.



  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;

After all, I have arranged all this information in the HTML page using innerHTML. Below you will see that I have used one line of HTML code which indicates how this date, month and year can be seen in that page.



  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';

Final Javascript Code



  function age() {
  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

  var date = new Date();
  var d2 = date.getDate();
  var m2 = 1 + date.getMonth();
  var y2 = date.getFullYear();
  var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  if(d1 > d2){
    d2 = d2 + month[m2 - 1];
    m2 = m2 - 1;
  }
  if(m1 > m2){
    m2 = m2 + 12;
    y2 = y2 - 1;
  }
  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;

  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';
}

This is a very simple JavaScript age calculator design. Hope this tutorial helped you to know how I made this design.

Related Post:

Please comment on how you like it. If there is any mistake in my design, please let me know in the comments.

Simple Countdown Timer using JavaScript

Foolish Developer — Sat, 31 Jul 2021 15:01:18 +0000

JavaScript countdown timers are used on a variety of e-commerce and under-construction websites to keep users up to date. We see on different types of e-commerce websites that a kind of countdown starts some time before the arrival of any product or offer.
In this article I have created a countdown timer using simple JavaScript code and shared it with you.

Creating such a project is much easier if you know how to create a digital clock. Here you can schedule a specific day or time in advance. Then, with the help of JavaScript code, subtracting the current time from that time, the subtraction is reduced every second.

As you can see in the picture above I have used the web page background # 90cbf3 here. The page contains four small boxes for days, hours, minutes and seconds, respectively. First of all you have to create an HTML and CSS file.

Step 1: Basic structure of Countdown Timer

Only one line of HTML programming code has been used. Then I designed the webpage using the css code below. With background # 90cbf3 you can use any other color you want.



<div id="timer"></div>



body {
    text-align: center;
    padding: 100px 60px;
    background: #90cbf3;
    font-family: sans-serif;
    font-weight: lighter;
}

Step 2: Activate it using JavaScript code

Now I have implemented this javascript countdown timer with the help of JavaScript. First of all, we have set a specific date with the help of Date.parse. that is, you have to determine for what time you want to run the countdown.



future = Date.parse("jun 12, 2022 01:30:00");

Then using the new Date () method I have taken the current time from the device. In this case, let me tell you, the time to use here is not the time of any server. It is only the local time of your device.

Then I subtract the current time from the pre-determined time and store it in the diff (constant). As a result, I have got a total of how much time to countdown.



 now = new Date();
 diff = future - now;

Now I have converted the total time of countdown to days, hours, minutes and seconds using JavaScript's Math.floor.

➤ We know that one second is equal to 1000 milliseconds, so we have divided the whole countdown time (diff) by 1000.
➤ Right now one minute is equal to 60 seconds so in this case we have divided by 1000 * 60.
➤ Since one hour is equal to 60 minutes, in this case we have divided by 1000 * 60 * 60.
➤ One day is equal to 24 hours so in this case it is divided by 1000 * 60 * 60 * 24.



 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);



 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;

Above we have done all the work of calculation, now we will arrange it neatly in the web page. For this I have used innerhtml and in it I have beautifully arranged how it can be seen in the webpage. Here I have added text like day, hours, minutes, seconds etc. using span respectively.



 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';

Lastly, I have instructed to update this calculation every 1000 milliseconds using setInterval. Since the countdown time is intermittent every second, this system needs to be updated every second.



setInterval('updateTimer()', 1000);

Final JavaScript code



function updateTimer() {
    future = Date.parse("jun 12, 2022 01:30:00");
 now = new Date();
 diff = future - now;

 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);

 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;

 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';
}
setInterval('updateTimer()', 1000);

Step 3: Give the times the size of a box

Now I have designed it using some basic css code and arranged it beautifully in web pages. As you can see in the picture above there is a small box to hold each time. I created that box using the code below. In this case I have used the background-color of the box # 020b43.



#timer {
    font-size: 3em;
    font-weight: 100;
    color: white;
    padding: 20px;
    width: 700px;
    color: white;

}

#timer div {
    display: inline-block;
    min-width: 90px;
    padding: 15px;
    background: #020b43;
    border-radius: 10px;
    border: 2px solid #030d52;
    margin: 15px;
}

Step 4: Design the text

Now at the end of it all I will design the text that I added using the span in the JavaScript code. I have used the following css to determine the size, color, etc. of those texts.



#timer div span {
    color: #ffffff;
    display: block;
    margin-top: 15px;
    font-size: .35em;
    font-weight: 400;
}

Hopefully from this tutorial you have learned how to build a countdown timer using JavaScript code. Please let me know in the comments how you like this tutorial. If I have done anything wrong, please let me know in the comments.

Related Post:

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Random Password Generator using Javascript

Foolish Developer — Wed, 28 Jul 2021 14:32:22 +0000

In this article I am going to show you how to create a random password generator with the help of JavaScript code. I have already created many types of JavaScript projects but this is the first time I am creating such a system. If you want to make it then hopefully this article will help you.

✅ Watch Live Preview 👉👉 JavaScript Password Generator

Random Password Generator is a JavaScript project that can generate strong and unique passwords automatically. I made a box in everyone's first web page. I have used a heading or title. Below the title is an input box where the password can be generated.

Then I made two buttons to copy and generate that password. The unit password will be generated each time you click the Generate button. For this I have used JavaScript Math.random and Math.floor method. There is also a copy button that will help you copy the sourcecodes.

If you don't understand what I'm saying then you can definitely watch the video tutorial below. This video will completely help you to know how I made this design.

Hopefully the video tutorial above has helped you to know how to create this (Random Password Generator).
Below I show step-by-step what code I have used for what purpose.
First of all you have to create an HTML and CSS file.

Step 1: Create a box using html code

I have created a box in the web page using the following codes. I have used the background color of the web page as purple and the background color of the box as white.



<div class="box">

</div>



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

body {
  background-color: #8d0cf7;
  justify-content: center;
  align-items: center;
  display: flex;
  min-height: 100vh;
    }

 .box{
   background-color: white;
   padding-top: 30px;
   padding: 30px;

 }

Step 2: Add a heading to that box

As you can see above, I am the first to use a title here. The following HTML and CSS code helped to create and design that title.



<h2>Random Password Generater</h2>



 .box h2{
   margin-bottom: 40px;
   text-align: center;
   font-size: 26px;
   color: #015a96;
   font-family: sans-serif;
 }

Step 3: Create a display using input

Now I have created a small input box using the input function. Everything that will generate the password can be seen in that input box. I have used the height of the box 50 px and width 400px. I have used user-select: none so that the user cannot click on the input box.



<input type="text" name="" placeholder="Create password" id="password" readonly>




input {
 padding: 20px;
 user-select: none;
 height: 50px;
 width: 400px;
 border-radius: 6px;
 border: none;
 border: 2px solid #8d0cf7;
 outline: none;
 font-size: 22px;
 }

input::placeholder{
  font-size: 23px;
 }

Step 4: Create two buttons to generate and copy the password

At the end of it all I made two distributions. One button will generate the password and the other will copy the password. I used CSS code to design those two buttons. I have used the height of each button 50 px, width 155px, background color purple and front color white.



<table>
   <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
   <th><a  id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
</table>



#button {
  font-family: sans-serif;
  font-size: 15px;
  margin-top: 40px;
  border: 2px solid #7100cf;
  width: 155px;
  height: 50px;
  text-align: center;
  background-color: #7100cf;
  display: flex;
  color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;  
}

 .btn2{
   margin-left: 85px
 }

#button:hover {
  color: white;
  background-color: black;
}

Step 5: Activate the system using JavaScript code

So far we've only designed it. This time we will make it work using JavaScript code. First I set a variable of the input's ID (password).



var password=document.getElementById("password");

Now I have added all the symbols, numbers and alphabets in var chars which will be used to create random passwords.

Then I used var passwordLength which will indicate how many characters this password will be created with.



 var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 var passwordLength = 12;
 var password = "";

Now I will create a random password using for loop. Here Math.random () will help to create random passwords.



 for (var i = 0; i <= passwordLength; i++) {
   var randomNumber = Math.floor(Math.random() * chars.length);
   password += chars.substring(randomNumber, randomNumber +1);
  }

I will associate that password (constant) with the input box. The resulting password will also be seen in the input box.



document.getElementById("password").value = password;

Step 6: Activate the copy button

We have implemented the password generating system and now we will implement the copy button. In the same way we have determined a variable (copyText) of the ID (password) of that input.
Whatever is written in the input box can be copied with the help of the copy button.



function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  document.execCommand("copy");  
}

Final JavaScript code



var password=document.getElementById("password");

 function genPassword() {
    var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var passwordLength = 12;
    var password = "";
 for (var i = 0; i <= passwordLength; i++) {
   var randomNumber = Math.floor(Math.random() * chars.length);
   password += chars.substring(randomNumber, randomNumber +1);
  }
        document.getElementById("password").value = password;
 }

function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  document.execCommand("copy");  
}

I hope I have explained to you in this tutorial how I created this random password system with the help of JavaScript. If you want to know better, you can watch the video tutorial above.

Related Post:

You can also download Random Password Generator source code. Please let me know in the comments how you like this design.

Automatic Image Slider Using Html Css & Javascript

Foolish Developer — Sat, 17 Jul 2021 17:35:37 +0000

In this article I will show you how to create an automatic image slider using HTML CSS and JavaScript code. Earlier I designed many more types of image sliders. If you want, you can create only with the help of HTML and CSS. But in this case I have used JavaScript.

A slider is a common web element that is used on a variety of websites. This type of slider is basically used to store many types of images together in a website. This slider can automatically change the image. There are also two buttons that can be used to change the image manually.

✅ Watch Live Preview 👉👉 Automatic Image Slider in html css

First of all I made a box in a web page. Then I added the image in that box. I have added two buttons to change the images.

I used JavaScript code to change the image. If you want to know how to make this design then follow the tutorial below. First of all you create an html and css file.

Step 1: create the background of the slider

I created a box first of all using the HTML and CSS code below. In this case I have used the height of the box 265 px and the width 500 px. If you want to increase the size of this image slider, you can make the size.
I have used shadow around this box to create which I have used box-shadow.



  <div id="slider">

  </div>



 body {
  margin: 10%;
}

#slider {
  position: relative;
  width: 500px;
  height: 265px;

  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

Step 2: Add image to slider

Now we will add the image in that box. In this case I have used five images. You can use many images if you want.



    <ul id="slideWrap"> 
      <li><img src="img1.jpg" alt=""></li>
      <li><img src="img2.jpg" alt=""></li>
      <li><img src="img3.jpg" alt=""></li>
      <li><img src="img4.jpg" alt=""></li>
      <li><img src="img5.jpg" alt=""></li>
    </ul>




#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;

  float: left;
}

Step 3: Determine the size of the image

As you can see in the picture above, the images are not in the right place in the slider. Because the size of the image is larger than the frame of the slider.

For this we will determine the size of this image according to the size of the frame of the slider. Remember that if you change the size of the frame, you will change the same here.



#slider ul li img{
  width: 500px;
  height: 265px;
}

Step 4: Add Next and prev buttons

I used two buttons in the slide. One button will help move the image forward while the other will help push the image back. I have used the following codes to design those two buttons.



    <a id="prev" href="#">&#8810;</a>
    <a id="next" href="#">&#8811;</a>



#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
  transition: all 150ms ease;
}

You must see that there are two button sliders, one on the left and the other on the right. For this I have used the css codes below.



#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}

Step 5: Activate the image slider using JavaScript

So far I have only designed this image slider. Now we will implement the image change with the help of JavaScript programming code.

First of all I have determined a Variable of each element here.



var slider = document.getElementById("slider");
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById("slideWrap");
var count = 1;
var items = slideList.querySelectorAll("li").length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");

window.addEventListener('resize', function() {
  sliderWidth = slider.offsetWidth;
});

I will store in 'prevSlide' what kind of changes will be made by clicking on the previous button.



var prevSlide = function() {
  if(count > 1) {
    count = count - 2;
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }

  else if(count = 1) {
    count = items - 1;
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
};

I will store in 'nextSlide' what kind of changes will be made by clicking on the Next button.



var nextSlide = function() {
  if(count < items) {
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
  else if(count = items) {
    slideList.style.left = "0px";
    count = 1;
  }
};

We have determined above what will change if we click on the two buttons. Again, we will add the buttons with that constant, that is, we will activate the buttons.



next.addEventListener("click", function() {
  nextSlide();
});

prev.addEventListener("click", function() {
  prevSlide();
});

The following code will help to change the image automaticallyat a certain time interval.



setInterval(function() {
  nextSlide()
}, 5000);

➤ I have instructed that the condition of nextSlide should be effective every 5 seconds. That means the images will change every 5 seconds.

➤ I set 5000 here for five seconds to change the pictures. If you want the image to change as quickly as 2 seconds, use 2000 instead of 5000.



window.onload = function() {
responsiveSlider();  
}

Final JavaScript code



var responsiveSlider = function() {

var slider = document.getElementById("slider");
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById("slideWrap");
var count = 1;
var items = slideList.querySelectorAll("li").length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");

window.addEventListener('resize', function() {
  sliderWidth = slider.offsetWidth;
});

var prevSlide = function() {
  if(count > 1) {
    count = count - 2;
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
  else if(count = 1) {
    count = items - 1;
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
};

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = "-" + count * sliderWidth + "px";
    count++;
  }
  else if(count = items) {
    slideList.style.left = "0px";
    count = 1;
  }
};

next.addEventListener("click", function() {
  nextSlide();
});

prev.addEventListener("click", function() {
  prevSlide();
});

setInterval(function() {
  nextSlide()
}, 8000);

};

window.onload = function() {
responsiveSlider();  
}

Hopefully in the above tutorial I have explained how I made this image slider with the help of HTML CSS and JavaScript. If you have any questions, please let me know in the comments.

Related Post:

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Simple Analog Clock Using Html, CSS & Javascript

Foolish Developer — Thu, 15 Jul 2021 15:30:09 +0000

In this article I am going to show you how to make an analog clock using HTML CSS and JavaScript code. I have already designed many types of analog clocks. This watch is made in the shape of a dark neumorphism design. Like a typical analog kite there are three hands to indicate hours minutes and seconds. Here I have used symbols instead of numbers from 1 to 12.

You can watch the live demo to see how this analog clock works. Since I made it with the help of neumorphism design, I have used the same color in the background of the clock and in the background of the page. First of all I made a box with 30 rem width and 30 rem height on a web page. Border-radius 50% has been used to round this box. I have used box-shadow here to implement neumorphism design.

✅ Watch Live Preview 👉👉 JavaScript Analog Clock

It's very simple and in general I made. Below I show the complete step-by-step how I made this Javascript analog clock. First of all you create an HTML and CSS file. Be sure to attach your CSS file to the html file.

Step 1: Create the basic design of the clock

I have made the background of this analog clock using the following HTML and CSS code. I created the structure of this clock using the code <div class = "clock"></div>. First of all I gave the background color of the page (background: # 282828;) in the CSS code.



<div class="clock">

</div>




 html {
  background: #282828;
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  position: relative;
  padding: 2rem;
  border: 7px solid #282828;
  box-shadow: -4px -4px 10px rgba(67,67,67,0.5),
                inset 4px 4px 10px rgba(0,0,0,0.5),
                inset -4px -4px 10px rgba(67,67,67,0.5),
                4px 4px 10px rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 50px auto;

}

Step 2: Draw two colorful lines in the clock

I used the following HTML and CSS codes to make the symbol that I used to indicate the time in this watch. First of all I made two lines using the following codes. I put those two lines at a 90 degree angle to each other. I used background: # 282828 to make the lines brighter.



<div class="outer-clock-face">

</div>



.outer-clock-face {
  position: relative;
  background: #282828;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.outer-clock-face::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
}

.outer-clock-face::after,
.outer-clock-face::before,
.outer-clock-face .marking{
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  background: #1df52f;
  z-index: 0;
  left: 49%;
}

Step 3: Make four more lines

I have made four more lines in this clock using the following HTML and CSS code. Using CSS code, I have angled those lines as needed. I have used white color, you can use any other color.



<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>



.outer-clock-face .marking {
  background: #bdbdcb;
  width: 3px;
}

.outer-clock-face .marking.marking-one {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg)
}

.outer-clock-face .marking.marking-two {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg)
}

.outer-clock-face .marking.marking-three {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  transform: rotate(120deg)
}

.outer-clock-face .marking.marking-four {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  transform: rotate(150deg)
}

Step 4: Draw a circle in the middle of the analog clock

I made a circle in the middle of this clock. This circle is at the junction of pre-drawn lines. The resulting lines have become symbols.



          <div class="inner-clock-face">

          </div>



.inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: #282828;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  z-index: 1;
}

.inner-clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  background: #4d4b63;
  z-index: 11;
}

Step 5: Make three hands in the clock

Like a normal analog clock, I have used three hands to indicate hours, minutes and seconds. I created and designed those hands using the HTML and CSS code below.



    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>



.hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: #61afff;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hand.hour-hand {
  width: 30%;
  z-index: 3;
}

.hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 40%;
}

.hand.second-hand {
  background: #ee791a;
  width: 45%;
  height: 2px;
}

Step 6: Activate the analog clock with JavaScript code

We have done the work of designing this analog watch. Now we will implement this watch with the help of JavaScript. In this case I did not use any plugin or JavaScript library. I have only executed the hands in this watch using JavaScript. Even if you are a beginner, you can understand this design. Below each code I have given a complete explanation of why I used that code.

We are going to grab the reference for the following using querySelector():
➤ .second-hand
➤.min-hand
➤.hour-hand



const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');



 function setDate() {
  const now = new Date();

➤ new Date() creates an instance of the Date class from which we can get all kinds of things like current date, hours, minutes, seconds, etc.



  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

➤ I have stored in 'secondsDegrees' how the second hand will rotate.
➤ Then I use rotate(${secondsDegrees}deg) to rotate the hand.
➤ I divided by 60 because 1 minute is equal to 60 seconds.
➤ I multiplied by 360 because a circle is formed by 360 degrees.



  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

➤ I have stored in 'minsDegrees' how to turn the hand of the minute.
➤ Then userotate(${minsDegrees}deg) to rotate the hand.
➤ I divided by 60 because 1 hour is equal to 60 minutes.
➤ Added second hand position with minutes. Because the minute's hand is in the right place depending on the second.



  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}



setInterval(setDate, 1000);

setDate();

➤ We need to call this rotate() function every 1 second (1000 milliseconds).

Final Javascript code



const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

 function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);

setDate();

Hopefully from this tutorial you have learned how to make this analog clock. If you have any questions you can ask me by commenting. Of course you can let me know if I did something wrong.

Related Post:

You can visit my blog for more tutorials like this.
https://groundtutorial.com/