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>

Outline

Go Pro?

Upgrade to Pro for quizzes, tracked progress and a completion certificate for just $25 🚀

Want more developer tips, tricks and tools?
Then follow me:
FREE Coding Career Quick Start Guide 🚀
Discover the best way to learn to code, how to land a job and valuable resources to help your journey in this free 15 page value packed guide.
Looking to email me? You can get me on my first name at allthecode.co