Skip to content

Commit

Permalink
fixed readme issue
Browse files Browse the repository at this point in the history
  • Loading branch information
dkallen78 committed Dec 24, 2023
1 parent 3278e5e commit 90d7d98
Show file tree
Hide file tree
Showing 6 changed files with 6 additions and 6 deletions.
2 changes: 1 addition & 1 deletion flip-clock/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#[Flip Clock](https://dkallen78.github.io/clocks/flip-clock/flip-clock.html)
# [Flip Clock](https://dkallen78.github.io/clocks/flip-clock/flip-clock.html)

After having made some analog clocks, I wanted to see if I could make a classic flip clock. The concept is pretty simple but it took some work to get all the HTML and CSS to play nicely together. The trick is to use two elements to display the proper digit, one each for the top and bottom. Then I use clip-path to trim off the bottom and top of the top and bottom respectively. When it's time to change a time, I rotate the top part around the x axis with a 400 ms transition time, then halfway through the animatioin (when it's edge on/practically invisible) I sneak in the new digits so it looks like the back of the old digit is the bottom of the new one.
2 changes: 1 addition & 1 deletion fraction-clock/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#[Fraction Clock](https://dkallen78.github.io/clocks/fraction-clock/fractionClock.html)
# [Fraction Clock](https://dkallen78.github.io/clocks/fraction-clock/fractionClock.html)

Time is essentially just a representation of the fraction of the day that has passed. I decided to make a clock that represented that as a series of nested fractions using the MathML functionality built into the browser. The code in this one is stupid simple but getting my head around how to use the `<math>` tags took me a little bit.
2 changes: 1 addition & 1 deletion neon-pixel-1/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#[Neon Pixel Clock](https://dkallen.github.io/clocks/neon-pixel-1/neonPixel1.html)
# [Neon Pixel Clock](https://dkallen.github.io/clocks/neon-pixel-1/neonPixel1.html)

My original plan was to make a seven-segment display clock but I went for the easy solution and made a 15-pixel display clock instead. There's nothing tricky here as far as programming goes. The numbers are defined in a 3x5 array with 1s and 0s representing active and inactive "pixels." Everything is arranged in the DOM with a grid box.
2 changes: 1 addition & 1 deletion spin-clock/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#[Spin Clock](https://dkallen78.github.io/clocks/spin-clock/spinClock.html)
# [Spin Clock](https://dkallen78.github.io/clocks/spin-clock/spinClock.html)

After my [Flip Clock](https://dkallen78.github.io/clocks/flip-clock) I wanted to explore 3D CSS transformations a bit more. Whereas the Flip Clock rotates elements along the X axis with the rotation origin in the center of the element, this clock moves that origin in 3D space 5rem into the virtual depth of the screen. Just before the number is spun out of site, the new number is made and placed in the DOM behind the old number.
2 changes: 1 addition & 1 deletion swatch-clock/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#[Swatch Beat Clock](https://dkallen78.github.io/clocks/swatch-clock/swatchTime.html)
# [Swatch Beat Clock](https://dkallen78.github.io/clocks/swatch-clock/swatchTime.html)

I discovered Swatch time by accident while working on another clock and decided I had to make it. Swatch divides the day into 1,000 equal parts called Beats which come out to be 86.4 seconds each. In addition to displaying the current Beat, I also display the hundredth part of the current beat. The math to pull this off is pretty simple: I get the number of milliseconds that have ellapsed so far in the day and divide by 86,400. The quotient is the current Beat.

Expand Down
2 changes: 1 addition & 1 deletion twist-clock/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
#[Twist Clock](https://dkallen78.github.io/clocks/twist-clock/twistClock.html)
# [Twist Clock](https://dkallen78.github.io/clocks/twist-clock/twistClock.html)

The only new thing I'm doing here that I didn't do in either the [Flip Clock](https://dkallen78.github.io/clocks/flip-clock) or the [Spin Clock](https://dkallen78.github.io/clocks/spin-clock) is have upcoming and previous digits displayed along with the current count of seconds. More than anything, this clock was an exercise in turning an idea into a reality.

0 comments on commit 90d7d98

Please sign in to comment.