<div class="page">
        <header>
            <h1>Clock</h1>
        </header>

        <h4>Real Time Clock <br>
        <span id="clock">Time goes here</span>
        </h4>

        <img id="Img" src="https://toppng.com/uploads/preview/best-photos-of-analog-clock-template-11549790411qdlzkcpjwm.png" alt="Clock">

        <blockquote id="timeEvent">This is where time period will be display</blockquote>

        Set Wake Up Time
        <select id="wakeUpTimeSelector">
            <option value="1">1 AM - 2 AM</option>
            <option value="2">2 AM - 3 AM</option>
            <option value="3">3 AM - 4 AM</option>
            <option value="4">4 AM - 5 AM</option>
            <option value="5">5 AM - 6 AM</option>
            <option value="6" selected>6 AM - 7 AM</option>
            <option value="7">7 AM - 8 AM</option>
            <option value="8">8 AM - 9 AM</option>
            <option value="9">9 AM - 10 AM</option>
            <option value="10">10 AM - 11 AM</option>
            <option value="11">11 AM - 12 PM</option>
            <option value="12">12 PM - 1 PM</option>
            <option value="13">1 PM - 2 PM</option>
            <option value="14">2 PM - 3 PM</option>
            <option value="15">3 PM - 4 PM</option>
            <option value="16">4 PM - 5 PM</option>
            <option value="17">5 PM - 6 PM</option>
            <option value="18">6 PM - 7 PM</option>
            <option value="19">7 PM - 8 PM</option>
            <option value="20">8 PM - 9 PM</option>
            <option value="21">9 PM - 10 PM</option>
            <option value="22">10 PM - 11 PM</option>
            <option value="23">11 PM - 12 AM</option>
            <option value="24">12 AM - 1 AM</option>
        </select>
        <br>

        Set Lunch Time
        <select id="lunchTimeSelector">
            <option value="1">1 AM - 2 AM</option>
            <option value="2">2 AM - 3 AM</option>
            <option value="3">3 AM - 4 AM</option>
            <option value="4">4 AM - 5 AM</option>
            <option value="5">5 AM - 6 AM</option>
            <option value="6">6 AM - 7 AM</option>
            <option value="7">7 AM - 8 AM</option>
            <option value="8">8 AM - 9 AM</option>
            <option value="9">9 AM - 10 AM</option>
            <option value="10">10 AM - 11 AM</option>
            <option value="11">11 AM - 12 PM</option>
            <option value="12" selected>12 PM - 1 PM</option>
            <option value="13">1 PM - 2 PM</option>
            <option value="14">2 PM - 3 PM</option>
            <option value="15">3 PM - 4 PM</option>
            <option value="16">4 PM - 5 PM</option>
            <option value="17">5 PM - 6 PM</option>
            <option value="18">6 PM - 7 PM</option>
            <option value="19">7 PM - 8 PM</option>
            <option value="20">8 PM - 9 PM</option>
            <option value="21">9 PM - 10 PM</option>
            <option value="22">10 PM - 11 PM</option>
            <option value="23">11 PM - 12 AM</option>
            <option value="24">12 AM - 1 AM</option>
        </select>
        <br>

        Set Nap Time
        <select id="napTimeSelector">
            <option value="1">1 AM - 2 AM</option>
            <option value="2">2 AM - 3 AM</option>
            <option value="3">3 AM - 4 AM</option>
            <option value="4">4 AM - 5 AM</option>
            <option value="5">5 AM - 6 AM</option>
            <option value="6">6 AM - 7 AM</option>
            <option value="7">7 AM - 8 AM</option>
            <option value="8">8 AM - 9 AM</option>
            <option value="9">9 AM - 10 AM</option>
            <option value="10">10 AM - 11 AM</option>
            <option value="11">11 AM - 12 PM</option>
            <option value="12">12 PM - 1 PM</option>
            <option value="13">1 PM - 2 PM</option>
            <option value="14">2 PM - 3 PM</option>
            <option value="15" selected>3 PM - 4 PM</option>
            <option value="16">4 PM - 5 PM</option>
            <option value="17">5 PM - 6 PM</option>
            <option value="18">6 PM - 7 PM</option>
            <option value="19">7 PM - 8 PM</option>
            <option value="20">8 PM - 9 PM</option>
            <option value="21">9 PM - 10 PM</option>
            <option value="22">10 PM - 11 PM</option>
            <option value="23">11 PM - 12 AM</option>
            <option value="24">12 AM - 1 AM</option>
        </select>
        <br>

        <button id="checkButton">Check Schedule</button>
    </div>
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,regular,500,600,700,800,300italic,italic,500italic,600italic,700italic,800italic);


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #f16059;
    font: 14px/26px 'Poppins', Helvetica, Arial, sans-serif;
    color: #222;
    text-transform: uppercase;
}
.page{
    width: 80%;
    max-width: 960px;
    margin: 50px auto;
    background-color: #f16059;
    text-align: center;
    border-radius: 5px;
}
header{
    font-size: 24px;
    line-height: 48px;
}
h1{
    font-family: 'Poppins shade', cursive;
}
h4{
    font-size: 21px;
    font-family: 'Poppins', cursive;
}
h4 #clock{
    font-size: 36px;
    display: block;
    padding: 5px 0;
}
#Img{
    max-width: 30em;
}
blockquote{
    font: 1em 'Open Sans', sans-serif;
    -webkit-text-stroke: 1px block;
    text-shadow: 2px 2px #fff;
    margin: -125px 0 100px 0;
    color: #000;
}
blockquote:before{content: '"';}
blockquote:after{content: '"';}
#Clock{
    margin: 0 auto;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 10px;
    border:10px solid #222;
}
#wakeUpTimeSelector,
#lunchTimeSelector,
#napTimeSelector{
    padding: 10px 0;
}
#checkButton{
    background-color: #222;
    width: 400px;
    font-family: 'Poppins', cursive;
    font-size: 18px;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 0;
    margin-top: 20px;
}
var wakeuptime = 7;
var noon = 12;
var lunchtime = 12;
var naptime = lunchtime + 2;
var partytime;
var evening = 18;

