Source Code Of Display Time & Date On Website

Html, Source Code, Web Development / By

Folder Structure

Folder Structure

Resources

Resources

Codes

HTML

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!---------------  CSS  --------------------->
    <link rel="stylesheet" href="style.css">
    <title>Source Code Of Display Time & Date On Website</title>
    <!---------------  IONICONS  --------------------->
    <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</head>
<body onload="initliveClock()">
   <div class="container">
    <div class="left_div">
    <!---------------  Dynamic Greetings  --------------------->
    <div class="greetings">
        <h1 id="greetings">Demo Text</h1>
    </div>
    <!--------------- End Dynamic Greetings  --------------------->
    <!---------------  clock  --------------------->
    <div class="clock">
        <div class="hour">
            <div class="hh" id="hh"></div>
        </div>
        <div class="min">
            <div class="mm" id="mm"></div>
        </div>
        <div class="sec">
            <div class="ss" id="ss"></div>
        </div>
    </div>
    <!--------------- End clock  --------------------->
    <!---------------  Day & Date  --------------------->
    <div class="showdatetime" >
        <div class="date">
            <span id="day">Day</span>,
            <span id="month">Month</span>
            <span id="date">00</span>,
            <span id="year">Year</span>
        </div>
        <div class="time">
            <span id="hour">00</span>:
            <span id="minutes">00</span>:
            <span id="seconds">00</span>
            <span id="period">AM</span>
        </div>
    </div>
    <!--------------- End Day & Date  --------------------->
    </div>
    <div class="right_div">
    <!--------------- Quote  --------------------->  
    <div class="quote"> 
        <h2>TODAY'S QUOTES</h2>
        <p id="quote">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, rem.</p>
        <h3 id="author">Lorem, ipsum.</h3>
        <button id="btn">Get Quote</button>
    </div>     
    <!--------------- End Quote  --------------------->       
    </div>
   </div>
   <!---------------  SCRIPT  --------------------->
   <script src="script.js"></script>  
</body>   
</html>

CSS

style.css
/*-----------------  GOOGLE FONTS  -----------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap');

/*-----------------  VARIABLES  -----------------*/
:root {
    /* Colors */ 
    --orange-color: rgb(246, 99, 53);
    --text-color: rgb(96, 97, 99);
    --secondary-color: rgb(237, 242, 252);
    --white-color: rgb(255, 255, 255);
    --para-color:rgb(96, 97, 99);
    --dark-color:rgb(27, 31, 41);
    --background-color: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))
}

