JS30 Challenge Day 13 - Images that slide in

Github Link

Almost always debounce scroll events to improve performance.

Debouncing means lessening the frequency of detection of that event

window properties:

scrollY

innerHeight

image properties:

offsetTop

height

In the code, the key concept is that the “middle” variable is stuck to the offset of the window as a whole and the “offsetTop” property is stuck to the image. The middle has been adjusted in a way i.e by subtracting image.height/2 from the total value in such a way that when the middle is greater than offsetTop of the image, the center of the image is below halfway off the screen.

JS30 Challenge Day 12 - KONAMI Code

For a keyup event in JS
the property e.key, as in type of key pressed does not work in Safari

We used join in this program
array.join('');

Reminded me that there is such a property as 'includes'.
It checks if the passed string is contained in the calling object.

JS30 Challenge Day11 - Custom Video Player

Github Link

Few things I learned in making this video player:

To access the 'data' variables, we use the dataset keyword in JS,
In this case, we used dataset.skip;

We can use textContent property to change what the button reads.

'change' is also an event.

I had to convert the time of the video into a float using parseFloat();

'timeupdate' is an event for video in HTML.

The following events are all small, no caps.
mousedown
mouseup
mousemove

JS30 Challenge Day10 - Hold shift to select checkboxes (buggy code)

Github Link

text-decoration:line-through;

const checkboxes=document.querySelectorAll(‘input [type=checkbox]’);

let lastChecked;

function checkIt(e){

let flag=false;

if(e.shiftKey && this.checked){

checkboxes.forEach(checkbox=>{

if(this===checkbox || checkbox===lastChecked){

flag=!flag;

}

if(flag)

checkbox.checked=true;

});

}

lastChecked=this;

}

checkboxes.forEach(checkbox=>checkbox.addEventListener(‘click’,checkIt));

BUG:

The logic in this code is not complete though.

For example:

-a

-b

-c

-d

-e

If you check a to c.

then you uncheck b.

Then you press shift and check b, 

all the checkboxes below c get checked.

JS30 Challenge Day 9 - Dev Tools

Github Link

    // Regular

    console.log("hi");

    // Interpolated

    console.log("hi %s",'guys');

    // Styled

    console.log("%c superman",'background:blue; color:white;')

    // warning!

    console.warn("oh no");

    // Error :|

    console.error("It's an error");

    // Info

    console.info("info");

    // Testing

    //console.assert(some statement, "what you wanna throw when it is wrong");

    

    // clearing

    //console.clear();

    // Viewing DOM Elements

    console.dir('p');

    // Grouping together

    dogs.forEach(dog=>{

      console.groupCollapsed(`${dog.name}`);

      console.log("hi doggie");

      console.groupEnd(`${dog.name}`);

    });

JS30 Challenge Day 8 - Fun with Canvas

Github Link

Most of the terms used in this program are canvas specific. I am leaving those terms to the video itself. 

A nice way to set an implicit function

()=>{}

Example:

canvas.addEventListener('mousedown', ()=>isDrawing=true);

An ES6 way to define multiple variables in one statement

 [lastX, lastY] = [e.offsetX, e.offsetY];

JS30 Challenge Day 7 - Array workout #2

Github Link

.some

checks at least one thing in the array matches something

getFullYear() is a function, not a property, of Date

find is like filter but instead of returning a subset of the array it returns the first item it finds

A handy way to use {}

console.log(allAdult) gives us the value of allAdult variable

console.log({allAdult}) gives us the allAdult object itself

A great way to use =>

 const isAdult=people.some(person=>{

      const currentYear=(new Date()).getFullYear();

      console.log(currentYear-person.year>=19);

    });

const isAdult=people.some(person=> ((new Date).getFullYear()-person.year)>=19);

    console.log({isAdult});

Reminded me of the Array.splice function.

Example of splice:

b=c.splice(3,2); //starting from index 3, remove 2 elements and    //place them in b