DEV Community: prachigarg19

Project 10: Press shift to check multiple boxes

prachigarg19 — Sat, 11 Dec 2021 18:17:17 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 10 and project 10. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 10 challenge of Wes Bos Javascript30 course.

Final result:

In this project we will focus on how to select multiple checkboxes by using shift.This is a very common features in website now a days. You can further add features to this and create a to-do-list project.

My source code

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

I've used a little bootstrap here. All you have to do is go to Bootstrap input groups and copy paste the code for checkbox along with input field format or you could copy it from my codepen. I wanted to focus on the js part for this challenge.
As you can see I've created input group and the thing to notice here is that I've given same id and class to radio and text box respectively.You will see it's use later.

PART 2:CSS

Now we are going to style our project.
Here we have just made checkbox and text input box inline. We have also centered the container horizontally and vertically.

PART 3:JAVASCRIPT

The idea is to check all the items between last checked item and the one clicked after pressing shift.
Now we will simply check for click event on radioboxes and call linethrough function for each element.

linethrough function will simply set the style of the id element to line-through.

function linethrough(id){
    value=id;
    document.querySelector(`.${value}`).style="text-decoration:line-through";
    console.log(value)
}

We will store id of checked element only if flag is false. This is used to make sure shift hasn't been pressed by user before checking radiobox.

