DEV Community: Divyamcm

PASSWORD GENERATOR using HTML, CSS, and Javascript

Divyamcm — Wed, 20 Oct 2021 10:44:35 +0000

==================================================

Dear Reader,

Let’s build a password generator which generate passwords of different lengths and which can include or exclude special characters in the generated passwords based on user selection. This is going to be simple. Stay with me till the end. 🔐

Folder structure:

index.html — contains the HTML layout which defines the element structure that would be shown on the page.
style.css- contains CSS code for styling. Using CSS we can style the different portions to make them more visually appealing.
script.js — contains Javascript code where all the functions are placed.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by pressing ! and then pressing tab. Give the title as ‘Password Generator’. Link style.css and script.js to the created HTML file and link FontAwesome CSS to use icons*.*

Generate Password Button: Create button inside div class wrapper clicking on which we will generate the password. Add <i class=”fab fa-keycdn”></i> to display icon.

<button id="generate" class="action-btn">Generate Password <i class="fab fa-keycdn"></i></button>

Slider to select length: Add one more div class slider_main inside wrapper class .slider_main class contains the slider which is used to select the length of the password. The min, max and the initial value is set and the selected value using slider will be displayed in the output section.

<div class="slider\_main">
 <input type="range" value="8" min="1" max="25" class="slider"oninput="this.nextElementSibling.value = this.value" id="slider">
 <output>8</output>
</div>

Checkbox to include special characters: Add an input tag of type checkbox, on checking we will include special characters in the password, and on unchecking we will remove special characters from password.

<label class="container" style="font-family: fantasy;color: rgb(3, 3, 3);">Include special characters
            <input type="checkbox" checked="checked" id="checkbox">
            <span class="checkmark"></span>
        </label>

Password display and copy button: Add a h5 tag under div class wrapper_main to display the generated password and add a button to copy the generated password. Use <i class=”fas fa-clipboard”> for the clipboard icon.

<div class="wrapper_main">
        <h5 id="pwd_txt"></h5>
        <button id="clipboard" class="clipboard">
            <i class="fas fa-clipboard"></i>
        </button>
</div>

Here is the complete HTML code,

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="style.css"> 
</head>

<body>
    <div class="wrapper">
        <button id="generate" class="action-btn">
            Generate Password <i class="fab fa-keycdn"></i>
        </button>
        <div class="slider_main">
            <input type="range" value="8" min="1" max="25" class="slider"
                oninput="this.nextElementSibling.value = this.value" id="slider">
            <output>8</output>
        </div>
        <label class="container" style="font-family: fantasy;color: rgb(3, 3, 3);">Include special characters
            <input type="checkbox" checked="checked" id="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>



    <div class="wrapper_main">
        <h5 id="pwd_txt"></h5>
        <button id="clipboard" class="clipboard">
            <i class="fas fa-clipboard"></i>
        </button>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS Styling

Implement a slider to override the default one and hovering on the slider will make it less opaque.

.slider{

-webkit-appearance: none;
width: 70%;
height: 10px;
background: #f7be04;
border-radius: 15px;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
margin-left: 40px;
margin-top: 25px;
margin-bottom: 20px;
}

.slider:hover{
opacity: 0.5;
}

Complete CSS code is here

html{
min-height: 100%;
}



body{
min-height: 100%;
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
text-align: center;
}



.slider{
-webkit-appearance: none;
width: 70%;
height: 10px;
background: #f7be04;
border-radius: 15px;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
margin-left: 40px;
margin-top: 25px;
margin-bottom: 20px;
}

.slider:hover{
opacity: 0.5;
}

.slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 15px;
height: 15px;
background: #000000;
border-radius: 50%;
cursor: pointer;
}

.action-btn{
background-color: #000;
border: 0;
color: #f7be04;
font-size: 20px;
cursor: pointer
padding: 10px;
margin: 10px  20px;
border-radius: 15px;
font-family: fantasy;
opacity: 1;
transition: opacity .2s;
}



.action-btn:hover{
opacity: 0.5;
}



.wrapper{
display: flex;
background-color: rgb(253, 253, 252);
flex-direction: column;
width: 30%;
margin-top: 10%;
margin-left: 35%;
border-radius: 15px;
font-family: fantasy;
padding-bottom: 1%;
}

.slider_main{
display: flex;
flex-direction: row;
}

