Forem: Nirbhay Parmar

#JavaScript-30 day -10

Nirbhay Parmar — Sat, 19 Mar 2022 09:00:13 +0000

Hey fellow learners, how are you going?

Today, I am sharing my experiments with the projects from #JavaScript30 series by Wes Bos.

For today's post, I have chosen the project of day-10 which is on creating a small component in which we can checked multiple checkbox at one click. So lets dive into the code and try to understand the how I approached the problem and (how I am wrong about my approach😂.)

At first the HTML and CSS files are given in the course. We just have to add our logic via JavaScript. But before discussing the solution, first understand what is the problem statement? So, the problem statement is like there are multiple checkbox, after clicking any one checkbox as soon as we click some other checkbox, all the checkbox between the first clicked and second clicked are also checked together with the second checkbox.

So, now discuss, how I approached this problem. First I thought that if somehow we can keep track of index of first and second clicked object than we can checked the checkbox that lie between them. So I created two variables named firstChecked and lastChecked and added two event listener on all the checkbox of the same click event type. And in the first event listener I tried to update the firstChecked variable with the index of first checked checkbox and in the second event listener the same process for the lastChecked.

And then I thought that now I just have to select the indexes between that two checkbox and make it checked. But here is the catch, As I have added two different event listeners on the same object having same type of event behave as a single event, obviously but at that time I did not realised it. So started console logging the values of firstChecked and lastChecked after clicking two different checkbox but it will showing same index. It will show same index as per the code but for me who at that time not understand that logic is frustrating.