for(radio of radioboxes){

    radio.addEventListener('click',(e)=>{
        id=e.target.id;
        linethrough(id);
        if(flag==false) last=e.target.id;
        //flag=false means shift is not pressed hence value of last is updated.
    })

If user presses shift then we will handle it separately.

Let' handle the shift case now. The idea is that we will store the id of the radio checked by user and then call linethrough function for each item.

document.addEventListener('keydown',(e)=>{
    if(e.key==='Shift')
    {   flag=true; //set flag to true
        Array.from(radioboxes).forEach(radio=>{
            //now we will store the index of radio to the current.
            radio.addEventListener('click',(e)=>{
                current=e.target.id;
                selectMultiple();

            })
        })
    }
})

function selectMultiple(){
    //this will take numeric value in index. 
    currindex=current[current.length-1];
     lastindex=last[last.length-1];
     //start will take the smaller value of both index numeric part. Loop will begin from here
    start=(currindex<lastindex?currindex:lastindex);
    //end takes the larger value
    end=(currindex>lastindex?currindex:lastindex);
    //loop over each element.Check and line through each element.
        for(i=start;i<=end;i++)
        { id=`group-${i}`;
          document.getElementById(`${id}`).checked=true;
           linethrough(id);
        }  
}

Since our index is of format group-1,group-2 etc so we will take the last char of these strings to use them to compare their values and to iterate through loop.
Since user can click above or below the previously checked element, so we will initiate the smaller value to start and larger to end ,to iterate through loop.

Things I learnt:

I didn't learn anything new as such, but this one was a bit tricky as compared to previous ones.

Previous article from this series:

Day 9 Project 9, in this project I discussed about some dev tool tricks that one should know about. Do check it out if you haven't yet.

Conclusion

That's it for today's project.Next project will be HTML5 Video Player.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 9: Must Know Dev Tools Tricks

prachigarg19 — Thu, 09 Dec 2021 18:36:52 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 9 and project 9. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 9 challenge of Wes Bos Javascript30 course.

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

This is a theoretical challenge where we will discuss some helpful dev tool tricks.

Suppose we have javascript on our page and we want to see the js code acting on an element then we can simply select inspect the elements > go to the html code of that element > Right click >Break on> Attribute modification. This will pause our website when js code is implemented on that element and shows that particular line with a dot left to it.This can help a lot when we see websites with large code bases and cannot figure out the js code acting on a element.

Below we will discuss about different types of output that can be printed on console other than our regular console.log. Hope you find these helpful too!

Ways to print variable values in console-

a. console.log("My name is %s",'Prachi');
b. var="Prachi"
console.log("My name is ${var}");

2.Applying css on our console output-
console.log("%c This is styled text","color:red;font-size:20px");
First argument- %c and statement to be printed
Second argument-css to be applied to the statement.

3.Printing warning message-
console.warn('This is a warning');

It also displays the stack trace from where it was called.

4.Displaying error message:
console.error('This is a error");

It also displays the stack trace from where it was called.

5.Displaying statement with an info sign next to it:
console.info('This is info');

6.To check if statement is true or not:
Suppose we want to check if a part of our code is true or not then we can use this trick.
e.g. we want to check is our input has attribute value or not then-

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

      <input type="text" id="text">
      <script>
       text=document.getElementById('text');
        console.assert(text.hasAttribute('value'),"There is no value attribute");
      </script>
  </body>
</html>

OUTPUT-

assert will have 2 arguments, first will contain statement that is to be checked,second will be the statement that we want to print for displaying error. Also, assert shows output ONLY IF STATEMENT IS WRONG.

7.Clearing console:

console.clear();

8.Displaying all the properties and elements associated with an element:

console.log(element name);
e.g.

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

     <p id="text">lorem10</p>
      <script>
       text=document.getElementById('text');
        console.dir(text);
      </script>
  </body>
</html>

9.Grouping multiple console statements.
Suppose we want to iterate over our array and group all the statements for better readability,then-

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

      <script>
       let Dogs=[{name:"Mylo",age:2},{name:"Noddy",age:3},{name:"blacky",age:4}];

       for(dog of Dogs)
       {  //naming of group
         console.group(`${dog.name}`);
         console.log(`Hello my name is ${dog.name}`);
         console.log(`I am ${dog.age} years old`);
         //ending group
         console.groupEnd(`${dog.name}`);
       }
      </script>
  </body>
</html>

OUTPUT:

We can have different argument value in group and groupEnd.

Without groupEnd our first group won't end and the next object will be shown as a subgroup of the first group-

10.Printing the number of times a particular dom element,statement,variable etc. has been printed on console:

      console.count('Mylo');
      console.count('Noddy'); 
      console.count('Mylo');
      console.count('Mylo');

OUTPUT:

Displaying content in table format:

let Dogs=[{name:"Mylo",age:2},{name:"Noddy",age:3},{name:"blacky",age:4}];
       console.table(Dogs)

OUTPUT:

12.Displaying time taken by a particular set of code.
We will use console.time to begin with time recording and console.timeEnd to end recording and displaying time taken.
E.g.

let Dogs=[{name:"Mylo",age:2},{name:"Noddy",age:3},{name:"blacky",age:4}];

       //start timer
       console.time('Iterating array')
       for(dog of Dogs)
       {  
         console.log(`${dog.name}`);
        }
        //ending and displaying time
       console.timeEnd('Iterating array');

OUTPUT-

Also time and timeEnd should have same string otherwise it'll show a warning displaying that the string doesn't exist unlike group and groupEnd where different arguments will work.

Things I learnt:

Almost all the tricks mentioned in this article were new to me.

Previous article from this series:

Day 8 Project 8, in this project I built a HTML5 canvas. Do check it out if you haven't yet.

Conclusion

That's it for today's project.Next project will be 'Hold shift to check multiple checkboxes'.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 8:HTML 5 Canvas

prachigarg19 — Wed, 08 Dec 2021 18:35:08 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 8 and project 8. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 8 challenge of Wes Bos Javascript30 course.

Final result:

Press rerun to clear canvas.

ADDED FUNCTIONALITIES: I have made this project compatible for mouse operated and touch screen devices.

My source code

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

Here I've simply used canvas element to create a canvas. The important part is the style added to container.
I'll explain this part in javascript part for better understanding.

PART 3:JAVASCRIPT

Now we will make our project interactive.
Initially I've took draw id from dom and have given it a height and width equal to that of window's height and width respectively.

let canvas=document.getElementById('draw');
//setup size of camvas to cover the whole screen
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

Now i will use getContext to get the type of content that is returned from canvas. Since we want to create 2d drawings,we'll set it at 2d.
Now I've simply set the properties-
1.setStroke- It is used to set the color of the stroke that'll be drawn.
2.lineCap- It sets the shape with which our stroke will start with in the beginning.
3.lineJoin- It sets the shape at joining point of two lines.

ctx.strokeStyle=`black`;
ctx.lineJoin='circle';
ctx.lineCap='circle';

Now we will create a flag that will decide whether or not we have to draw strokes or not. We don't want to show unnecessary strokes when user stops touching screen/clicking or user touches anywhere away from canvas.

let flag=false;

Initially it is set false as it will set true only if user touches screen/clicks on canvas element.

Now we will add event listeners on canvas.
I have used pointer events and not mouse events as shown in course's video to make it compatible for both touch devices/mouse operated devices. Read more about this event

1.First action that user will do is simply click/touch on the screen.

canvas.addEventListener('pointdown',(e)=>{flag=true; 
    [startX,startY]=[e.offsetX,e.offsetY];

    })

startX and startY are the coordinates of the points where user clicks and hence the point user want to begin drawing from. offsets give the coordinates where pointdown was called.

2.User will move around the canvas. This is where the strokes have to be shown and thus we will call draw function.

canvas.addEventListener('pointmove',draw);

3.User will stop touching/clicking canvas or user will click/touch away from canvas. In both these cases we'll set out flag to false as we do not want draw function to be called (No strokes should be drawn)

//if user stops pressing mouse
canvas.addEventListener('pointup',()=>flag=false);
//if user clicks anywhere other than canvas
canvas.addEventListener('pointout',()=>flag=false);

Now we will create draw function-

function draw(e){
    if(flag==false) return;//user is not drawing
    //  setting varying color 
    ctx.strokeStyle=`hsl(${hue},100%,50%)`;
    //start path of stroke
    ctx.beginPath();
    //move to the starting point where user clicked
    ctx.moveTo(startX,startY);
    //draw line till this point 
    ctx.lineTo(e.offsetX,e.offsetY);
    //offset property returns the coordinate at which mouse if clicked. so it will join the line to the point where user keeps moving the mouse.
    ctx.stroke();
    //actually drawing the line between the points

    //setting start points to the last point at which user stopped drawing,without this if draw is triggered then starting point will stick to mousedown offsets only and we want it to start from the point where mouse is being moved currently.
    [startX,startY]=[e.offsetX,e.offsetY];
 //we want color to start from the hue=0 value when it reaches 360.
    hue=(hue>360?0:hue+1);
}

Now let's take the inline css part we talked about in the html part. The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action. Without touch-action:none browser will cancel our pointermove and so we won't be able to continue our stroke. Setting it to none prevents this problem. For more info

Things I learnt:

Literally everything written. 🥴

Previous article from this series:

Day 7 project 7

Conclusion

That's it for today's project.Next project will be project 9 where we will discuss about 14 Dev Tool tricks.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 7: Array Cardio Day 2

prachigarg19 — Tue, 07 Dec 2021 18:44:40 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 7 and project 7. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 7 challenge of Wes Bos Javascript30 course.

This challenge was more theoretical rather than implementation. It explained various array prototype methods that I found super helpful and so I'll be explaining each method taught in this challenge and I strongly recommend you to not skip this challenge.
Checkout the first part if you haven't yet.

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

I'll be linking the documentations I referred for each function to further clear up the topic.

Before proceeding you should be familiar with arrow functions.

1.some(): It returns true if at least one element of our array satisfies the test condition of the function passed as a parameter.
e.g. we want to check if any element is divisible by 3.There are 2 ways to do this:

let arr=[3,4,5,1,8];
let isDivisible=false;
for(item of arr){
    if(item%3==0)
    isDivisible=true;
}

Now this can be done in a single line using some() method.
It takes a function as a parameter(which will contain our condition), and the parameter function further takes the current element being checked, index(optional) and array on which some is used(optional) as parameters.

let arr=[3,4,5,1,8];
let isDivisible=arr.some(item=>item%3==0)

Here item is the current element being checked for its divisbiliy with 3.

See how code has been reduced to single line.
Here is the documentation I read along with the video.

2.every(): It is like some(),the difference is that it returns true ONLY IF ALL elements satisfies the condition.
Let's take the same example as above.
Long way->

let arr=[3,4,5,1,8];
let isDivisible=false;
let count=0;
for(item of arr){
    if(item%3==0)
    count++;
}
isDivisible=(count==5?true:false);

Now this whole can be reduced to one line using every().

let arr=[3,4,5,1,8];
let isDivisible=arr.every(item=>item%3==0);

3.find(): It is like filter,the difference is that instead or returning all the elements returning true for the condition,it returns the first element.

Taking similar example-
Long way->

let arr=[3,4,5,1,8];
let element;

for(item of arr){
    if(item%3==0)
    {
      element=item;
       break;
    }
}

using find() method-

let arr=[3,4,5,1,8];
let element=arr.find(item=>item%3==0)

Parameters are similar to all methods mentioned above.
Here is the documentation.

4.findIndex(): It returns the first index of the elements satisfying the condition. If no such element exists,-1 is returned.
Let's return the index for the element in above example-

let arr=[3,4,5,1,8];
let index;

for(i=0;i<arr.length;i++){
    if(arr[i]%3==0)
    {
      index=i;
       break;
    }
}

using findIndex() function -

let arr=[3,4,5,1,8];
let index=arr.findIndex(item=>item%3==0)

Parameters are same as above functions.

For further understanding, refer Documentation.

Things I learnt:

More Array.prototype methods.

Previous article from this series:

Day 6 Project 6.In this project I built a search filter which is very common feature in website nowadays. Do check it out if you haven't already.

Conclusion

That's it for today's project.
These functions as you saw are super handful and will surely help in reducing the line of code.

Next project will be HTML5 Canvas .

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 6:Ajax Type Ahead

prachigarg19 — Mon, 06 Dec 2021 18:56:45 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 6 and project 6. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 6 challenge of Wes Bos Javascript30 course.

Final result:

This is a filter for city which is a very common feature in websites nowadays.It will display all the cities that matches the keywords entered by user.

My source code

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

Here I've created two divs, container will contain heading and searchbox and second div display-part will display the list according to value entered by user.

PART 2:CSS

Now we are going to style our project.Here I've simply used flex on body to center our content. I've also added css to city-list which will contain our list i.e. to be displayed

PART 3:JAVASCRIPT

Now we will make our project interactive.
This is the major part of this project.
The idea is to read user's input ,display list of cities matching that input and then display the city selected by user from this list on the input box.We will also highlight the letters entered by user in the list.

We will first fetch the data from the link . This link contains our data in json format. We will use fetch function to get data from this link. Also we will use map function check this article to know more to get a new array with just city names and store it in cities variable.

let data=document.getElementById('text');
// fetching 
let cities;
fetch(url,{
    method:'GET',
})
.then(response=>response.json())
.then(text=>{
    cities=text.map(item=>item['city']);

})

Now we will use keyup listener. This event is triggered whenever user enters a key in the element (here textbox). We will then generate regex expression using regExp and store all the cities matching this expression into display. We will then call result function to display the list,highlight input by user and changing value in textbox to the value clicked by user.

data.addEventListener('keyup',(e)=>{
    if(e.target.value==="") return;
 display=cities.filter(item=>{
     regex=new RegExp(e.target.value,'gi');
     return item.match(regex)

})
result(); //to display list
})

result()-->
Displaying and highlighting part-
We will traverse through our display array and store it in a string which will later be appending to our display-part class.
For highlighting, we will replace each item's regex equal part to span part and use inline css to style it.

let resultdisplay=document.getElementById('list');
 str="";
    for(let item of display)
    {   let city=item.replace(regex,`<span style="background-color:green;">${data.value}</span>`);
        str+=`<ul><button value="${item}" class="city-list">${city}</button></ul><hr>`;  
    } 

    resultdisplay.innerHTML=str;

Notice that I've given a class and value to each list item which will be later used to display city selected by user.

Changing text box display text
Now we will select all elements with city-list class. We will traverse this list and listen for event on each item. When the user clicks any button the click event will be triggered and we will change value of textbox to the value of the button clicked.

try{
    let cityarr=Array.from(document.getElementsByClassName("city-list"));
    for(cityitem of cityarr){
    cityitem.addEventListener('click',(e)=>{
        data.value=e.target.value;
        resultdisplay.innerHTML="";
        //removing list after user chose city
    });}
        }catch(TypeError){
        return;
        }

I've used try-catch block as if user clicks on the highlighted span part the textbox will give TypeError as span html part in result function didn't have a value attribute->

let city=item.replace(regex,`<span style="background-color:green;">${data.value}</span>

So we will simply catch this error and return from the loop.

Things I learnt:

1.keyup event listener
2.How to highlight part of the list elements.
3.Better understanding of regex.

Previous article from this series:

First of all thankyou for the great response on my previous article.🥰
If you haven't checked it out here is the link.:
Project 5 day 5

Conclusion

That's it for today's project.Next project will be Array Cardio day2 .

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 5:Flex-gallery

prachigarg19 — Sun, 05 Dec 2021 19:12:12 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 5 and project 5. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 5 challenge of Wes Bos Javascript30 course.

Final result:

Set codepen to 0.25x if using small screen devices to see the full result.
My source code
I've added the images used in the lecture, they aren't included in starter files of this course, so you can download it from my repo.

As you can see this turned out to be super cute! 😻😌

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

As you can see I've made 5 boxes inside container that will contain our background-image and text.

PART 2:CSS

Now we are going to style our project.
This is the main part for this challenge.
First, we want all our boxes to be aligned like shown in result and to achieve this the best way is either grid or flex. I've used flex and aligned them in column direction on container.

.container{
    display:flex;
    height: 100vh;
    overflow: hidden;
    font-family: 'Amatic SC', cursive;
}

Now we will go to individual classes and apply background images ,center those images and will set it's size to cover to make it fill the whole container element(individual box classes).

Then we will simply set font-size for text and set h1 to scale(0) so that it's pushed inside the screen.(This will later on give the 3d look of text coming out of the screen)

Then I've again applied flex on the box. This is done to position all the heading tags such that they take 3 equal rows using flex:1.

.box{
    flex:1;
    height: 100vh;
    display:flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
    gap:2em;
    transition: ease-in-out 0.8s;
    text-transform: uppercase;
    flex-wrap: wrap;
}

Then I've again applied flex on all the elements of box i.e. h3,h1,h3.This is done to further center the heading tags inside their individual flex. Without this part, translateY won't work as we need to give a wrapper class to the element we want to translate. You can also give classes to the both h3's to achieve this..But flex is used for better positioning of elements.

.box>*{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex:1;
   transition: cubic-bezier(0, 0.95, 0.49, 0.65) 0.8s;


}

Then I've taken the first and the last tag and translated them above and below the boxes such that they disappear from the screen. We will later use them to give a sliding effect as shown in result.

.box>*:first-child{
    transform: translateY(-100%);
}
/* moving lower h3 down */
.box>*:last-child{
    transform: translateY(100%);
}

Then I've created a focus class that will increase the size of box user clicked upon by giving it a flex:5. I will later add and remove this class.

.focus{
    flex:5;
}

This is it for css part.

PART 3:JAVASCRIPT

Now we will make our project interactive.

The idea is to traverse all the items with box class, add an event listener which will be called if user clicks on the box and calls out focusImg function.

focusImg function -->
Here we will add the class focus to increase the size of container, change the property of translateY to slide our h3's back to the frame.
Also, we want our box to restore back to it's initial state when clicked upon again, to do this we'll simply check if the box element being clicked upon has focus class add to it, if it has that means that it has been clicked by the user before. Now we will simply remove the focus class and remove h3 by using translateY to restore it's initial state.

Things I learnt:

1.Nested flex
2.Animation in css.

Previous article from this series:

Project 4 Day 4. This project discusses various important array prototype methods that I found super helpful. Do check it out if you haven't already

Conclusion

That's it for today's project.Next project will be Ajax Type Ahead .

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 4: Array Cardio Day 1

prachigarg19 — Sat, 04 Dec 2021 20:39:13 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 4 and project 4. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 4 challenge of Wes Bos Javascript30 course.

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

I'll be linking the documentations I referred for each function to further clear up the topic.
Before proceeding you should be familiar with arrow functions.

1.filter(): It is used to filter elements of array that returns true for any condition written inside the function passed as it's parameter. It returns an array of such elements.

E.g. Suppose we have an array=[1,2,3,4,5,6] and we want to get odd elements from this array. There are 2 ways to do this:

let result=[];
for(item of array)
{
 if(item%2!=0) result.push(item);
}

Now this can be done in a single line using filter() method.
It takes a function as a parameter(which will contain our condition), and the parameter function further takes the current element being checked, index(optional) and array on which filter is used(optional) as parameters.

let result=array.filter( (item)=>item%2!=0);

Here item is the current element, and if item%2 returns true only then the value would be added to result.

See how code has been reduced to single line.
Here is the documentation I read along with the video.

2.map(): It is used when we want to traverse an array and change values of all it's elements. It creates a new array with modified elements and hence, is not preferred if the new array isn't useful/ if we are not using the returned array further in our code.

e.g. we want to add 1 to each element of array:
First way is to traverse an array using for loop and then add 1 to each element.
Second way->

let array=[1,2,3,4,5];    

result=array.map( (item)=>item+=1);

Map takes three arguments: the value of the element, the index of the element(optional), and the array object being mapped(optional) just like filter().

Here is the documentation I read along with the video.

3.reduce(): It is used when we want to add calculation of previous elements to the next element.
It takes two parameters, the function that will perform calculations and an initial value(optional).
If initial value is not provided, then the array will be traversed from the second element ,taking first element as the previous value and second as the current value. If specified, initial value is given to the previous element and traversing begins from the first element of array.

function passed as parameters takes 4 upto values:
previousValue: the value resulting from the previous call to function. On first call, initialValue if specified, otherwise the value of array[0].
currentValue: the value of the current element. On first call, the value of array[0] if an initialValue was specified, otherwise the value of array[1].
currentIndex: the index position of currentValue in the array. On first call, 0 if initialValue was specified, otherwise 1.(optional)
array: the array to traverse (optional)

e.g. suppose we want the products of elements in our array
First way->

let array=[1,2,3,4,5];    
let result=1;
for(item of array)
{
    result*=item;
}

Second way (using reduce)->

result=array.reduce(((product,next)=>product*=next),1);

Here first argument is the value that is finally returned by reduce function and second value is the current element value. I've provided the initial value 1 that will be given to product during 1st iteration.I can skip giving initial value as well.

Here is the documentation I read along with the video.

Note: these methods will give console error if not used with array.If you want to use it on non array collection then use Array.from(collection) which converts an array instance from an array-like or iterable object.

Things I learnt:

1.map()
2.reduce()
3.filter()

Previous article from this series:

Project 3 Day 3

Conclusion

That's it for today's project.Next project will be Flex panel Image gallery .

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 3:CSS Variables

prachigarg19 — Sat, 04 Dec 2021 08:25:36 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 3 and project 3. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 3 challenge of Wes Bos Javascript30 course.

Here is the final result:

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

CODE

PART 1:HTML

In html part as you can see I've created 3 inputs. The thing to notice here is that I've given name to the input similar to variable names as we will later use them to manipulate variable values. I've created data-sizing variable which will store px. Keep reading to understand why it's needed.

PART 2:CSS

Now we are going to style our project.
Here we have created 3 variables in root. As I said, notice variable names are similar to name of inputs.

PART 3:JAVASCRIPT

Now we will make our project interactive.
The idea is to get all input tags from document, traverse them and call function updateValues when input is clicked or when mouse is moved upon range input to change values. Without mousemove event Listener the function will not take values until range input is stopped at a point.

updateValue function->

 let suffix=this.dataset.sizing||"";
    document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);

suffix will store the dataset sizing value that is px. This is required as we want to set variable values to somethingpx.
Example- If user sets padding value to 18 then we need to update
--padding variable to 18px. Thus we need to concatenate 18 and string px to achieve this.
Also since image does not have a data-sizing set to it we have set an or condition in suffix initialisation to prevent concatenation of undefined.This can also be achieved by setting data-sizing="" in img but this is not a good method for larger code bases as we'd then need to add data-sizing="" to all the inputs.

Now we will update css value by calling setProperty function of style .of document element ,which is further a part of document ,for name of the input that called the function (same as variable name) to the value of this input(returns value set by user/initial value set by programmer). (Tip: this is a complicated part hence try breaking it and printing on console to get the idea or you can comment below and I'll be happy to help you)
For more details on this part ,read here.

Previous article from this series:

Day 2 Project 2

Here is the working code :github

Things learnt:

1.mousemove event listener.
2.css variables.
3.updating variables from javascript
4.dataset
5.filter property in css (here used to blur image)

Conclusion

That's it for today's project.Next project will be Array Cardio Day 1.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 2:JavaScript Clock

prachigarg19 — Fri, 03 Dec 2021 10:08:51 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 2 and project 2. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 2 challenge of Wes Bos Javascript30 course.

Here is the final result:

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <div class="hand hour-hand" id="hour"></div>
    <div class="hand min-hand" id="min" ></div>
    <div class="hand sec-hand" id="sec"></div></div>
<script src="script.js"></script>
</body>
</html>

PART 2:CSS

Now we are going to style our project.

*{
    margin:0;
    padding:0;
}
body{
    background-color: rgb(33, 33, 36);
    display: flex;
    justify-content: center;
}
.container{
    border:20px solid white;
    border-radius: 50%;
    position: absolute;
    margin-top: 8rem;
    height:25vw;
    width: 25vw;
    transition: ease-in-out;

}
.hand{
    position: relative;
    top: 50%;
    width:47%;
    left:3%;
    height: 0.6rem;
    background-color: white;
    transform: rotate(90deg);
    transform-origin: 100%;

}
.hour-hand,.sec-hand,.min-hand {
   position: absolute;
}

Let's look at the styling part for hand class

.hand{
    position: relative;
    top: 50%;
    width:47%;
    left:3%;
    height: 0.6rem;
    background-color: white;
    transform: rotate(90deg);
    transform-origin: 100%;

}

Position has been set to relative so that hands can be positioned with respect to container that is the clock boundary. Then we can easily set top and width accordingly to center the hands.
Hand class will be a common class to all hour,min and sec hand. We have used transform(90deg) to start all the hands from 12o'clock (as div content is horizontal by default).

Here transform:origin has been used as on applying transform, rotate hands will be rotated from center(by default) , hence we set origin to 100% to rotate it from the end.

One issue that we will face is that our 3 hands will appear in block format as div is a block property by default.To solve this we will use position:absolute at individual hand classes.

.hour-hand,.sec-hand,.min-hand {
   position: absolute;
}

Refer to this for more details on stacking divs part.

PART 3:JAVASCRIPT

Now we will make our project interactive.

Here the idea is to change transform:rotate property for each hand class as per change in hours,min and sec and calling each function again and again every sec using setInterval() function.

Let's look at the function for hour hand.

function changeHour(){
    let hour=document.getElementById('hour');
    let hangle;
    if(date.getHours()<12)
    {   
        hangle=(date.getHours()*30);
    }
    else hangle=(date.getHours()-12)*30+90;
    hour.style.transform=`rotate(${hangle}deg)`;
}

Here we will take two cases. If our hour is less than 12 then we will simply multiply it by 30 deg as hour hand moves 30deg after every hour and we will add it to 90deg as initially our hand is at 90deg. If our hour is>=12 then we will subtract them by 12.
Here's an example- If hour returned by getHours() is 1 (1am) then our hour-hand will be at 1*(360/12) degrees.
If 13 is returned( 1pm) then (13-12)*(360/12) will give 30 degrees.

Same logic goes for min and sec -

function changeMin(){
    date=new Date();
    let min=document.getElementById('min');
    let mangle=date.getMinutes()*6+90;  
    min.style.transform=`rotate(${mangle}deg)`;
}
function changeSec(){
    date=new Date();
    let sec=document.getElementById('sec');
    let sangle=date.getSeconds()*6;
    sangle+=90;   
    sec.style.transform=`rotate(${sangle}deg)`;
}

Now we have to call these function every second-
Here we will use setInterval(function,time interval in milisecond),which will keep on calling function passed as parameter after time interval passed as second parameter until closeInterval() is closed,which we won't call since we want our function to keep on running.

setInterval(changeSec,1000);
setInterval(changeMin,1000);
setInterval(changeHour,1000);

Previous article from this series:

Project 1 Day 1

Things learnt:

1.Stacking divs
2.transform-origin

Source Code

Feel free to suggest changes

Conclusion

That's it for today's project.Next project will be on CSS variables.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Project 1: JavaScript DrumKit

prachigarg19 — Thu, 02 Dec 2021 10:28:58 +0000

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 1 and project 1. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 1 challenge of Wes Bos Javascript30 course.

Here is the final result:

As always before starting, download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

<body>
    <div class="container">
         <div class="bg-wrap">
             <img class="bg-image" src="background.jpg">
         </div>
        <table>
            <tr>
                <td class="drum-key"><button value="65">A <span>Clap</span></button></td>
                <td class="drum-key"><button value="83">S <span>Hihat</span></button></td>
                <td class="drum-key"><button value="68">D <span>Kick</span></button></td>
                <td class="drum-key"><button value="70">F <span>OpenHat</span></button></td>
                <td class="drum-key"><button value="71">G <span>Boom</span></button></td>
                <td class="drum-key"><button value="72">H <span>Ride</span></button></td>
                <td class="drum-key"><button value="74">J <span>Snare</span></button></td>
                <td class="drum-key"><button value="75">K <span>Tom</span></button></td>
                <td class="drum-key"><button value="76">L <span>Tink</span></button></td>
            </tr>
        </table>
        </div>
    <script src="script.js"></script>
</body>

The thing to notice here is that I've given value of buttons as ascii value of characters mentioned on drum keys. I've created a table with 1 row and each data cell is a button.

PART 2:CSS

Now we are going to style our project.

*{
    margin: 0;
    padding:0;

}
body{
    overflow: hidden;
}
.container{
    position: relative;
}
.bg-image{
    background: url('background.jpg') center;
    opacity: 0.7;
    position: absolute;
    top:0;
    bottom:0;
    width:100%;
    height:auto;
    z-index:-1;
    position: relative;
}
table{
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 55%;
    z-index:2;

}
table td button{
    width:3.5em;
    height:3em;
    font-size:2rem;
    color: white;
    background: transparent;
    border:2px solid black;
    transition: all 0.06s;
    margin:1rem;

}
table td button span{
    font-size: 1rem;
    color:gold;
   display: block;

}
.bright{
    border: 2px solid gold;
    box-shadow: 0px 3px gold;
    transform: scale(1.2);
}

Here bright class will be called when a sound is being played.Now as this article focuses mostly on javascript, I'm not getting deep into css explanation part. Try to read through it and if you've any suggestions or doubts, feel free to comment below.

PART 3:JAVASCRIPT

Now we will make our project interactive.
So the idea of this project is to play sound when

Key mentioned on the button is pressed on keyboard: Here we will use event listener keydown. We will use keyCode to get the key pressed by user. Then we will pass it to a function to play the corresponding sound.
We click the button using cursor. Here we will get the value of button clicked by using event listener click and then we will pass it to the function to play the sound.

Initialising audio variables -->

let clap= new Audio('sounds/clap.wav');
let boom= new Audio('sounds/boom.wav');
let hihat= new Audio('sounds/hihat.wav');
let kick= new Audio('sounds/kick.wav');
let openhat= new Audio('sounds/openhat.wav');
let ride= new Audio('sounds/ride.wav');
let snare= new Audio('sounds/snare.wav');
let tink= new Audio('sounds/tink.wav');
let tom= new Audio('sounds/tom.wav');

Now we will solve the cases as explained above.

let keys=document.getElementsByClassName('drum-key');

for(let key of keys){
   //This will play sound when any key is pressed
    key.addEventListener('keydown',(e)=>{


             //******adding bright class*****

        //will call button having keycode as value.
         let keyboardvalue=document.querySelector(`button[value="${e.keyCode}"]`);

         //if any non displayed key is pressed.
         if(keyboardvalue)
        keyboardvalue.classList.add('bright');
        playSound(e.keyCode);

        //since transitioning is already a time bound property, using another time bound function is not recommended.
            //    setTimeout(()=>
            //     {keyboardvalue.classList.remove('bright');
            //     },500);


    })
                //*******to remove bright class*******
    // we will use property transitionend.
        key.addEventListener('transitionend',(e1)=>{
        //since transitionend triggers every time transition is made i.e. for change in borders etc. as well , we are returning if transitionend is not triggered for property transform.

        if(e1.propertyName!='transform') return;
        e1.target.classList.remove('bright');
       })

            //******when button is clicked****
    key.addEventListener('click',(e2)=>{
        console.log(e2.target.value);
        if(e2.target.value)
        {playSound(parseInt(e2.target.value));
         //Value data type is string so we will convert it to integer as switch case takes integer as parameter.
        e2.target.classList.add('bright');}
    })
}

Now we will create function playSound which takes the ascii value of key as parameter and plays the corresponding sound using swich-case.

function playSound(ch){
    switch(ch)
        { 
            case 65: {clap.currentTime=0; 
//if one audio is playing then same audio will not play again as function is already running. to prevet this we et currenttime=0.          
                     clap.play();}
                     break;
            case 83: hihat.currentTime=0;
                      hihat.play();
                     break;
            case 68: kick.currentTime=0;
                      kick.play();
                    break;
            case 70: openhat.currentTime=0;
                      openhat.play();
                    break;
            case 71: boom.currentTime=0;
                      boom.play();
                    break;
            case 72: ride.currentTime=0;
                      ride.play();
                    break;
            case 74: snare.currentTime=0;
                      snare.play();
                    break;
            case 75: tom.currentTime=0;
                      tom.play();
                    break;
            case 76: tink.currentTime=0;
                      tink.play();
                    break;
        }
}

I hope you understood the whole code.

Source code: Click here

Things I learnt

1.keydown event listener.
2.transitionend event listener.
3.transform and transition.
4.Alternative to using setTimeout function with transition.
5.How to play audio again even if play() function is already running for that audio.

Previous article from this series::

Click here

Conclusion

That's it for today's project.Next project will be an Alarm Clock .

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)

Build 30 JavaScript projects in 30 days:Day 0

prachigarg19 — Wed, 01 Dec 2021 19:09:51 +0000

This is building 30 projects in 30 days series. I'll be following Wes Bos Javascript30 course for this challenge,the link to which is: https://javascript30.com/.

I'll be sharing my approach in every article which may or may not be same as the one mentioned in his videos.

Before starting with this series I'd recommend you to download the starter files in your device, the link to which is here

Process to download starter files ->

Fork the repo by clicking the option in the top right.
Clone repo:

2.a. If you have github desktop installed (which I recommend as it is easier to work with), click on the green colored 'code' option and then click open with gitub desktop. Now the application will automatically clone the repo to your device. After cloning they'll be two options on your screen-> contribute to parent project ( choose this if you want to make contribution to the repo, which in this case, you're not) . Second, for your own use. Choose this one.

2.b. Using git bash: Refer to this article

Now go to the folder where repo has been cloned and congrats there is your starter package! You can copy and paste all the sounds,images etc. to your project folder as per your requirements and use them in your projects.

This is it for today. In my next article, I will discuss the first project, which is a DrumKit.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)