diff --git a/README.md b/README.md index c1036a4..5b353bb 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,10 @@ # [nixie-clock](http://test.bentswanson.com/nixie) > A JavaScript clock imitating [Nixie tubes](https://en.wikipedia.org/wiki/Nixie_tube). + +## Example Yellow (default) +![Yellow Nixie clock](screenshots/yellow.png "Yellow Nixie clock") + +## Example Orange +Add the class `clock-orange`. +![Orange Nixie clock](screenshots/orange.png "Orange Nixie clock") diff --git a/index.html b/index.html index 2a76460..4328206 100644 --- a/index.html +++ b/index.html @@ -89,7 +89,7 @@ - qwerji + qwerji diff --git a/index_orange.html b/index_orange.html new file mode 100644 index 0000000..4c94e00 --- /dev/null +++ b/index_orange.html @@ -0,0 +1,95 @@ + + + + + qwerji | nixie clock + + + + +
+
+
+

0

+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+
+
+

0

+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+
+
+

:

+
+
+

0

+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+
+
+

0

+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+
+
+

:

+
+
+

0

+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+
+
+

0

+

1

+

2

+

3

+

4

+

5

+

6

+

7

+

8

+

9

+
+
+
+ qwerji + + + diff --git a/main.css b/main.css index af76a8d..813a5d6 100644 --- a/main.css +++ b/main.css @@ -1,58 +1,67 @@ -* { - padding: 0; - margin: 0; - font-family: 'Lato', sans-serif; - font-size: 100px; -} - body { background: #191919; } -a { +a.nixie { position: fixed; bottom: 0; left: 0; font-size: 20px; text-decoration: none; margin: 20px; - color: rgba(255,255,255,0.35); + color: rgba(255, 255, 255, 0.35); transition: .2s ease all; + font-family: 'Lato', sans-serif; } -a:hover { +a.nixie:hover { filter: brightness(.75); } .clock { - color: rgba(50,50,50,0.35); + color: rgba(50, 50, 50, 0.35); display: block; margin: 20vh auto; text-align: center; + font-family: 'Lato', sans-serif; + font-size: 100px; +} + +.clock p.separator, +.clock section { + display: inline-block; +} + +.clock section div p { + padding: 0; + margin: 0; + position: absolute; + width: 60px; + text-align: center; + transition: 0.3s ease color, 0.3s ease text-shadow; +} + +.clock p.separator { + font-size: 60px; + vertical-align: top; + margin-top: 20px; +} + +a.nixie:hover, +.clock p.separator, +.clock section p.active { + color: #FFE548; + text-shadow: 0 0 20px #F58732; +} + +.clock-orange p.separator, +.clock-orange section p.active { + color: #feb454; + text-shadow: 0 0 20px #F58732; +} + +.clock section div { + display: inline-block; + width: 60px; + height: 120px; } - .clock p.separator, - .clock section { - display: inline-block; - } - .clock section div p { - position: absolute; - width: 60px; - text-align: center; - transition: 0.3s ease color, 0.3s ease text-shadow; - } - .clock p.separator { - font-size: 60px; - vertical-align: top; - margin-top: 20px; - } - a:hover, - .clock p.separator, - .clock section p.active { - color: #FFE548; - text-shadow: 0px 0px 20px #F58732; - } - .clock section div { - display: inline-block; - width: 60px; - height: 120px; - } diff --git a/nixie.js b/nixie.js index 6dbdac6..f1b9759 100644 --- a/nixie.js +++ b/nixie.js @@ -1,9 +1,9 @@ -const hours = document.querySelector('.hours') -const mins = document.querySelector('.mins') -const secs = document.querySelector('.secs') +const hours = document.querySelector('.hours'); +const mins = document.querySelector('.mins'); +const secs = document.querySelector('.secs'); function getTime() { - const now = new Date() + const now = new Date(); return { hours: now.getHours() <= 9 ? `0${now.getHours()}` : `${now.getHours()}`, mins: now.getMinutes() <= 9 ? `0${now.getMinutes()}` : `${now.getMinutes()}`, @@ -12,21 +12,21 @@ function getTime() { } function setDigits(section, digit) { - const tens = [...section.children[0].children] - const ones = [...section.children[1].children] - tens.forEach(number => number.classList.remove('active')) - tens[digit[0]].classList.add('active') - ones.forEach(number => number.classList.remove('active')) - ones[digit[1]].classList.add('active') + const tens = [...section.children[0].children]; + const ones = [...section.children[1].children]; + tens.forEach(number => number.classList.remove('active')); + tens[digit[0]].classList.add('active'); + ones.forEach(number => number.classList.remove('active')); + ones[digit[1]].classList.add('active'); } function tick() { - const time = getTime() - setDigits(hours, time.hours) - setDigits(mins, time.mins) - setDigits(secs, time.secs) + const time = getTime(); + setDigits(hours, time.hours); + setDigits(mins, time.mins); + setDigits(secs, time.secs); } -tick() +tick(); -setInterval(tick, 1000) +setInterval(tick, 1000); diff --git a/screenshots/orange.png b/screenshots/orange.png new file mode 100644 index 0000000..4740227 Binary files /dev/null and b/screenshots/orange.png differ diff --git a/screenshots/yellow.png b/screenshots/yellow.png new file mode 100644 index 0000000..e82b083 Binary files /dev/null and b/screenshots/yellow.png differ