output{
margin-top: 20px;
margin-left: 10px;
}



.wrapper_main
{
display: flex;
background-color: rgb(253, 253, 252);
flex-direction: row;
width: 22%;
margin-top: 5%;
margin-left: 38%;
border-radius: 15px;
font-family: Georgia, serif;
padding-left: 45px;
}



.clipboard{
margin-left: auto;
cursor: pointer;
border: 0;
background-color: white;
color:black;
border-radius: 15px;
font-size: 23px;
opacity: 1;
transition: opacity .2s;
}



.clipboard:hover{
opacity: 0.5;
}

Javascript logic

We need to generate the password by selecting characters randomly. The length slider value given by the user will determine the length of the password and the user can choose whether to include special characters or not using the checkbox. To implement this functionality let’s fetch the required elements and store them in the below constants and variables.

password_ele — To store the h5 element which is used to set the generated password.

string — To store the characters used to generate passwords except for special characters.

special_chars —Used to store special characters, based on check box value we can add special characters to the password.

generate — Used to store the Generate Password button.

clipboard — Used to store clipboard button.

pwd_length — Used to store the slider element.

const password_ele = document.getElementById("pwd_txt");

var string = "ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789";

const special_chars = "@#$%^&*";

const generate = document.getElementById("generate");

const clipboard = document.getElementById("clipboard");

var pwd_length = document.getElementById("slider");

On clicking Generate Password button we will execute some lines of codes to generate the password using Math.random() function. If checkbox is checked then we will add special characters to our original string. Original string contains “ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789”.

Loop through the string to fetch the character randomly and in each loop add the randomly selected character to the password variable which was empty initially. The number of times the loop is executed is equal to the slider length so, the length of the password will be equal to the length given by the user.

generate.addEventListener('click', () => {
    let password = "";
    var checked = document.getElementById("checkbox").checked;
    var final_string = string;
    console.log(checked);
    if (checked) {
        final_string += "@#$%^&*";
    }
    for (var i = 0; i < pwd_length.value; i++) {
        let pwd = final_string[Math.floor(Math.random() * final_string.length)];
        password += pwd;
    }
    password_ele.innerText = password;
    final_string = string;
});

on click of clipboard icon, the password text should get selected and display an alert message.



clipboard.addEventListener('click', () => {

 navigator.clipboard.writeText(password_ele.innerText);

 alert("Password copied to clipboard");

});

Complete javascript code is here,

const password_ele = document.getElementById("pwd_txt");
var string = "ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789";
const special_chars = "@#$%^&*";
const generate = document.getElementById("generate");
const clipboard = document.getElementById("clipboard");
var pwd_length = document.getElementById("slider");


generate.addEventListener('click', () => {
    let password = "";
    var checked = document.getElementById("checkbox").checked;
    var final_string = string;
    console.log(checked);
    if (checked) {
        final_string += "@#$%^&*";
    }
    for (var i = 0; i < pwd_length.value; i++) {
        let pwd = final_string[Math.floor(Math.random() * final_string.length)];
        password += pwd;
    }
    password_ele.innerText = password;
    final_string = string;
});


clipboard.addEventListener('click', () => {
    navigator.clipboard.writeText(password_ele.innerText);
    alert("Password copied to clipboard");
});

Let’s check the output

Complete code is placed in GitHub.

Thanks for your interest.

Countdown Timer using HTML, CSS, and Javascript

Divyamcm — Fri, 15 Oct 2021 22:35:20 +0000

===============================================

Dear Reader,

We might have come across e-commerce websites with countdown timers that give information on some sales or deals. We will create a web page where we will place a countdown timer that informs us about when the discount sale will end. Let’s implement one such scenario here. Countdown begins⏳ !!!

Folder Structure of the project:

index.html — contains the HTML layout which defines the element structure that would be shown on the page.
images are directly placed inside the folder of our project.
style.css- contains CSS code for styling. Using CSS we can style the different portions to make them more visually appealing.
script.js — contains Javascript code. There are several functions that work together to handle all the functions of the timer.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘Countdown Timer*’. Link **style.css* and script.js to the created HTML file.

Create a div class product that wraps around everything related to the product. I have used shoes as my discounted product for this example. Use img tag to add the image of the shoe.

Add the following div class,

details — to hold information on the deal.

wrap — which wraps timer and text.

