Skip to content

Here I try to code for 100 days by creating projects in javascript

Notifications You must be signed in to change notification settings

jatin33/100DaysOfCode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

100DaysOfCode

Here I try to code for 100 days by creating projects in javascript

Day 1

Day 2

Learning published on blog: https://technovice796222167.wordpress.com/2018/11/28/difference-between-queryselectorall-and-getelementsbyclassname-methods-used-for-javascript-dom-scripting/

Day 3

Array Cardio

Methods covered

Day 4

Flex panel hosted on Amazon S3

Things learnt:

Day 5

Things Learnt:

  • RegExp()
  • match(),replace() methods of string class
  • join() method of Array class

Day 6

Array Cardio 2

Things Learnt:

  • some(),every() returns boolean value after invoking testing function on each element until it returns true else returns false
  • find(),findIndex() returns element , index of element respectively after passing some testing function
  • splice() method removes element/s from the array based on the index passed to it and number of elements to delete.

Note splice() method mutates the original array

Day 7

Line properties learnt https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#Line_styles

Mouse events learnt

  • onmouseover/onmouseout - When the mouse passes over an element
  • onmousedown/onmouseup - When pressing/releasing a mouse button
  • onmousedown - When mouse is clicked: Alert which element
  • onmousedown - When mouse is clicked: Alert which button
  • onmousemove/onmouseout - When moving the mouse pointer over/out of an image
  • onmouseover/onmouseout - When moving the mouse over/out of an image useover an image map

Questions that came to my mind:

Difference between screenX|Y, clientX|Y and pageX|Y. https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

Difference between var, const and let https://medium.freecodecamp.org/javascripts-var-let-and-const-variables-explained-with-a-story-2038e3c6b2f9

What is HSL function in CSS : https://www.w3schools.com/colors/colors_hsl.asp

beginPath() method of Canvas element : https://www.w3schools.com/tags/canvas_beginpath.asp

Day 8

Devtools Domination

This day was all about getting familiar with dev tools like profiler,debugger and learning about console object of window.

Resources collected while learning dev tools

https://stackoverflow.com/questions/21876461/difference-between-console-log-and-console-debug/53355565#53355565

https://stackoverflow.com/questions/11954152/whats-the-difference-between-console-dir-and-console-log

https://www.geeksforgeeks.org/ways-reduce-loading-time-website-set-1/

Javascript Profiler: https://stackoverflow.com/questions/49502744/how-to-see-results-of-console-profile

https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution

How to improve website performance using Audits done by LightHouse https://developers.google.com/web/tools/chrome-devtools/speed/get-started

Day 9

Things learnt:

Day 10

Understanding github

Day 11

Day 12

Key Detection

We're given an HTML document with...basically nothing. There's a script tag in the document header that loads a JavaScript file from Cornify.com which will inject an image of a unicorn (πŸ¦„πŸ¦„πŸ¦„!) into the DOM and a p element on the bottom of the page if we call cornify_add(). The goal of this challenge is to generate new unicorns every time the user succesfully enters a letter of 'secret code' that we will decide on.

Day 13

Day 14

JavaScript References VS Copying

Mostly a reading exercise to understand how pass-by-value and pass-by-reference works in javascript

Day 15

Day 16

Day 17

Day 18

Day 19

Webcam fun

Day 20

Speech Detection

  • SpeechRecognition API explored
  • To give audio effects use AudioContext(), audioSource = AudioContext.createMediaElementSource()

Day 21

Follow Along Highlighter

  • Learned about DOMRect(rectangle surrounding an element of the dom)
  • Learned about getBoundingClientRect() method

About

Here I try to code for 100 days by creating projects in javascript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published