diff --git a/01 - JavaScript Drum Kit/background.jpg b/01 - JavaScript Drum Kit/background.jpg deleted file mode 100644 index 590036d636..0000000000 Binary files a/01 - JavaScript Drum Kit/background.jpg and /dev/null differ diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index ae9aacaf07..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - JS Drum Kit - - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 8a2f8e8417..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - JS Drum Kit - - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..9f4fa2d116 --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,65 @@ + + + + + JS Drum Kit + + + + + + +
+
+ A + Clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..54a5762f93 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,31 @@ +function removeTransition(e) { + if(e.propertyName != 'transform') return; + this.classList.remove('playing'); + +} +function playSoundByKeyCode(keyCode) { + const audio = document.querySelector(`audio[data-key="${keyCode}"]`); + const key = document.querySelector(`.key[data-key="${keyCode}"]`); + + if(!audio) return; + audio.currentTime = 0; + audio.play(); + key.classList.add('playing'); +} + +function playSound(e) { + playSoundByKeyCode(e.keyCode); +} + + +const keys = Array.from(document.querySelectorAll('.key')); +keys.forEach(key => { + key.addEventListener('transitionend', removeTransition); + + key.addEventListener('click', () => { + const keyCode = key.getAttribute('data-key'); + playSoundByKeyCode(keyCode) + }) +}); + +window.addEventListener('keydown', playSound); \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index bfdba84312..42a1fb49e7 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,6 +1,6 @@ html { font-size: 10px; - background: url('./background.jpg') bottom center; + background: url(https://i.pinimg.com/1200x/83/2d/32/832d3229300a60f3d37a3f32e81be592.jpg) center; background-size: cover; } diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html deleted file mode 100644 index 87b91480ca..0000000000 --- a/02 - JS and CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - JS + CSS Clock - - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html deleted file mode 100644 index 55ab1a5331..0000000000 --- a/02 - JS and CSS Clock/index-START.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - JS + CSS Clock - - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html new file mode 100644 index 0000000000..7051e5fa17 --- /dev/null +++ b/02 - JS and CSS Clock/index.html @@ -0,0 +1,32 @@ + + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
12
+
3
+
6
+
9
+
+
+
+

+

+
+
+ + + + + diff --git a/02 - JS and CSS Clock/script.js b/02 - JS and CSS Clock/script.js new file mode 100644 index 0000000000..988548fb4b --- /dev/null +++ b/02 - JS and CSS Clock/script.js @@ -0,0 +1,35 @@ +const secondHand = document.querySelector('.second-hand'); +const minsHand = document.querySelector('.min-hand'); +const hourHand = document.querySelector('.hour-hand'); +const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat']; + +function setDate() { + const now = new Date(); + const seconds = now.getSeconds(); + const secondDegrees = ((seconds / 60) * 360) + 90; + secondHand.style.transform = `rotate(${secondDegrees}deg)`; + + // solution backwards jump + if (seconds === 0) { + secondHand.style.transition = 'none'; + }else { + secondHand.style.transition = ''; + } + + const mins = now.getMinutes(); + const minutesDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; + minsHand.style.transform = `rotate(${minutesDegrees}deg)`; + + const hour = now.getHours(); + const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; + + // Digital Clock + document.getElementById('digital-time').textContent = now.toLocaleTimeString(); + + // Day + document.querySelector('.day').textContent = days[now.getDay()]; +} + +setInterval(setDate, 1000); +setDate(); \ No newline at end of file diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css new file mode 100644 index 0000000000..6ad7ebe89c --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,117 @@ +html { + background: #018DED url(https://i.pinimg.com/1200x/fd/75/97/fd75973515edc17092f67638e40ddfbd.jpg) no-repeat center; + background-size: cover; + font-family: 'Helvetica Neue', sans-serif; + font-size: 10px; + text-align: center; + } + +body { + margin: 0; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + +main { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +#digital-time { + color: #fff; + font-size: 3rem; + font-weight: 800; + text-shadow: 1px 1px 4px #000; + margin-top: 1rem; +} + +.day { + color: #fff; + font-size: 2rem; + font-weight: 700; + text-shadow: 1px 1px 4px #000; + border: 3px solid #fff; + border-radius: 10px; + width: 50px; + padding: 5px; + margin: auto; +} + +.clock { + background-color: white; + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + position: relative; + padding: 2rem; + box-shadow: + 0 0 0 4px rgba(0,0,0,0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0,0,0,0.2); +} + +.clock-face { + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); +} + +.hand { + width: 50%; + height: 6px; + position: absolute; + top: 50%; + background: black; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); +} + +.min-hand, +.second-hand, +.hour-hand { + border-top-left-radius: 50%; + border-bottom-left-radius: 50%; +} + +.second-hand { + height: 4px; + background-color: red; +} + +.number { + position: absolute; + font-size: 2rem; + font-weight: bold; + color: #333; + text-shadow: 1px 1px 2px rgba(0,0,0,0.2); + transform: translate(-50%, -50%); +} + +.twelve { + top: 8%; + left: 50%; +} + +.three { + top: 50%; + left: 92%; +} + +.six { + top: 92%; + left: 50%; +} + +.nine { + top: 50%; + left: 8%; +} \ No newline at end of file diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html deleted file mode 100644 index b52b9f61af..0000000000 --- a/03 - CSS Variables/index-FINISHED.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - Scoped CSS Variables and JS - - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - - - - - diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html deleted file mode 100644 index d5fcc3a2ae..0000000000 --- a/03 - CSS Variables/index-START.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - Scoped CSS Variables and JS - - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - - - - diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..89390d26cd --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,31 @@ + + + + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + +
+ + Not work img + + + + \ No newline at end of file diff --git a/03 - CSS Variables/script.js b/03 - CSS Variables/script.js new file mode 100644 index 0000000000..13c82e1f47 --- /dev/null +++ b/03 - CSS Variables/script.js @@ -0,0 +1,10 @@ +const inputs = document.querySelectorAll('input'); + +function handleUpdate() { + const suffix = this.dataset.size || ''; + const valueWithUnit = this.value + suffix; + document.documentElement.style.setProperty(`--${this.name}`, valueWithUnit) + document.getElementById(`${this.name}-value`).textContent = valueWithUnit; +} + +inputs.forEach(input => input.addEventListener('input', handleUpdate)); \ No newline at end of file diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..a717d0a362 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,44 @@ +:root { + --base: #ffc600; + --spacing: 10px; + --blur: 10px; +} + +img { + background-color: var(--base); + padding: var(--spacing); + filter: blur(var(--blur)); +} + +.h1 { + color: var(--base); +} + +body { + text-align: center; + background-color: #193549; + color: #fff; + font-family: 'helvetica neue', sans-serif; + font-size: 50px; + font-weight: 100; +} + +.controls { + margin-bottom: 50px; +} + +input { + width: 100px; +} + +label { + position: relative; +} + +label span { + position: absolute; + font-size: 9px; + color: rgb(23, 9, 116); + right: 20px; + top: 33px; +} \ No newline at end of file diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html deleted file mode 100644 index 10b655820a..0000000000 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - - Array Cardio 💪 - - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html deleted file mode 100644 index 0dcfd00f40..0000000000 --- a/04 - Array Cardio Day 1/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - Array Cardio 💪 - - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..8bae1fddb5 --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,16 @@ + + + + + Array Cardio 💪 + + + + +

+ 💡 Tip: Open your browser’s JavaScript Console to see the results! +

+ + + + diff --git a/04 - Array Cardio Day 1/script.js b/04 - Array Cardio Day 1/script.js new file mode 100644 index 0000000000..8c084499be --- /dev/null +++ b/04 - Array Cardio Day 1/script.js @@ -0,0 +1,98 @@ +// Get your shorts on - this is an array workout! +// ## Array Cardio Day 1 + +// Some data we can work with + +const inventors = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } +]; + +const people = [ + 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig', + 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving', + 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano', + 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose', + 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank' +]; + +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's + +const fifteen = inventors.filter(inventor => inventor.year > 1499 && inventor.year < 1600); +console.table(fifteen); + + +// Array.prototype.map() +// 2. Give us an array of the inventors first and last names + +const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`) +console.log(fullNames); + + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest + +const ordered = inventors.sort((a,b) => a.year - b.year); +console.table(ordered); + + +// Array.prototype.reduce() +// 4. How many years did all the inventors live all together? + +const totalYears = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0) +console.log(totalYears); + + +// 5. Sort the inventors by years lived + +const oldest = inventors.sort((a,b) =>(b.passed - b.year) - (a.passed - a.year)); +console.table(oldest); + + +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris +const category = document.querySelector('.mw-category'); +const links = Array.from(document.querySelectorAll('a')); +const de = links + .map(link => link.textContent) + .filter(streetName => streetName.includes('de')); + + +// 7. sort Exercise +// Sort the people alphabetically by last name + +const alpha = people.sort((lastOne, nextOne) => { + const [aLast,aFirst] = lastOne.split(', '); + const [bLast,bFirst] = nextOne.split(', '); + return aLast.localeCompare(bLast); +}); + +console.log(alpha); + + + + + +// 8. Reduce Exercise +// Sum up the instances of each of these +const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; +const transportation = data.reduce((obj, item) => { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; +}, {}) + +console.log(transportation); \ No newline at end of file diff --git a/04 - Array Cardio Day 1/style.css b/04 - Array Cardio Day 1/style.css new file mode 100644 index 0000000000..e0b49af41a --- /dev/null +++ b/04 - Array Cardio Day 1/style.css @@ -0,0 +1,28 @@ +body { + display: flex; + min-height: 90vh; + align-items: center; + justify-content: center; +} + +.console-hint { + background-color: #f0f8ff; + color: #333; + font-size: 1rem; + padding: 1em 1.2em; + border-left: 8px solid #007acc; + border-radius: 5px; + max-width: 800px; + margin: 1em auto; + font-family: system-ui, sans-serif; + box-shadow: 0 1px 5px rgba(0,0,0,0.1); + } + + .console-hint strong { + color: #007acc; + } + + .console-hint em { + font-style: italic; + color: #555; + } \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html deleted file mode 100644 index 85c33c1ee2..0000000000 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ /dev/null @@ -1,148 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - - -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html deleted file mode 100644 index 88a4f1d1e2..0000000000 --- a/05 - Flex Panel Gallery/index-START.html +++ /dev/null @@ -1,115 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - - -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - - - diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..804139b511 --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,45 @@ + + + + + Flex Panels + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + diff --git a/05 - Flex Panel Gallery/script.js b/05 - Flex Panel Gallery/script.js new file mode 100644 index 0000000000..6ea35a65fd --- /dev/null +++ b/05 - Flex Panel Gallery/script.js @@ -0,0 +1,24 @@ +const panels = document.querySelectorAll('.panel'); + + +function toggleOpen() { + panels.forEach(panel => { + if (panel !== this){ + panel.classList.remove('open'); + panel.classList.remove('open-active') + } + }) + this.classList.toggle('open'); +} + +function toggleActive(e) { + console.log(e.propertyName); + if (e.propertyName.includes('flex')) { + if (this.classList.contains('open')) + this.classList.toggle('open-active'); + else + this.classList.remove('open-active') + } +} +panels.forEach(panels => panels.addEventListener('click', toggleOpen)); +panels.forEach(panels => panels.addEventListener('transitionend', toggleActive)); diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..d21a0fe571 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,86 @@ +html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; +} + +body { + margin: 0; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height: 100vh; + overflow: hidden; + display: flex; +} + +.panel { + background: #6B0F9C; + box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); + color: white; + text-align: center; + align-items: center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size: cover; + background-position: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +.panel > *:first-child { + transform: translateY(-300%); +} +.panel.open-active > *:first-child { + transform: translateY(0); +} + +.panel > *:last-child { + transform: translateY(300%); +} +.panel.open-active > *:last-child { + transform: translateY(0); +} + +.panel1 { background-image:url(https://i.pinimg.com/736x/ec/df/18/ecdf1861dfee4cf7a77f919c50d82e4f.jpg); } +.panel2 { background-image:url(https://i.pinimg.com/736x/bc/1c/c2/bc1cc23d3a8684ffd33b2de5e33e5a37.jpg); } +.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } +.panel4 { background-image:url(https://i.pinimg.com/1200x/62/d5/75/62d575b4e683820550d64bd035f0c1c0.jpg); } +.panel5 { background-image:url(https://i.pinimg.com/1200x/95/16/a9/9516a9665dced08af3a279031a8c90e9.jpg); } + +/* Flex Children */ +.panel > * { + margin: 0; + width: 100%; + transition: transform 0.5s; +} + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} + +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + flex: 5; + font-size: 40px; +} \ No newline at end of file diff --git a/readme.md b/readme.md index 584068db0e..39130cff28 100644 --- a/readme.md +++ b/readme.md @@ -1,80 +1,53 @@ -![](https://javascript30.com/images/JS3-social-share.png) - -# JavaScript30 - -Starter Files + Completed solutions for the JavaScript 30 Day Challenge. - -Grab the course at [https://JavaScript30.com](https://JavaScript30.com) - -## Community #JavaScript30 Content - -Feel free to submit a PR by adding a link to your own recaps, guides, or reviews! - -* [Arjun Khode’s blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features. -* [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching. -* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers. -* [Soyaine 写的中文指南](https://github.com/soyaine/JavaScript30)包含了过程记录和难点解释 -* [Aaron的语雀学习小组](https://github.com/A-aronYang/JavaScript30)包含中文文档，案例和相关资料 -* [乔木 录制的讲解视频](https://b23.tv/pSa7rdu) 看中文讲解视频一起学习 Javascript30 吧! Javascript30 中 CSS/JS/HTML 视频讲解 -* [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned. -* [Adriana Rios](https://stpcollabr8nlstn.github.io/JavaScript30/) shares her alternative solutions. -* [Michael Einsohn](http://30daysofjs.michaeleinsohn.com) publishes each challenge after watching the video once. -* [Mike Ekkel](https://medium.com/@mike_ekkel/javascript-30-a-30-day-vanilla-js-challenge-6a733fc9f62c#.9frjtaje9) -* [Yusef Habib](https://github.com/yhabib/JavaScript30) lessons and tricks learned, and a [gh-page](https://yhabib.github.io/JavaScript30/) to see working all the mini-projects. -* [Amelie Yeh](https://github.com/amelieyeh/JS30) 30 lesson notes with things I've learned, and those important recaps. and directly view my demos [here](https://amelieyeh.github.io/JS30/) 🇹🇼😄 -* [Winar](https://github.com/winar-jin/JavaScript30-Challenge)的JavaScript30天挑战，记录练习过程，重难点和其他的解决方案。🎨 -* [Rayhatron](https://rayhatron.github.io/blog/) - walkthroughs, recaps, and lessons learned. -* [Andrei Dobra](https://github.com/andreidbr/JS30) Full repo with lessons learned and a [gh-page](https://andreidbr.github.io/JS30/) with all the exercises. -* [从零到壹全栈部落](https://github.com/liyuechun/JavaScript30-liyuechun),春哥发起的从零到壹全栈部落，旨在带领大家一起学习，一起输出，文档化，代码化，中文视频化，全栈部落口号：输出是最好的学习方式。 -* [Usmaan Ali's](https://github.com/usyyy/javascript/blob/master/JavaScript30/analysis.md) summary of the technical skills learned from each project. He's also posting them as separate blog posts [here](https://medium.com/@usyyy). -* [Axel](https://github.com/afuh/js30)'s lessons learned and a [showcase](https://afuh.github.io/js30/) with the projects. -* [Chris](https://github.com/dwatow/JavaScript30) 中文實戰，目標描述、過程紀錄。 -* [Muhammad D. Ramadhan's](https://miayam.github.io) blog. He shamlesly mixed his personal life with 30 day JavaScript challenge to increase his learning retention. He also summarised the challenge on [one single page](https://miayam.github.io/js30). Do not read his blog! -* [Lee Keitel's Blog](https://blog.keitel.xyz/categories/javascript30/) includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future. -* [Dustin Hsiao](https://github.com/dustinhsiao21/Javascript30-dustin) 包含了各篇介紹、 效果Demo、各篇詳解及記錄過程，附上部分延伸閱讀及[gh-page](https://dustinhsiao21.github.io/Javascript30-dustin/)。 -* [GuaHsu](https://github.com/guahsu/JavaScript30) - 紀錄各篇練習過程與心得，並嘗試擴充部分練習，也做了一個包含全部練習的[介紹站](http://guahsu.io/JavaScript30/)🇹🇼 -* [Daniela](https://github.com/misslild)'s completed challenges on [GitHub Pages](https://misslild.github.io/WesBos-30day-Coding-challenge/) and [Codepen](https://codepen.io/collection/DapZeP/) :raised_hands: :muscle: :+1: -* [Dmitrii Pashutskii's](https://github.com/guar47) code of all challenges on [GitHub with Pages](https://github.com/guar47/javascript30Summary) and review [blog posts](https://blog.dpashutskii.com/tag/javascript30/). -* [Abid Hasan's](https://github.com/sabidhasan/javascript-30) completion of all challenges. This was awesome!! Learned so much! :+1: -* [Yusong Notes](https://sky172839465.github.io/course/js30) Records Yusong JS 30 days note and demo. :star2: -* [Ding's Implementation](https://github.com/Ding-Fan/javascript30) code and online demo. -* [Herminio Torres](https://github.com/herminiotorres/JavaScript30) lessons and tricks learned, and a [gh-page](https://herminiotorres.github.io/JavaScript30/) to see working all the mini-projects. -* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days).👍👍👍 -* [Kizito](https://github.com/akhilome/)'s follow along [repo](https://github.com/akhilome/js30) with [completed challenges](https://akhilome.github.io/js30) and [notes](https://akhilome.github.io/js30/notes). -* [VannTile](https://github.com/vanntile)'s [repository](https://github.com/vanntile/JavaScript30) and [GitHub Pages showcase](https://vanntile.github.io/JavaScript30/). Thank you for a great ⌨️ experience. -* [Alex Kim](https://github.com/Alex-K1m/js30-challenge) completed all the challenges. You can check them out at [GitHub pages](https://alex-k1m.github.io/js30-challenge/). -* [Mikhail Thomas](https://github.com/seckela) created [JS30++](https://github.com/seckela/js30plusplus) to add another level of challenge on top of this already great course. -* [Ramon Morcillo](https://github.com/reymon359/JavaScript30) finished this awesome challenge!. You can see the showcase of his implementations on [this link](https://reymon359.github.io/JavaScript30/). -* [Santiago Escobar](https://github.com/sescobar99)'s [repository](https://github.com/sescobar99/javascript30-challenge) and [GitHub Pages showcase](https://sescobar99.github.io/javascript30-challenge/). -* [Harry Xie](https://github.com/a90100/JavaScript30) 紀錄 30 天的練習筆記在 [此連結](https://github.com/a90100/JavaScript30). -* [ Van Ribeiro's ](https://vanribeiro-30daysofjavascript.netlify.app/) about demos and recaps. On [GitHub Repo](https://github.com/vanribeiro/30days-Of-JavaScript) there's a summary about what was learned and researched. -* [Mugilan](https://github.com/Mugilan-Codes) is currently doing this challenge. Check out his [Repo](https://github.com/Mugilan-Codes/javascript-30) and the [Live Demo](https://mugilan-codes.github.io/javascript-30/). -* [Eshan Vohra](https://github.com/eshanvohra) is currently doing this challenge. Check out my repo [here](https://github.com/eshanvohra/JavaScript30). -* [RegusAl](https://github.com/RegusAl) is currently doing this challenge. Check out my repo [here](https://github.com/RegusAl/JavaScript30). -* [Ayush Gupta's](https://javascript30.ayushgupta.tech/) implementation of JavaScript30 challenge with some add-ons & updated design. -* [filipkowal](https://github.com/filipkowal/JS30-05-Flex-Panels-Deactivate) Fix to flex panels (5th day) so the panels deactivate when clicked on another one. -* [Mo. Saif's](https://github.com/MoSaif00)note on lessons learned and a [gh-pages showcase](https://mosaif00.github.io/30-Days-JavaScript-Challenge/) for the projects. -* [Stiaannel's](https://stiaannel.co.za/my-projects/javascript30) implementation of the Javascript30 challenge, with small design changes and a couple of extra features. -* [Kelly CHI's](https://kellychi22.github.io/JavaScript30/) complete JavaScript30 challenges! Click the links to check demos and notes of each challenge. 🇹🇼 🌟 -* [Issam Seghir](https://issam-seghir.github.io/JavaScript30/) added custom solutions and styles 🍧, improved performance, including fixed bugs/issus 💢. , added articles for each exercise 📝. - -## Alternative Implementations -Here are some links of people who have done the tutorials, but in a different language or framework: - -* [Thomas Mattacchione](https://github.com/tkjone/clojurescript-30) JavaScript 30 written in ClojureScript. -* [Dave Follett's](https://github.com/davefollett) blog series, [A New Vue on #JavaScript30](https://davefollett.io/categories/a-new-vue-on-javascript30/), where he explores re-implementing #JavaScript30 projects using [Vue](https://vuejs.org). -* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises. -* [Adrien Poly](https://github.com/adrienpoly/javascript30-stimulus) a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to [Stimulus JS](https://stimulusjs.org/) framework in a Rails App. -* [Bogdan Lazar](https://github.com/tricinel/TypeScript30) all the JavaScript 30 written in [TypeScript](https://www.typescriptlang.org/). -* [Will Wager](https://github.com/wwags33/JavaScript30) another [TypeScript](https://www.typescriptlang.org/) implementation! -* [marcoSven](https://github.com/marcoSven) solution suggestion for [10 - Hold Shift and Check Checkboxes](https://github.com/marcoSven/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-FINISHED.html). -* [ALMaclaine](https://github.com/almaclaine) Javascript 30 written in [Dart 2.0](https://github.com/ALMaclaine/Dart30). -* [Connie Leung](https://github.com/railsstudent) Javascript 30 written in [Angular and RxJS](https://github.com/railsstudent/ng-rxjs-30). - -## A note on Pull Requests - -These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. - -The starter files + solutions will be updated if/when the videos are updated. - -Thanks! +# 🎯 JavaScript30 – My Solutions & Enhancements + +A personal journey through [Wes Bos's JavaScript30](https://javascript30.com/) challenge, where I not only complete each day’s task but also enhance the projects with additional features, modern best practices, and clean code. + +👤 **Author**: [Abdukadir Ibrahim](https://github.com/icabduqaadir12/JavaScript30) +🌐 **Live Demo Projects**: [View All on GitHub Pages](https://icabduqaadir12.github.io/javascript30-demos/) + +--- + +## 🧠 My Contributions + +### ✅ Day 1 – Drum Kit +**Enhancement**: Added mouse click support alongside keypress triggers. +🔗 [Live Demo – Day 1](https://icabduqaadir12.github.io/javascript30-demos/01-drum-kit/) + +--- + +### ✅ Day 2 – Clock +**Enhancement**: Implemented smooth animations, digital time display, and fixed 90° rotation offset issues for seamless transitions. +🔗 [Live Demo – Day 2](https://icabduqaadir12.github.io/javascript30-demos/02-clock/) + +--- + +### ✅ Day 3 – CSS Variables +**Enhancement**: Live real-time updates of CSS variable values as sliders are moved. +🔗 [Live Demo – Day 3](https://icabduqaadir12.github.io/javascript30-demos/03-css-variables/) + +--- + +### ✅ Day 4 – Array Cardio 1 +**Enhancement**: Modernized with concise arrow functions, `localeCompare()` for accurate sorting, and cleaner reduce logic. +🔗 [Live Demo – Day 4](https://icabduqaadir12.github.io/javascript30-demos/04-array-cardio-1/) + +--- + +### ✅ Day 5 – Flex Panel Gallery +**Enhancement**: Added accordion behavior – only one panel opens at a time while others auto-close. Improves interaction and layout clarity. +🔗 [Live Demo – Day 5](https://icabduqaadir12.github.io/javascript30-demos/05-flex-panel-gallery/) + +--- + +## 📌 Notes + +- Each project is enhanced with modern JavaScript practices and clean, maintainable code. +- Designed to help me grow as a front-end developer through real projects. + +--- + +## 📁 Repository + +Check out the full source code here: +🔗 [GitHub Repo](https://github.com/icabduqaadir12/javascript30-demos) +