timer — to hold the entire countdown timer.

days, hours, mins, and secs — to hold the remaining days, hours, mins, and secs.

Let days, hours, mins, and secs class contain span tag with id days_left, hours_left, mins_left, and secs_left respectively. The dynamic data will go inside the span element and id will be used in javascript code to fetch the element.



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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1> Best deals of the day</h1>
    <div class="product">
        <img src="shoe.jpg" alt="shoes" width="400px" height="300px">
        <div class="details">
            <h3>🔥30% off on all branded shoes🔥</h3>
            <p> This festive season we have multiple amazing offers on all branded shoes.
                Bank and payment offers, and many more deals.This sale brings hundreds of deals
                across all branded shoes. To help you find the best discounts,
                we've handpicked some of the best deals and offers available on shoes during the ongoing discount Sale. Grab the offer soon!!🤩
            </p>
            <div class="wrap">
                <h3 class="offer">Offer ends in</h3>
                <div class="timer">
                    <div class="days">
                        <span id="days_left"> 0</span>
                        days
                    </div>
                    <div class="hours">
                        <span id="hours_left"> 0 </span>
                        hours
                    </div>
                    <div class="mins">
                        <span id="mins_left"> 0 </span>
                        mins
                    </div>
                    <div class="secs">
                        <span id="secs_left"> 0 </span>
                        secs
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="style.js"></script>
</body>

</html>

CSS Styling

Quite a bit of CSS coding is required to make the page visually appealing and even without much CSS, we can implement the basic countdown timer.

Below is the code,




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

body{
    font-family: 'Oswald', sans-serif;
    align-content: center;
    text-align: center;
    background-color:rgb(244, 248, 250);
}

.product{
display: flex;
background-color: rgb(237, 243, 243);
gap: 7rem;
}

.details{
    display:flex;
    flex-direction: column;
    margin-right: 150px;  
}

.wrap{
    display: flex;
    flex-direction: row;
}
.timer{
    display: flex;
    text-align: center;
    flex-direction: row;
    margin-left: 3rem;
    gap: 30px;
    color:red;
    margin-top: -5px;

}
.days{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}


.hours{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}
.mins{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}

.secs{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}


h3{
    color:lightseagreen;
}

.offer{
    flex-basis: 6rem;
}

p{
    text-align: left;
}

Javascript logic

The whole idea is to calculate the time left before the offer ends. To calculate the time left we will take the difference of the current date and offer end date and present it in valid format.

Let’s create a function called countdown() in which we will declare a const called today and offerDate to add the current date and offer end date objects respectively.



const today = new Date();  
var offerDate = new Date('30 oct 2021');

Assign the difference between offerDate and today to the const offerTime which will give the time left in milliseconds.



const offerTime = offerDate - today;

Let’s calculate the number of days, hours, mins, and secs left using the offerTime value.

To calculate seconds:

Divide milliseconds by 1000 to convert to seconds: (offerTime/1000)
Divide the total seconds by 60 and grab the remainder. You don’t want all of the seconds, just those remaining after the minutes have been counted: (offerTime/1000) % 60
Round this down to the nearest whole number. This is because you want complete seconds, not fractions of seconds: Math.floor( (offerTime/1000) % 60 )

To calculate minutes:

Divide milliseconds by 1000 to convert to seconds: (offerTime/1000)
Divide the total seconds by 60 to get the minutes( 1 min = 60 secs), again divide by 60 and grab the remainder. Round this down to the nearest whole number. Math.floor((offerTime / (1000 * 60) % 60))

To calculate hours:

Divide milliseconds by 1000 to convert to seconds: (offerTime/1000)
Divide the total seconds by 60 to get the minutes( 1 min = 60 secs),again divide by 60 (1 hour = 60 minutes), divide the result by 24 (1 day = 24 hours)and grab the remainder. Round this down to the nearest whole number. Math.floor((offerTime / (1000 * 60 * 60) % 24))

To calculate days:

Divide milliseconds by 1000 to convert to seconds: (offerTime/1000)
Divide the total seconds by 60 to get the minutes( 1 min = 60 secs),again divide by 60 (1 hour = 60 minutes), divide the result by 24 (1 day = 24 hours). Round this down to the nearest whole number. Math.floor((offerTime / (1000 * 60 * 60 * 24))

Once we have all the values we will set days, hours, mins, and secs to HTML span element.HTML element where the value to be set is fetched using getElementById() method and using innerHTML set the calculated values.



const days\_el = document.getElementById("days\_left");  
days\_el.innerHTML = offerDays;const hours\_el = document.getElementById("hours\_left");  
hours\_el.innerHTML = offerHours;const mins\_el = document.getElementById("mins\_left");  
mins\_el.innerHTML = offerMins;const secs\_el=document.getElementById("secs\_left");  
secs\_el.innerHTML = offerSecs;

I added one more function just to reset the offer date once the offer date reaches the current date. We can ignore this function if not required.

Using setInterval() method call the countdown() function every second.

setInterval(countdown, 1000);



function countdown() {
    const today = new Date();
    var offerDate = new Date('30 oct 2021');

    //If offer ends reset to new value
    if (today.getSeconds() == offerDate.getSeconds()) {
        offerDate = resetOfferDate();
    }

    //offerTime will have the total millseconds 
    const offerTime = offerDate - today;

    // 1 sec= 1000 ms
    // 1 min = 60 sec
    // 1 hour = 60 mins
    // 1 day = 24 hours
    const offerDays = Math.floor(offerTime / (1000 * 60 * 60 * 24));
    const offerHours = Math.floor((offerTime / (1000 * 60 * 60) % 24));
    const offerMins = Math.floor((offerTime / (1000 * 60) % 60));
    const offerSecs = Math.floor((offerTime / 1000) % 60);

    const days_el = document.getElementById("days_left");
    days_el.innerHTML = offerDays;
    const hours_el = document.getElementById("hours_left");
    hours_el.innerHTML = offerHours;
    const mins_el = document.getElementById("mins_left");
    mins_el.innerHTML = offerMins;
    const secs_el = document.getElementById("secs_left");
    secs_el.innerHTML = offerSecs;
}

function resetOfferDate() {
    const futureDate = new Date();
    futureDate.setDate(futureDate.getDate() + 15);
    return futureDate;
}

setInterval(countdown, 1000);

We’ve finished coding! Time to check the output.

All of the above-written code is available on GitHub. Watch this space for more interesting articles, up next in this series!

Thanks for your interest.

KEY SEQUENCE DETECTION using HTML, CSS, and Javascript

Divyamcm — Wed, 13 Oct 2021 08:31:45 +0000

======================================================

Photo by Christin Hume on Unsplash

Dear Reader,

Let’s learn some javascript by doing a simple project.The objective of the project is to detect a given key sequence in the user input and react to that. In the example, we will add some random images on the page on the key sequence typed in by the user. Time to code!!!

Folder structure:

index.html — contains the HTML layout which defines the element structure that would be shown on the page.
style.css- contains CSS code for styling. Using CSS we can style the different portions to make them more visually appealing.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘Key Sequence Detection’. Link style.css. Add a header h1 with the text*.* Here, I gave informative text as ‘Enter the code’. On clicking h1 text we can see the secret code or sequence of keys that we are going to detect and once the user enters this secret code we will add some images on the screen.

index.html

CSS Styling

For the styling of the whole HTML page, I have used background-color, background-image. For the body I added text-align and font-family.

I gave a pink shade to the text inside the h1 tag and added CSS code so that when we hover on the h1 element the arrow mouse cursor will change to the hand pointer cursor: pointer; and the text color will change.

h1:hover {

color: rgba(205, 211, 150, 0.9);

}

style.css

Javascript logic

Our predefined sequence of characters are ‘css’ so,we will declare a variable called secretCode and let’s assign value ‘css’ to it. The first event listener which we are going to create is for showing secretCode when we click on the h1 element. At first, we will fetch the h1 text which is ‘Enter your code’ and store it in const variable called text. Create event listener which listens for click event on the h1 element so, when we click on the original h1 text i.e ‘Enter your code’ text it will verify whether it is a secretCode value or original h1 text . If it is original h1 text (‘Enter your code’) then the text will be changed to the value of secretCode(‘css’) and if the value is ‘css’ it will be changed to ‘ Enter your code’.

javascript code

output view

We will implement the second event listener which will detect the key sequence entered using keyboard and if the sequence matches the predefined sequence ‘css’ then we will add images to the screen.

Let’s declare an array to push the characters entered by user. const pressed = []; .Now, we will create an event listener to check for keyup event on window once that happens push the characters to the array but, that could get fairly big*.* So what we want to do is just trim this array to be the maximum that we would ever need and in our case, if we’re just looking for the word

“css,” then we are maximum looking for three characters. So, splice the array. Note that we want the last sequence of characters so, let’s start from counting from the end of the array.

pressed.splice(-secretCode.length — 1 , pressed.length — secretCode.length);

Later, convert this sequence of characters to string using join() function and check whether it includes the secretCode.

pressed.join(‘’).includes(secretCode)

If the string includes secretCode then we will call predefined function cornify_add() to display some pictures on the screen.

javascript code

final output

Congratulation 🎉! You have just completed a simple javascript project.

All of the above-written code is available on GitHub. Watch this space for more interesting articles, up next in this series!

Confused about something? Let us know in the responses below.

Refer https://javascript30.com/ for more projects

Thanks for your interest.

Analog Clock using HTML, CSS, and Javascript

Divyamcm — Sat, 09 Oct 2021 15:14:55 +0000

============================================
Photo by Lucian Alexe on Unsplash

Dear Reader,

Let’s start learning some cool CSS tricks and a bit of Javascript by building an analog clock using HTML, CSS, and Javascript. Trust me! This will be the best exercise for beginners in CSS and javascript.

First, let me show you a demo before starting the implementation

Analog clock demo
https://www.youtube.com/watch?v=ZTUNW9nnAaQ

Folder Structure of the project

index.html — contains the HTML layout which defines the element structure that would be shown on the page.
images folder — contains .jpg images used in our project.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘Analog Clock*’*.

<title>Analog Clock</title>

Inside the body, add the div element with the class clock which represents the outline of the clock, and add three div elements that represent the hands of the clock inside the clock class. Oh wow! we are done with HTML.

index.html

CSS Styling

CSS is used to style the different portions and make them more visually appealing. First of all, give the background color or background image of the page in the CSS code with size and alignment.

index.html

The outline of the clock is circular in shape so let’s set border-radius to 50%. You can experiment on border width and border color.

.clock {

width: 30rem;

height: 30rem;

border: 20px solid #fec1b8;

border-radius: 50%;

margin: 50px auto;

position: relative;

padding: 2rem;

box-shadow:

0 0 0 4px rgba(0,0,0,0.1),

inset 0 0 0 3px #f8a09b,

inset 0 0 10px black,

0 0 10px rgba(0,0,0,0.2);

}

Now, let’s implement the clock hands CSS part. The idea is that we’re going to apply a rotation to each of the hands depending on what time it currently is. I am setting the width, height to place hands in proper positions inside the clock.

transform-origin: 100% will help to rotate the clock hand on the very right-hand side, by default it’s 50%. 100% along the x-axis will put that pivot point on the very right-hand side so, that the right edge of the clock hand will be fixed to the center of the clock.

transform: rotate(90deg);divs are block and they’re left to right, it’s not actually starting at 12:00. So, we could just rotate the entire thing by 90 degrees.

transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); It gives you this tick kind of animation. It goes forward and back, forward and back.