I went on debugging it. After some 1 or 2 hours, I realized my mistake and decided to watch the solution given by Wes itself. And got it right. Here is the solution of that problem. (You can download the problem files from this GitHub repo.


const checkboxArray = [...document.querySelectorAll("input[type=checkbox]")];

let lastIndex = null;
checkboxArray.forEach((box) => {
    box.addEventListener("click", handleCheck);
});
function handleCheck(e) {
    let flag = false;
    if (e.shiftKey && this.checked) {
        // console.log(lastIndex, "inside if");
        checkboxArray.forEach((box) => {
            if (box.checked) {
//to check weather the checkbox we are at is working is checked or not.
                flag = !flag;
            }
            if (flag) {
                box.checked = true;
            }
        });
    }
    lastIndex = this;
    console.log(lastIndex);
}

// in the below approach(what I thought) the main fault is that 
//the two separate event lister of the same event type will always 
//take action at simulteneously. so i cannot get the separate 
//value of the last checked checkbox after checking next checkbox.

// let firstIndex = null,
//  secondIndex = null;
// console.log(checkboxArray);
// checkboxArray.forEach((box) => {
//  box.addEventListener("click", firstBox);
// });
// checkboxArray.forEach((box) => {
//  box.addEventListener("click", secondBox);
// });
// function firstBox(e) {
//  firstIndex = checkboxArray.indexOf(this);
//  console.log(firstIndex);
// }
// function secondBox(e) {
//  if (e.shiftKey) {
//      secondIndex = checkboxArray.indexOf(this);
//  }

//  console.log(secondIndex);
// }

You can view the working model here.
So the moral of the story is, please understand the basics of the methods or functions you are using in your code in order avoid this type of fundamental mistakes.

A Curious Case of Junior Developer

Nirbhay Parmar — Tue, 11 Jan 2022 14:31:31 +0000

Hey readers, let us see this scenario, many of us had faced this scenario in our learning phase.

Start

You may heard many advice saying that you must have your portfolio website to showcase your work yourself to the world and to build a personal brand. And after hearing that advice you starts to gear up your thoughts and decided to make a cool and professional looking portfolio website.

So, after you have decided that you need a portfolio website, you starts to search YouTube for best developer portfolio website examples or something related to it and binge watching it till 2:00 am in midnight and stops when you see your data pack is over.

After it you sets on a particular design for your portfolio and as soon as you starting to code, you came across a tutorial for designing the website using Figma or Adobe XD. Now you watched that video and follow it to create a design for your website. Your design looks very cool and professional. Now you sit and started coding to make your design a reality.

After two-three hours of coding the HTML and CSS for your website you think that why i am not getting the design that i have created in Figma. You restlessly try and debug the code to make it work. After some time you say yes i have started creating my website and it sucks, now i need some rest so, i solve the bugs next day.

But that next day never comes in a while. During some random thoughts you reconcile your memory about your unfinished portfolio and you again started coding. But instead of fixing the bugs in older project, you created a new file and started coding from scratch. And again you stuck in the same cycle of trying to fix the bugs and left it unfinished and restart it again.

So, you think why am i doing all this? Was i be able to do it or not? And then you decided to do it again. But this time you are able to complete your portfolio website in just two month and host it.

End

Now you readers think that why am I telling this sad story to you all but the thing is all the above mention events are happened with me. Yes, I binge watched like 10 to 12 YouTube video for find inspiration. And i found myself in so called 'tutorial hell'. In general this happens with majority of beginners. They fell in tutorial hell and think that they need to be perfect or need to know it all to make a portfolio or in general became a developer.

So if don't want to fell in tutorial hell then start your favorite code editor (mine is VS Code) and start coding your portfolio website.

In my next post I will share my journey of what i did different last time to finally complete my portfolio website and how i got myself out from tutorial hell.

So, until then keep coding....

Credits for cover photo

Type Conversions in JavaScript

Nirbhay Parmar — Wed, 01 Dec 2021 14:39:45 +0000

Introduction

In the previous post of this series, I have explained about all the data types that are present in JavaScript. If you did not read it then you may read it first to understand all the data types in detail or if you have knowledge about the data types then you may continue reading this post.

In this post, I am explaining about the type conversions in JavaScript. As we know that JavaScript is dynamically typed language, we don't need to specify the data type while creating any variables. Sometimes we requires that the some value stored in a variable as some other data type then it was already like the variable is storing a number data type and we require that value as a string. The concept of type conversion comes into picture here.

Type conversion achieved in JavaScript in two ways-

Automatic Type Conversion
Explicit Type Conversion

Now lets talk them about in detail.

Automatic Type Conversion

As the name suggests it is automatically done by JavaScript itself. Some functions like alert() will convert any given type to string to display it.

Another example of it is that when we apply the non-numbers to mathematical expressions or functions then the non-numbers are automatically converted to numbers. For example-

let subtract = "6" - "4";
alert(subtract) // 2

There are some more ways in which automatic type conversion is happen but I want to try on your own in your browser's console in dev tools.

Explicit Type Conversion

Explicit type conversion means that we have explicitly have to convert the data type of the value stored in a variable, by using some functions.

In JavaScript, we have generally four type of explicit type conversions such as-

string conversion
numeric conversion
boolean conversion
object to primitive conversion

In this post, I am just covering first three only because object to primitive conversion needed knowledge deeper understanding of objects, that I may cover in my future post.

1. String Conversion

To convert the other values to string data type, we have used string(other value) function. It is most obvious type of conversion because the value stays as it is but its data type is now changed to string.
Example-

//number to string
let numValue = 123; // numValue is of number data type.
let convertedValue = string(numValue);
alert(typeof convertedValue); // string

//boolean to string
let boolValue = false; // boolValue is of boolean data type.
let stringValue = string(boolValue);
alert(typeof stringValue); // string

2. Numeric Conversion

Numeric conversion is slightly complicated but i will explain it via examples that takes the complexity away. So numeric conversion is possible by a function called Number(otherValue).
Example-

let stringValue = "123"; // string data type
let booleanValue = true; //boolean data type

let numValue1 = Number(stringValue);
let numValue2 = Number(booleanValue);
let numValue3 = Number(!booleanValue); // for false boolean value

alert(typeof numValue1); // number as numValue1 is 123
alert(typeof numValue2); // number as numValue2 is 1
alert(typeof numValue3); // number as numValue3 is 0

Update- 11/12/2021

I am going through JavaScript.info to revise operators in JavaScript, then I show the use of unary + operator. It can also used to convert other data types to number. If we put + operator before any variable containing non-number data types then it will convert it to numeric form and use its numerical value.
Example-

let a = "5";
let b = "6";
console.log(a + b); // "56"
// but when we use + operator before the varible then
console.log(+a + +b); // 11

3. Boolean Conversion

Boolean conversion is easy because it has only one rule that is when any empty string "" or 0 is converted to boolean using Boolean() function then it is false othervise it is true.
Example-

let stringValue = "hi";
let numValue = 123;

let boolValue1 = Boolean(stringValue);
let boolValue2 = Boolean(numValue);

console.log(boolValue1); // true
console.log(boolValue2); // true

let stringValue1 = "";
let numValue1 = 0;

let boolValue3 = Boolean(stringValue1);
let boolValue4 = Boolean(numValue1);

console.log(boolValue3); // false
console.log(boolValue4); // false

some points to remember

Some people often confused when it comes to converting 0 and "0" to boolean because both of then seems to equal but, 0 is converted to false in boolean and "0" is converted to true because "0" is string having 0 as a character while 0 is a number.
Example-

let value1 = 0;
let value2 = "0";

console.log(Boolean(value1));
console.log(Boolean(value2)); 
// try this code in console window of dev tools of your browser

Other common mistake is that they convert undefined and null to number, undefined is converted to NaN and null is converted to 0.
Example-

let value1; // undefined
let value2 = null;

console.log(Number(value1));
console.log(Number(value2)); 
// try this code in console window of dev tools of your browser

When we are converting string to number then if the string have some trailing or leading white spaces then it will discarded. If the string contains some non-numeric characters then it will converted to NaN. The empty string becomes 0.
Example-

let value1 = "  123  ";
let value2 = "123@#";
let value3 = "";

console.log(Number(value1));
console.log(Number(value2));
console.log(Number(value3));
// try this code in console window of dev tools of your browser

In boolean conversion, the NaN, undefined and null are also converted to false. The space-only string " " is true.
Example-

let value1 = 0/0; //NaN
let value2; // undefined
let value3 = null;
let value4 = " " // space only string

console.log(Boolean(value1));
console.log(Boolean(value2));
console.log(Boolean(value3));
console.log(Boolean(value4));
// try this code in console window of dev tools of your browser

Summary

I know this post is looking some what complicated when you first look at it, but if read this post and try the code given here in your browser console then the things became clear.
Thank you for reading this post.

This post is based on what I learned about data types in JavaScript from javascript.info. It is basically a summary of that article. Visit it to get some deeper understanding.
Photo by Pankaj Patel on Unsplash

All Data Types in JavaScript

Nirbhay Parmar — Tue, 09 Nov 2021 19:40:09 +0000

If you are a beginner in web development then you must learn the JavaScript. It powers the interactions on each and every webpages. Basically it enables the websites to interact with the user in many ways like music player, alert, pop-ups or a video player or animations.

But to create such interactions on the websites developers need to write the code that take user inputs or call an api to get any data, but to do all this things we need some type of storage container that will store different types of data like numbers, strings, objects or boolean. So each programming languages defines some data types to sort the things out.

The JavaScript is a "dynamically typed" language, we not have to specify the data types at variable declaration unlike C/C++ or Java. Variables can store any data type in it. There are total 8 data types in JavaScript. These are as follows-

Number
String
BigInt
Boolean
Null
Undefined
Object
Symbol

Number

Numbers as the name suggest, it used to store numbers. Numbers can be integers, fractions, or Infinity/-Infinity and NaN(Not a Number).

Example-

let int = 123; // integer
let fraction = 1.2 // fraction
let infinity = Infinity // Infinity
let notANumber = 0/0 // NaN

String

String is the type of data in which, there is a bunch of alphanumeric characters and other symbols are together. In other words, it is a group of characters. Strings are to be surrounded by quotes, single or double.

Example-

let str = "abc123,./"; 
// string can have alphanumeric and other symbols
alert( `The back-tics can used to use variables in in between the string like str is- ${str}!` ); 
// The back-tics can used to use variables in in between the string like str is- abc123,./

BigInt

BigInt is made to accommodate really large numbers which are more than 2^53 -1 or less -(2^53 -1) due to its technical limitations. They are represented by appending 'n' after the number.

Example-

let bigint = 123456789123456789123456789n;

Boolean

Boolean is used to represent true or false values. Sometimes we only two values for our function or we have to check some condition that is true or false.
Boolean values can also come as a result of comparision.

Example-

let isTrueOrFalse = true;
let firstIsGreaterOrNot = 7 > 9;
console.log(firstIsGreaterOrNot); // false

Null

People often confused between null value and undefined value(non existing value). Null values represents "nothing", "empty" or "unknown".

Example-

let value = null;
console.log(value); // null

Undefined

They are different then Null data types. They represents that the variable is not assigned any value.

Example-

let name;
console.log(name); // undefined

Object

Objects are non primitive data type. We can defined key-value pairs. We can store any type values in one such object. We can store collections of data of different data types.

Example-

let obj = 
{
 name: Nirbhay,
 age: 19,
 isIndian: true
}

Symbol

Symbol are used to create unique identifiers for objects. They can used to generate unique identifiers.

No example for this because i have to read more on it.

This post is based on what I learned about data types in JavaScript from javascript.info. It is basically a summary of that article. Visit it to get some deeper understanding.

cover photo by Pankaj Patel on Unsplash

Basic Git commands for beginners

Nirbhay Parmar — Wed, 28 Jul 2021 15:50:55 +0000

Hello everyone!!

I am Nirbhay Parmar and I am a learning web developer. In this post I will be explaining some basic Git terminologies which is useful if you are entering into development field or want to contribute in any open source project on Github.

Now the first question arises from this introduction is that what is Git and why should I even care about it? Some of the beginners are also confused between Git and Github. So let me explain the Git first then I will explain about Github after it.

Git is a version controlling software. It is used by developers for maintaining different versions of any project they are working on. In an ongoing development process there are many developers working on a single project. They are working with one or two features of that project. So they need a system that can keep track of the changes and commits made on a project and if someone broke the code while experimenting on any feature then there should a way to reverse that faulty code. So Git does the same. Git keep track on files and code used in a project and give a way to make different versions of same projects called "branches" to experiment without worrying about breaking the code.

Now what is Github? Github is a place to store your code or your repository online to share it with your team or online. All open source projects are on Github and any who knows how to code can contribute to it. Another such service are Bitbucket and Gitlab.

Now some basic Git commands-

Git init - Git init is used to initiate a local git repository. It is first command whenever we want to use git.
Git status - It shows the status of the working tree. Git status is used to show the changes made, any newly created file that is not added to repo.
Git add - As the name suggests it used add new files and folders to git.
Git commit - It is used to save changes to the repository.
Git clone - It is used to setup a local git repo using any other remote git repo hosted on Github or Bitbucket.
Git push - It is used to push commits to your remote repo.
Git pull - It is used to fetch changes made by others to remote repo to your local repo.

So these are some common Git commands which we can use in your projects.

There are so many other commands which I will discuss in upcoming parts of this series.

My 30 days of Js journey: day 5

Nirbhay Parmar — Mon, 11 Jan 2021 19:57:50 +0000

day 5

Today I learnt how to set style.backgroundImage property to dynamically change the background image of the div tag.

At first, I thought that it is a fair easy and straight forward task, but as it goes on I have to change my perception about the problem. I have to append the URL of an image to the empty URL property of the background-image CSS property.

Here is the HTML code of that div that i want to change the background-image:

<div id="image">Hover over an image below to display here.</div>

    <img
      class="preview"
      alt="Styling with a Bandana"
      src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
      onmouseover="upDate(this)"
      onmouseout="unDo()"
    />

Here is my CSS code:

#image {
  width: 575px;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  background-image: url("");
  background-repeat: no-repeat;}

