diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..d2f1308d1a --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,62 @@ + + + + + + + Javascript Drum Kit + + + + +

+ + + + + + + + + +

+ + + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/mystyle.css b/01 - JavaScript Drum Kit/mystyle.css new file mode 100644 index 0000000000..b5c9012876 --- /dev/null +++ b/01 - JavaScript Drum Kit/mystyle.css @@ -0,0 +1,47 @@ +* { + margin: 0; + border: 0; + box-sizing: border-box; + padding: 0; +} + +html { + background: url('https://i.imgur.com/b9r5sEL.jpg') center; +} + +.container { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container button { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgba(0,0,0,0.4); + height: 60px; + width: 80px; + margin-right: 20px; + border-radius: 3px; + border: 2px solid black; + transition: all .07s ease; +} + +.playing { + transform: scale(1.1); + border-color: #ffc600; + box-shadow: 0 0 1rem #ffc600; +} + +.container button h2 { + color: white; +} + +.container button span { + font-size: 10px; + color: #d6bc13; +} + diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..06fb7f4730 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,35 @@ +function playAudio(event) { + event.preventDefault(); + + const button = event.currentTarget; + + button.classList.add('playing'); + new Audio(button.children.audio.src).play(); + setTimeout(function() { + button.classList.remove('playing'); + }, 100); +} + +window.addEventListener('keydown', event => { + event.preventDefault(); + + const keys = { + a: 'clap', + s: 'hhat', + d: 'kick', + f: 'openhat', + g: 'boom', + h: 'ride', + j: 'snare', + k: 'tom', + l: 'tink' + }; + + if(!(event.key in keys)) { + return; + } + + const playButton = document.getElementById(keys[event.key]); + playButton.dispatchEvent(new Event("click")) + // new Audio(playButtonAudioSrc).play(); +}); \ No newline at end of file diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html new file mode 100644 index 0000000000..ca5df0076a --- /dev/null +++ b/02 - JS and CSS Clock/index.html @@ -0,0 +1,20 @@ + + + + + + JS and CSS Clock + + + +

+ + + + \ No newline at end of file diff --git a/02 - JS and CSS Clock/mystyle.css b/02 - JS and CSS Clock/mystyle.css new file mode 100644 index 0000000000..1f25bd9379 --- /dev/null +++ b/02 - JS and CSS Clock/mystyle.css @@ -0,0 +1,49 @@ + +html { + background: url('https://picsum.photos/id/881/1500/1000?blur=10');; + background-size: cover; + font-family: 'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + margin: 0; + font-size: 2rem; + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; +} + +.clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + 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); /* account for the height of the clock hands */ +} + +.hand { + width: 50%; + height: 6px; + background: black; + position: absolute; + top: 50%; + transform-origin: right; + transition: 0.5s ease; +} \ No newline at end of file diff --git a/02 - JS and CSS Clock/script.js b/02 - JS and CSS Clock/script.js new file mode 100644 index 0000000000..6a82a4d7f7 --- /dev/null +++ b/02 - JS and CSS Clock/script.js @@ -0,0 +1,16 @@ +const hourHand = document.querySelector('.hour-hand'); +const minuteHand = document.querySelector('.min-hand'); +const secondHand = document.querySelector('.second-hand'); + +function drawClockHands() { + const time = new Date(Date.now()); + const hours = time.getHours(); + const minutes = time.getMinutes(); + const seconds = time.getSeconds(); + + hourHand.style.transform = `rotate(${90 + 30 * hours}deg)`; + minuteHand.style.transform = `rotate(${90 + minutes * 6}deg)`; + secondHand.style.transform = `rotate(${90 + seconds * 6}deg)`; +} + +window.setInterval(drawClockHands, 1000); \ No newline at end of file diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..16f0f1d9c6 --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,27 @@ + + + + + + + Scoped CSS Variables and JS + + + + + +

Update CSS Variables with JS

+ Spacing: + + Blur: + + Base Color: + +

+ + + \ No newline at end of file diff --git a/03 - CSS Variables/myscript.js b/03 - CSS Variables/myscript.js new file mode 100644 index 0000000000..716a0dc857 --- /dev/null +++ b/03 - CSS Variables/myscript.js @@ -0,0 +1,21 @@ +const root = document.documentElement; + +const spacingSlider = document.getElementsByName('spacing')[0]; +const blurSlider = document.getElementsByName('blur')[0]; +const colorPicker = document.getElementsByName('base-color')[0]; + +spacingSlider.addEventListener('change', e => { + e.preventDefault(); + console.log(e.target.value); + root.style.setProperty('--spacing', e.target.value + 'px'); +}); + +blurSlider.addEventListener('change', e => { + e.preventDefault(); + root.style.setProperty('--blur', e.target.value + 'px'); +}); + +colorPicker.addEventListener('change', e => { + e.preventDefault(); + root.style.setProperty('--base-color', e.target.value); +}) \ No newline at end of file diff --git a/03 - CSS Variables/mystyle.css b/03 - CSS Variables/mystyle.css new file mode 100644 index 0000000000..1ebf407280 --- /dev/null +++ b/03 - CSS Variables/mystyle.css @@ -0,0 +1,52 @@ +:root { + --base-color: yellow; + --blur: 0px; + --spacing: 0px; +} + +* { + padding: 0; + margin: 0; + outline: 0; + box-sizing: border-box; +} + +body { + background-color: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; +} + +h1 { + font-size: 4rem; + margin-top: 1rem; +} + +label { + font-size: 2rem; +} + +.container { + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.controls { + margin-top: 25px; + margin-bottom: 25px; +} + +img { + background-color: var(--base-color); + filter: blur(var(--blur)); + -webkit-filter: blur(var(--blur)); + padding: var(--spacing); +} + +.base-color { + color: var(--base-color); +} \ No newline at end of file diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..90bd09187f --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,12 @@ + + + + + + Array Cardio Day 1 + + + + + + \ No newline at end of file diff --git a/04 - Array Cardio Day 1/script.js b/04 - Array Cardio Day 1/script.js new file mode 100644 index 0000000000..db9c0a2ee9 --- /dev/null +++ b/04 - Array Cardio Day 1/script.js @@ -0,0 +1,101 @@ +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 = ['Lovelace, Ada', 'Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Becj, Gustav', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +console.log(inventors.filter(inventor => inventor.year > 1499 && inventor.year < 1600)); + +// Array.prototype.map() +// 2. Give us an array of the inventors first and last names +console.log(inventors.map(inventor => `${inventor.first} ${inventor.last}`)) + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +console.log(inventors.sort((inventorA, inventorB) => inventorA.year - inventorB.year)); + +// Array.prototype.reduce() +// 4. How many years did all the inventors live all together? +console.log(inventors.reduce((totalAge, currentInventor) => totalAge + (currentInventor.passed - currentInventor.year), 0)); + +// 5. Sort the inventors by years lived +console.log(inventors.sort((inventorA, inventorB) => (inventorA.passed - inventorA.year) - (inventorB.passed - inventorB.year))) + + +// 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 boulevards = [ + "Boulevards of Paris", + "City walls of Paris", + "Thiers wall", + "Wall of Charles V", + "Wall of Philip II Augustus", + "City gates of Paris", + "Haussmann's renovation of Paris", + "Boulevards of the Marshals", + "Boulevard Auguste-Blanqui", + "Boulevard Barbès", + "Boulevard Beaumarchais", + "Boulevard de l'Amiral-Bruix", + "Boulevard Mortier", + "Boulevard Poniatowski", + "Boulevard Soult", + "Boulevard des Capucines", + "Boulevard de la Chapelle", + "Boulevard de Clichy", + "Boulevard du Crime", + "Boulevard du Général-d'Armée-Jean-Simon", + "Boulevard Haussmann", + "Boulevard de l'Hôpital", + "Boulevard des Italiens", + "Boulevard Lefebvre", + "Boulevard de la Madeleine", + "Boulevard de Magenta", + "Boulevard Marguerite-de-Rochechouart", + "Boulevard Montmartre", + "Boulevard du Montparnasse", + "Boulevard Raspail", + "Boulevard Richard-Lenoir", + "Boulevard Saint-Germain", + "Boulevard Saint-Michel", + "Boulevard de Sébastopol", + "Boulevard de Strasbourg", + "Boulevard du Temple", + "Boulevard Voltaire", + "Boulevard de la Zone", +]; + +console.log(boulevards.filter(boulevard => boulevard.includes('de'))); + +// 7. sort Exercise +// Sort the people alphabetically by last name +console.log(people.sort((personA, personB) => + personA.split(',')[0] < personB.split(',') ? -1 : 1 +)); + +// 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']; + +console.log(data.reduce((amountOfThings, thing) => { + if(!amountOfThings[thing]) { + amountOfThings[thing] = 0; + } + + amountOfThings[thing] += 1; + + return amountOfThings; +}, {})); \ No newline at end of file diff --git a/readme.md b/readme.md index e972a4a121..0d21cb2084 100644 --- a/readme.md +++ b/readme.md @@ -1,75 +1,41 @@ -![](https://javascript30.com/images/JS3-social-share.png) - -# JavaScript30 +# 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 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 -* [Meredith Underell's](http://meredithunderell.com/tag/javascript30/) Quick Lessons Learned -* [Rowan Weismiller's](http://rowanweismiller.com/blog/javascript-30/) Recaps + Lessons Learned -* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers -* [Soyaine 写的中文指南](https://github.com/soyaine/JavaScript30)包含了过程记录和难点解释 -* [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 lessons 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 so as 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 to 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 ontop 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. - - -## 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). - -## 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! +# My challenge +This is my attempt at solving the 30 Javascript challenges by Wes Bos. I'll also be trying to provide my own HTML and CSS by copying the layouts visually from his videos before I use his. + +**Starting date: 03/10/2020** + +* [x] 01 - JavaScript Drum Kit (Done 03/10/2020) +* [x] 02 - JS and CSS Clock (Done 04/10/2020) +* [x] 03 - CSS Variables (Done 05/10/2020) +* [ ] 04 - Array Cardio Day 1 +* [ ] 05 - Flex Panel Gallery +* [ ] 06 - Type Ahead +* [ ] 07 - Array Cardio Day 2 +* [ ] 08 - Fun with HTML5 Canvas +* [ ] 09 - Dev Tools Domination +* [ ] 10 - Hold Shift and Check Checkboxes +* [ ] 11 - Custom Video Player +* [ ] 12 - Key Sequence Detection +* [ ] 13 - Slide in on Scroll +* [ ] 14 - JavaScript References VS Copying +* [ ] 15 - LocalStorage +* [ ] 16 - Mouse Move Shadow +* [ ] 17 - Sort Without Articles +* [ ] 18 - Adding Up Times with Reduce +* [ ] 19 - Webcam Fun +* [ ] 20 - Speech Detection +* [ ] 21 - Geolocation +* [ ] 22 - Follow Along Link Highlighter +* [ ] 23 - Speech Synthesis +* [ ] 24 - Sticky Nav +* [ ] 25 - Event Capture, Propagation, Bubbling and Once +* [ ] 26 - Stripe Follow Along Nav +* [ ] 27 - Click and Drag +* [ ] 28 - Video Speed Controller +* [ ] 29 - Countdown Timer +* [ ] 30 - Whack A Mole \ No newline at end of file