30 Days Of JavaScript

Day 23: Timer

Lesson 1: Timer: 1

Please create a folder on your desktop called timer and inside it create a file called index.html.

This project is very small so we will just work out of the single file, during our next project we will start to break our code up to make it more manageable.

Here is your starting template for the index.html file. All the HTML and CSS is there for you, we will work through the JavaScript together.

1<html>
2  <head>
3    <style>
4      body {
5        font-family: "Open Sans", "Helvetica Neue", sans-serif;
6      }
7
8      #container {
9        width: 350px;
10        margin: 50px auto;
11      }
12
13      .center {
14        text-align: center;
15      }
16
17      #timer {
18        font-size: 30px;
19        color: black;
20        font-weight: bold;
21      }
22
23      .flex-row {
24        margin-top: 8px;
25        display: flex;
26        flex-direction: row;
27        justify-content: space-between;
28        column-gap: 8px;
29      }
30
31      .flex-row button {
32        border-radius: 8px;
33        padding: 12px;
34        border: none;
35        color: white;
36        cursor: pointer;
37        flex: 1;
38      }
39
40      #time-input {
41        font-size: 30px;
42        padding: 5px;
43        border-radius: 5px;
44        border: 1px solid gray;
45        width: 100%;
46      }
47
48      #start {
49        background-color: #4cbb17;
50      }
51
52      #start:disabled {
53        background-color: #4bbb1771;
54      }
55
56      #stop {
57        background-color: #ff5733;
58      }
59
60      #stop:disabled {
61        background-color: #ff583377;
62      }
63
64      #reset {
65        background-color: orange;
66      }
67
68      #reset:disabled {
69        background-color: rgba(255, 166, 0, 0.5);
70      }
71    </style>
72  </head>
73  <body>
74    <div id="container" class="center">
75      <div id="timer"></div>
76
77      <div>
78        <input
79          id="time-input"
80          type="number"
81          placeholder="Enter time in seconds"
82        />
83      </div>
84
85      <div class="flex-row">
86        <button onclick="startTimer()" id="start">Start</button>
87        <button onclick="stopTimer()" id="stop">Stop</button>
88        <button onclick="resetTimer()" id="reset">Reset</button>
89      </div>
90    </div>
91    <script>
92      // our JavaScript will go here
93    </script>
94  </body>
95</html>

30 Days Of JavaScript

Day 23: Timer

Lesson 1: Timer: 1

Outline

Go Pro?