Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/guilleangulo/javascript30

30 day VanillaJS coding challenge
https://github.com/guilleangulo/javascript30

vanilla-javascript

Last synced: 14 days ago
JSON representation

30 day VanillaJS coding challenge

Awesome Lists containing this project

README 

        
# 🍦 Vanilla JavaScript 30

30 Day Vanilla JS Coding Challenge by [@wesbos](https://JavaScript30.com)



# Challenges:



## 01 - DrumKit



When the user presses a key that corresponds with one of our divs, an audio clip associated with the keypress is played, a class is added to the specific element that matches with the keypress, and finally that class is removed in order to reset the element to it's original state.



## 02 - JS Clock



A functioning clock, that moves its hands in an interval according to the actual hour. The hands movements are rotated calculating the degrees in the circle. The CSS properties "transform" and "transition" are changed using Javascript.



## 03 - CSS Variables



Update CSS variables (--var) with Javascript, such as the blur filter of an image, padding and background color.



## 04 - Array Cardio



Exercises with array methods (filter, map, sort, reduce).



## 05 - Flex Panel Gallery



Some tips about flexbox gallery.



## 06 - Type Ahead



Take cities information from an external URL, pushing the data inside a JSON Array and filtering the data while typing in an input field with Javascript, suggesting results.(Working with Fetch API, promises, spread operator, regexp, ...).



## 07 - Array Cardio 2



More exercises with array methods (some, every, find, findIndex).



## 08 - HTML5 Canvas



Drawing with the mouse (mousedown, mouseup, mousemove, mouseout events) in a canvas.



## 09 - Console Tricks



Test with Browser Console Developing Tools (info, log, warn, count, table, ...).



## 10 - Hold Shift and Check Checkboxes



Checking checkboxes holding shift key for multiple selections.



## 11 - HTML5 Videoplayer



Custom Video Player.



## 12 - Key Secuence Detection



Insert a hidden key secuence as an easter egg inside one page.



## 13 - Slide Scroll



While scroll down, some images slide in effects. Using of "debounce" function and window properties.



## 14 - Reference vs Copy



Understanding the diferences between array/objetc reference and array/object copy in Javascript (ES6 Spread, Object.assign())



## 15 - LocalStorage



The goals are: add new items to the list, display them dynamically in the Tapas list, persist the items on page reload using localStorage and toggle checkboxes images on click event.



## 16 - Mouse Move Shadow



While moving the mouse around the screen, the shadow of a text moves accordingly. Using "ES6 Object destructuring" and textShadow property on CSS.



## 17 - Sort Without Articles



Given an HTML with and an unordered array with strings in the script, sort the values in the array excluding prefixes like "The", "A" o "An" and place it into the unordered list.



## 18 - String Time Reduce



Making use of reduce() method, sum up time values of different elements. (with browser-sync dependency).



## 19 - Webcam Fun



After asking permission for the use user's webcam, display the feed from that webcam on the page and allow the user to take pictures and save them and allow 

the user to modify image colors using the RGB sliders. (with browser-sync dependency)



## 20 - Speech Detection



Using SpeechRecognition interface of the Web Speech API, show the words captured and replace some specific words with an emoji (with browser-sync dependency).



## 21 - Geolocation



Using navigator´s geolocation, show the speed and orientation. (More tests with Chrome Sensors Devtools).



## 22 - Follow Allow Links



While the mouse enters some "a" elements, one "span" element highlights these words following the mouse. Using the Element.getBoundingClientRect() method to know the position and size of an element in relation with the window.



## 23 - Speech Synthesis



Using the SpeechSynthesis interface of the Web Speech API, and using the list of voices availables, write a text to be speaked. 



## 24 - Sticky Nav



When the user makes scroll on the page, the menu sticks on the top and reveals a new element. Some study about "padding-top".



## 25 - Capture



Some study about event capture, propagation and bubbling. Event.stopPropagation() and EventTarget.addEventListener() extra options



## 26 - Stripe Follow Along Nav



A set of navigation links that, when the mouse enters or exits them, a submenu is dropped below. With the same effect of follow along.



## 27 - Click and Drag



Click and drag scroll, using variables to know if the mouse is clicked and how much the slider has to scroll.



## 28 - Video Speed Controller



Control the speed of one video as the mouse moves on the control div element. Using poperties like offsetTop and offsetHeight of the element.



## 29 - Countdown timer



Custom timer, where you can set predeterminated timer values or insert new input value. Using Interval methods and timestamp.



## 30 - Whack A Mole



A Whack A Mole game with random values in order to have a different games each time. With score and random time (between min and max values).