├── script.js ├── index.html ├── style.css └── style1.css /script.js: -------------------------------------------------------------------------------- 1 | var ms = 0, s = 0, m = 0, h = 0 2 | var timer; 3 | var display = document.querySelector(".timer-Display") 4 | var laps = document.querySelector(".laps") 5 | function start(){ 6 | if(!timer){ 7 | timer = setInterval(run, 10) 8 | } 9 | } 10 | 11 | function run(){ 12 | display.innerHTML = getTimer() 13 | ms++ 14 | if(ms == 100){ 15 | ms = 0 16 | s++ 17 | } 18 | if(s == 60){ 19 | s = 0 20 | m++ 21 | } 22 | if(m == 60){ 23 | m = 0 24 | h++ 25 | } 26 | 27 | if(h == 13){ 28 | h = 1 29 | } 30 | } 31 | 32 | function getTimer(){ 33 | return (h<10 ? "0" + h: h) + " : " + (m<10 ? "0" + m : m) + " : " + (s<10 ? "0" + s : s) + " : " + (ms<10 ? "0" + ms : ms); 34 | } 35 | 36 | function pause(){ 37 | stopTimer() 38 | } 39 | 40 | function stopTimer(){ 41 | clearInterval(timer) 42 | timer = false 43 | } 44 | 45 | function reset(){ 46 | stopTimer() 47 | ms = 0 48 | s = 0 49 | m = 0 50 | h = 0 51 | display.innerHTML = getTimer() 52 | } 53 | 54 | // lap = taking screenshot of current time... 55 | function lap() { 56 | if(timer) { 57 | var Li = document.createElement("li") 58 | Li.innerHTML = getTimer() 59 | laps.appendChild(Li) 60 | } 61 | } 62 | 63 | function resetLap(){ 64 | laps.innerHTML = "" 65 | } 66 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

STOPWATCH TIMER

16 |

"Until we can manage TIME, we can manage nothing else"

- Peter F. Drucker

17 |

18 |

19 |

31 |

32 | 33 |

34 |

35 | 00 : 00 : 00 : 00 36 |

37 |

38 |

39 | 40 | 41 | 42 | 43 | 44 |

45 |

