└── StopWatch-NewYearCountDown-main └── Stop Watch ├── style.css ├── app.js └── index.html /StopWatch-NewYearCountDown-main/Stop Watch/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap"); 2 | .clock{ 3 | position: relative; 4 | } 5 | .clock > img { 6 | width: 250px; 7 | } 8 | .clock > .needle { 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | transform: translateX(-50%) rotateZ(180deg); 13 | transform-origin: top; 14 | width: 5px; 15 | height: 80px; 16 | background-color: black; 17 | border-radius: 5px; 18 | } 19 | .clock > #hours-needle { 20 | height: 50px; 21 | } 22 | 23 | .clock > #seconds-needle { 24 | width: 2px; 25 | } 26 | .container1 { 27 | width: 370px; 28 | } 29 | .currentTime > span { 30 | background-color: rgb(83, 82, 82); 31 | font-size: 1.8em; 32 | } 33 | .time-left > .keys, 34 | .time-left > .values { 35 | display: flex; 36 | justify-content: space-around; 37 | text-align: start; 38 | } 39 | 40 | .time-left > .keys > span { 41 | font-size: 1.1em; 42 | } 43 | 44 | .time-left > .keys { 45 | font-weight: bold; 46 | } 47 | .time-left > .values { 48 | font-family: "Dancing Script", cursive; 49 | } 50 | .C1{ 51 | justify-content: end; 52 | } 53 | .C2{ 54 | justify-content: start; 55 | } 56 | @media only screen and (max-width:767px){ 57 | .C1,.C2{ 58 | justify-content: center; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /StopWatch-NewYearCountDown-main/Stop Watch/app.js: -------------------------------------------------------------------------------- 1 | var year = document.getElementById("year"); 2 | var months = document.getElementById("months"); 3 | var days = document.getElementById("days"); 4 | var hours = document.getElementById("hours"); 5 | var minutes = document.getElementById("minutes"); 6 | var seconds = document.getElementById("seconds"); 7 | var hours1 = document.getElementById("hours1"); 8 | var minutes1 = document.getElementById("minutes1"); 9 | var seconds1 = document.getElementById("seconds1"); 10 | var hourNeedle = document.getElementById('hours-needle'); 11 | var minuteNeedle = document.getElementById('minutes-needle'); 12 | var secondNeedle = document.getElementById('seconds-needle'); 13 | var year, month, day, hour, minute, second; 14 | var hourDeg,minuteDeg,secondDeg; 15 | var date = new Date(); 16 | 17 | var fullMonth = [ 18 | 31, 19 | parseInt(isleapYear(date.getFullYear()) ? 29 : 28), 20 | 31, 21 | 30, 22 | 31, 23 | 30, 24 | 31, 25 | 31, 26 | 30, 27 | 31, 28 | 30, 29 | 31, 30 | ]; 31 | function startClock() { 32 | // Getting Data out of Date Object 33 | hour = date.getHours(); 34 | minute = date.getMinutes(); 35 | second = date.getSeconds(); 36 | year = date.getFullYear(); 37 | month = date.getMonth(); 38 | day = date.getDate(); 39 | 40 | hourDeg = 180 + (hour * 30) + (minute > 30 ? (2.5 * 6) : 0); 41 | minuteDeg = 180 + (minute * 6); 42 | secondDeg = 180 + (second * 6); 43 | 44 | // Interval to run at every Second to update Clock 45 | setInterval(() => { 46 | second++; 47 | setTime(); 48 | hourNeedle.style.transform = `translateX(-50%) rotateZ(${hourDeg}deg)`; 49 | minuteNeedle.style.transform = `translateX(-50%) rotateZ(${minuteDeg}deg)`; 50 | secondNeedle.style.transform = `translateX(-50%) rotateZ(${secondDeg}deg)`; 51 | updateTimeLeft(); 52 | }, 1000); 53 | 54 | // Applying Degrees on Needles 55 | hourNeedle.style.transform = `translateX(-50%) rotateZ(${hourDeg}deg)`; 56 | minuteNeedle.style.transform = `translateX(-50%) rotateZ(${minuteDeg}deg)`; 57 | secondNeedle.style.transform = `translateX(-50%) rotateZ(${secondDeg}deg)`; 58 | } 59 | // Function will return true on leap year 60 | function isleapYear(year) { 61 | if ((0 == year % 4) && (0 != year % 100) || (0 == year % 400)){ 62 | return year; 63 | } 64 | } 65 | 66 | function setTime() { 67 | // Minute Completed 68 | if(second === 60){ 69 | second = 0; 70 | minute++; 71 | } 72 | if(minute === 30 && second === 0) { 73 | // Update degree for Hour half way 74 | hourDeg += 15; 75 | } 76 | // Hour Completed 77 | if(minute === 60 && second === 0){ 78 | minute = 0; 79 | hour++; 80 | hour = hour < 24 ? hour : 0; 81 | // Update degree for Hour 82 | hourDeg += 15; 83 | } 84 | // Update degree for Minute 85 | minuteDeg = 180 + (minute * 6); 86 | // Update degree for Seconds 87 | secondDeg = 180 + (second * 6); 88 | } 89 | 90 | // 3 - Function to update time lefted 91 | function updateTimeLeft() { 92 | // Updating 93 | seconds.innerHTML = format(60 - second); 94 | minutes.innerHTML = format(60 - minute); 95 | hours.innerHTML = format(23 - hour); 96 | if(hour === 0 && minute === 0 && second === 0) { 97 | day++; 98 | if(fullMonth[month] <= day){ 99 | day = 1; 100 | month++; 101 | if(month === 12){ 102 | month=0; 103 | year++; 104 | } 105 | } 106 | }; 107 | days.innerHTML = format(fullMonth[month] - day); 108 | months.innerHTML = format(12 - (month + 1)); 109 | year.innerHTML = year + 1; 110 | } 111 | 112 | // Function to return a two digit number 113 | function format(number) { 114 | return number.toString().length < 2 ? `0${number}` : number; 115 | } 116 | 117 | // Starting Clock 118 | startClock(); 119 | 120 | // Customise timer 121 | function startTimer(){ 122 | 123 | interval = setInterval(function(){ 124 | seconds1.selectedIndex--; 125 | if(seconds1.selectedIndex==00 && minutes1.selectedIndex!=00){ 126 | seconds1.value="59"; 127 | minutes1.selectedIndex--; 128 | } 129 | if(seconds1.selectedIndex==00 && minutes1.selectedIndex==00 && hours1.selectedIndex!==00){ 130 | hours1.selectedIndex--; 131 | minutes1.value="59"; 132 | seconds1.value="59"; 133 | } 134 | },1000); 135 | } 136 | function stopTimer(){ 137 | clearInterval(interval); 138 | } 139 | function resetTimer(){ 140 | hours1.value= "00"; 141 | minutes1.value = "00"; 142 | seconds1.value = "00"; 143 | } 144 | -------------------------------------------------------------------------------- /StopWatch-NewYearCountDown-main/Stop Watch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Stop Watch 12 | 13 | 14 |
15 |
16 | Current Time 17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 | Time left in New Year 31 |
32 |
33 |
34 | Months 35 | Days 36 | Hours 37 | Minutes 38 | Seconds 39 |
40 |
41 | 00 42 | 00 43 | 00 44 | 00 45 | 00 46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 | 54 | 55 | 56 |
57 |
58 |
59 | Your Customise Time Left 60 |
61 |
62 |
63 | Hours 64 | Minutes 65 | Seconds 66 |
67 |
68 |
69 | 96 |
97 |
98 | 160 |
161 |
162 | 224 |
225 |
226 |
227 | 228 | 229 | 230 |
231 |
232 |
233 |
234 | 235 |
236 |
237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 248 | 249 | 250 | --------------------------------------------------------------------------------