#30DaysOfCode based on Javascript30

Day 1: JS Drum kit

This project uses eventHandlers and css attributes => 'keydown' , 'keyup'

• Each key gives outputs a sound given for that key according to its ASCII value
• Uses HTML's data- attribute to play the assigned sound for each keypress.

Styled with CSS ♥️ customize it if you wish!

Day 2: JS and CSS clock

The 2nd project of this series!! a clock!

This project uses JS's built in methods like getMinutes() and getSeconds() to depict the correct time

• Has three needles - hour, minutes and seconds
• Used cubic-bezier() to give that ticking effect just like in the original project

Styled like a wall clock 🕑 at home

Day 3: CSS varibles

Playing with a few artistic CSS variables

Even here we use HTML's data- attribute, to assign units in px

• Uses CSS's pseudo class :root to assign custom values from each input i.e range-sliders & color picker
• Uses CSS's EventListeners like change & mousemove to update new values
  
  

Day 4: Array Methods-1

Brushing up some basic yet intriguing array methods

Here we're going to understand the usage of the following methods:

• sort() sorts elements in the ascending or descending order
• split() spilts an array/object based on the position assigned, used mainly in destructing objects
• filter() creates a new array filled with elements that pass a test provided by a function
• reduce() executes a reducer function for each value in an array and returns a single value which is the function's accumulated result
• map() creates a new array from the results of a previously existing function
  
  

Day 5: Flexbox Gallery

its flexbox time!! one of most important topics in css, especially if you wanna play with images/div elements

Here we use flexbox to align p elements to enlarge and shrink on click and also widen it

These are the main functions used to work with flexbox in this project

• display: flex activates flexbox
• justify-content aligns the div horizontally
• align-items align the div vertically
• transform fuction used to create sliding animations of the top and bottom p element
• toggle() This JS method is used to add and remove the class open which enlarges the font size of the middle p element
• includes() This is another JS methods that returns a boolean value if a string contains a specific character/string

Flexbox allows seamless wrapping and resizing with the changing width of the page, it can be used along with media queries to build a responsive site for devices of different width

Day 6: AJAX requests and responses

In this project we finally learn about ajax(asynchronous javascript and xml requests) forget the xml part tho 😆

JS in general handles execution synchronously via callstack ie executing funtions one by one behind the scenes, each function once called is added to execution context of the call stack, but here we're understanding how asynchronous execution of functions work. For now we use the fetch() method to fetch data from say a server/api.

In this project we are trying to implement a search bar capable of sorting results(cities/states) based on our inputs as it searches from the json for the key value pairs based on our search query

⚠ Functions used in this project:

• fetch(): used to fetch data from the server/api
• filter(): used to filter results based on the key value pairs
• push(): used to push results to the declared array
• json(): returns a promise which resolves with the result of parsing the body text as JSON.
• replace(): searches for the required string/regular expression/key to be replaced, once found it replaces it with a new value and return a new string with the replaced value
• match(): searches a string for a match against a regular expression, then returns an array consisting of the matched values, returns null if no match is found

Uses both EventListeners change and keyup to display matches on key press

Day 7: Array Methods-2

Some more array methods to gouge your eyes and mind on

DNMA - does not mutate the array
MA - mutates the array

Here are the rest of the methods:

• some() checks if atleast one of the array elements pass a test and returns a boolean as a result //DNMA
• every() checks if all the array elements pass a test and returns a boolean as a result //DNMA
• find() returns the value of the first element that passes a test, and returns undefined if no such element is found, //DNMA
• findIndex() returns the index (position) of the first element that passes a test, returns -1 if no match is found. //DNMA
• splice() method adds and/or removes array elements. //MA
  
  

Day 8: HTML Canvas

Lets dive into html's creative and artistic side 🎨🖌

Here we use HTML's canvas tag to draw graphics, on the fly via scripting (usually JavaScript).

Here the hue of the stroke gradually increases along with its width untill 100 and then resets back to 1, giving a colourful artistic stroke Functions used in this project:

