-this script connects one of my key and an audio file with a attribute data-key.
-this thing happens within html but the transition that we have sync with over keys is inside css.
-we made a class in css 'playing' that contains styling, that applies only if transition happen.
-so we added class 'playing' in script, that adds styling while we use the key.
-but we have to remove that styling after specific time.
-so we added foreach into keys and removed that class at that specific time.
-so this makes our display program like a buzzer as soon as i press it become red for specific time.
-we have to make function inside
-we have to rotate the 3 clock hands with respect to now time
-and make rotate at their respective degree
-we grabbed [((sec,min,hour) hands] from thier divs
-we grabbed current date(nowDate)
-we made 3 variable with to get current value of [(sec,min,hour) using nowDate.getX()]
-we made 3 more variables to get degrees of [(sec,min,hour) using ((varOfCurrValue/60)*360)+90]
-we calculated degs+ patched default L-R rotation problem to +90deg
-now we add style in tranform element of [((sec,min,hour) hands]
-we add value of var we created to get rotation degs in styles.
- -----------------callback f(n) for Checkboxes eventlistener ---------------
- we will pass a callback fn for event
- now inside fn we will give lastChecked value of this
- LASTCHECKED will give us log of which item we clicked last time
- or we can say which item get iterate through the function
- if(this.check)console.log(this.checked) will provide as alert
- if anything get checked it alert true in console
- so we will add another functionality in this
- we will verify if (e.shitkey) is used with click then log back true
- now we now get alert only while we check using(shiftkey+click)
- now we are getting data back for functionality that we want
- we will create now a element that can log whats between them
- now we have to declare a variable inBetween with value of false;
- make sure we wont use const because we will mutate this var.
- we declare a var called lastChecked without value out now yes now
- after declare lastcheck wont work
- now inside theloop we will comment out the console.log(this.checked)
- and we will loop Checkboxes inside if statement
- we will verify that if check = this or check=lastchecked
- if this statement is true it will change inBetween value
- we will give inBetween=!inBetween
- means it will automate betwwen true and false itself
- and if inbetween is active we pass value true for check(item).checked
- more instruction inside day10 folders index.html file