Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lab 3 Part 2</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #app, .controlls, #clock-face {
            margin: 0 auto;
        }

        .digits, .time-div, h1, #error {
            text-align: center;
        }

        .digits, .time-div, h1 {
            font-size: 3em;
        }

        #app, .digits {
            border: 1px solid black;
        }

        #timer, #clock-face {
            display: grid;
        }

        .digits, .controlls {
            background-color: #F5F5F5;
        }

        #app {
            width: 50vw;
            height: 30vh;
            margin-top: 5vh;
            background-color: #DDDDDD;

        }
        #timer {
            grid-template-rows: 3fr 1fr 1fr;
            grid-gap: 5px;
            height: 75%;
            margin-top: 0.5em;
        }

        #clock-face {
            grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
            height: 80%;
            width: 60%;
            margin-top: 2em;
        }

        .digits {
            height: 60%;
            width: 7vw;
            border-radius: 10px;
        }

        .controlls {
            height: 100%;
            width: 60%;
            border-radius: 15px;
        }

        #results {
            width: 100%;
        }

        #error {
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="timer">
            <div id="clock-face">
                <input type="text" id="hour" class="digits" placeholder="H" />
                <div class="time-div">:</div>
                <input type="text"  id="min" class="digits" placeholder="M" />
                <div class="time-div">:</div>
                <input type="text" id="sec" class="digits" placeholder="S" />
            </div>
            <button class="controlls" id="start-stop">&#9658; Start Countdown</button>
            <button class="controlls" id="reset">Reset</button>
        </div>
    </div>

    <div id="results">
        <h1>Time Left</h1>
        <h1 id="result-display">0 : 0 : 0</h1>
    </div>

    <div id="error">
        <h1>ERROR</h1>
        <h2>Hour, Minute and Second value must be positive integers not more than 59</h2>
    </div>

    <script src="bundle.js"></script>
</body>
</html>