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" />
    <meta name="keywords" content="Digital Clock" />
    <meta name="description" content="This is a Digital Clock" />
    <link
      rel="shortcut icon"
      href="./clock-logo/favicon.ico"
      type="image/x-icon"
    />

    <title>Digital Clock</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <div class="row row-1">
        <div class="col col-1">
          <div class="clock">
            <img src="./clock-logo/clock_logo.png" alt="clock" />
          </div>
          <!-- <div class="message-1">
            <p class="message" id="pera1"></p>
          </div> -->
        </div>
        
        <div class="col col-2">
          <div class="digitalClock">
            <div class="timer">
              <div class="time">TIME
                
              </div>
              <div id="hours" class="t">
                00 <br />
                hours
              </div>
              <div class="colon">:</div>
              <div id="mins" class="t">
                00 <br />
                mins
              </div>
              <div class="colon">:</div>
              <div id="secs" class="t">
                00 <br />
                secs
              </div>
              <div id="session" class="t1">AM</div>
            </div>
            <div class="boxOne">

            </div>
            <div class="boxTwo">

            </div>
          </div>
        </div>
      </div>
      <div class="row row-2">
        <div class="col col-1">
          <div class="timeTable">
            <div class="wake">
              <img src="./img/wake_up.svg" alt="" width="35px" />
              <span class="text">Set wake up time</span>
              <select name="selectWake" class="selectOne" id="slotOne">
                <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">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="0">12 AM - 1 AM</option>
                <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>   
                
              </select>
            </div>
            <div class="vertical"></div>
            <div class="lunch">
              <img src="./img/lunch_time.svg" alt="" width="35px" />
              <span class="text">Set lunch time</span>
              <select name="selectLunch" class="selectOne" id="slotTwo">
                <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="0">12 AM - 1 AM</option>
                <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>
              </select>
            </div>
            <div class="vertical"></div>
            <div class="nap">
              <img src="./img/nap_time.svg" alt="" width="35px" />
              <span class="text">Set nap time</span>
              <select name="selectNap" class="selectOne" id="slotThree">
                <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="0">12 AM - 1 AM</option>
                <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>
              </select>
            </div>
            <div class="vertical"></div>
            <div class="night">
              <img src="./img/night_time.png" alt="" width="35px" />
              <span class="text">Set night time</span>
              <select name="selectNight" class="selectOne" id="slotFour">
                <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="0">12 AM - 1 AM</option>
                <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">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>
                           
              </select>
            </div>
          </div>
          <div class="morning">
            <div id="timeText">GOOD MORNING !! WAKE UP !!</div>
          </div>
          <div id="alarm">
            <div class="set">
              <button class="alarm" onclick="function2()">
                <span class="a1">Set Alarm</span>
              </button>              
              <!-- <div class="message-2">
                <p class="message" id="pera2"></p>
              </div> -->
            </div>
            <div class="guide">
              <div class="none">
                <span class="g1">Wake Up Time : </span
                ><span id="wakeTime">8 AM - 9 AM</span><br /><br />
                <span class="g2">Lunch Time : </span
                ><span id="lunchTime">12 PM - 1 PM</span><br /><br />
                <span class="g3">Nap Time : </span
                ><span id="napTime">4 PM - 5 PM</span><br /><br />
                <span class="g4">Night Time : </span
                ><span id="nightTime">8 PM - 9 PM</span><br /><br />
              </div>
            </div>
          </div>
        </div>
        <div class="col col-2">
          <div class="grab">
            <div id="greetText">GRAB SOME HEALTHY BREAKFAST!!!</div>
          </div>
          <div id="timeImage">
            <img src="./img/Component.png" alt="img" id="changeImage" />
          </div>
        </div>
      </div>
    </div>   
    <script src="./index.js"></script>
  </body>
</html>