• getContext() method is used to enable drawing on the canvas, 2d enables the creation of a CanvasRenderingContext2D object representing a two-dimensional rendering context
• strokeStyle property sets or returns the color, gradient, or pattern used for strokes
• lineJoin property sets or returns the type of corner created, when two lines meet
• lineCap property sets or returns the style of the end caps for a line
• lineWidth property sets or returns the current line width, in pixels
• beginPath() method begins a path, or resets the current path
• moveTo() method moves a window's left and top edge to the specified coordinates
• lineTo() method adds a new point and creates a line TO that point FROM the last specified point in the canvas
• stroke() method draws the lines and border around the text and shapes, the color object can be set in terms of RGB or HSB depending on the color mode

This project uses all of the mouse EventListeners ie mousemove, mousedown, mouseup, mouseout

Day 9: Developer Tools

Insights into handy dev tools and beyond console.log 👨‍💻

Attribute Modification this dev tool helps in understanding/pinpointing which attribute is modified by javascript

%c => console.log enables application of css properties in console for debuggable trial
Example: console.log('%c I am some great text', 'font-size:50px');

I am some great text

%s => console.log enables passing characters/strings much like in C language 😃
Example: console.log('I am sleepy %s typing all of this code...zZzZZ', '😪');

I am sleepy 😪 typing all of this code...zZzZZ

console functions ⚠:

• console.warn() used to give warnings in the console

  

• console.error() used to pass errors in the console

  

• console.info() used to pass statements as an insight/information in the console

  

• console.assert() method tests if a given expression is true or not. If the expression evaluates to 0/false, an assertion failure is being caused, and the program is terminated.

  

• console.clear() used to clear the console

• console.log() can be used give output in the console

  

• console.dir() displays an interactive list of the properties of the specified javaScript object //element p is clicked on

  

• console.groupCollapsed() method creates a new inline collapsed group in the Web Console

  

• console.groupEnd() method indicates the end of a message group

• console.count() method keeps the count of words in a message

  

• console.time() method starts a timer that you can use to track how long an operation takes

• console.timeEnd() stops a timer that was previously started by calling console.time()

  

• console.table() method displays tabular data as a table, this function takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns

  

That's it for today!!!

Day 10: JS Checkbox

Today were gonna build the classic checkbox but with a catch!

We're gonna create a checkbox in which we check one checkbox as the starting point and another as the endpoint, once we click the endpoint/last checkbox while holding the shift key, we check all the boxes right from the start to the endpoint much like select all function in file managers/Gmail

We've used methods like forEach() and e along with an eventListener in this project to make IT work
Don't worry if you did'nt get it, i did'nt get the first time either and there are more ways to do this too!! 👨‍💻

Day 11: Custom HTML5 Video Player

We're gonna create a custom video player in html5!!

⚠ We've used a seperate video file here but you can add your own file or from YouTube ▶

This is a basic video player whose properties are tweaked slightly, we use -webkit- functions to work cross platform, although every browser gives a slightly different video player

• -webkit-slider-runnable-track this default function is used to modify the track/progress line of a video, we can change its width, height and also its color much like how we've done in ours

• -webkit-slider-thumb This is the thumb or the circle on the runnable track, using which we can drag the progress of our video, to that specific timestamp
  
  

We also use input as range sliders to change the volume and playback rate of the video That's it for today! add your own video file/yt link to it and tweak css your own way!!

Day 12: Key Sequence Detection

Here we'll take a short break and work on some simple array manipulation but we'll use a secret keyword to give a secret message once the array contains all the characters of the keyword!!

PS: The secret keyword used in this project is Treasure

we use the splice() method to constrict the array length to the length of the secret keyword, just in order to give the secret message on passing the characters of the secret keyword in order......which we do

we also use other methods like:

• join() helps to stich individual characters in an array into a single string
• includes() gives a boolean value indicating the presence or absence of the word/character passed to validate its presence in a string
• push() helps to push/add characters into an array from the right end of the array