var showCurrentTime = function()
{
    var clock = document.getElementById('clock');

    var currentTime = new Date();

    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridian = "AM";
    //* Set Hours
    if(hours >= noon){
        meridian = "PM";
    }
    if(hours > noon){
        hours = hours - 12;
    }
    //* Set Minutes
    if(minutes < 10){
        minutes = "0" + minutes;
    }
    //* Set Seconds
    if(seconds < 10){
        seconds = "0" + seconds;
    }

    //? put together the string that displays the time
    var clockTime = hours + ":" + minutes + ":" + seconds + " " + meridian + "!";

    clock.innerText = clockTime;
};

//! Getting the clock to increment on its own and manipulate messages

var updateClock = function(){
    var time = new Date().getHours();
    var messageText;
    
    var timeEventJs = document.getElementById("timeEvent");

    if(time == partytime){
        messageText = "Let's Party";
    }else if(time == wakeuptime){
        messageText = "wake up!";
    }else if(time == lunchtime){
        messageText = "Let's Grab Some lunch";
    }else if(time == naptime){
        messageText = "Sleep Tight";
    }else if(time < noon){
        messageText = "Good Morning!";
    }else if(time >= evening){
        messageText = "Good Evening";
    }else{
        messageText = "Good Afternoon!";
    }
    console.log(messageText);
    timeEventJs.innerText = messageText;

    showCurrentTime();
};
updateClock();

//* Getting the clock to increment once a second
var oneSecond = 1000;
setInterval(updateClock, oneSecond);

//* Getting the schedule button to work
var chkButton = document.getElementById("checkButton");

var chkEvent = function() {
    if(partytime < 0){
        partytime = new Date().getHours();
        checkButton.innerText = "U r on schedule!";
        checkButton.style.backgroundColor = "lightgreen";
    }else{
        partytime = -1;
        checkButton.innerText = "check schedule";
        checkButton.style.backgroundColor = "#222";
    }
};
chkButton.addEventListener("click", chkEvent);
chkEvent();

//! Activate Wake-up Selector
var wakeUpTimeSelector = document.getElementById("wakeUpTimeSelector");

var wakeUpEvent = function(){
    wakeuptime = wakeUpTimeSelector.value;
};
wakeUpTimeSelector.addEventListener("change", wakeUpEvent);

//! Activate lunch time Selector
var lunchTimeSelector = document.getElementById("lunchTimeSelector");

var lunchTimeEvent = function() {
    lunchtime = lunchTimeSelector.value;
};
lunchTimeSelector.addEventListener("change", lunchTimeEvent);

//! Activate Nap time Selector
var napTimeSelector = document.getElementById("napTimeSelector");

var napTimeEvent = function(){
    naptime = napTimeSelector.value;
};
napTimeSelector.addEventListener("change", napTimeEvent);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.