For individual hands add different widths and heights just to differentiate between them. That’s all with the CSS.

index.html

Javascript logic

The logic of the player is defined inside the script tag.We are going to grab the reference for the following using querySelector().

.second-hand

.min-hand

.hour-hand

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

const now = new Date();

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.

Similarly, 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.

Implemented similar logic on hour hand as well.

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

index.html

That’s all folks !!

Refer https://javascript30.com/ for many such projects

Find the complete source code here.

Thanks for your interest.

Follow along Navigation using HTML, CSS, and Javascript

Divyamcm — Sat, 09 Oct 2021 12:44:45 +0000

=======================================================

Dear Reader,

You might have seen some cool websites where just mouse hover on the navigation will show a strip or highlights. Let’s build a simple project to show follow-along navigation. We’ve got these links on the page and when you hover over one of the links, we’ve got this pill-shaped highlight that’s going to both resize itself, as well as follow you around the page wherever that is going. Now, let’s jump into the implementation part.

index.html — contains the HTML layout which defines the element structure that would be shown on the page.
images are directly placed inside the folder of our project.
style.css- contains CSS code for styling. Using CSS we can style the different portions to make them more visually appealing.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘Follow-along Navigation’. Link style.css and add few links using anchor tag < a > under < nav > tag. Use the < footer > tag to display the footer section. That’s a simple HTML.

