SHARE
TWEET

Untitled

a guest Nov 19th, 2019 85 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Lab 3 Part 2</title>
  8.     <style>
  9.         body {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         #app, .controlls, #clock-face {
  15.             margin: 0 auto;
  16.         }
  17.  
  18.         .digits, .time-div, h1, #error {
  19.             text-align: center;
  20.         }
  21.  
  22.         .digits, .time-div, h1 {
  23.             font-size: 3em;
  24.         }
  25.  
  26.         #app, .digits {
  27.             border: 1px solid black;
  28.         }
  29.  
  30.         #timer, #clock-face {
  31.             display: grid;
  32.         }
  33.  
  34.         .digits, .controlls {
  35.             background-color: #F5F5F5;
  36.         }
  37.  
  38.         #app {
  39.             width: 50vw;
  40.             height: 30vh;
  41.             margin-top: 5vh;
  42.             background-color: #DDDDDD;
  43.  
  44.         }
  45.         #timer {
  46.             grid-template-rows: 3fr 1fr 1fr;
  47.             grid-gap: 5px;
  48.             height: 75%;
  49.             margin-top: 0.5em;
  50.         }
  51.  
  52.         #clock-face {
  53.             grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
  54.             height: 80%;
  55.             width: 60%;
  56.             margin-top: 2em;
  57.         }
  58.  
  59.         .digits {
  60.             height: 60%;
  61.             width: 7vw;
  62.             border-radius: 10px;
  63.         }
  64.  
  65.         .controlls {
  66.             height: 100%;
  67.             width: 60%;
  68.             border-radius: 15px;
  69.         }
  70.  
  71.         #results {
  72.             width: 100%;
  73.         }
  74.  
  75.         #error {
  76.             color: red;
  77.             display: none;
  78.         }
  79.     </style>
  80. </head>
  81. <body>
  82.     <div id="app">
  83.         <div id="timer">
  84.             <div id="clock-face">
  85.                 <input type="text" id="hour" class="digits" placeholder="H" />
  86.                 <div class="time-div">:</div>
  87.                 <input type="text"  id="min" class="digits" placeholder="M" />
  88.                 <div class="time-div">:</div>
  89.                 <input type="text" id="sec" class="digits" placeholder="S" />
  90.             </div>
  91.             <button class="controlls" id="start-stop">&#9658; Start Countdown</button>
  92.             <button class="controlls" id="reset">Reset</button>
  93.         </div>
  94.     </div>
  95.  
  96.     <div id="results">
  97.         <h1>Time Left</h1>
  98.         <h1 id="result-display">0 : 0 : 0</h1>
  99.     </div>
  100.  
  101.     <div id="error">
  102.         <h1>ERROR</h1>
  103.         <h2>Hour, Minute and Second value must be positive integers not more than 59</h2>
  104.     </div>
  105.  
  106.     <script src="bundle.js"></script>
  107. </body>
  108. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top