30 Day Vanilla JS Challenge

Things I Learnt

Day 1 : JavaScript Drumkit

Binding event to the keys when they are pressed

// window is a global variable that represents the window in which the code is running
window.addEventListener(‘keydown’, function(e){});

Using document.querySelector() and document.querySelectorAll()

/* The Document method querySelector() returns the first element that matches the specified selector.
otherwise, null is returned */
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
// keyCode is a property of event 'e' associated with each key
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
// querySelectorAll() returns all the elements that match the specified selector
const keys = document.querySelectorAll('.key');

Using audio functions and how to restart the audio if a key is pressed continuously

// Used to restart the audio from beginning
audio.currentTime = 0;
// used to play an audio
audio.play();

Adding class to an item

// added a class to key in order to give it an effect of playing
key.classList.add('playing');

Applying a property to an array

// forEach loop adds the event listener to all the keys
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

Day 2 : JS and CSS Clock

Running a function at every interval

setInterval(function_name, interval);
// Used as below to run setDate function every 1 second or 1000 milliseconds
setInterval(setDate, 1000);

Using Date methods to run our clock

// javascript comes with easy to use Date methods
const now = new Date();
now.getSeconds(); // Gives the current seconds
now.getMinutes(); // Gives the current minutes
now.getHour(); // Gives the current hour in 24-hour format

Removing the glitch at 0^th second by making a class zero

.zero {
    transition: all 0s;
}

Adding the class to secondHand when it reaches 0 and removing it afterwards

if(seconds == 0) secondHand.classList.add('zero');
else secondHand.classList.remove('zero');

Day 3 : CSS Variables

How to use label in HTML and bind it to an element

<label for="element"> Label: </label>

How to use input type range that has a slider with a default, min and max values

<input type=“range” min="10" max="100" name="blur" value="20">

How to define custom data attributes

<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

How to use CSS variables

/* CSS Variables are declared at the root level*/
:root {
    --spacing: 10px;
}
/* To use the variable on a property */
img {    
    property-name: var(--spacing);
}

Using querySelectorAll

// querySelectorAll returns a NodeList

How dataset works

// returns all data prefixed properties and their values
this.dataset
// Used in the code as
const suffix = this.dataset.sizing || '';

Learnt about document.documentElement which returns root of the element of the document e.g. HTML element for HTML Documents

Also learnt a few events like mousemove and change

Day 4 : Array Cardio

Learnt a few basic javascript functions

Filter

// Filters the array according to our need
Array.prototype.filter();

Map

// map() is used to modify the array
Array.prototype.map();

Reduce

// Used as an accumulator, just like how we would used an variable in a  for loop
// to calculate sum
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array.reduce(reducer));

Convert Node list to array

// querySelectorAll returns a Node List, we can convet it into an array
Array.from(nodelist);

Use the textContent property of an attribute

const de= links.map(link=> link.textContent);

Day 5 : Flexbox Gallery

Learnt CSS concepts

Learnt how to use cubic-bezier curves

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)

Learnt the includes function

e.propertyName.includes('flex');

Day 6 : Type Ahead

Learnt how to fetch json data from a url

// fetch returns a promise and then we convert it into json data
fetch(url).then(blob => blob.json())

How to use spread data and push it into an array

cities.push(...data);

How to use regular expressions to match inputs

const regex = new RegExp('wordToMatch', 'gi');
// to match the input
element.match(regex);

Learnt change and keyup event listeners

Day 7 : Array Cardio 2

Learnt a few more useful array functions

some

// Return true if atleast one condition is fulfilled
Array.prototype.some();

every

// Returns true if the condition is fulfilled by every array element
Array.prototype.every();

find & findIndex

// Used to find an element with the given property
const comment = comments.find(comment => comment.id === 823423);
// Used to find an element's given index 
const index = comments.findIndex(comment => comment.id === 823423);

Learnt how to delete an array

// Using splice
comments.splice(index, 1);

// Making a new array
const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
    ];

shivamsinghchahar / 30-Javascript-Projects