index.html

CSS Styling

For the styling of the body, I have used background image, font-family, color and adjusted the image and text alignment.Added some padding to h1 and nav elements

style.css

Add color, padding, font-size to anchor tagelements. To highlight class elements add background,border-radius to have curve edged highlight. Add transition of 0.2 s for smooth transition of highlight from one element to other.The highlight has a z-index of -1, it will be placed behind the link text.

style.css

To display red heart give color to heart class.

.heart{color: #b14240;}

Javascript logic

We will fetch all the link elements that will be hovered and store it in triggers variable.Let’s add a class of highlight and later put it into the DOM. Using triggers.forEach() take each link and add the event listener for mouse enter and when that happens we are going to run the function highlightLink().we need to figure out the width, the height, the X-axis and the Y-axis values which means we need to figure out how big is the element that we hovered and where on the page is that actual element.we’re going to use a method called getBoundingClientRect() to get link elements position on the page and for the obtained top and left values we will add window.scrollY and window.scrollX values i.e scrolled down and scrolled right values.

Set these values to the highlight width and height . The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). Use translate method to set x-axis and y-axis position.

highlight.style.width = `${coords.width}px`;

highlight.style.height = `${coords.height}px`;

highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;

The final result is here
https://www.youtube.com/watch?v=mw2Fmn_P_S0

Complete source code is here .

Referred https://javascript30.com/ and customized it.

Thanks for your interest.

Build Music Player using HTML, CSS, and Javascript

Divyamcm — Thu, 07 Oct 2021 08:56:43 +0000

==================================================
Photo by Lee Campbell on Unsplash

Dear Reader,

How about building a Music player on your own from scratch? Exciting right! Let’s start.

Folder Structure of the project

index.html - contains the HTML layout which defines the element structure that would be shown on the page.
images folder - contains .jpg images used in our project.
music folder - contains .mp3 audio files used in our project.
style.css- contains CSS code for styling. Using CSS we can style the different portions to make it more visually appealing
script.js - contains Javascript code. There are several functions that work together to handle all the functions of the player. Ex: play, pause, to switch the songs back and forth, popup title of the song with the progress bar when we play the song, able to click on the progress bar to go to that spot in the song etc.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘Music Player’. Link style.css and script.js to the created HTML file and link FontAwesome css to use play, pause,next and previous icons.

Basic index.html

Inside the body, Create a audio-container class which will wrap around everything.

<div class =“audio-container" id =“audio-container">

Inside audio-container class, create a audio-info class which holds the title of the song and the progress when we click play.

<div class=”audio-info”>

Add h4 tag with id = ‘title’ inside audio-info class and this is going to be populated dynamically with javascript with the current playing song.

<h4 id=”title”></h4>

Create progress-container class and inside that add progress class which will be filled dynamically

<div class=”audio-container” id=”audio-container”>

<div class=”audio-info”>

<h4 id=”title”></h4>

<div class=”progress-container” id=”progress-container”>

<div class=”progress” id=”progress”></div>

</div>

Underneath audio-info class add audio tag with the source of the song and id .

<audio src=”music/melody.mp3" id=”audio”></audio>

To hold images

<img src=”images/melody.jpg” alt=”music-cover” id=”cover”>

Create a navigation class and we will have three buttons inside that to play the song, to play previous song and next song

<div class=”navigation”>

<button id=”prev” class=”action-btn”>

<i class=”fas fa-backward”></i>

</button>

<button id=”play” class=”action-btn action-btn-big”>

<i class=”fas fa-play”></i>

<button id=”next” class=”action-btn”>

<i class=”fas fa-forward”></i>

</button>

index.htmlMusic Player view

CSS Styling

Quite a bit of CSS coding is required and I explained the only the important parts here and rest of the CSS code mostly deals with positioning,size and color of the elements.I shared the github link at the end of the post where you can see the complete code.

For the styling of the body, I have used linear gradient of yellow and orange color shades as background image.

background-image: linear-gradient(0deg, rgba(251,252,13,1) 23.8%, rgba(255,170,1,0.99) 92%);

Added background-color as black and also added the shadow for the audio-container class which wraps around everything except the h1 tag

background-color: #000;

