My solutions to #JavaScript30

My solutions to the proposed projects at #30DaysOfJavascript. I decided to separate the project files into: HTML, CSS and JavaScript specifics. Commented files included for learning proposes.

Select challenge

Challenge	Notes
01 - Javascript Drum	Changed the background, some other CSS attributes
02 - CSS+JS Clock	Changed CSS attributes, colors corresponding to a coolors[.]co/app project
03 - CSS-Variables	Implemented another slider input, changing 'margin' attribute
04 - Array Cardio Day 1	A review of important Array methods, like: filter, map, reduce and so on
05 - Flex Panel Gallery	CSS editing, fresh on CSS 'flex' & 'transform'
06 - Type Ahead	modified cities source to Brazilian cities, showing ibge's code instead of population
07 - Array Cardio Day 2	JS review of some other Array methods: some, every, find and findIndex.
08 - Fun with HTML5 'Canvas'	HTML's Canvas and JS to create a live draw page. Plus: HSL color
09 - Dev Tools Domination	JS console tricks: log styled, warning, error, info, assert, clear, dir, group, count, time and table
10 - Hold Shift to Check Checkboxes	Implemented a 'clear selection' button with JS & CSS editing
11 - Custom Video Player	Implemented a 'fullscreen' toggle, as sugested by Wesbos working on Chrome, Safari & Firefox
12 - Key Sequence Detection	None
13 - Slide in on Scroll	Not much changed. Took the oportunity to make it a #BlackLivesMatter theme
14 - JavaScript: Reference VS Copy	None
15 - Local Storage	Extra missing: a cleanAll button, uncheckAll and checkAll buttons
16 - Mouse Move Shadow	style.textShadow only accepts rgb(x,y,z) format of color description
17 - Sort Without Articles	Merged this w/ Hold Shift to Check Checkboxes JS to make it a list of checkboxes
18 - Adding Up Times With Reduce	Map & Reduce; Inserted a button to show on page the result
19 - Webcam Fun	None
20 - Speech Detection	with 'Stop' button implemented
21 - Geolocation	Tested on Android, with external link provided by npm start
22 - Follow Along Link Highlighter	Implemented a higher highlighter with math adjustments
23 - Speech Synthesis	None
24 - Sticky Nav	#black theme
25 - Event Capture	None
26 - Stripe's Follow Along Nav	Footer with similar nav floating following link clicks
27 - Click and Drag	None
28 - Video Speed Controller	Additional buttons to reset to Default speed and double it (2x)
29 - Countdow Timer	Autoplay a video when time is up & stops when another timer is initiated
30 - Whack A Mole	Congratulations when finishing the game

Using

It is usefull to install 'npm' inside the folder that contains all these files to test them simulating a server. So, you will have to create a file named 'package.json' with the following information:

{
  "name": "gum",
  "version": "1.0.0",
  "description": "",
  "main": "scripts.js",
  "scripts": {
    "start": "browser-sync start --directory --server --files \"*.css, *.html, *.js\" --https"
  },
  "author": "YOUR-NAME-HERE",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7"
  },
  "dependencies": {}
}

then, open Terminal on the desired folder and type:

npm install

After the correct installation, if it warns you about vulnerabilities, it's bettter use the auto 'audit' to fix them:

npm audit fix

an finally, start the server when you want:

npm start

Contributing to 'My Solutions to #JavaScript30'

Comments and contributions are welcome here, feel free to get in touch. To contribute to 'My Solutions to #JavaScript30', follow these steps:

1. Fork this repository.
2. Create a branch: git checkout -b <branch_name>.
3. Make your changes and commit them: `git commit -m '<commit_message>'
4. Push to the original branch: git push origin <project_name>/<location>
5. Create the pull request.

Alternatively see the GitHub documentation on creating a pull request.