DEV Community: Code Media

Build a Countdown Timer using JavaScript

Code Media — Thu, 16 Dec 2021 17:03:18 +0000

In this article you will learn how to create JavaScript in countdown time. It's a bit like a digital watch, but it's the complete opposite. In the case of this watch the time tends to decrease gradually.

This will continue to be the countdown for the time or date you want to run the countdown. It will take the current time from your device using JavaScript's New Date Method. Then subtract the current time with your input time.

It will continue to run the countdown by converting the subtraction time into days, hours, minutes and seconds. I took the help of HTML, CSS and JavaScript to make it.

You want a preview? Watch the live demo

HTML has done some basic design of CSS and JavaScript has implemented it. However, only one line of HTML code has been used here. Below I have given the required source code and an explanation of how to create one.

We hope you can create this simple countdown time by following this tutorial below.

1. HTML code of Countdown Timer

The code below is the HTML code needed to create this countdown timer. As I said before, only one line of HTML code has been used to create this timer.
This HTML code is basically for the basic structure of the countdown timer.

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

2. CSS code of Countdown Timer

Now it's time to design this timer using css code. Here I have used some basic CSS to design web pages. Here I have used black color on the web page and padding to place the timer in the middle of the webpage.

body {
    text-align: center;
    padding: 70px 50px;
    background: #0D1A29;
    font-family: sans-serif;
    font-weight: lighter;
}

Now designed the background of this timer using the following CSS code. Here we have created an area called Background whose width: 400px and height depends on the amount of content. I have used a border here to understand the area.

#timer {
    font-size: 3em;
    font-weight: 100;
    margin: 80px auto;
    color: white;
    border: 2px solid #B1CDF1;
    padding: 20px;
    width: 400px;
    text-shadow: 0 0 20px #0eea9d;
}

Now, using the following JavaScript, I have designed the text in this timer and the number of times to display. The question may arise in your mind, there is no HTML code added for this.

For this I have added HTML code in JavaScript using 'innerHTML'. Now I have added his css code.

#timer div {
    display: inline-block;
    min-width: 90px;
}

#timer div span {
    color: #1fd681;
    display: block;
    font-size: .35em;
    font-weight: 400;
}

3. Countdown Timer's JavaScript

Now is the time to add the required JavaScript for this JavaScript countdown timer. Below are all the codes together and the necessary explanations on each line. Hopefully the following expressions will help you understand the codes.

function updateTimer() {
//Now you have to decide what time you want to run the countdown
//Date. parse() method parses a string representation of a date, and returns the number of milliseconds
    future = Date.parse("jan 1, 2022 11:30:00");

//The current time has been taken from the device using the new Date () method
    now = new Date();
//Now I have saved the total time of the countdown in "diff"
//Countdown time = input time - current time
    diff = future - now;


//days= countdown time/ 1 day
// 1 seconds = 1000 milliseconds
    days = Math.floor(diff / (1000 * 60 * 60 * 24));

// hours = countdown time / 1 hours
    hours = Math.floor(diff / (1000 * 60 * 60));

// mins = countdown time / 1 minutes
    mins = Math.floor(diff / (1000 * 60));

// secs = countdown time / 1 seconds
    secs = Math.floor(diff / 1000);

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

//Now you have to make arrangements to display all the content in the webpage with the help of "innerHTML"
//The innerHTML property is part of the Document Object Model (DOM)
    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>';
}

//The setInterval() method, offered on the Window, repeatedly calls a function or executes a code snippet

//Here the time is set to 1000 milliseconds or 1 second.

//So the countdown time will be updated every 1 second
setInterval('updateTimer()', 1000);

Hopefully you have been able to create this simple JavaScript countdown timer using the tutorials and sourcecodes above. If there is any problem then you can definitely let me know by commenting.

If you want you can download source code to make this timer.

Random Quote Generator using JavaScript and API

Code Media — Wed, 03 Nov 2021 16:32:42 +0000

In this article, you will learn how to create Random Quote Generator using JavaScript and API. I have taken the help of API to make this Quote Generator. There are many websites that provide API links I have used one of those links.

This design includes a display and a button. When you click on that button, you can see that every time a quote is generated randomly, it can be seen in the display. Here we have saved the information using fetch method then we have arranged to display it with the help of innerText.

To build this project you need to have a basic idea about HTML CSS and JavaScript. First I created a small box using HTML and CSS with a display and a generate button.

You want a preview? Watch the live demo

In Random Quote Generator I have used a heading above all then there is a display. Quote and author's name can be seen in this display. Then there is a button which I have implemented with the help of JavaScript.