box-shadow: 0 20px 20px 0 rgb(247, 148, 1);

To make the image circular set the border-radius to 50% in the img-container

border-radius: 50%;

Set animation in the img-container to make the circular image rotate when the song is playing

animation: rotate 3s linear infinite;

Create rotate keyframes starting at 0 degree to 360 degree

@keyframes rotate {

from {

transform: rotate(0deg);}

to {

transform: rotate(360deg);}

}

If audio-container has a play class on it then the image will rotate

.audio-container.play .img-container img {

animation-play-state: running;

}

Only when the music is playing the audio-info will popup. Refer the following CSS implementation

style.css

Below is the CSS code for progress bar to show the percentage of song completed. I used white color as background and black color to show the progression.

style.css

Javascript logic

The logic of the player is defined in the script.js file. There are several functions that work together to handle all the functions of the player.

Defining all the variables and accessing the HTML elements.

The required elements in the HTML layout that are to be dynamically changed are first selected using the getElementById() method and then assigned to a variable names so that they could be accessed and modified.

script.js

Write a function loadSong(song) to dynamically update the audio source and respective image source. Call the function to load the song details into DOM by passing the songIndex value.I considered songIndex value to be 1 which means music player starts from second song in the list (index starts from 0).

Let’s create event listeners which listens to particular event (for ex: click) and perform particular actions

Event listener on clicking Play button: Clicking on play button should start the song and if the song is already playing then it should stop. Implement playSong() function and pauseSong() function which also includes the logic to change the icons from play icon to pause icon and vice versa.

script.js

Event listener on clicking Previous and Next button: Clicking on previous button will call prevSong() function which should play the previous song in the list so we are decrementing the songIndex value. If the songIndex value is lesser than 0 then we are setting songIndex value such that it should point to the last song in the list so, the songs will be played in loop.Similarly, clicking on next button will call nextSong() function which should play the next song in the list so we are incrementing the songIndex value. If the songIndex value is greater than or equal to the number of songs in the list then we are setting songIndex value to 0.

script.js

Event listener to update song progress: On HTML audio tag there is an event called timeupdate. Everytime when the song is playing constantly this will be called and on this event we will call updateProgress() function. In the updateProgress() function we will get the duration of the song from the event and the currentTime. Calculate progressPercent by using formula (currentTime/ duration)*100 and set that progressPercent value to width of the progress bar.

script.js

Event listener on clicking progress bar: To go to that spot in the song when we click anywhere on the progress-container then we will call setProgress() function. This function will change the song progression based on user’s click on progress bar by getting the X-axis offset value to know where the user clicked and calculate the currentTime by using formula (clickX / width) * duration. In this way we can move anywhere in the song.

style.css

Event listener to check end of the song: The HTML audio API gives us an event called ended. When song ends we will call the nextSong() function which was created before.

audio.addEventListener(‘ended’, nextSong);

VOILA !!!!! Music player is ready for the demo

Final Demo
https://www.youtube.com/watch?v=Xyss5NABwOc

Complete source code can be found in the Git hub repo, link is here

Refer https://javascript30.com/ for many such projects

Thanks for your interest.

Divya M C M

Drum Kit using HTML, CSS, and Javascript

Divyamcm — Thu, 07 Oct 2021 08:53:01 +0000

========================================

Dear Reader,

How about building drum kit on your own virtually with the help of some scripting language?Sounds cool right! Let’s start building a simple drum kit using HTML, CSS, and Javascript that runs in a browser which will play the sound when the user press on particular key on the keyboard.

Folder Structure of the project

index.html — contains the HTML layout which defines the element structure that would be shown on the page.
images folder — contains .jpg images used in our project.
sounds folder — contains . wav files used in our project.
style.css — contains CSS code for styling. Using CSS we can style the different portions to make it more visually appealing.

HTML Layout

Open VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘Drum Kit*’. Link **style.css* to the created HTML file.

<title>Drum Kit</title>

<link rel=”stylesheet” href=”style.css”>

Inside the body, Create a div element with the class of keys which will wrap all the drum kit keys used in our application.Inside the div class we have another set of div’s with a class of key. Now each one of these keys here has a sound associated with it. For every key on the keyboard when we do key up or key down action, there is going to be something called the key code that is associated with that key. For ex: key code of ‘A’ is 65.