Lastly we've used the keyup EventListener with the event e parameter to pass as a function to return the key pressed on the window, also there's nothing in the window silly 😆, the window is just the body in this case if not declared!! Cheers ☕☕

Day 13: Image on scroll

Here we'll do some on scroll image movement with JS

We use eventListeners to track the scroll on the window to trigger the functions necessary to horizontally make the images appear on the empty padding We also use CSS's active pseudo class to translate it in the X direction and classList to add and remove classes from CSS via javascript

Methods used:

• forEach() calls a function for each element in the array

Window properties used:

• scrollY property returns the no of pixels for the document that is scrolled vertically
• innerHeight property returns the height of a window's content area
• offsetTop returns the top position (in pixels) relative to the top of the offsetParent element

Day 14: Referencing vs Copying

Here we'll understand how we can create new arrays and objects by reference

By Referencing we can directly manipulate the original array/object by index/object-key

For Example let's take the array used in the stater file:

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

Now lets say we want to manipulate this array => we manipulate the array using its index!

players[2] = 'Jake';

this on console.log(players) gives ['Wes', 'Sarah', 'Jake', 'Poppy'];

but uh oh we've manipulated the original array ┌(。Д。)┐! instead we can reference it to another new variable and copy its array elements to the new variable, thereby not changing the original array q(≧▽≦q)

ie let's create a new variable first:

const newPlayers = players; // new variable created which points to the original array, but doing this copies the array elements to the new variable

and on console.log(newPlayers) we get ['Wes', 'Sarah', 'Jake', 'Poppy'];
Since previously manipulated the original array therefore the new array also carries the manipulated array

⚠ This is pretty useful especially if we want to use the array multiple times without messing with the original array, this is somewhat like an undo button equivalent to ensure you dont accidentally mess up along the lines while writing long lines of code.

Day 15: Local Storage and Event Delegation

Here we are going to create a menu/todo list to representing saving of new information/text submitted by the user to local storage

What does it do? lemme break it down for you stepwise before jumping in js because there's too many things going behind the scenes🤯

• You type in any food(just basic text) in the form in the box => click the "+add item" button => it creates a list of it

• It stores it in your browser's local storage to reflect it in the browser window even after refreshing it

Stuff that makes it work

Functions and other stuff used here:

• preventDefault() prevents the default refreshing state of the browser window ie it let's the values stay which is then populated into local storage
• addItem() function adds the food that you type into the local storage using JSON.stringify() whenever the event listener hears a 'click' event
• setItem() method sets the value of the specified Storage Object item ie in a localStorage
• populateList() function uses an empty array names plates to stored the entered values, on clicking the +add item button this function is called to return the food string value as content to be displayed using the innerHTML method

This completes the entering, storing and displaying of entered value

Creating a creative checkbox Instead of using the standard checkbox which enables a tick, we've used emojis to do it and on checking it it uses a taco🌮 emoji

• toggleDone() Using this function we manipulate the value of done which is a Boolean from false to true to change the emoji
  
  

Day 16: CSS Hover Effects

Let's do some crazy stuff with text by manipulating css text-shadow properties using JS

Here we've used walk as a standard width range, meaning it is used to map the values obtained from the hovered area to a max of 100 ie from a low of -50 to a high of 50

Using the following offset functions we can manipulate the textShadow of our h1 text to output multiple trippy shadows 😵

• offsetWidth property returns the viewable width of an element in pixels, including padding, border and scrollbar, but not the margin
• offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin
• offsetLeft property returns the left position (in pixels) relative to the left side the offsetParent element
• offsetTop property returns the top position (in pixels) relative to the top of the offsetParent element

mousemove eventListener is used to output values on mouse hover on the div and h1

Day 17: Sorting without articles

Here we are trying to sort an array of bandnames without considering the articles a , an or the

Here's how we've done it here:

1. Create a function to replace the article We do it by using the following method and regular expression:

• replace() method searches a string for a value or a regular expression, and returns a new string with the value(s) replaced
• trim() method is used to remove any unwanted spaces in the string Regular Expression stuff(enclosed within the replace() method)
• / indicates the beginning of a regular expression
• ^ is an assertion used in regular expressions, it matches the beginning of the input
• /i is a flag used to search by ignoring case-sensitiveness This completes removing the articles, now onto sorting them =D

2. Sort the bandnames alphabetically As it says sort, we use the array method sort which sorts the entire array of bandnames We pass in an arrow => function to compare the first one to the second and sort them accordingly, where 1 sorts them in ascending order while -1 does the reverse

• map() method creates a map of the sorted bandnames and pushes them onto the window as string keys
• join() combines them as a whole set of strings, while removing any commas in-between them Finally, we display them on the window using the innerHTML attribute
  
  

Day 18: Array Reduce

Here we're going to understand reduce with another example, ie by using video time lengths

First let's know what it does

• reduce() method executes a reducer function for array element, and return a single value ie accumulated result, it does not change the original array

Now that we know what it does let's jump right in

We've firstly added all the time-list elements to a new array timenodes using the ... spread operator

Next we're trying to convert all the time lengths into seconds and condense them into a single value to hold the total time in seconds using the reduce() method

• map() method creates a map of the list as key-value pairs
• node function returns the time given in the list
• timeCode function uses destructing and splits the time into minutes and seconds by using the split method Now we multiply the mins value times 60 to get the value in seconds, then we add it to the secs,then reduce condenses all the values gained from mapping into one single value to get the total no of seconds

Now we convert this huge value to hours, minutes and the rest to seconds 🕓

1. We divide the seconds by 3600 to get the value in hours
2. We use mod of the secondsLeft value to get the rest of the seconds
3. Next we further divide the rest of the seconds by 60 to get the value in minutes
4. Finally we mod the rest of the seconds by 60 to get the rest of last value in seconds

Now that's some good reduce() brushup, ain't it? ☜(ﾟヮﾟ ☜)

Day 19: Webcam fun with getUserMedia()

Today we are going to work with live audio and video using JS built-in functions

⚠ First let's get familiar with the important stuff that helps us bring out our video feed into our browser📷, the getVideo() function which we've used does exactly this

• navigator or window.navigator object contains information about the visitor's browser
• mediaDevices is a read-only property returns a MediaDevices object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing
• then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise
• play() method plays the video ie the feed coming from the webcam This gives us a small window of our live video feed

Now onto our next task ie making the video appear big and allow it to use different filters/effects

This is done using the paintToCanvas() function which uses the following JS methods

• drawImage() method draws an image, canvas, or video onto the canvas, it can also draw parts of an image, and/or increase/reduce the image size
• getImageData() returns an ImageData object representing the pixel data for a specified portion of the canvas
• putImageData() method that copies the pixel data for a specified rectangle on a canvas

The takePhoto() function is used to play the snapping audio for everytime you want to take a snap of yourself

The rest of the functions create the rgb effect on your video

• redEffect() function manipulates the pixels to create a red filter to the image
• rgbSplit() function extracts the pixels out of the video into individual rgb color schemes to use it for creating custom filters by yourself by messing with the egb sliders
• greenScreen() function creates a another filter effect

Playing with filters on JS am i right🤯 That's it with this one, OOOF that was a big one indeed, even if you don't get it now,take your own time and make sure to take note of what each function does in the first place!, remember that this is a functional programming language(～￣ ▽ ￣)～

Day 20: Speech Recognition

In this exercise we're going to dabble with speech recognition via JS using Speech recognition APIs

• SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service(as given in MDNs speech recognition reference

• new SpeechRecognition() Creates a new SpeechRecognition object

• start() Starts the recognition interface

• interimResults property of the SpeechRecognition interface controls whether interim results should be returned (true) or not (false)

• lang property of the SpeechRecognition interface returns and sets the language of the current SpeechRecognition. If not specified, this defaults to the HTML lang attribute value, or the user agent's language setting if that isn't set either We then add event listeners to the SpeechRecognition interface to then store it into an array of words

• transcript read-only property of the SpeechRecognitionResult interface returns a string containing the transcript of the speech recognition session

• map() maps the results of the speech recognition

• join join the results of the speech recognition into a single string/complete sentence

If the speech recognition API successfully recognizes the speech, it transcribes the result and is appended into a p element onto the browser window

There you go!!, now you can create your own voice recognition app, integrate this code into a weather app/ add it as your own little addition to your search related projects!

Day 21: Geolocation based Speedometer and Compass

In this project we're gonna look at the compass and speedometer data coming off from our phone into out browser

⚠ Unfortunately it only works well with iOS devices since safari browser has a good integration with iOS devices and also pulling data out from phone/emulator to display into our live server window ie speed and compass data

Functions used in this project:

• navigator object contains information about the visitor's browser
• geolocation property returns a Geolocation object that can be used to locate the user's position, this property is read-only and is only available in secure contexts - https and only available on user's approval
• watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes(as give in MDNs reference) It takes a GeolocationPosition object as an input parameter, and can pass additional/optional parameters to the handler like:
  • success a callback function that takes a GeolocationPosition object as an input parameter
  • error parameter gives an optional callback function that takes a GeolocationPositionError object as an input parameter
  • options parameter gives an optional object that provides configuration options for the location watch GeolocationCoordinates interface represents the position and altitude of the device on Earth, as well as the accuracy with which these properties are calculated, the following properties of this interface are used:
• coords ie GeolocationCoordinates for short
• speed read-only property is a double representing the velocity of the device in meters per second. This value is null if the implementation is not able to measure it.
• heading read-only property is a double representing the direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading due north the device is. Zero represents true North

Using the above API we gather the compass data from our phone/emulator which we then use it via template literals in our JS to manipulate the svg used with CSS rotate function to depict it as a real-time compass

Day 22: Follow along links

Here we're gonna try and get links to be highlighted by on hover with their highlights being the exact size of them

⚠ How it works:
We're gonna add a create a span element on every link we hover to create a hover/active link effect but of exact width while creating a follow through effect instead of just fading away when we move away from the link

Functions used in this project:

• getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport(as given in MDNs reference)
• linkCoords variable stores the size of the hovered link, you can view the details of the hovered element in the console to understand better
• coords is an object that stores the width and height along with the top and left values to determine the position of the links to highlight
• scrollX property of the Window interface returns the number of pixels that the document is currently scrolled horizontally, which is used in our coords.top object
• scrollY The read-only scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically, which is used in our coords.left object

Finally we add an eventListener for each a element that is given a mouseenter event, which inturn runs the highlightLink() to give us the width and height values of it

Using these values we can manipulate the width and height values of the highlight and then use CSSs transform: translate() property to follow whenever there is a click/hover on these links

Day 23: Speech-Synthesis

We have yet another speech related project and this one is going to be as interesting as earlier!

What's it about? We're are creating a text-to-speech recognition project using javascript, which readily reads whatever text we type and converse it back to us in different voice-overs(depending on our OS)

Let's understand how it works shall we?

⚠ Stuff used in this project:

SpeechSynthesisUtterance is a WebSpeechAPI that represents a speech request/speech service, it delivers various speech parameters like language, pitch and volume

For more info

• SpeechSynthesisUtterance from MDN docs
• Getting Started with Speech Synthesis by Matt West
  
  

Let's get into the flow of doing it !!🚀

1. Creating a box to input text

msg.text as in SpeechSynthesisUtterance.text receives the text that will be synthesized when something is spoken

2. Listing the available voices

populateVoices() function is created to list out the different voices available to synthesize the text to a desired voice

• getVoices() method returns a list of SpeechSynthesisVoice objects representing all the available voices on the current device
• filter() method filters the voices to English (en-US/en)
• includes() method checks if the list contains an en naming at the end of every language to categorize it as English
• map() method maps the voices as keys and values and returns them as options to select in the dropdown list
• join method joins the voices together as a whole list of voices

This is done to get the voices available in your system to be used for the synthesis, which is then added to your innerHTML dropdown list so you can choose a voice of your choice from the available voices

3. Setting the Selected Voice

• setVoice() function sets the voice of the speech output
• toggle() function resets the page with all its contents set to the default values
• setOption() function sets the selected option to override the default values
  

The rest are the eventListeners that are linked to the buttons and sliders that trigger the above mentioned functions to make it happen!! 🦜

Day 24: Sticky Navigation

Today we'll alternate back to some CSS with sticky navigation

Here we're going to make the navbar to fix its position to fixed when we almost hit the top of the navbar while scrolling down

⚠ Functions used in this project:

• offsetTop is a read-only property that returns the distance of the outermost border of the element relative to the inner border of the top of the parent element
• scrollY property returns the number of pixels that the document is currently scrolled vertically
• offsetHeight property returns the height of an element, including vertical padding and borders, as an integer

On scrolling up top the fixNav() function is triggered by the eventListener which sets the navbar to fixed once the top scrolled pixel value is greater than or equal to the top distance of the nav by adding the CSS class fixed-nav along with logo with a transition of 0.5s, which enlarges it's width to a max of 500px.

Day 25: Event Capture, Propagation and Bubbling

Here we're going to understand some intriguing concepts in JS

Event Propagation :

Event propagation determines the no of events that are fired on the browser window, this includes all the events like Onclick events and link a events

⚠ Some important things to also understand:

• capture is a boolean value that tells the registered listener that events of this type should be dispatched
• once is a boolean value indicating that the listener should be invoked at most once after being added

You can know more about these and many more event values down:

• EventTargetaddEventListener
• A simplified explanation of event propagation in JavaScript
• Capture passive and once

Phases of event propagation

Event Capture :

In Event Capture, we propagate/move down the element tree, ie from the parent element to the child/target element This also gives us the entire tree/body of the element

Bubbling :

In Bubbling, we propagate/move up the element tree, ie from the child/target element to the parent element This is the reason why we get the entire tree/body of the element

This completes our understanding of how events do their thing, Whew!

Day 26: Follow up menu like in Stripe

Today we're going to create an on hover menu which uses the same menu for every link but resizes and changes its contents accordingly

LETS GOOOO!!

⚠ Stuff that makes it work:

handleEnter() function toggles the CSS class .trigger-enter and .trigger-enter-active to display the menu on link hover

We also use the getBoundingClientRect() method to get the size and position of the element with respect to the viewport

We create two variables namely dropdownCoords and navCoords to hold size and position values of the navigation and the dropdown

Next we create an object having multiple methods holding the values acquired by the above two variables

• setProperty() method sets a new value for a property on a CSS style declaration object handleLeave() function removes the CSS classes set by the handleEnter() function

Lastly eventListeners are used to listen mouse events and trigger the handleLeave() and handleEnter() functions

This creates a cool buttery smooth transitioning on hover menu, just satisfying to watch and interact with less clicks o(￣︶￣)o

Day 27: Click and Drag

In this one we're going to create a scrollable joint-cards design which we can drag by our cursor

Here the items CSS class contains all the card items We also use all the mouse events like mouseup, mousedown, mousemove and mouseleave isDone is a flag value that is used in the mouse events

Now let's understand how it works 🤔

Let's see what each mouse event does:

• mousemove event is fired at an element when the mouse is moved while the cursor is inside it
• mouseup event is fired at an element when a click is released while the pointer is located inside it
• mousedown event is fired at an element when a click occurs while the pointer is inside the element
• mouseleave event is fired at an element when we point/move out of it

Now that we're familiar with them let's move to how it works...

1. We grab the card layout to scroll

When we do this the mousedown eventListener listens to the event and adds the class active to the slider variable which holds all the items

2. Then we calculate the x/startX value(to scroll):

• pageX property returns the X(horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document
• offsetLeft property returns the number of pixels that the upper left corner of the current element is offset to the left

After calculating the startX value we append it to the slider variable and store the resultant in the scrollLeft variable This value is used to calculate the dragging rate or walk distance to enable the scrolling effect, you can increase/decrease the card dragging rate by changing the multiplier(currently assigned is 2) whenever a mousemove event occurs

PS: The scrolling effect only occurs when either mousedown or mousemove event is fired

That's it for today! 🍷🍷

Day 28: Custom Video Speed Controller UI

Today, we're gonna customize the native HTML video player's UI and speed rate components

Here we've created a custom bar element for controlling the video playbackRate

⚠ Stuff used to make it work:

• pageY is a MouseEvent property that returns the Y (vertical) coordinate in pixels of the event relative to the whole document
• offSetTop property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node(as given by MDN)
• offSetHeight property returns the height of an element, including vertical padding and borders, as an integer
• textContent property represents the text content of the node and its descendants
• playBackRate property sets the rate at which the media is being played. It implements user controls for fast forward, slow motion, and much more.

The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed(currently set to 0.87/1x)

1. We first calculate the y variable for the bar and then divide it by the offSetHeight property to find the percentage for changing the playback rate

2. Then we calculate the playback rate by taking the difference of the max and min values added to the min value(Math needed to calculate the playback rate)

3. Lastly, we link it with our custom bar to change/vary the playback rate on mouse hover over the bar(triggered by eventListeners which calls the handleMove function)

There you have it!!

Day 29: Countdown timer

In this project we're gonna create a countdown timer, much like in our phones that might come in handy!

What all does it have??

• Basic countdown timer functionality
• Has a few presets for a quick countdown(20s, work, quick, snack and lunch break)
• Has a text input bar to give a custom time

Let's Begin Shall We 🚀🚀

Creating the timer ⏱

We create buttons with eventListeners that listen to a 'click' on them after which => we call the startTimer() function which takes the parameter seconds to which we pass our desired input value as an argument, using which it calculates the seconds by multiplying our minutes value times 60 to get the seconds value.
We only need the minutes value to make it work....right?
Well, Technically yes BUT we can add a little more touch to it to give us that alarm look like in our phone alarm clock 😪💤, which is why we're gonna use Date.now() method to give us the total no of seconds which will elapse on adding our minutes value, using which we can display the time left untill calculated time
this.reset() will reset/clear the form after submit

Next we'll look into more functions which are used along with the startTimer() function:

• countdown runs an arrow function after 1000 milliseconds or 1s
  It calculates the seconds left to display in the message under the countdown timer giving us the secondsLeft value, it then calls the displayTimeLeft function

• displayTimeLeft functions calculates the minutes and remainderSeconds out of the large value This is then displayed in the message and in the document title

• displayEndTime functions calculates the time to arrive after completing its countdown, along with a message saying untill future time by using the then value calculated earlier

• Date() objects contain a number that represents milliseconds since 1 January 1970 UTC(by MDN reference)
  More info on date => Date() .

• getHours() method returns the hour for the specified date, according to local time

• getMinutes() method returns the minutes for the specified date, according to the local time We then use the above data to display the time in 12hr clock format and display it onto the DOM

Now here's a good timer 😆, only 1 more to GOOOOO!!!!🥂

Day 30: Whack a Mole game!!

In this last and final project, we'll take it easy and create this game

The Game: The Rules: The Player

In this game, the player which is you has to whack! the mole given how fast it jumps back into it's hole, increase your score by simply clicking on it whenever any of them appear, cuz you don't wanna whack your screen do you?😆 Keep clicking on them under 10 seconds, and the highest one wins!!
PS: there's no second player in this game, so play it with your friends one at a time taking turns There are 9 moles, 9 holes and 10 seconds to score

What makes it work?

Math.random() method is one of the main methods used here to set the following:

• Random mole peep time by peep() function which manipulates the top CSS values at each random interval
• Random appearance of mole in each hole by randomHole() function

The rest being eventListeners triggered on click to calculate the score by running the bonk() function

That's it!.....finally the loooong journey has finally come to an end
But there be more to your journey than what meets the eye👀