html{
    font-size: 10px;
    /* Now 1rem = 10px */
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    background: url(images/background.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    width: 90%;
    height: 90vh;
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.left_div {
    height: 100%;
    width: 60%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}
.right_div{
    height: 100%;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* --------------- clock  --------------------- */
.clock {
    width: 25rem;
    height: 25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background:url(images/clock.png);
    background-size: cover;
    background-position: center;
    border: 0.4rem solid var(--secondary-color);
    border-radius: 50%;
    box-shadow: 0 -1.5rem 1.5rem rgba(255, 255, 255, 0.05),
                inset 0 -1.5rem 1.5rem rgba(255, 255, 255, 0.05),
                0 1.5rem 1.5rem rgba(0, 0, 0, 0.03),
                inset 0 1.5rem 1.5rem rgba(0, 0, 0, 0.03);
}
.clock::before {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: var(--white-color);
    border-radius: 50%;
    z-index: 1000;
}
.clock .hour, .clock .min, .clock .sec{
    position: absolute;
}
.clock .hour, .hh {
    width: 10rem;
    height: 10rem;
}
.clock .min, .mm {
    width: 12rem;
    height: 12rem;
}
.clock .sec, .ss {
    width: 16rem;
    height: 16rem;
}
.hh, .mm, .ss {
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 50%;
}
.hh:before {
    content: '';
    position: absolute;
    width: 0.8rem;
    height: 5rem;
    background: var(--orange-color);
    z-index: 10;
    border-radius: 0.6rem 0.6rem 0 0;
}
.mm:before {
    content: '';
    position: absolute;
    width: 0.4rem;
    height: 6rem;
    background:var(--white-color);
    z-index: 11;
    border-radius: 0.6rem 0.6rem 0 0;
}.ss:before {
    content: '';
    position: absolute;
    width: 0.2rem;
    height: 10rem;
    background: var(--secondary-color);
    z-index: 12;
    border-radius: 0.6rem 0.6rem 0 0;
}
/* --------------- End clock  --------------------- */
/* --------------- Dynamic Greetings  --------------------- */
.greetings {
    font-size: 1.5rem;
    text-align: center;
    color: var(--white-color);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.1rem;
    word-spacing: 0.4rem;
}
/* --------------- End Dynamic Greetings  --------------------- */
/* --------------- Date Time  --------------------- */
.showdatetime {
    color:var(--white-color);
    width: 40rem;
    padding: 1.5rem 1rem;
}
.date {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3rem;
}
.time {
    font-size: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.time span:not(:last-child){
    position: relative;
    margin: 0 0.6rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3rem;
}
.time span:last-child{
    font-size: 3rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 1rem;
    padding: 0 0.5rem;
}
/* --------------- End Date Time  --------------------- */
/* --------------- Quote  --------------------- */
.quote {
    height: 60%;
    width: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.quote h2 {
    color: var(--white-color);
    text-align: center;
    font-size: 3rem;
    margin-bottom: 5rem;
}
.quote p {
    color: var(--white-color);
    text-align: center;
    font-size: 1.8rem;
    line-height: 2;
    letter-spacing: 0.1rem;
}
.quote h3 {
    color: var(--orange-color);
    margin: 2rem 0 6rem 0;
    letter-spacing: 0.2rem;
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: capitalize;
}
.quote button {
    background-color: var(--white-color);
    border: none;
    padding: 1rem 3.5rem;
    border-radius: 0.5rem;
    font-size: 1.8rem;
    letter-spacing: 0.3rem;
    font-weight: 600;
    color: var(--orange-color);
    cursor:pointer;
    transition: 0.5s;
}
.quote button:hover {
    background-color: var(--orange-color);
    color: var(--white-color);
}
/* --------------- End Quote  --------------------- */

JavaScript

script.js
/* --------------- Dynamic Greetings  --------------------- */
let greetings = document.querySelector("#greetings");

let liveTime = new Date().getHours();
let greeting = liveTime >= 5 && liveTime < 12 ? "Good Morning!" : 
liveTime >= 12 && liveTime < 18 ? "Good Afternoon!" :
liveTime >= 18 && liveTime < 21 ? "Good Evening!" : "Good Night!";

greetings.innerHTML = greeting;
/* --------------- End Dynamic Greetings  --------------------- */
/* --------------- clock  --------------------- */
const deg = 6;
const ho = document.querySelector('#hh');
const mi = document.querySelector('#mm');
const se = document.querySelector('#ss');

setInterval(() => {
    let day = new Date();
    let hh = day.getHours() * 30;
    let mm = day.getMinutes() * deg;
    let ss = day.getSeconds() * deg;
    
    ho.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
    mi.style.transform = `rotateZ(${mm}deg)`;
    se.style.transform = `rotateZ(${ss}deg)`;
})
/* --------------- End clock  --------------------- */
/* --------------- Date Time  --------------------- */
function liveClock(){
    var liveDate = new Date();
    var showDay = liveDate.getDay(),
        showMonth = liveDate.getMonth(),
        showDate = liveDate.getDate(),
        showYear = liveDate.getFullYear(),
        showHours = liveDate.getHours(),
        showMinutes = liveDate.getMinutes(),
        showSeconds = liveDate.getSeconds(),
        showPeriod = "AM";

        if(showHours == 0){
            showHours = 12;
        }
        if(showHours > 12){
            showHours = showHours - 12;
            showPeriod = "PM";
        }

        Number.prototype.pad = function(digits){
            for(var n = this.toString(); n.length < digits; n = 0 + n);
            return n;
        }


        var months = ["January", "February", "March", "April", "May", "June", "July",
                       "Augest", "September", "October", "November", "December"];
        var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

        var idNames = ["day", "month", "date", "year", "hour", "minutes", 
                       "seconds", "period"];
        
        var valueNames = [week[showDay], months[showMonth], showDate.pad(2), showYear, showHours.pad(2), showMinutes.pad(2), 
                       showSeconds.pad(2), showPeriod];

        for(var i = 0; i < idNames.length; i++)
        document.getElementById(idNames[i]).firstChild.nodeValue = valueNames[i];               
}

function initliveClock(){
    liveClock();
    window.setInterval("liveClock()", 1);
}
/* --------------- End Date Time  --------------------- */
/* --------------- Quote  --------------------- */
let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");

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

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

window.addEventListener("load", getQuote);
btn.addEventListener("click", getQuote);
window.setInterval("getQuote()", 20000);
/* --------------- End Quote  --------------------- */

YouTube Video

Download Source Code

Download Files

Don’t forget to share this post!

Follow by Email
Facebook
Twitter
Pinterest
LinkedIn
Share
Instagram
Telegram
WhatsApp

Click Here : To Show Your Support! 😍

Related Posts