46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container{ 8 | background-color: #ffffff; 9 | width: 35%; 10 | min-width: 500px; 11 | position: absolute; 12 | top: 50%; 13 | left: 30%; 14 | transform: translate(-50%, -50%); 15 | padding-top: 0px; 16 | padding-bottom: 60px; 17 | border-radius: 10px; 18 | } 19 | 20 | .timer-Display{ 21 | width: 100%; 22 | background: #ffffff; 23 | padding: 40px 0; 24 | font-family: "Roboto", sans-serif; 25 | color: #4e54c8; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | font-size: 4rem; 30 | border-radius: 10px 10px 0 0; 31 | } 32 | 33 | .laps{ 34 | text-align: center; 35 | color: #4e54c8; 36 | margin-top: 10px; 37 | text-decoration: none; 38 | } 39 | 40 | .buttons{ 41 | width: 85%; 42 | margin: 60px auto 0 auto; 43 | display: grid; 44 | grid-template-columns: repeat(3, 1fr); 45 | grid-gap: 30px; 46 | } 47 | 48 | .buttons button{ 49 | padding: 10px 20px; 50 | background-color: #4e54c8; 51 | color: #ffffff; 52 | border: none; 53 | font-family: "Roboto", sans-serif; 54 | font-size: 18px; 55 | font-weight: 500; 56 | border-radius: 5px; 57 | cursor: pointer; 58 | } 59 | 60 | .buttons button:hover{ 61 | background-color:#ffffff ; 62 | color: #4e54c8; 63 | border: 3px solid #4e54c8; 64 | padding: 7px 17px; 65 | 66 | } 67 | .lapse{ 68 | left:80px; 69 | position: relative; 70 | } 71 | .lapse1{ 72 | left:85px; 73 | position: relative; 74 | } 75 | @media (max-width: 460px) { 76 | .container{ 77 | min-width: 320px; 78 | padding-top: 0px; 79 | padding-bottom: 20px; 80 | left: 195px; 81 | top: 450px; 82 | width: 25%; 83 | } 84 | .buttons button{ 85 | font-size: 12px; 86 | padding: 10px 15px; 87 | } 88 | .timer-Display{ 89 | font-size: 2rem; 90 | padding: 20px; 91 | } 92 | .lapse{ 93 | left:55px; 94 | position: relative; 95 | } 96 | .lapse1{ 97 | left:55px; 98 | position: relative; 99 | width: 100px; 100 | } 101 | } 102 | @media (min-width: 401px)and (max-width: 620px) { 103 | .container{ 104 | min-width: 360px; 105 | padding-top: 0px; 106 | padding-bottom: 20px; 107 | position: absolute; 108 | left: 203px; 109 | top: 450px; 110 | width: 25%; 111 | } 112 | .buttons button{ 113 | font-size: 12px; 114 | } 115 | .timer-Display{ 116 | font-size: 2rem; 117 | padding: 20px; 118 | } 119 | .lapse{ 120 | left:55px; 121 | position: relative; 122 | } 123 | .lapse1{ 124 | left:55px; 125 | position: relative; 126 | width: 100px; 127 | } 128 | } 129 | @media (min-width: 960px) and (max-width: 1220px) { 130 | .container { 131 | width: 50%; 132 | padding: 20px; 133 | position: absolute; 134 | top:1100px; 135 | left: 610px; 136 | } 137 | .buttons button { 138 | font-size: 16px; 139 | padding: 8px 15px; 140 | } 141 | .timer-Display { 142 | font-size: 3rem; 143 | padding: 30px; 144 | } 145 | body{ 146 | width: 100%; 147 | height: 100%; 148 | } 149 | } -------------------------------------------------------------------------------- /style1.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | @import url('https://fonts.googleapis.com/css?family=Exo:400,700'); 7 | 8 | body{ 9 | font-family: 'Exo', sans-serif; 10 | } 11 | 12 | 13 | .context { 14 | width: 100%; 15 | position: absolute; 16 | top:35vh; 17 | } 18 | 19 | .context h1{ 20 | text-align: center; 21 | color: #fff; 22 | font-size: 50px; 23 | position: absolute; 24 | left: 900px; 25 | } 26 | 27 | .context p{ 28 | position: absolute; 29 | left: 900px; 30 | color: #fff; 31 | top:100px 32 | } 33 | 34 | .area{ 35 | background: #4e54c8; 36 | background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); 37 | width: 100%; 38 | height:100vh; 39 | 40 | 41 | } 42 | 43 | .circles{ 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | overflow: hidden; 50 | } 51 | 52 | .circles li{ 53 | position: absolute; 54 | display: block; 55 | list-style: none; 56 | width: 20px; 57 | height: 20px; 58 | background: rgba(255, 255, 255, 0.405); 59 | animation: animate 25s linear infinite; 60 | bottom: -150px; 61 | 62 | } 63 | 64 | .circles li:nth-child(1){ 65 | left: 25%; 66 | width: 80px; 67 | height: 80px; 68 | animation-delay: 0s; 69 | } 70 | 71 | 72 | .circles li:nth-child(2){ 73 | left: 10%; 74 | width: 20px; 75 | height: 20px; 76 | animation-delay: 2s; 77 | animation-duration: 12s; 78 | } 79 | 80 | .circles li:nth-child(3){ 81 | left: 70%; 82 | width: 20px; 83 | height: 20px; 84 | animation-delay: 4s; 85 | } 86 | 87 | .circles li:nth-child(4){ 88 | left: 40%; 89 | width: 60px; 90 | height: 60px; 91 | animation-delay: 0s; 92 | animation-duration: 18s; 93 | } 94 | 95 | .circles li:nth-child(5){ 96 | left: 65%; 97 | width: 20px; 98 | height: 20px; 99 | animation-delay: 0s; 100 | } 101 | 102 | .circles li:nth-child(6){ 103 | left: 75%; 104 | width: 110px; 105 | height: 110px; 106 | animation-delay: 3s; 107 | } 108 | 109 | .circles li:nth-child(7){ 110 | left: 35%; 111 | width: 150px; 112 | height: 150px; 113 | animation-delay: 7s; 114 | } 115 | 116 | .circles li:nth-child(8){ 117 | left: 50%; 118 | width: 25px; 119 | height: 25px; 120 | animation-delay: 15s; 121 | animation-duration: 45s; 122 | } 123 | 124 | .circles li:nth-child(9){ 125 | left: 20%; 126 | width: 15px; 127 | height: 15px; 128 | animation-delay: 2s; 129 | animation-duration: 35s; 130 | } 131 | 132 | .circles li:nth-child(10){ 133 | left: 85%; 134 | width: 150px; 135 | height: 150px; 136 | animation-delay: 0s; 137 | animation-duration: 11s; 138 | } 139 | 140 | 141 | 142 | @keyframes animate { 143 | 144 | 0%{ 145 | transform: translateY(0) rotate(0deg); 146 | opacity: 1; 147 | border-radius: 0; 148 | } 149 | 150 | 100%{ 151 | transform: translateY(-1000px) rotate(720deg); 152 | opacity: 0; 153 | border-radius: 50%; 154 | } 155 | 156 | } 157 | 158 | @media (max-width: 400px) { 159 | .context{ 160 | top:300px; 161 | } 162 | .context h1{ 163 | position: absolute; 164 | left: 10%; 165 | top: -190px; 166 | font-size: 30px; 167 | } 168 | .context p{ 169 | position: absolute; 170 | left: 10%; 171 | top:-140px; 172 | font-size: larger; 173 | } 174 | } 175 | @media (min-width: 401px)and (max-width: 620px) { 176 | .context{ 177 | top:300px; 178 | } 179 | .context h1{ 180 | position: absolute; 181 | left: 18%; 182 | top: -190px; 183 | font-size: 30px; 184 | text-align: center; 185 | } 186 | .context p{ 187 | position: absolute; 188 | left: 0; 189 | top:-140px; 190 | font-size: larger; 191 | text-align: center; 192 | } 193 | } 194 | @media (min-width: 960px)and (max-width: 1220px) { 195 | .context { 196 | top: 30vh; 197 | } 198 | .context h1 { 199 | font-size: 60px; 200 | width: 100%; 201 | top:10px; 202 | left: 13%; 203 | text-align: center; 204 | } 205 | .context p { 206 | font-size:25px; 207 | margin-top: 10px; 208 | left: 13%; 209 | width: 100%; 210 | text-align: center; 211 | } 212 | body{ 213 | width: 1220px; 214 | } 215 | .area{ 216 | height: 118vh;; 217 | } 218 | .circles{ 219 | width: 1220px; 220 | height: 118vh; 221 | } 222 | 223 | } 224 | --------------------------------------------------------------------------------