Step 1: Basic structure of Quote Generator

I have created its basic structure using the following HTML and CSS. It is basically a kind of box to which I have added all the information. Here I have given the background-color of the webpage in blue and the width of the box is 400px.

No specific height of the box is given here it will determine its own height based on the amount of content. However here the minimum height is given 100px.



<div class="wrapper">
  <div class="container">

  </div>
</div>



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

body {
  background-color: #058ddc;
}

.wrapper {
  width: 400px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.container {
  width: 100%;
  background-color: #ffffff;
  position: relative;
  border-radius: 8px;
  text-align: center;
  min-height: 100px;
  padding: 10px 40px;
  box-shadow: 0 20px 65px rgba(87, 11, 16, 0.5);
}

Step 2: Add titles using html

Now I have added a heading that will help to enhance the beauty. I added this title using the h 1 tag of html then designed it as required with the help of CSS.



<h1>Quote Generator</h1>



.container h1{
  color: white;
  margin-bottom: 30px;
  background: #1073be
  font-size: 25px;
  margin-top: -10px;
  margin:  -40px;
}

Step 3: Create a display to view random quotes

Now I have made a small display which will help to see these quotes. Here you can see both the quote and the author's name. Now I have just added the information of this display and done the basic design.

The height of this display has not been determined but the minimum height has been given.



<div class="display">
  <p id="quote">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,
  </p>

<h3 id="author">Lorem, ipsum.</h3>
</div>



.display{
  background: #ffffff;
  min-height:20px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

.container p {
  color: #066dd4;
  line-height: 2;
  font-size: 19px;
}

.container h3::before{
  content: "- ";
}

.container h3 {
  font-weight: 600;
  text-transform: capitalize;
  color: #0e045a;
  margin: 20px 0 60px 0;
}

Step 4: Create the Generate button

Now is the time to create a button that will help generate separate quotes. Later I will execute the button using JavaScript. But now I have created it with the help of HTML and CSS. I used padding to determine the size of the button.



<button id="btn">Get Quote</button>



.container button {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #ffffff;
  cursor: pointer;
  background-color: #023b80;
  border: none;
  padding: 15px 45px;
  border-radius: 5px;
}

Step 5: Activate the Random Quote Generator using JavaScript

Above we have designed this Random Quote Generator using html css. Now is the time to implement it using JavaScript. I have used very simple and simple JavaScript for this.

First I set a constant for the Quote, Author and Generate buttons.



let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");

Now I have added the API link in the 'url'. As I said earlier, I got all this information with the help of this link. I have used the API link of a website here. You can use the link of any website of your choice if you want.



const url = "https://api.quotable.io/random";

Now is the time to implement it using little JavaScript. First I collected all the information of this API using fetch method.

Then with the help of innerText I have shown the content and author's name in the right place in the web page separately. Above we have stored all the terms in 'getQuote'.



let getQuote = () => {
  fetch(url)
    .then((data) => data.json())
    .then((item) => {
      quote.innerText = item.content;
      author.innerText = item.author;
    });
};

Now I have activated the button. The system will be updated every time you click on that button. As a result, new information can be seen in the display.



window.addEventListener("load", getQuote);
btn.addEventListener("click", getQuote);

Hopefully you have learned from this tutorial how I created this JavaScript Random Quote Generator with the help of API. If there is any difficulty then of course you can let us know by commenting.

You can find the source code and live demo needed to create this project with the help of this link.

Simple Email Validation in Javascript & CSS

Code Media — Sun, 17 Oct 2021 16:27:04 +0000

In this article you will learn how to make Simple Email Validation in Javascript. You must have seen many times that the login form of different websites has a kind of validation. This type of validation is mainly for email IDs and passwords.

Here I have given a small demo where there is an input box. You can input the email ID in that input box. If the format of the input email ID is incorrect, there will be some basic changes that will alert the user.

Simple Email Validation in Javascript

To create this Simple Email Validation you need to have an idea about HTML CSS and JavaScript. First I made a small box on the webpage. I used a heading in that box. Then created an input box that I used the input of HTML to create.

Whenever you input something in that input box, if it matches the email id format, then the border of the input box will be green. A green icon can be seen with it. If the email id format is incorrect, the border-color of the input box will turn red and a red icon will appear. With this an error text will appear to warn the user.

Step 1: Basic structure of validation

I have created the basic structure of this Simple Email Validation using the following HTML and CSS. Since this is a demo so has created a small box on the webpage. That box contains all the information and space to input.

I have used the background-color blue of the webpage here and the background color of the box is white. The width of the box is 400px and the height depends on the padding. The box has border-radius to make the four things round and box-shadow to enhance the beauty.

<div class="container">

</div>

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #0584b7;
}
.container{
    width: 400px;
    background-color: #ffffff;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 25px 25px 30px rgba(0,0,0,0.15);
    color: #111111;
}

Step 2: Add headings to the box

Now I have added a heading or title in this box. Font-size: 25px has been used to increase the text size of this title and text-align: center has been used to place it in the middle of the box.

<h1>Email Validation</h1>

h1{
  font-size: 25px;
  text-align: center;
  margin-top: -25px;
  margin-bottom: 25px;
  font-family: sans-serif;
}

Step 3: Create a place to input email

The following HTML and CSS codes have been used to create input space. Here I have used a level and used the input function of HTML to create the input space.

<label for="email-id">Email Id</label><br>
 <input type="email" placeholder="  Email Id or Phone" id="email-id" oninput="checker()"

label,
input,
#error-msg{
    font-family: 'Poppins',sans-serif;
}
label{
    display: inline-block;
    font-weight: 500;
    margin-bottom: 10px;
}
input[type="email"]{
    display: inline-block;
    border: 2px solid #d1d3d4;
    width: 88%;
    height: 50px;
    border-radius: 5px;
    outline: none;
    letter-spacing: 0.5px;
    font-weight: 400;
}

