diff --git a/css/clock.css b/css/clock.css index 8df6ded..01d7b21 100644 --- a/css/clock.css +++ b/css/clock.css @@ -8,7 +8,6 @@ background-size: 200% 200%; animation: gradient 15s ease infinite; box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.1); - } .clock::before { @@ -45,6 +44,46 @@ border-top: 1px solid var(--background); } +.week-12-clock { + position: absolute; + width: 335px; + height: 335px; + background: black; + transition: all 0.5s; + background-size: 200% 200%; + animation: none; + box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.1); + border-radius: 100%; +} + +.week-12-clock::before{ + width: 100px; + height: 100px; + z-index: 100000; + background: rgba( 255, 255, 255, 0.1 ); + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); + backdrop-filter: blur( 6px ); + -webkit-backdrop-filter: blur( 6px ); + border-radius: 1px; + filter: none; + transform: translate(-200%, -100%) rotate(0deg); + border: 1px solid rgba( 255, 255, 255, 0.18 ); +} + +.week-12-clock::after{ + width: 180px; + height: 180px; + z-index: 100000; + background: rgba( 255, 255, 255, 0.1 ); + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); + backdrop-filter: blur( 6px ); + -webkit-backdrop-filter: blur( 6px ); + border-radius: 1px; + filter: none; + transform: translate(10%, 0) rotate(0deg); + border: 1px solid rgba( 255, 255, 255, 0.18 ); +} + @keyframes gradient { 0% { background-position: 0% 50%; @@ -73,6 +112,35 @@ transition: all 0.5s; } +.week-12-hour{ + width: 0px; + height: 0px; + background: none; + border-radius: 0; + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-bottom: 46px solid yellow; /* Change color as needed */ + top: calc(50% + 80px); + left: calc(50% - 23px); + transform-origin: 23px -80px; +} + +.week-12-hour::after{ + content: ""; + position: absolute; + top: 0; + left: 0; + width: 0px; + height: 0px; + background: none; + border-radius: 0; + border-left: 23px solid transparent; + border-right: 23px solid transparent; + border-bottom: 46px solid yellow; /* Change color as needed */ + transform: translate(-50%, 0%); + filter: blur(5px); +} + .minute-hand { width: 4px; height: 60px; @@ -84,6 +152,16 @@ transition: all 0.5s; } +.week-12-minute{ + width: 40px; + height: 40px; + background: blue; + border-radius: 0%; + top: calc(50% + 60px); + left: calc(50% - 20px); + transform-origin: 20px -60px; +} + .second-hand { width: 2px; height: 80px; @@ -95,6 +173,15 @@ transition: all 1s; } +.week-12-second{ + width: 40px; + height: 40px; + background: red; + top: calc(50% + 20px); + left: calc(50% - 20px); + transform-origin: 20px -20px; +} + .center { width: 8px; height: 8px; diff --git a/index.html b/index.html index 2b4fc29..5ed0836 100644 --- a/index.html +++ b/index.html @@ -276,6 +276,19 @@

Week 11

+
+ +

Week 12

+
+
+
+
+
+
+ + +
+
diff --git a/js/params.js b/js/params.js index 01b09ff..a1d03ab 100644 --- a/js/params.js +++ b/js/params.js @@ -92,17 +92,25 @@ function updateClock() { const minutes = now.getMinutes(); const seconds = now.getSeconds(); - const hourHand = document.querySelector('.hour-hand'); - const minuteHand = document.querySelector('.minute-hand'); - const secondHand = document.querySelector('.second-hand'); + const hourHands = document.querySelectorAll('.hour-hand'); + const minuteHands = document.querySelectorAll('.minute-hand'); + const secondHands = document.querySelectorAll('.second-hand'); const hourDegrees = (hours % 12) * 30 + minutes / 2 + 180; const minuteDegrees = minutes * 6 + seconds / 10 + 180; const secondDegrees = seconds * 6 + 180; - hourHand.style.transform = `rotate(${hourDegrees}deg)`; - minuteHand.style.transform = `rotate(${minuteDegrees}deg)`; - secondHand.style.transform = `rotate(${secondDegrees}deg)`; + hourHands.forEach(hand => { + hand.style.transform = `rotate(${hourDegrees}deg)`; + }); + + minuteHands.forEach(hand => { + hand.style.transform = `rotate(${minuteDegrees}deg)`; + }); + + secondHands.forEach(hand => { + hand.style.transform = `rotate(${secondDegrees}deg)`; + }); } setInterval(updateClock, 1000); diff --git a/weeks/12.html b/weeks/12.html new file mode 100644 index 0000000..a60456f --- /dev/null +++ b/weeks/12.html @@ -0,0 +1,147 @@ +
+
+

Description

+

+ This week we've kicking off our final project on experimental clock! + We will learn about the fascinating and diverse history of measuring + time, and time keeping. Then we will learn how to retrieve the + current Time in Javascript using the Date() object. Lastly we will + learn dive into what Creative Coding is, how an external library - + p5.js can help us make some pretty interesting coding sketches!

+

+
+ +
+

Lecture

+

Time +

+

p5.js + and Creative Coding +

+
+ +
+

Demo

+

+ Timing + Functions +

+

+ Date + Methods +

+

+ Setup + & Draw +

+
+ +
+

Assignments

+ +
+ + +
+

Resources

+ + +
+
\ No newline at end of file