here is the javascript function to do the same:

function upDate(previewPic) {
  var Url = previewPic.src;
  document.getElementById("image").style.backgroundImage = "url(" + Url + ")";
  document.getElementById("image").innerHTML = previewPic.alt;
}

In HTML there is a div which has a text in it. While it has some background-color. In my function, I want to change the background-color to a background-image with an image URL. So I have to concatenate the image URL.

This was done as a part of my Coursera course on web design.

Starting a new challenge: #30daysofJs

Nirbhay Parmar — Thu, 07 Jan 2021 06:51:50 +0000

Why this challenge?

I started this challenge to get rid of my fear for JavaScript. I usually only watch tutorials and read dev.to posts. I just became the content consumer of those posts and YouTube tutorials. I watched loads of videos on JavaScript and feels that i knew JavaScript but in reality, when it comes to coding for practice, started forgetting the syntax and started questioning my self that if i am able to do this or not and after some time again fall into tutorial hell.

Solution to this problem

To get rid of so called "tutorial hell", I decided to start this challenge. This help me to become more accountable towards my goals because i have to post about my progress everyday on twitter and on here. This forces me to write some actual code and learn the syntax that I am always forgetting.

From today onwards i am starting to post my daily progress on my #30daysofJsChallange pic.twitter.com/WsTHL3DgzY
— Nirbhay Parmar (@NirbhayNP14) January 7, 2021

Please follow me here and on twitter to help me accountable and to cheer me up.