Step 4: Create an icon viewing area

Now I have added an icon in this project (Simple Email Validation in Javascript). This icon is basically not seen in normal condition. This icon appears when you input something.

If your input email ID is in the correct format, the icon will appear in green. If incorrect, the icon will appear in red. Here I did not add icons, add icons and control everything I helped JavaScript. I just created an area to see the icon here.

<div id="icon"> </div>

#icon{
    float: right;
    height: 50px;
    position: relative;
    font-size: 25px;
    padding-top: 10px;
}

Step 5: Add error text for invalid email

As I said before you will see a kind of error text here when you input the email ID incorrectly. I used display: none so that it would not be seen under normal conditions.

<p id="error-msg">Please Enter A Valid Email Id</p>

#error-msg{
    display: none;
    color: #ff2851;
    font-size: 14px;
    margin-top: 10px;
}

Step 6: Activate the JavaScript Email Validation

The basic design of this JavaScript Email Validation has been created. Now is the time to implement it with JavaScript. If you know basic JavaScript you can easily understand the design.

First I set the constant of the input space, the error messageand the icon's ID function one by one.

let emailId = document.getElementById("email-id");
let errorMsg = document.getElementById("error-msg");
let icon = document.getElementById("icon");

Now I have added regular expression character using mailRegex. Regular expression is actually a kind of format. Your input email needs to follow this format. If your email ID follows this format, it will be considered a valid email ID.

let mailRegex = /^[a-zA-Z][a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}$/;

Now I have implemented it using JavaScript's 'if' function. Below I have tried to show you in a very simple way.

function checker(){
    icon.style.display="inline-block";
// If your input email ID matches mailRegex then the codes below will be valid. 
// This means that an icon will be found here whose color will be green. 
//The error message cannot be viewed. 
//The border of the input space will be green.
    if(emailId.value.match(mailRegex)){
        icon.innerHTML = '<i class="fas fa-check-circle"></i>';
        icon.style.color = '#2ecc71';
        errorMsg.style.display = 'none';
        emailId.style.border = '2px solid #2ecc71';
    }
// Now I bet what kind of change can happen if you don't input anything instead of input.
// The icon will not be visible if you do not input anything. 
//Error message cannot be seen. 
//The border of the input will remain normal.
    else if(emailId.value == ""){
        icon.style.display = 'none';
        errorMsg.style.display = 'none';
        emailId.style.border = '2px solid #d1d3d4';
    }
//Now I have said what will change if the above two conditions do not work. 
//This means that if you input something and input it incorrectly, the following codes will work. 
//Here I have added the 'exclamation' icon and set the color of the icon to red. 
//The error message can be seen. 
//I have also instructed that the color of the border of the input should be red.
    else{
        icon.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
        icon.style.color = '#ff2851';
        errorMsg.style.display = 'block';
        emailId.style.border = '2px solid #ff2851';
    }

}

Hopefully from this tutorial above you will be able to fully understand how I did this Simple Email Validation in Javascript. You can follow me on Instagram(@foolishdeveloper) to get more updates of such new content. If you are satisfied with this tutorial, please let us know in the comments.

Follow on Instagram for more tutorials 👇👇
https://www.instagram.com/foolishdeveloper/