In our project, we are using ‘A’, ‘S’, ‘D’, ‘F’, ‘G’ ‘H’, ‘J’, ‘K’, ‘L’ keys to play the sounds of the drum kit. When we press any of the above keys on the keyboard then we’re going to play the corresponding audio element.For example when we press key ‘A’ (_Keycode ‘65’)_ on keyboard we’re going to check if that was the ‘A’ Key then we’re going to play the corresponding audio that also has the same data-key and we’re going to find the key div element,add a class of playing so it will animate itself on in.

Now, what is this data-key?

The data-* attribute is used to store custom data private to the page or application.

The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page’s JavaScript to create a more engaging user experience

The data-* attribute consist of two parts:

The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix “data-”. In our case it is data-key.
The attribute value can be any string. In our case value is a number which represents keycode.

Here is the HTML code,

<div class=”keys”>

<div data-key=”65" class=”key”>

<kbd>A</kbd>

<span class=”sound”>clap</span>

</div>

<audio data-key=”83" src=”sounds/hihat.wav”></audio>

index.html

CSS Styling

CSS is used to style the different portions and make it more visually appealing.Experiment on color, background, font-family, margin and font size you want to give to the body,heading and the keys.

style.css

When we press any of these keys ‘A’, ‘S’, ‘D’, ‘F’, ‘G’ ‘H’, ‘J’, ‘K’, ‘L’ on keyboard then let’s do some animation on key div element . On key press from the keyboard the corresponding key div element on the UI should scale a bit and the border should be changed to yellow with shadow which means we have to change the existing property value.This transition should happen on key down(key press)and we will use CSS transitions which allows you to change property values smoothly, over a given duration.

we will define the property values that has to be changed in playing class which will get added to the key div element on key down action using Javascript function.

style.css

Javascript logic

The logic of the player is defined inside the script tag.Our first goal is to listen to the key down event and call playSound function. We are passing the event object to the function where event object holds all kinds of info like what key was actually hit which also contains the keycode.Take an example, we press keycode 65 (‘A’) on the keyboard. Next, we are finding out is there an audio element on the page that has a data-key of 65 for that we are going to use document.querySelector() to select an audio element where it has a data — key same as e.keycode.

window.addEventListener(‘keydown’, playSound);

function playSound(e) {

const audio = document.querySelector(`audio[data-key=”${e.keyCode}”]`);

In a similar way, find out is there an div element on the page that has a data-key of 65 for that we are going to use document.querySelector() to select an div element where it has a data — key same as e.keycode. The returned element is assigned to a constant variable called key.

const key = document.querySelector(`div[data-key=”${e.keyCode}”]`);

If audio element is not present i.e If the pressed key on the keyboard don’t have an audio element associated with it then return in other words statement stops the execution of a function.

if (!audio) return;

We are going to add the playing class on the div element which is assigned to constant variable key . This playing class will add animation to the div element of the corresponding key pressed as mentioned in CSS section before.

key.classList.add(‘playing’);

Next we are going to the play the audio. Before playing the audio we will

rewind it to the start of the element so that if you hit key in succession over and over again it will just rewind it to the start. So let’s say,

audio.currentTime = 0;

audio.play();

we are done with playSound function*.* As we already discussed,we are adding the animation once the listed key is pressed but we also want to remove the animation in sometime. The requirement is to add the animation only during the key press. we can use a transitionend event that will fire when the element has stopped animating itself on in*.*

const keys = Array.from(document.querySelectorAll(‘.key’));

keys.forEach(key => key.addEventListener(‘transitionend’, removeTransition));

Now, what is the transitionend event?

As we already discussed,when the listed key is pressed the div element CSS will be transitioned to scale a bit and the border will be changed to yellow with shadow.The **transitionend** event is fired when a CSS transition has completed. Once the transitionend event occurs we will call removeTransition function by passing event object. The event object contains a propertyName called ‘transform’ which indicates the transform has finished. If the transition is completed then we will remove the animation by removing the class playing.

function removeTransition(e) {

if (e.propertyName !== ‘transform’) return;

e.target.classList.remove(‘playing’);

}

We are done!! Time to run the code and check the results.
https://www.youtube.com/watch?v=fqnWbdOG2-U

Find the complete source code here.

Refer https://javascript30.com/ for many such projects

Thanks for your interest.

-Divya M C M