100DaysOfCode

Learn Full Stack in just 100 Days

100DaysOfCode

Day 1

Git and Github

Download and install git based on your system.
run the command git -v
- this command shows the current version and verifies that git is installed correctly.
Setup config file(One time only)
- git config --global user.name "Your username"
- git config --global user.email "Your github email"
  - if you want to change your username and email you should run git config --global --edit, which open vim editor and edit your config file and save your changes.
  - Must ensure that your config variables is set correctly
    - git config --global user.name
    - git config --global user.email

Initialize git repository

Step 1: To initialize your git repository you need to run git init command.
- This command place your project under revision control.
- Create a code file in your project named sum.js, etc
```
var a = 10;
var b = 20;
console.log(a+b); 
```
Lets check the status of your git repository
To check the status of your git repository run git status command
- git status will return the current state of your git repository
Step 2: Add files to staging area
- git add <filename> or
  - Add specific files to your staging area
- git add .
  - Add all files in your staging area
- Lets understand how staging area works, Look at the below image
Step 3 : Commit your changes
- Make sure that your changes are saved in your local git repository.
- git commit -m "Your changes"
  - This command will commit your changes and helps you to understand what has happened.
- git log will show the order of your commits(commit history) in your git repository.
  - Helps in understanding the state of the current branch by showing the commit that lead to this state.
Now lets make some changes in sum.js and create a new file learngithub.js
- run git status
  - sum.js shows modified
  - learngithub.js shows untracked
- Commit your changes
- Now, run git log
- Now you want to go back in the time where you have only sum.js(initial version)
  - git checkout
    - Used to switch branche. Also works with files and commits.
  - git checkout <hashCode>
  - learngithub.js is now deleted and sum.js is restored.
- Now, you want your learngithub.js and all the changes you done before back.
  - git checkout master

Git Branch

Some git branch commands
- git branch at which branch local repo is present.
- git branch <branchName> -> create a new branch
- git checkout -b <newBranch> -> create a new branch and checkout.
- Branch Concept
- git branch -a -> list all remote and local branches
- git branch -d <branchName> -> deletes a branch
Now, I create a new file named multiply.js in the multiply branch.
Branch Map is look like this:
- master -> dev -> multiply
Push all the changes to the multiply branch.
Note: master and dev branches have no idea about the changes in multiply branch.

Merge branches

Now, you want your eager branch code get sync with your master branch.
- git merge <branch_name>
  - Integrate the branch together. Combines the changes from one branch to another branch.
  - merge the changes in the staging branch to stable branch.

gitignore

Now, You have some confidential file and you can't share that file on github.
Use .gitignore
- Not track files/folder that mention in .gitignore file.
Let's create a .gitignore file and secure.txt file, check the status.
Mention files in .gitignore file

Github

Host your project.
On Github
- Create a repository.
- Connect your local repository to github repository.
- Push
Now you want to push all of your branches as well.
Your Github branch button looks like this

Day 2

Lets start HTML

What is HTML?
- Hyper Text Markup Lang (Everyone knows) -It is used to create web pages.
What is CSS?
- Cascading style sheets
  - Used to style the HTML pages
- Every website in the world use HTML and CSS.
- If you want to see a website without CSS, use web developer chrome extension and disable all styles.
90% developers use VSCode Text Editor for coding.
Download and install VSCode (Everyone knows, how to install)
- If you want to open VSCode in your folder,
  - open terminal in the folder
  - write code . and hit enter
In HTML, we use tags.
- Heading
- Simple text (paragraph)
- Image
- //// Line ////
- Website Links
- Table
- Login/Signup Form
HTML tag looks like
- <openTag> Content </closeTag>
- eg: <html> Something here </html>
Note: In Html, we also have self-closing tags.

HTML structure

<!DOCTYPE html>
<html>
     <head></head>
     <body></body>
</html>

means what type of document it is.
declaration is NOT case sensitive.
Head Tag : Inside Head tag, we provide information about the metadata, title, linking the script(js file) and style(css file).
Body Tag : Inside Body tag, we provide the main content like paragraph, heading etc.

Shortcut:

Create blank html file.
Write ! and hit tab/enter.
VSCode automatically write boiler plate of HTML code for you.

Headings are important.

<h1> to <h6>
<h1> defines the most important heading. <h6> defines the least important heading.
<p> : paragraph tag.
<br> : break tag (new line)

Day 3

HTML Glossary

HTML Reference

Tag	Description
<!--...-->	Defines a comment
<!DOCTYPE>	Defines the document type
<a>	Defines a hyperlink
<abbr>	Defines an abbreviation or an acronym
<acronym>	Not supported in HTML5. Use <abbr> instead. Defines an acronym
<address>	Defines contact information for the author/owner of a document
<applet>	Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet
<area>	Defines an area inside an image-map
<article>	Defines an article. New in HTML5
<aside>	Defines content aside from the page content. New in HTML5
<audio>	Defines sound content. New in HTML5
<b>	Defines bold text
<base>	Specifies the base URL/target for all relative URLs in a document
<basefont>	Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it. New in HTML5
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Use CSS instead. Defines big text
<blockquote>	Defines a section that is quoted from another source
<body>	Defines the document's body
<br>	Defines a single line break
<button>	Defines a clickable button
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript). New in HTML5
<caption>	Defines a table caption
<center>	Not supported in HTML5. Use CSS instead. Defines centered text
<cite>	Defines the title of a work
<code>	Defines a piece of computer code
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting
<data>	Links the given content with a machine-readable translation. New in HTML5
<datalist>	Specifies a list of pre-defined options for input controls. New in HTML5
<dd>	Defines a description/value of a term in a description list
<del>	Defines text that has been deleted from a document
<details>	Defines additional details that the user can view or hide. New in HTML5
<dfn>	Represents the defining instance of a term
<dialog>	Defines a dialog box or window. New in HTML5
<dir>	Not supported in HTML5. Use <ul> instead. Defines a directory list
<div>	Defines a section in a document
<dl>	Defines a description list
<dt>	Defines a term/name in a description list
<em>	Defines emphasized text
<embed>	Defines a container for an external (non-HTML) application. New in HTML5
<fieldset>	Groups related elements in a form
<figcaption>	Defines a caption for a <figure> element. New in HTML5
<figure>	Specifies self-contained content. New in HTML5
<font>	Not supported in HTML5. Use CSS instead. Defines font, color, and size for text
<footer>	Defines a footer for a document or section. New in HTML5
<form>	Defines an HTML form for user input
<frame>	Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset>	Not supported in HTML5. Defines a set of frames
<h1> to <h6>	Defines HTML headings
<head>	Defines information about the document
<header>	Defines a header for a document or section. New in HTML5
<hr>	Defines a thematic change in the content
<html>	Defines the root of an HTML document
<i>	Defines a part of text in an alternate voice or mood
<iframe>	Defines an inline frame
<img>	Defines an image
<input>	Defines an input control
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<label>	Defines a label for an <input> element
<legend>	Defines a caption for a <fieldset> element
<li>	Defines a list item
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<main>	Specifies the main content of a document. New in HTML5
<map>	Defines a client-side image-map
<mark>	Defines marked/highlighted text. New in HTML5
<meta>	Defines metadata about an HTML document
<meter>	Defines a scalar measurement within a known range (a gauge). New in HTML5
<nav>	Defines navigation links. New in HTML5
<noframes>	Not supported in HTML5. Defines an alternate content for users that do not support frames
<noscript>	Defines an alternate content for users that do not support client-side scripts
<object>	Defines an embedded object
<ol>	Defines an ordered list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<output>	Defines the result of a calculation. New in HTML5
<p>	Defines a paragraph
<param>	Defines a parameter for an object
<picture>	Defines a container for multiple image resources. New in HTML5
<pre>	Defines preformatted text
<progress>	Represents the progress of a task. New in HTML5
<q>	Defines a short quotation
<rp>	Defines what to show in browsers that do not support ruby annotations. New in HTML5
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography). New in HTML5
<ruby>	Defines a ruby annotation (for East Asian typography). New in HTML5
<s>	Defines text that is no longer correct
<samp>	Defines sample output from a computer program
<script>	Defines a client-side script
<section>	Defines a section in a document. New in HTML5
<select>	Defines a drop-down list
<small>	Defines smaller text
<source>	Defines multiple media resources for media elements (<video> and <audio>). New in HTML5
<span>	Defines a section in a document
<strike>	Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text
<strong>	Defines important text
<style>	Defines style information for a document
<sub>	Defines subscripted text
<summary>	Defines a visible heading for a <details> element. New in HTML5
<sup>	Defines superscripted text
<svg>	Defines a container for SVG graphics
<table>	Defines a table
<tbody>	Groups the body content in a table
<td>	Defines a cell in a table
<template>	Defines a template. New in HTML5
<textarea>	Defines a multiline input control (text area)
<tfoot>	Groups the footer content in a table
<th>	Defines a header cell in a table
<thead>	Groups the header content in a table
<time>	Defines a date/time. New in HTML5
<title>	Defines a title for the document
<tr>	Defines a row in a table
<track>	Defines text tracks for media elements (<video> and <audio>). New in HTML5
<tt>	Not supported in HTML5. Use CSS instead. Defines teletype text
<u>	Defines text that should be stylistically different from normal text
<ul>	Defines an unordered list
<var>	Defines a variable
<video>	Defines a video or movie. New in HTML5
<wbr>	Defines a possible line-break. New in HTML5

Audio element not supported by your browser

HTML Tags Ordered by Category

Basic HTML

Tag	Description
<!DOCTYPE>	Defines the document type
<html>	Defines an HTML document
<head>	Defines information about the document
<title>	Defines a title for the document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
<p>	Defines a paragraph
<br>	Inserts a single line break
<hr>	Defines a thematic change in the content
<!--...-->	Defines a comment

Formatting

Tag	Description
<acronym>	Not supported in HTML5. Use <abbr> instead. Defines an acronym
<abbr>	Defines an abbreviation or an acronym
<address>	Defines contact information for the author/owner of a document/brticle
<b>	Defines bold text
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Use CSS instead. Defines big text
<blockquote>	Defines a section that is quoted from another source
<center>	Not supported in HTML5. Use CSS instead. Defines centered text
<cite>	Defines the title of a work
<code>	Defines a piece of computer code
<del>	Defines text that has been deleted from a document
<dfn>	Represents the defining instance of a term
<em>	Defines emphasized text
<font>	Not supported in HTML5. Use CSS instead. Defines font, color, and size for text
<i>	Defines a part of text in an alternate voice or mood
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<pre>	Defines preformatted text
<progress>	Represents the progress of a task
<q>	Defines a short quotation
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<s>	Defines text that is no longer correct
<samp>	Defines sample output from a computer program
<small>	Defines smaller text
<strike>	Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<template>	Defines a template
<time>	Defines a date/time
<tt>	Not supported in HTML5. Use CSS instead. Defines teletype text
<u>	Defines text that should be stylistically different from normal text
<var>	Defines a variable
<wbr>	Defines a possible line-break

Forms and Input

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<button>	Defines a clickable button
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<datalist>	Specifies a list of pre-defined options for input controls
<output>	Defines the result of a calculation

Frames

Tag	Description
<frame>	Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset>	Not supported in HTML5. Defines a set of frames
<noframes>	Not supported in HTML5. Defines an alternate content for users that do not support frames
<iframe>	Defines an inline frame

Images

Tag	Description
<img>	Defines an image
<map>	Defines a client-side image-map
<area>	Defines an area inside an image-map
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content
<picture>	Defines a container for multiple image resources
<svg>	Defines a container for SVG graphics

Audio / Video

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements (<video>, <audio> and <picture>)
<track>	Defines text tracks for media elements (<video> and <audio>)
<video>	Defines a video or movie

Links

Tag	Description
<a>	Defines a hyperlink
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav>	Defines navigation links

Lists

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dir>	Not supported in HTML5. Use <ul> instead. Defines a directory list
<dl>	Defines a description list
<dt>	Defines a term/name in a description list
<dd>	Defines a description of a term/name in a description list

Tables

Tag	Description
<table>	Defines a table
<caption>	Defines a table caption
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting

Styles and Semantics

Tag	Description
<style>	Defines style information for a document
<div>	Defines a section in a document
<span>	Defines a section in a document
<header>	Defines a header for a document or section
<footer>	Defines a footer for a document or section
<main>	Specifies the main content of a document
<section>	Defines a section in a document
<article>	Defines an article
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<summary>	Defines a visible heading for a <details> element
<data>	Links the given content with a machine-readable translation

Meta Info

Tag	Description
<head>	Defines information about the document
<meta>	Defines metadata about an HTML document
<base>	Specifies the base URL/target for all relative URLs in a document
<basefont>	Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document

Programming

Tag	Description
<script>	Defines a client-side script
<noscript>	Defines an alternate content for users that do not support client-side scripts
<applet>	Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet
<embed>	Defines a container for an external (non-HTML) application
<object>	Defines an embedded object
<param>	Defines a parameter for an object

Day 4

Let's start CSS.

CSS means Cascading Style Sheets.
- HTML create structure for our website.
- CSS helps us to make boring webpages to good looking webpages.
- You can build your website without CSS, but it's impossible to create website wuthout HTML.
Let's look some popular websites without CSS.
- Netflix
  - With CSS
  - Without CSS
- Google
  - With CSS
  - Without CSS
- YouTube
  - With CSS
  - Without CSS
- Amazon
  - With CSS
  - Without CSS
- I use Web Developer Chrome Extension to disable all styles.
- Now, you understand the importance of CSS.
- We only spend 5% of our time to write HTML structure and 95% to write CSS.

Versioning of CSS

1996 : CSS1
1998 : CSS2
1998 : CSS3 (Current Version)
- We will never get CSS4, because CSS3 updated time to time.
- Module based.

Different ways to apply CSS

First create a index.html file.

<!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>Diffrernt ways to apply CSS</title>
</head>
<body>
   
</body>
</html>

1st way (Inline CSS)
Inside body tag, write some HTML code.
Use style attribute

<body>
    <h1 style="color: orange;">I am Ashwani</h1>
</body>

2nd way (Internal CSS)
Use style tag, in the head tag.

<head>
    ...
    <title>Diffrernt ways to apply CSS</title>
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>

3rd way (External CSS)
Create new CSS file, write css code in it and link it with HTML in Head tag.

<head>
    ...
    <link rel="stylesheet" href="style.css">
    <title>Diffrernt ways to apply CSS</title>
</head>

Try Out: Apply all different types of CSS and see the change.

Note

We'll use External CSS.
Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority.

CSS Fonts

<body>
    <h1>I am Ashwani</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam rerum et nihil consectetur laborum blanditiis,
        consequatur, saepe ratione, nisi id eligendi dignissimos. Nesciunt, corrupti numquam provident quas beatae
        deserunt facilis explicabo quia ducimus tenetur nostrum maxime dolores deleniti dolore ad vel recusandae
        molestias atque dolorum repudiandae sequi ea, saepe exercitationem animi. Qui, aperiam accusamus aut expedita
        neque placeat corrupti illo tempore eius porro recusandae laudantium voluptas at sequi excepturi numquam illum
        ut eligendi rerum accusantium! Vitae rem, ipsa sint modi soluta, harum cumque magni sunt atque inventore autem?
        Autem quia ad illum natus, magnam, accusantium nemo non minus error placeat voluptas dolorem cum suscipit
        perferendis? Architecto dolorem dolor fuga voluptas facilis labore quaerat ab veritatis enim at consequatur
        maiores nihil quia vel, velit assumenda harum placeat odio commodi totam nobis beatae blanditiis. Consectetur
        molestias laborum soluta ut possimus delectus asperiores quod hic a distinctio voluptates qui non exercitationem
        repellat quisquam, corporis optio tempore nulla? Doloribus error magni, dignissimos autem nulla quas mollitia
        ratione cum ad hic itaque sequi est fugiat porro et qui sed doloremque. Aperiam eum distinctio fuga ea unde
        voluptas veritatis pariatur odit totam natus voluptatem, esse quisquam aliquid deserunt laudantium est sequi
        nostrum nulla quasi non dicta.</p>
</body>

By Default, browser font is Serif font.
In Modern Websites, we use Sans-Serif font.
Difference between Serif and Sans-serif font.
We want to change the font from serif to sans-serif.

In style.css

body{
  font-family: Arial, Helvetica, sans-serif;
  /* If Arial is not present, than Helvetica, than sans-serif */
  }

Many different types of fonts are available in our Operating System.
But, some fonts are available only in MacOS, some in Windows.
To Tackle this problem, we use google fonts.
After selecting your font, you get something like this.

1st way (In HTML).

<head>
  ...
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;900&display=swap" rel="stylesheet">
  <title>Diffrernt ways to apply CSS</title>
</head>

2nd way (In CSS).
Paste @import in the 1st line.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;900&display=swap');

You can use any way.
Changes in style.css

  body{
    font-family: 'Roboto', sans-serif;
    }

We select 4 different weight types : 300, 400, 500, 900.
Now, add font-weight and see the difference.

body{
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}

CSS Colors

We have 16777216 possible colors.
RGB
- rgb(232, 155, 0);
- R stands for Red (232).
- G stands for Green (155).
- B stands for Blue (0).
- Value from 0 to 255.
Hex Code
- #ff34d8
- ff for Red.
- 34 for Green.
- d8 for Blue.
- Value from 0 to f.
  - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

h1{
    background-color: #ff0000;
    color: rgb(255,255,255);
}

CSS Selectors

index.html file looks like

<body>
  <div>
      <h1>Main Heading</h1>
  </div>

  <div>
      <h2>Sub Heading</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis soluta enim ipsum quaerat iusto modi quasi
          natus nam sunt consequatur, expedita pariatur voluptatum dolorem!</p>
  </div>
</body>

Now, I want to change the 2nd div.
If we just use div tag, than the styles apply to all div.

div{
  color: blue;
  background-color: #cdcdcd;
  }

The above selector is called Element Selector.

To tackle above problem, we use id and class selector.
Now, our HTML looks like this.

  <body>
      <div>
          <h1 id="main-heading">Main Heading</h1>
      </div>

      <div>
          <h2 class="sub-heading">Sub Heading</h2>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis soluta enim ipsum quaerat iusto modi quasi
              natus nam sunt consequatur, expedita pariatur voluptatum dolorem!</p>
      </div>
  </body>

style.css

  #main-heading{
      background-color: #cdcdcd;
      /* id selector */
  }

  .sub-heading{
      /* class selector */
      background-color: #efefef;
  }

  p{
      /* element selector */
      background-color: #6e6767;
  }

You can use same class selector in many times, but you have to use id selector only one time for one element/tag.
Most developers use class selector very frequently.
Utility class
Many times we already know, how our webpage will look.
Like we already know if h2 text is red and p text is in green.

We define, only one property in utility class.

.text-red{
    color: rgb(249, 95, 95);
}

.text-green{
    color: rgb(80, 181, 80);
}

.bg-color{
    background-color: beige;
}

Our HTML

<div>
        <h2 class="sub-heading text-red">Sub Heading</h2>
        <p class="text-green bg-color">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis soluta enim ipsum quaerat iusto modi quasi
            natus nam sunt consequatur, expedita pariatur voluptatum dolorem!</p>
    </div>

We can give more than one class to our tag, like we done in h2 and p tag.

Day5

Some More Selectors

Here is my HTML

<body>
<header>
  <p>Inside header</p>
  <h1 class="main-logo">main logo</h1>
  <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
  </ul>
  <p>Inside header</p>
</header>

<main>
  <h2>Main Content of webpage</h2>
  <section class="my-articles">
      <h2>Articles Section</h2>
      <article>
          <h2>Article Heading</h2>
          <p>Lorem ipsum dolor sit amet. </p>
      </article>
      <article>
          <h2>Article Heading</h2>
          <p>Lorem ipsum dolor sit amet. </p>
      </article>
  </section>
</main>
</body>

Universal Selector

Now, you want to change the entire text color, you can use universal selector .
```
  *{
  color: royalblue;
  }
```
- We not use universal selector like this and not so much, we use this to reset our CSS.
Here is my CSS

    header{
    background-color: #ffebeb;
}

/* Select section which has my-articles class */
section.my-articles{
    background-color: #ffefef;
}

/* Select all p tag inside header tag */
/* Descendent Selector */
/* We use mostly */
header p{
    color: red;
}

/* change the color of all links inside list */
li a{
    color: rgb(0, 70, 0);
}

/* Selects all h2 inside section tag which has my-articles class */
/* section.my-articles h2{
    color: purple;
} */

/* But, I want to select only Direct child (h2) of section  */
section.my-articles > h2 {
  color: purple;
}

/* Selects direct p who come after h2 */
h2+p{
    color: rosybrown;
}

Attribute Selector

Here is my HTML

 <body>
   <h2>Links</h2>
   <a href="https://google.com">Google</a><br>
   <a href="https://amazon.com">Amazon</a><br>
   <a href="https://amazon.in">Amazon India</a><br>
   <a href="youtube.com">YouTube</a><br>

   <h2>Form</h2>
   <form>
     <label for="fname">First Name:</label><br>
     <input type="text" id="fname"><br>
     <label for="lname">Last Name:</label><br>
     <input type="text" id="lname"><br>
     <label for="pass">Password:</label><br>
     <input type="password" id="pass"><br><br>
     <input type="button" value="Submit">
   </form>
 </body>

href, type etc are attribute of their respective elements.

CSS file

input[type = "text"]{
    color: red;
}

input[type="password"]{
    background-color: antiquewhite;
}

/* Now, I want to select link that havve amazon */

a[href *= "amazon"]{
    color: brown;
}

/* Now, I want to Select those link that start with https */
a[href ^= "https"]{
    color: bisque;
}

/* Now, I want to Select those a that ends with .in */
a[href $= ".in"]{
    color: rebeccapurple;
}

Day 6

CSS Specificity

class selector have more prefrence than elements/tags selector, because classes are more specific than HTML elements.
ID selector have more prefrence than class selector.

Inline style attribute have more prefrence than ID selector.

  Inline style attribute > ID selector > class selector > element selector

Here is my HTML

<body>
 <h1 class="myClass" id="myId" style="color: brown;" >Hello</h1>
</body>

Here is my CSS.

    h1{
      color: green;
    }

  .myClass{
      color: red;

    }

    #myId{
      color : blue;
    }

If you want to apply ID (forcefully), you can do this.
```
#myId{
  color : blue !important;
}
```
- But, its not a good practice.

HTML

<body>
  <h1 class="myClass heading">Hello</h1>
</body>

CSS
```
  h1{
    color: green;
}

.myClass{
    color: red;

}

h1.heading{
    color: magenta;
}
```
- Now, we have two classes on an element, class write after than other class have more specificity.
- Eg : heading has more specificity than myClass, if myClass comes after heading class than text have red color.

Here is my updated CSS.

  h1.heading{
      color: magenta;
  }
  .myClass{
      color: red;
  }

h1.heading has more specifity.

How to calculate specificity

Look this picture carefully.
Here is my HTML.

<body>
<div id="container">
  <ul class="my-style">
      <li class="fav">The Big Short</li>
      <li>Margin Call</li>
      <li>Wolf of wallstreet</li>
      <li>Wall Street : Money never sleeps</li>
  </ul>
</div>
</body>

CSS

div#container ul.my-style li{
  color: blue;
  background: bisque;
  }

    /* Inline > ID > Class > Element */
    /* 0, 1, 1, 3 */
    /* 0 -> Inline
    1 -> ID 
    1 -> Class
    3 -> Element 
    for easy understanding, we say above style have 113 specificity */
li.fav{
        color: bisque;
        background: blue;
    }

    /* 0, 0, 1, 1  --> 11 */

li.fav style not apply, because it has low specificity than above style.

Day 7

CSS Border

Here is my HTML (himHTML shortform)

  <body>
  <div class="header">
    <ul>
      <li class="home">Home</li>
      <li>About</li>
    </ul>
  </div>

  <h2>Our Heading</h2>

  <img src="images/amazon.png" alt="" srcset="" width="260px" height="200px">

  <p>This <span>is</span> paragraph</p>
</body>

Now, I want to add border arround my HTML elements.
I can achieve this via border property of CSS.

Here is my CSS (himCSS shortform).

h2, img{
    border: 5px solid red;
     /* 5px-> width of border, border style -> solid, border color -> red */
     /* This is shorthand*/
}

We can also use this.

h2 takes full width, because h2 is a block level element.

  border-width: 5px;
  border-style: solid;
  border-color: red;

Now, I want to apply border only on top and bottom of HTML tag.

  border-bottom: 5px solid red;
  border-top: 5px solid red;

Our border corners are very sharp, we can round that.

  border: 5px solid red;
  border-radius: 5px;

CSS Box-Model

Padding

As you saw above, there is no space between Our content(h2) and border.

We can add space with the help of padding property.

  h2{
    border: 5px solid red;
    padding-left: 40px;
    padding-bottom: 40px;
    padding-right: 40px;
    padding-top: 40px;
  }

The shorthand, Now, you want equal padding in every side
```
 padding: 40px;
```
- add 20px in top, bottom and 40px in left,right
```
padding: 20px 40px;
```
- Different padding in every sides.
- Clockwise Direction -> Top, Right, Bottom, Left
```
padding: 10px 20px 30px 40px;
```

Margin

Used to create space around elements, outside of any defined borders.
Everything same as padding, all shorthands etc.
Now, As you see the output, I want to reduce the width.

width: 500px;

Now, I want my element in center.
```
margin: 20px auto;
```

Our Background start from border edge.

  border: 5px dotted red;
  background: lightblue;

Day 8

Margin Collapsing

himHTML

<body>
  <div class="box1">
    <h2>this is box 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt earum provident debitis eaque accusamus illum nihil nam voluptatum! Praesentium, tenetur!</p>
    
  </div>
  <div class="box2">
    <h2>this is box 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt earum provident debitis eaque accusamus illum nihil nam voluptatum! Praesentium, tenetur!</p>
  </div>
</body>

himCSS

.box1, .box2{
  border: 2px solid black;
  padding: 10px;
}

.box1{
    margin-bottom: 40px;
}

.box2{
    margin-top: 50px;
}

What you think the total margin between box1 and box2?
It's 50px, not 90px(40 + 50).

Inline and Block level Elements

There are 3 types of elements
- Block elements
  - A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
  - If you give custom width and height, element take it.
  - Some block elements are
    - div, heading(1-6), p, ul, li, form, article, aside, main, nav etc
    - Complete List
- Inline elements
  - An inline element does not start on a new line and only takes up as much width as necessary.
  - If you provide custom height and width, nothing change.
  - Only left and right margins are available, if you provide other margin, element ignore that.
  - If you provide padding for top and bottom, everything messed up, so, use only left and right padding.
  - img tag is exception, you can use width, height, margin, padding.
  - Some Inline elements are
    - a, img, input, label, span, textarea
    - Complete list
- Inline Block elements
  - As you saw above, we can't use full potential of margin, padding, width etc in inline elements.
  - To tackle this problem, we set display property as inline-block, this gives us full controls over the element.

Display

If you want to convert a block element to inline element, you can use display property.
From Block to inline
```
display: inline;
```
From Inline to block
```
display: block;
```

Box-Sizing

himHTML

<body>
  <hr>
  <div class="box1">
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque praesentium neque, dignissimos illum voluptas totam nam cupiditate debitis architecto eius fugiat perspiciatis quia cumque exercitationem nesciunt est dicta. Rerum consequatur dicta voluptatum, vero molestias sit eveniet omnis necessitatibus magnam harum doloribus id laborum deserunt tenetur sequi, fugit autem exercitationem veritatis! Dolore aliquam animi hic, sapiente voluptate reiciendis doloribus iure eum, eveniet necessitatibus accusantium ad, voluptates nemo suscipit exercitationem accusamus sint atque? Maiores natus voluptatibus dolor quaerat vero odio saepe perspiciatis hic. Dolorem quasi et pariatur maxime illum voluptates natus, harum magni ea! Maxime atque magnam cumque tenetur illo suscipit aperiam.</p>
    
    </div>
</body>

himCSS
```
hr{
  border: 0.5px dashed black;
  width: 500px;
  margin-left: 0px;
}

.box1{
    width: 500px;
    border: 10px solid red;
    background: lightsalmon;
    padding: 50px;
}
```
- The output of above code, hr represents 500px width, and the box1 size is also 500px but due to border and padding it extends from 500px
- We have to fix this issue.
- We can use box-sizing property
  - By default it is content-box.
```
 box-sizing: border-box;
```
- The output is

CSS Reset

Use Box-Sizing's HTML, as you see there are some default margin, padding are present in your tags.
We don't want default browser styling.
```
  *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
```
- We also reset box-sizing to border-box, so we can't mess up when writing CSS.
It's good practice to reset CSS, before start writing CSS.

CSS Inheritance

himHTML

<body>
  <a href="#">My Store</a>
  <h1>Welcome to My Website</h1>
  <div class="container1">
    <h2>My Blog 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, fuga?</p>
  </div>
  <div class="container2">
    <h2>My Blog 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, fuga?</p>
  </div>
</body>

As you can see, all text is black color and now, i want to change.
So, I just provide body{color: orange;}, and all the tags got orange color.
All tags, inherites property color : orange.
If you want, to change the specific tag style, you can easily achieve that.
But, the a tag doesn't inherites color : orange, why..?
Because, The default Style by Browser.
You can see browser style in computed tab.
If want to change a tag style, you can done that with element selector.

himCSS.

body{
  color: orange;
}

.container1{
    color: red;
}

.container2{
    color: hotpink;
}

a{
    color: burlywood;
    text-decoration: none;
}

Day 9

Text Align

himHTML

<body>
  <a href="#">My Store</a>
  <h1>Welcome to My Website</h1>
</body>

Now, I want to put the h1 text in the middle of screen.
As you know h1 is a block element, that takes width as much as possible.
To achieve this, I use text-align property.
Now, I want to do the same for a tag also that is inline element.
If I gave text-align property nothing changes.

himCSS

h1{
  background: lightgray;
  text-align: center;
}

a{
    text-align: center;
    display: inline-block;
    width: 500px;
    text-align: center;
    background: lightcoral;
}

Font Weight and Font Size

Sometimes you have to show something on bold and sometimes thin(depends on requirement).
We use font-weight property to add boldness/thin in our font.
In many fonts 400 is normal but not for all(It depends on font to font).

himCSS

h1{
  font-weight: 900;
  font-style: italic;
  font-size: 20px;
}

font-style for different style of font like italic, normal etc.
If you want to change the size of font, you can use font-size property.

Text Decoration

As you saw earlier, in our a tag there is a underline present.
If you don't want that line, you can use text-decoration : none.
But if we you want to add a line than you can use text-decoration property.
```
 text-decoration: underline solid red;
```
We can use different line types like : underline, overline, line-through and solid/dotted/wavy etc

Line height, word spacing and letter spacing

If you want to change space between two words, you can use word-spacing property.
If you want to change space between two letters, you can use letter-spacing property.

If you want to change space between two lines, you can use line-height property.

  p{
      line-height: 35px;
      word-spacing: 10px;
      letter-spacing: 5px;
  }

Pseudo classes

Links

We use pseudo classes to define special state of an element.
What is state means?

himHTML

<body>
  <a href="https://twitter.com/eagerashwani/">My Twitter</a>
  <a href="https://github.com/eagerashwani/100DaysOfCode">My Github</a>
</body>

You can see both links are blue in color.
Lets click on any link suppose github. After visiting the github, back to himHTML page.
Now, your Github color is changed from blue to purple.
How browser knows that the particular link is visited? Browser store this information in cache.
This is a visited state.
Hover State : Till My mouse points on the link.
Now, I want to style my link, when i hover over it.
Some other pseudo classes : link, active.

himCSS

a:link{
  color: orange;
}

a:visited{
    color: red;
}

a:hover{
    color: green;
}

a:active{
    color: blueviolet;
}

Note : Please follow the above order(recommended).

Input fields

-himHTML

 <body>
   <form>
     <input type="email" name="" id="" placeholder="Enter email" required> <br><br>
     <input type="password" name="" id="" placeholder="Enter password"> <br> <br>
     <input type="submit" value="Sign in">
   </form>
 </body>

himCSS

input:focus{
  color: red;
  outline: none;
  border: 2px solid gold;
  padding: 5px;
}

input:required{
    color: green;
}

We mainly use focus and required pseudo classes in input fields.
For more visit

First child and first of type

To understand this, first you have to know about parent-child relation.
- Which element is parent and who there child, vice-versa.

himHTML

<body>
  <header>
    <p>I am inside header first child</p>
    <p>I am inside header second child</p>
    <p>I am inside header third child</p>
    <h4>I am last child of header</h4>
  </header>

  <p>I am body first para </p>
  <p>I am body second para </p>
  
  <div class="container">
    <p>I am inside container first</p>
    <p>I am inside container second</p>
    <p>I am inside container third</p>
  </div>
</body>

himCSS

/* Is <p> is the first child of its parent */
  p:first-child{
      color: red;
  }

himCSS

/* Is <p> is the first child of its parent */
  p:first-child{
      color: red;
  }

himCSS
```
/* Is <p> is the first child of its parent */
  p:first-child{
      color: red;
  }
```
- Apply red color to those p tag who is the first child of its parent like header and div tag in above example.
Now check first-of-type
himCSS
```
p:first-of-type{
  color: brown;
}
```
- Apply brown color to the first appeared child of parent.
- Or you can say, Who is the first p tag of parent.
- In the above html, I am body first para is the first appeared child of body tag.
  - I know, I don't write it well, Hope you understand.

Last child and last of type

same as first child and first of type except they change last instead of first.
To understand easily
- last/first-of-type : start with parent like header tag first/last p tag
- first/last-child : start with child like Is this p tag is the first/last element of its parent.
himCSS
```
  p:last-child{
      color: green;
  }
```
himCSS
```
p:last-of-type{
  color: red;
}
```

Day 10

CSS Units

There are 2 types of CSS units
- Absolute units --> They are fixed units(never changed)
- Relative units --> They change according to view.

Absolute unit

px is a absolute unit.
- In Modern websites, we use Relative units.
- By default p font size is 16px.
inch
- 1 inch = 96px.
- ```
  font-size: 1in;
```
cm
- 1in = 2.54cm
- ```
  font-size: 2.54cm;
```
points
- 1px = 0.75pt.
- 16px = 12pt.
- ```
  font-size: 12pt;
```

Relative units

%

Always looks for the parent size.
himHTML

  <div>
   <p>Hello there</p>
 </div>

himCSS

 div {
   font-size: 10px;
 }
 p {
   font-size: 100%;
 }

p takes 100% of 10px.
We use % mostly to give width of an element and sometimes margins.

   div {
 font-size: 20px;
 border: 2px solid red;
 /* half the width */
 width: 50%;
 }
 p {
   font-size: 100%;
   width: 50%;
   /* to center use auto */
   margin: 10px auto;
   background-color: aqua;
   border: 1px solid green;
 }

rem

rem takes the root element size, 1rem = 16px.
By default, root element is html tag.
himHtml

 <div class="box1">
   <p class="text-content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse dolores sequi aspernatur
     aperiam, consequatur nisi ea repellat perspiciatis itaque eius non repellendus, distinctio ut exercitationem.</p>
   <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, nemo.</p>
 </div>

himCSS

html{
font-size: 10px;
/* most developer prefer 62.5% it is also 10px */
/* most user changes there browser fontsize, px not work in that case */
/* below font-size override the above font-size */
font-size: 62.5%;
}

.box1{
    font-size: 2rem;
}

.text-content{
    font-size: 3rem;
    margin: .5rem;
    padding: 4.5rem;
    border: 1rem solid red;
}

em

himHTML

<body>
  <h1>this is main heading</h1>
  <div class="box1">
    <h1>inside box 1 heading</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil vitae non voluptatum maxime. Placeat itaque distinctio eligendi nihil, autem dolorem!</p>
  </div>
</body>

himCSS

/* font-size with em work differently than other properties */
/* em looks for the parent like 1st h1 parent is body, and 2nd h1 parent is box1 */
h1{
    font-size: 2em;
    /* first it looks for own element font-size*/
    /* than use this default size, and apply em accordingly */
    border: 2em solid black;
}

.box1{
    font-size: 20px;
}

rem vs em vs px
- Which unit is best for which element. It's my personal preference.
- for font-size use rem (It help make responsive website)
- for margin and padding use em.

Viewport Units

What is viewport?
- Area that is visible is viewport, for height vh and width vw
Many people confuse between viewport(vw) and %.
- % care about their parent
- vw care about the viewport

himCSS

.box1{
  border: 4px solid green;
  width: 50%;
}
h1{
    border: 1px solid red;
    /* width: 50%; */
    width: 70vw;
}

we not use vw like this

vh

himHTML

<div class="box1">
</div>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ab ad vero voluptatum incidunt harum, sed
  necessitatibus, facere debitis sit cumque temporibus, quidem ullam distinctio id officiis pariatur. Explicabo
  suscipit eos reprehenderit deleniti. Quidem exercitationem velit fugiat, animi voluptatum molestias! Nobis illo
  mollitia tempore reprehenderit ullam impedit itaque veritatis suscipit reiciendis ratione at, molestias beatae.
  Deleniti explicabo soluta itaque sapiente, aut eum id perferendis quos sit aperiam nobis, quidem dicta, ut enim!
  Consectetur, quibusdam. Hic officiis quo perferendis assumenda obcaecati numquam incidunt autem dignissimos sed
  libero, culpa eveniet, aliquid ipsum laboriosam? Officia illum voluptas libero sed consequuntur laboriosam ad,
  perspiciatis facere soluta tempore. Placeat aut, quisquam ut totam exercitationem adipisci, cupiditate ipsum, vel
  blanditiis consequuntur eos molestiae? Corrupti harum odit aliquam ipsum voluptate ex tempora praesentium beatae
  ratione asperiores nihil labore, rem alias impedit, cupiditate molestias repellendus libero. Quibusdam sequi
  voluptatibus non necessitatibus, dolore explicabo tenetur eligendi, doloribus tempora possimus modi a unde culpa
  aliquid, blanditiis error illo harum. Minima, nemo. Voluptate quasi explicabo ad nisi, est sint reiciendis quam iure
  culpa unde facere illo modi, alias odio maxime quidem. Eveniet quos porro atque rerum sit maiores odit nam placeat
  aut repudiandae earum error reiciendis nulla vero voluptates quidem voluptatibus soluta rem sed, culpa eligendi?
  Commodi, ex dolor? Minima nostrum iusto, omnis nemo dolore iure odio enim, temporibus veniam inventore, voluptatem
  tenetur! Incidunt facere modi, vitae alias rerum veritatis accusamus unde, aliquid, eius quaerat laborum ipsa illo
  atque dolore fugiat sunt iusto natus ducimus eum harum delectus! A voluptas dolorem, praesentium repudiandae
  adipisci veniam quasi officiis ipsam, hic dicta tempora numquam vel aspernatur dolores recusandae, nobis doloribus
  suscipit ipsa quos! Sequi optio labore eveniet culpa magni doloribus est repudiandae eum, modi nam architecto
  possimus ipsum impedit ea voluptatum minima similique dignissimos eaque ipsam. Doloremque, eos aliquam sequi nihil
  ipsum consequuntur laborum incidunt iure necessitatibus, ab minus obcaecati odit enim deleniti expedita veritatis
  autem laudantium sit. Quaerat quasi laudantium mollitia illo commodi praesentium magni! Placeat, fugit consequatur!
  Distinctio perspiciatis unde explicabo sapiente rerum numquam similique ex, tenetur maiores tempore ipsum sint
  voluptates nostrum illo vero. Expedita eos odio magni placeat molestiae aut fuga quam repudiandae eum suscipit. Eius
  nisi unde numquam rem alias quibusdam quo sed ipsa itaque veritatis quam, quidem saepe a dignissimos ipsum veniam.
  Voluptatibus molestiae sunt debitis, ipsa eaque voluptatum commodi nobis placeat consequuntur eos ipsam delectus
  aspernatur modi enim at perferendis eligendi. Incidunt soluta error aut debitis inventore dolore officiis
  consequuntur, obcaecati sint voluptas laudantium ratione aperiam, fuga reiciendis eum nemo sunt minima ipsum iure
  totam. Ex inventore ullam amet, dignissimos quo sapiente sunt earum nobis veniam odio iusto explicabo culpa cumque,
  ad repudiandae dolorum eos mollitia? Veniam fugiat odio ratione nulla minus earum dolorem iure quibusdam corporis
  minima, delectus, saepe, cupiditate animi corrupti dolore natus doloremque eum! Tempora illum aliquam voluptatibus
  quos pariatur corporis quasi dolore nemo dicta possimus error, quia tenetur explicabo in officiis officia ad
  maiores, blanditiis praesentium dignissimos voluptatum facere quae natus consequatur. Dolore sunt cupiditate
  perspiciatis quia debitis vitae, cumque quae sequi.</p>

-himCSS

.box1{
  background-color: blanchedalmond;
  /* height: 100px; */
  height: 100vh;
}

p is visible when we start scrolling, used in many websites.

vmin and vmax(confusing and not used very much)

Media Query

CSS Media Queries allows you to create responsive websites across all the screen sizes.
Always put your media query code in the end of css file.

himHtml

  <h1>This is heading</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe, aut.</p>

himCSS

html{
  font-size: 10px;
}
body{
  background-color: lightblue;
}

h1{
    font-size: 10rem;
}

p{
    font-size: 5rem;
}

To use media query @media ()

@media (max-width: 500px) {
  html {
    font-size: 5px;
  }
  body {
    background-color: lightcoral;
  }
}

Now I want 501 to 768px lightseagreen color

@media (min-width: 501px) and (max-width: 768px){
  body{
      background-color: lightseagreen;
  }
}

Now I want beyond 1200px different color

@media (min-width: 1200px){
  body{
      background-color: maroon;
  }
}

Day 11

Flexbox

himHTML

  <div class="box-wrapper">
    <div class="box box-1">
      <h1>Box 1</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad optio, temporibus eum nostrum placeat quae pariatur
        illum eligendi dolorem adipisci.</p>
    </div>
    <div class="box box-2">
      <h1>Box 2</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad optio, temporibus eum nostrum placeat quae pariatur
        illum eligendi dolorem adipisci.</p>
    </div>
    <div class="box box-3">
      <h1>Box 3</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad optio, temporibus eum nostrum placeat quae pariatur
        illum eligendi dolorem adipisci.</p>
    </div>
    <div class="box box-4">
      <h1>Box 4</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad optio, temporibus eum nostrum placeat quae pariatur
        illum eligendi dolorem adipisci.</p>
    </div>
    <div class="box box-5">
      <h1>Box 5</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad optio, temporibus eum nostrum placeat quae pariatur
        illum eligendi dolorem adipisci.</p>
    </div>
  </div>

himCSS

  .box-wrapper{
    border: 4px solid black;
  }

  .box{
      border: 2px solid gray;
  }

  .box-1{
      background-color: lightblue;
  }

  .box-2{
      background-color: lightseagreen
  }

  .box-3{
      background-color: lightcoral;
  }

  .box-4{
      background-color: lightslategrey;
  }

  .box-5{
      background-color: lightsteelblue;
  }

There are two things in flexbox,
- flex container eg: (.box-wrapper)
- flex items eg: (.box-1, .box-2, .box-3, .box-4, .box-5)
add display:flex in .box-wrapper
- It align the items from left to right
flexbox takes width according to their requirement
- If we remove p tag, than items takes width as their requirement but flext container takes all width.

Flexbox Architecture

Main Axis(Left to right) and Cross Axis(Top to bottom) are very important.

flex-direction

This property allows us to set the direction and orientation in which our flex-items should be distributed inside the flex-container.
It's flex container property.
By default, flex-direction is row, main axis from left to right(-----> , main axis)
flex-direction: row-reverse changes the main axis from right to left(<---- , Main axis)
flex-direction: column main axis from top to bottom
flex-direction: column-reverse main axis from bottom to top

flex-wrap

As you know, flex items takes width according to their requirement.
It's flex container property.
By defualt, flex-wrap: nowrap.
Suppose I want to give width to my all box should be 500px width. so in .box, I provide width:500px
But still nothing changes. To apply 500px width to each item, we have to give flex-wrap: wrap to flex-container
Than it takes 500px width for each item.
In our example, box 1, box 2 and box 3 in first row and in second row box 4 and box 5
If there is less width available for an item than it go to next row.
flex-wrap: wrap-reverse changes the cross axis from bottom to top.
box 4, box 5 in 1st row
box 1, box 2, box 3 in second row
If we give height to the flex container than flex items takes all the height.
If also give individual height to every box.

justify-content

This property arranges flex-items along the MAIN AXIS inside the flex-container.
Its flex-container property.
By default, justify-content: flex-start.

align-items

By default, align-items: stretch
Its flex container property
This property distributes Flex-items along the Cross Axis.

align-content

Its flex container property.
When we have more than one row, like in flex-wrap, we use align-content.

It work across Cross axis.

.box-wrapper{
    border: 4px solid black;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    height: 600px;
    
}

.box{
    border: 2px solid gray;
    width: 400px;
}

Output is looks like this:

flex-flow

It's flex-container property.
Its a shorthand of flex-direction and flex-wrap properties.
flex-flow: row wrap-reverse

Align self

Its flex items property.
It positioned the selected item across Cross Axis.
It override the align-items property of flex container.

align-self values : flex-start, flex-end, center, baseline, stretch, auto.

.box-1{
  background-color: lightblue;
  align-self: flex-start;
}

.box-2{
    background-color: lightseagreen;
    align-self: center;
}

.box-3{
    background-color: lightcoral;
    align-self: flex-end;
}

order

Its flex items property.
By default, box1, box2 and box3 are ordered
But you want box2, box1 and box3 or any other order.
By default, order is 0.
low order comes at start and higher order comes at end.

.box-1{
   background-color: lightblue;
   order: 1;
}

.box-2{
   background-color: lightseagreen;
   order: 0;
}

.box-3{
   background-color: lightcoral;
   order: 2;
}

flex-basis

initial length of flex item towards main axis.
if we give both flex-basis and width/height, browser take flex-basis.

flex-grow

It decides how flex items occupied the remaining space.
By default, flex-grow:0

.box-1{
    background-color: lightblue;
    flex-grow: 2;
}

.box-2{
    background-color: lightseagreen;
    flex-grow: 1;
}

.box-3{
    background-color: lightcoral;
    flex-grow: 1;
}

box 1 takes remaining space 2 times more than box 2 and box 3.

flex-shrink

flex automatically shrinks the width
Suppose we have 3 box, each one has 600px width, and flex container has 1200px width.
Than the boxes shrink in 1200px they loss 600px.
With the help of flex-shrink, we can control the shrink of each box.
more shrink value, more space give up.
You have to remove flex-wrap, to see it working.

.box-1{
    background-color: lightblue;
    flex-shrink: 1;
    
}

.box-2{
    background-color: lightseagreen;
    flex-shrink: 2;
    
}

.box-3{
    background-color: lightcoral;
    flex-shrink: 3;

}

flex

Shorthand
flex: flex-grow flex-shrink flex-basis

Day 12

Grid layout

Lets create 12 divs
- shortcut .container>.item.item${Item $}*12

himHTML

  <div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
    <div class="item item7">Item 7</div>
    <div class="item item8">Item 8</div>
    <div class="item item9">Item 9</div>
    <div class="item item10">Item 10</div>
    <div class="item item11">Item 11</div>
    <div class="item item12">Item 12</div>
  </div>

himCSS

*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.container{
    margin: auto;
    border: 4px solid red;
    background-color: cornsilk;
    max-width: 1440px;
}

.item{
    padding: 10px;
    border: 2px solid green;
}

when i gave .container display:grid nothing changes.
Grid layout has two things
- container
- items

Show Grid Lines

Inspect your page and click on grid(chips like style) near your grid container(.container class)
It shows line numbers in the grid.

Grid Template columns

There is only one column in my layout.
Its grid container property.
I want to show 3 columns.
grid-template-columns: 100px 200px 100px;
- First column is 100px wide.
- Second column is 200px wide.
- Third column is 100px wide.
I only decide the column not row, but arranges row implicitly.

implicit vs explicit

Explicit --> I define
Implicit --> Browser defines
I define column and browser defines row.

row gap and column gap

We can give gap to our layout.
column-gap: 50px
```
 grid-template-columns: 33% 33% 33%;
 column-gap: 50px;
```
- 3rd column overflow from the grid container.
- When we use grid, we dont use %, we use fraction.

Grid fraction unit

First browser give space to units that are not fraction like px.

column-gap get 50px, than column get 1fr.

  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 50px;
  row-gap: 50px;

Now 3rd column never overflow from the grid container.
Instead of column-gap and row-gap, we can use shorthand gap
gap: 10px 50px; 10px --> row-gap, 50px --> column-gap.

repeat()

 /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-columns: repeat(3, 1fr);

Both lines are same.
If you want 2nd column twice width, grid-template-columns: 1fr 2fr 1fr;

Other Terminologies

grid-template-rows: 100px 100px;
- 1st and 2nd row height 100px;
If you want to change implicit rows height
- grid-auto-rows: 100px;
Why browser put data in new row, why it cant put in single row
- There is a property grid-auto-flow: row; By default.
  - Arrange data row wise, If you it to column, than column wise data show
There is an another property grid-auto-columns: 100px;
We don't use grid-auto-flow: column and grid-auto-columns very much.
We have also mix fraction like grid-template-columns: 300px repeat(2, 1fr); this.
auto-fit and auto-fill
- I don't want fix 3 columns
  - grid-template-columns: repeat(auto-fit, 100px);
- Same as auto-fill but both are different.

Day 16 - JavaScript

Comments

// console.log() - Is used to print, what inside the ()
// we can also use '' and `` instead of ""
// we use `` in string templates
// ; is not mandatory but its good for practice
// you already know how to add comments in javascript
// you can use ctrl + / to comment a line and same for undo the comment
console.log("Hello world");

Variables

"use strict";
//Variables

// Is used to store the information
// use that information later
// we can also change the information later
// Variables is CaseSensitive


// declare a variable --------------------------------
var firstName = "Ashwani";

// use a variable ---------------------------------
console.log(firstName);

// change value -----------------------------------
// no need to use var keyword again
firstName = "Eager"

console.log(firstName)

// if we remove var keyword from line 10, still everything works!
// this may raise problem 
// if by mistake you wrote firstname instead of firstName in line 17
// this create two different variables
// we don't want two different variables
// so, to tackle this problem we use "use-strict"
// JS is loosely typed lang, and we don't want to declare a variable without
// var keyword. use-strict help in that type of problem, and give error if
// we make that type of mistake.

Naming Rules

// rules for declaring variables

// can't start with number
// 1man (invalid)
// man1 (valid)


// _ and $ are allowed
// first_name (valid)
// _firstName (valid)
// $firstName (valid)
// first$name (valid)


// can't use spaces
// first name (invalid)

// convention
// start with small letter and use camelCase

// my_name -> snake case
// myName -> camelCase

`Let` Keyword

// let keyword
// used to declare variables

let myName = "Ashwani";
myName = "Eager";
console.log(myName);

// whats the difference b/w var and let keyword
// 1. Function Scope and Block Scope
// 2. Redeclare and re-assign
// 3. Hoisting

// Redeclare
var fistName = "Ashwani";
var fistName = "Eager"; // redeclare firstName 
// you can use redeclaration with var
//let lastName = "kumar";
//let lastName = "Ashwani"; // redeclare not allowed here
// you can't use redeclaration with let


// ReAssign
var myCar = "Tata";
myCar = "Honda"; // reassign myCar
// you can use reassignation with var

let myBike = "Bajaj";
myBike = "Royal Enfield";
// you can also use reassignation with let


// Hoisting and Scopes cover later

`const` keyword

// declare constant

const carWheels = 4;
carWheels = 5; // this line gives error
// redeclaration not allowed
// reassign not allowed
console.log(carWheels);

// Good Practice
// Always says like, I declare a constant carWheels instead of I declare a variable carWheels

String Index

// string indexing

let firstName = "Ashwani";

// A s h w a n i
// 0 1 2 3 4 5 6 - Index

console.log(firstName[4]);
// 4th index have 'a'


console.log(firstName.length); // o/p 7
// length - no of characters including spaces


//if you don't know the length, and want to print the 2nd last number
console.log(firstName[firstName.length - 2]);

String Methods

// Here are some useful string methods

// trim()
// toUpperCase()
// to LowerCase()
// slice()

// Imp : These methods doesn't change your string, they give new string. 
// Bcz strings are immutable, you have to store the new string.


let firstName = "    Ashwani       ";
// your variable have many spaces and you don't want any spaces

console.log(firstName.length);  // op 18
firstName.trim();
console.log(firstName.length); // op 18
// still print 18, bcz strings are immutable, you can't change them directly


// There are 2 ways : 1st is declare new variable and 2nd reassign existing variable

//1st
let newName = firstName.trim();
console.log(newName.length);  // op 7

//2nd 

firstName = firstName.trim();
console.log(firstName.length); // op 7



// toUpperCase()

let myName = "ashwani Kumar";
console.log(myName.toUpperCase());  // op - ASHWANI KUMAR
console.log(myName); // op - ashwani Kumar
// if you want myName in upper, first you have to store it.


// toLowerCase()
console.log(myName.toLowerCase()) // op - ashwani kumar
console.log(myName) // op - ashwani Kumar


// slice()
let phone = "Apple";
phone = phone.slice(0,4);
console.log(phone); // op - Appl
// slice takes 2 index, startIndex and endIndex
// It goes to endIndex but not include that in string

let model = phone.slice(1); // It start from given index and go to end of the string
console.log(model);

console.log(model.slice(-2)) // It gives 2 elements from end of string

typeof

// typeof : gives the type of variable

// In JS, we have different Data Structures, like : string, number, null etc

let age = 24;
console.log(typeof age);  // op - number

let myName = "Eager Ashwani";
console.log(typeof myName); // op - string


// convert number to string
// just add empty string
let price = 1100;
price = price + "";
console.log(typeof price);


// convert string to number
let key = "231";
key = +key;
console.log(typeof key);


// There is many ways, another is

let userName = "eagerashwani";
userName = Number(userName);
console.log(typeof userName);

userName = String(userName);
console.log(typeof userName);

Day 17

String Concatenation

// string concatenation - join two or more strings together

let firstName = "Ashwani";
let lastName = "Kumar";

let fullName = firstName + lastName;
console.log(fullName); // op - AshwaniKumar
// + is used to concatenate two strings together


fullName = firstName + " " + lastName;
console.log(fullName); // op - Ashwani Kumar

// ------------------------------------------------------------

let y = "3.123";
let x = "2";

let result = y + x;
console.log(result) // op - 3.1232

// but you want addition not concatenation
result = +x + +y;
console.log(result) // op - 5.123

Template String

// string concatenation - join two or more strings together

let firstName = "Ashwani";
let lastName = "Kumar";

let fullName = firstName + lastName;
console.log(fullName); // op - AshwaniKumar
// + is used to concatenate two strings together


fullName = firstName + " " + lastName;
console.log(fullName); // op - Ashwani Kumar

// ------------------------------------------------------------

let y = "3.123";
let x = "2";

let result = y + x;
console.log(result) // op - 3.1232

// but you want addition not concatenation
result = +x + +y;
console.log(result) // op - 5.123

undefined, null and BigInt

// Undefined 
// declared but not assign, not work with const keywword

let firstName;
console.log(firstName, typeof firstName); // op - undefined 'undefined'
// you can print many stuff using , in console.log

var lastName;
console.log(lastName, typeof lastName); // op - undefined 'undefined'
lastName = "Kumar";
console.log(lastName, typeof lastName); // op - Kumar string

// null
// means nothing

let brand = null;
console.log(brand, typeof brand); // op - null 'object'
// Here is a bug in JS
// typeof of brand is object


// BigInt - 2020 new Data Type

console.log(Number.MAX_SAFE_INTEGER); // op - 9007199254740991
// This gives you, max limit you can store in number

// But, you have very big number (you can also use BigInt in small number)
// There are two ways to make a number bigInt

// 1st
let a = BigInt(353453);
console.log(a, typeof a);

//2nd
let b = 12n;
// just add n in the end of a number

console.log(a + b);
// if one variable is not BigInt, than you can't perform operations.

Boolean and Comparision Operators

// boolean - true or false

let a = 3;
let b = 5;

console.log(a>b); // comparision <,>, <=, >=

// == vs ===

let x = 5;
let y = 5;

console.log(x == y);  // true
// if you change any value to string. eg : x = "5"
x = "5";
console.log(x == y);  // true

// == only compares value not data type


let p = 3;
let q = 3;
console.log(p === q); // true

// make q as string
q = "3";
console.log(p === q); // false

// === compares value as well as data type


// != vs !==

let n = 4;
let m = 4;

console.log(n != m);
console.log(n !== m);

// observe changes by changing value and data type

if else

// if this is true, do this, otherwise do that

let age = 17;

if(age>18){
    console.log("Right to vote");
}
else{
    console.log("Not an adult");
}


// -----------------------------


let isEven = 19;

if(isEven%2 === 0){
    console.log("even");
}else{
    console.log("odd");
}

falsy vs truthy value

// falsy vs truthy values

// falsy values
// false
// ""
// null
// undefined
// 0

// except falsy values all other values are truthy

let age = '';   // use all falsy values and check op in console
if(age){
    console.log(age);
}
else{
    console.log("Age not specified");
}

Ternary operator

// suppose you have to store value in variable on the basis of a condition 

// Normal way, if else

let marks = 33;
let result;

if(marks>=33){
    console.log("Pass");
}
else{
    console.log("Fail");
}


// Ternary Operator or conditional operator

let age = 18;
let ageStatus = age > 18 ? "Adult" : "Kid";

// age > 18 ? --> This is a condition
// if condition is true, save what after ? in variable
// if condition is false, save what after : in variable

console.log(ageStatus);

and or operator

// sometimes we have to take decision based on two or more conditions

// suppose we have to print only those, whos name start with "A" and an adult

let firstName = "Ashwani";
let age = 24;

if(firstName[0] === "A" && age > 18){
    console.log("Condition satisfied");
}
else{
    console.log("Not match");
}

// && - both conditions must true

// now, we want if any one condition is true, we can print

if(firstName[0] === "f" || age >18){
    console.log("Inside if");
}
else{
    console.log("Inside else");
}

// || - only enter in else block, if both condition gives false

Day 18

Nested if else

// sometimes we have to take decision based on two or more conditions

// suppose we have to print only those, whos name start with "A" and an adult

let firstName = "Ashwani";
let age = 24;

if(firstName[0] === "A" && age > 18){
    console.log("Condition satisfied");
}
else{
    console.log("Not match");
}

// && - both conditions must true

// now, we want if any one condition is true, we can print

if(firstName[0] === "f" || age >18){
    console.log("Inside if");
}
else{
    console.log("Inside else");
}

// || - only enter in else block, if both condition gives false

if else if

// suppose you have to categroize your employee based on experience they have


let experience = 1;

if(experience < 1){
    console.log("fresher");
}
else if(experience < 2){
    console.log("SDE");
}
else if(experience < 3){
    console.log("SDE2");
}
else if(experience < 4){
    console.log("Lead Software Engineer");
}
else{
    console.log("Too much experience");
}

// JS engine stop execution when condition is matched

Switch

// suppose you have to make a condition on the basis of month number, and print month name

// one way is use if elseif

// other way is switch

let monthNumber = 12;

switch(monthNumber){
    case 1:
        console.log("Jan");
        break;
    case 2:
        console.log("Feb");
        break;
    case 3:
        console.log("March");
        break;
    case 4:
        console.log("April");
        break;
    case 5:
        console.log("May");
        break;
    case 6:
        console.log("June");
        break;
    case 7:
        console.log("July");
        break;
    case 8:
        console.log("Aug");
        break;
    case 9:
        console.log("Sept");
        break;
    case 10:
        console.log("Oct");
        break;
    case 11:
        console.log("Nov");
        break;
    case 12:
        console.log("Dec");
        break;
    default:
        console.log("Invalid month");
}

// if you not use than JS engine prints continuosly
// break statement is used to terminated the flow.

while loop

// suppose you have to print number from 0 to 10, how can you do that?

// one way is
console.log(0);
console.log(1);
console.log(2); // till
console.log(9);
console.log(10);


// 2nd way
let i = 0;
console.log(i);
i++; // i++ means i + 1
console.log(i);
i++;  // till 10

// 3rd way - while

let j = 0;
while(j <= 10){
    console.log(j);
    j++;
}
// loop terminates when j become 11
console.log(`value of j is ${j}`);


// while loop example
// print the sum from 1 to 10 

let k = 1;
let sum = 0;
while(k<=10){
    sum += k;
    k++;
}
console.log("Sum is " + sum);

for loop

// suppose you have to print number from 0 to 10, how can you do that?

// one way is
console.log(0);
console.log(1);
console.log(2); // till
console.log(9);
console.log(10);


// 2nd way
let i = 0;
console.log(i);
i++; // i++ means i + 1
console.log(i);
i++;  // till 10

// 3rd way - while

let j = 0;
while(j <= 10){
    console.log(j);
    j++;
}
// loop terminates when j become 11
console.log(`value of j is ${j}`);


// while loop example
// print the sum from 1 to 10 

let k = 1;
let sum = 0;
while(k<=10){
    sum += k;
    k++;
}
console.log("Sum is " + sum);

break and continue

// break keyword, stops the execution and get outside from the block

for(let i = 0; i<=10; i++){
    if(i === 7)
        break;
    console.log(i);  // op - 0 to 7
}


// continue keyword, bring back to the condition(or skip the continue check)

for(let i=0; i<=10; i++){
    if(i===6)
        continue;
    console.log(i); // op - 0 to 10 without 6
}

do while loop

// break keyword, stops the execution and get outside from the block

for(let i = 0; i<=10; i++){
    if(i === 7)
        break;
    console.log(i);  // op - 0 to 7
}


// continue keyword, bring back to the condition(or skip the continue check)

for(let i=0; i<=10; i++){
    if(i===6)
        continue;
    console.log(i); // op - 0 to 10 without 6
}

Array

// Array is reference type(means object)
// Ordered collection of items(means access via index)
// store any data type in an array
// Arrays are mutable(it changes the array)


let students = ["Raj", "Kunal", "Love", "Ashwani"];
console.log(students);

let mixed = ["YouTube", 12, true, null, undefined];
console.log(mixed[3]);

students[2] = "Kirti";
console.log(typeof students, students);

// students is an object
// There are many objects in JS
// How can you know that students is an array

console.log(Array.isArray(students));  // op - true

let obj = {} // object literal
console.log(typeof obj); //  object

Day 19

Array Methods

// push, pop, shift, unshift


let students = ["Raj", "Kunal", "Love", "Ashwani"];
// array is mutable, changes saves in original array

console.log(students);
// push - add in the last
students.push("Kirti");
console.log(students);

// pop - remove last item and return it(means you can store removed item in variable)
let item = students.pop();
console.log(students, item);

// unshift - add element in the starting of array
students.unshift("Lakshay");
console.log(students);

// shift - remove element from start and return it
students.shift();
console.log(students);

// push pop is fast than unshift and shift --) find yourself --) Hint: Time complexicity

Primitive and Reference Data types

// primitive data type

let a = 1;
let b = a;
console.log(a);
console.log(b);
a++;
console.log("After");
console.log(a);
console.log(b);

// PDT stores in stack, two different variables are made
// one store a = 1, b = 1 bcz a = 1
// when value of a changes, it doesn't affect b
// bcz a,b are different variables in stack


// Reference Data Type

let array1 = ["item1", "item2"];
let array2 = array1;
console.log(array1);
console.log(array2);
array1.push("item3");
console.log("After");
console.log(array1);
console.log(array2);

// RDT stores in heap
// In stack array1 (pointer) has address, where the array is stored
// array2 also have same address
// both pointer points to same address
// so, when we update any one, both array shows updated

Clone and Concate

// How to clone an array?

// There are many ways to clone an array

let array1 = ["sub1", "sub2"];
// let array2 = ["sub1", "sub2"]; - 1 way
// let array2 = [].concat(array1); - 2nd way
// let array2 = array1.slice(0); - 3rd way
let array2 = [...array1]; // 4rth way - via spread --) most recommended

// gives pointer points to same address or not
console.log(array1 === array2);
console.log(array1);
console.log(array2);


// Concatenate arrays

let array3 = ["sub3", "sub4"];
// let array4 = ["sub3", "sub4"]; - 1 way
// let array4 = [].concat(array3, "sub5", "sub6"); - 2nd way
// let array4 = array3.slice(0).cpncate(["sub5", "sub6"]); - 3rd way
let newArray = ["sub5", "sub6"];
let array4 = [...array3, ...newArray]; // 4rth way - via spread --) most recommended

console.log(array4);

for loop in Array

// for loop in array

let students = ["Raj", "Kunal", "Love", "Ashwani", "Kirti"];


// Most important property of array is length
console.log(students.length);

// with the help of indexes, we get particular item
console.log(students[2]);


for(let i = 0; i<students.length; i++){
    console.log(students[i]);
}

// make a new array having students data in uppercase

let newStudents = [];

for(let i=0; i<students.length; i++){
    newStudents.push(students[i].toUpperCase());
}

console.log(newStudents);

const in Array

let students = ["Raj", "Kunal", "Love", "Ashwani", "Kirti"];
students = ["Aakash"];
students.push("Ravneet");
console.log(students);  // op - ['Aakash', 'Ravneet']


// if we use const, we never override array

const student = ["Raj", "Kunal", "Love", "Ashwani", "Kirti"];
//student = [];  // op - Error
console.log(student);  

student.push("Nitya");
console.log(student);  // op - ['Raj', 'Kunal', 'Love', 'Ashwani', 'Kirti', 'Nitya']

// student in stack have address 0x12
// ["Raj", "Kunal", "Love", "Ashwani", "Kirti"] is in heap memory
// we not changing the address of student
// recommended - Always use const with array
// recommended - For RDT use const

while in Array

const students = ["Raj", "Kunal", "Love", "Ashwani", "Kirti"];
let i = 0;
while(i<students.length){
    console.log(students[i]);
    i++;
}

for of loop

// for of loop


const students = ["Raj", "Kunal", "Love", "Ashwani", "Kirti"];

for(let student of students){
    console.log(student);
}

// always follow plural and singular naming convention

for in loop

// for in loop --> It give index


const students = ["Raj", "Kunal", "Love", "Ashwani", "Kirti"];
const newStudents = [];
for(let index in students){
    newStudents.push(students[index].toUpperCase());
}
console.log(newStudents);


// we use normal for loop and for of loop very much in JS
// while and for in loop, not that much

Day 20

Array Desturing

// arrayDestructuring -- How you can store values of array in variable

const students = ["Ram", "shyam", "Krishna", "balram"];

// let name1 = students[0];
// let name2 = students[1];
// console.log(name1);
// console.log(name2);

let [name1, name2] = students;
console.log(name1);
console.log(name2);

// name1, name2 are two different variables, so can play with them
// students array assign to variables based on their index


// If there are more elements in array than variables, 
// also than variables associated with index get value
// If there are less elements in array than variables 
// than after associated elements, other variables shows undefined

// If you want to skip an index
let [name3, , , name4] = students;
console.log(name3);
console.log(name4);

// You want to store, rest of elements in new array
let [a,b, ...newStudents] = students;
console.log(a);
console.log(b);
console.log(newStudents);

Objects

// Objects 
// RDT
// Arrays are good but not sufficient
// for real world
// objects stores key value pairs
// objects don't have indexes


// create a object

const person = {
    name : "Ashwani",
    age : 24,
    student : false,
    movies : [
        "Forrest Gump",
        "IronMan",
        "Avengers Endgame"
    ]
};  
console.log(person);

// accessing 

console.log(person.age);
console.log(person["movies"]); 
// movies in "" bcz in objects, keys are stored as string
// we can use both . notation and bracket notation



// add new key value pair in object

person["job"] = "Software Engineer";
person.gender = "Male";
console.log(person);

Dot vs Bracket

// Difference between dot and bracket

const person = {
    name : "Ashwani",
    age : 24,
    student : false,
    movies : [
        "Forrest Gump",
        "IronMan",
        "Avengers Endgame"
    ],
    "my salary" : 500000
}; 
// How can you access a key like this : my salary

console.log(person["my salary"]); 
// 1st diff : you can't access "my salary via dot notation"


// 2nd diff 

const key = "phone";
// now you want phone as your key in the person

person[key] = "hello@abc.in";
console.log(person);

Object Iterate

const person = {
    name : "Ashwani",
    age : 24,
    student : false,
    movies : [
        "Forrest Gump",
        "IronMan",
        "Avengers Endgame"
    ],
    "my salary" : 500000
}; 

// Iterate objects

// 1st way --> for in loop

for(let key in person){
   //console.log(key);     // name, age, student, movies, my salary
   // console.log(person[key]);   // values dega
   // console.log(person.key); // undefined x3
   // console.log(key, " : " ,person[key]);  // key value pair
    console.log(`${key} : ${person[key]}`);  // key value pair
}


// 2nd way - Object.keys

console.log(Object.keys(person));  // op - ['name', 'age', 'student', 'movies', 'my salary']

for(let key of Object.keys(person)){
    console.log(key, " : " , person[key]);
}

Computed Properties

const key1 = "myKey1";
const key2 = "myKey2";

const value1 = "myValue1";
const value2 = "myValue2";

// You have to make object(key : Value) with the values of above variables eg line 24 op

const myObj = {
    key1 : value1,
    key2 : value2
}

console.log(myObj); // op - {key1: 'myValue1', key2: 'myValue2'}

// but we dont want key1 and key2 instead we want mykey1 and mykey2
// to achieve this

const objNow = {
    [key1] : value1,
    [key2] : value2
}
console.log(objNow); // op - {myKey1: 'myValue1', myKey2: 'myValue2'}

Spread operator in object

// spread operator in object

const obj1 = {
    key1 : "value1",
    key2 : "value2"
}

const obj2 = {
    key3 : "value3",
    key4 : "value4"
}

const myObj = {...obj1, ...obj2};
console.log(myObj);

// note : If you add one more key value pair, with same key that already exist in object
// than the latest one will be taken
// eg : If we add key1 : "value100" in obj2 than
// the myObj's key1 is "value100" not value1

// Add new key value pair in myObj like that {...obj1, ...obj2, key23 : "value23"}

const newObj = {..."abc"};
console.log(newObj); // op - {0: 'a', 1: 'b', 2: 'c'}

// same with array

Object Destructuring

// You have to store values of associated keys of object in variables

const team = {
    plays : "Cricket",
    teamName : "Chennai",
    captain : "Dhoni",
    winner : 5
}

const var1 = team.plays;
const var2 = team["teamName"];
console.log(var1, var2);

// object destructring

const {plays, teamName, ...hereAll} = team;  // goto line 27
console.log(plays, teamName);
console.log(hereAll); // op - {captain: 'Dhoni', winner: 5}

// note : names of variable must be same as key of object

// if you want different variables name

const {captain : myCap, winner : wins} = team;
console.log(myCap, wins);

// now you want only 2 variables and all others in a seprate object
// const {plays, teamName, ...hereAll} = team;
// hereAll contain everything as object except all keys before that

Object inside array

// object inside array
// very useful, in real world application

const users = [
    {userId : 1, firstName : "Ashwani", gender : "male"},
    {userId : 2, firstName : "Kunal", gender : "male"},
    {userId : 3, firstName : "Saurav", gender : "male"},
    {userId : 4, firstName : "Alivia", gender : "female"},
    {userId : 5, firstName : "Parnika", gender : "female"},
];

console.log(users);

for(let user of users){
    console.log(user);
    console.log(user.firstName);
}

Day 21

Nested Destructuring

const users = [
    {userId : 1, firstName : "Ashwani", gender : "male"},
    {userId : 2, firstName : "Kunal", gender : "male"},
    {userId : 3, firstName : "Saurav", gender : "male"},
    {userId : 4, firstName : "Alivia", gender : "female"},
    {userId : 5, firstName : "Parnika", gender : "female"},
];

const [user1, user2, user3] = users;
console.log(user1); // op - {userId: 1, firstName: 'Ashwani', gender: 'male'}
console.log(user2);
console.log(user3);

// but, we want fistname of userId 1, and userId of userId3, and firstname of userId 5

const [{firstName:newVar}, , {userId}, , {firstName}] = users;
console.log(newVar); // Ashwani
console.log(userId); // 3
console.log(firstName); // Parnika

// you cant use same variable name (line 17) like firstname in userId 1 and 5

Functions

// functions - if you have to use same code over and over again 
// than function helps you.

// function can do what you want

// suppose you have to print hello world 5 times
console.log("Hello world");
console.log("Hello world");
console.log("Hello world");
console.log("Hello world");
console.log("Hello world");

// There is rule in coading, DRY - Don't repeat yourself

function sayHelloWorld(){
    console.log("Welcome to my world");
}

// call the function
// you can call a function many times you want
sayHelloWorld();
sayHelloWorld();
sayHelloWorld();
sayHelloWorld();
sayHelloWorld();

// make a resuable function
// num1 and num2 is parameters
function addTwoValues(num1, num2) {
    return num1 + num2;
}

const sumIs = addTwoValues(4,5); // arguments
console.log(sumIs);


// isEven function

function isEven(number){
    if(number%2 === 0)
        return true;
    else
        return false;
}

// isEven function --> return number % 2 === 0

console.log(isEven(9));


// firstChar

function firstChar(myString){
    return myString[0];
}

console.log(firstChar("Ashwani"));


// Linear Search

function linearSearch(myArray, target){
    for(let i in myArray){
        if(myArray[i] === target)
            return "Index is " + i;
    }
    return -1;
}

console.log(linearSearch([1,2,3],2));

Function Expression

// function expression --> store function in a variable

function sayHelloWorld(){
    console.log("Welcome to my world");
} // --> This is function declaration


const sayHello = function(){
    console.log("Welcome to my world");
} // --> This is function expression

sayHello();

// This is function declaration
function addTwoValues(num1, num2) {
    return num1 + num2;
}

const sumIs = addTwoValues(4,5);
console.log(sumIs);

// This is function expression

const sumTwo = function(num1, num2){
    return num1 + num2;
}

console.log(sumTwo(2,4));


// This is function declaration
function isEven(number){
    if(number%2 === 0)
        return true;
    else
        return false;
}


console.log(isEven(9));

// This is function expression

const evenHai = function(number){
    return number % 2 === 0;
}

console.log(evenHai(3));



// This is function declaration
function firstChar(myString){
    return myString[0];
}

console.log(firstChar("Ashwani"));


// This is function expression

const myChar = function(myString){
    return myString[0];
}

console.log(myChar("Ashwani"));



// This is function declaration
// Linear Search

function linearSearch(myArray, target){
    for(let i in myArray){
        if(myArray[i] === target)
            return "Index is " + i;
    }
    return -1;
}

console.log(linearSearch([1,2,3],2));


// This is function Expression

const searchMe = function(myArray, target){
    for(let i in myArray){
        if(myArray[i] === target)
            return "Index is " + i;
    }
    return -1;
}
const array = [1,2,3,4,5];
console.log(searchMe(array,5));

Arrow Functions

// arrow function

const sayHello = () => {
    console.log("Welcome to my world");
} // --> This is function expression

sayHello();


// This is arrow function 

const sumTwo = (num1, num2) => {
    return num1 + num2;
}

console.log(sumTwo(2,4));

// If function have only one parameter than in arrow function () not required
const evenHai = (number) => {
    return number % 2 === 0;
}

console.log(evenHai(3));


// This is arrow function 

// If function have only one line than remove {} and return statement

const myChar = myString =>  myString[0];


console.log(myChar("Ashwani"));



// This is arrow function 

const searchMe = (myArray, target) => {
    for(let i in myArray){
        if(myArray[i] === target)
            return "Index is " + i;
    }
    return -1;
}
const array = [1,2,3,4,5];
console.log(searchMe(array,5));

Hoisting

// hoisting --> a behavior in which a function or a variable can be used before declaration.

// only happens in function declaration not in function expression and arrow function

function sayHi(){
    console.log("Hi Everyone");
}

sayHi();  // this is normal behaviour


saySomething("Hello from Seoul");  // this is hoisting

function saySomething(myString){
    console.log(myString);
}


console.log(hello);  // undefined
// only gives undefined with var, give error with let & const case
var hello = "Hello World";
console.log(hello);

Function inside function

// function inside function

// you can declare as many function inside a function
const avengers = () => {
    const add = (a,b) => a+b;
    const mul = (a,b) => a*b;
    const tony = () => "Love you 3000";

    console.log("Avengers Assemble");
    tony();
    console.log(add(4,6));
    const ans = mul(2,4);
    console.log(ans);
}

avengers();

// you have to call the inside func (add, mul, tony)
// inside the avengers()

Lexical Scope

const my = "World War Hulk";

const myWorld = () => {
    //const my = "New World Order";

    const kang = () => {
        //const my = "Kang Dynasty";
        console.log("Inside ", my);
    }

    console.log("My World"); 
    console.log(my); // New World Order
    kang();

    // If you remove my variable in the kang(), than JS search my variable 
    // in the Lexical Environment (one step above)
    // than the op is - Inside New World Order
    // first JS search my variable in the kang(), if its not there than search
    // in their lexical environment
    // if you also remove my variable in line 4
    // than JS search in their one step above environment
    // than the kang() op is - Inside World War Hulk
}

myWorld();

Block and function Scope

// block and function scope

// let and const are block scope
// var is function scope

{
    // {}--> This is a block
    const firstName = "Ashwani";
    console.log(firstName);  // accessible 
}

// but you can't access firstName outside the block
//console.log(firstName); // Error 


// you can access value with var bcz it's function scope(means JS search variable in complete file)
{
    var lastName = "Kumar";
    console.log(lastName); // accessible
}
console.log(lastName); // accessible
{
    console.log(lastName); // accessible
}


// real example

function myProject(){
    if(true){
        let projectName = "Secret Wars";
        console.log(projectName);
    }
    console.log(projectName); // Error
    
}

myProject();

// if we use var instead of let than line 34 run without any error

// note : Don't confuse with Lexical Scope
// if projrctName is declared one step above 
// than it also run successfully.

Default Parameter

// default parameter

// suppose you have a function sum(a,b) that takes two parameters
// but you only pass one argument
// to deal this type of situation, we have default parameters
// if one arugument is not there, than use the default one.


// Before ES6

function add(a,b){
    if(typeof b === "undefined"){
        b = 1;
    }
    return a+b;
}

console.log(add(2));  // 3


// Current Scenerio

function sum(a, b=1){
    return a + b;
}

console.log(sum(3,3));

Rest Parameter

// rest paramters --> allows a function to accept an indefinite number of arguments as an array

function myFun(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);

}

myFun(1,2,3);

// rest parameter
// what you do, if you have more arguments than paramteres
// eg : myFun(1,2,3,4,5,6,7,8)
// and you want to assign a = 1, b = 2 and rest to c

function myFunc(a,b,...c){
    console.log(a);  // 1
    console.log(b);  // 2
    console.log(c);  // [3, 4, 5, 6, 7, 8]

}

myFunc(1,2,3,4,5,6,7,8);


// make a function to add everything
function addAll(...numbers){
    let sum = 0;
    for(let number of numbers){
        sum += number;
    }
    return sum;

}

console.log(addAll(1,2,3,4,5));

Parameter Destructuring

// paramater Destructuring --> 

// most used in react
// use with objects

// we used this till now
const person = {
    firstName : "Ashwani",
    age : 24,
    gender : "male"
}

const getDetails = obj => {
    console.log(obj.firstName);
    console.log(obj.gender);
    console.log(obj.age);

}

getDetails(person);

// params destructuring

const printDetails = ({firstName, age}) => {
    console.log(firstName);
    console.log(age);
}

printDetails(person);

// in line 23 two new variables firstName and age is made

Callback

// callback --> Take function as input and call it

function avengers(name){
    console.log("Avengers ", name);
}

function movie(callback){
    console.log("Movies here...");
    callback("Kang Dynasty");
}

movie(avengers);

Day 22

function returning function

// function returning function


function myMovie(){
    function avengers(){
        return "Avengers Endgame";
    }
    return avengers;
}

const show = myMovie();
console.log(show());

// callbacks and func returning func called Higher Order Function

const bestMovie = () => () => "Chef";

const showMe = bestMovie();
console.log(showMe());

for each

// some important array method

// forEach()

const ages = [1,2,3,4,5];

const getAge = (age, index) => console.log(`At ${index} index, Age is ${age}`);

for(let i = 0; i<ages.length; i++){
    getAge(ages[i], i);
}

// You can acheive same output via forEach()
// forEach takes a callback

ages.forEach(getAge);

// You can also defined function in forEach
// function that has no name called anonymous function

ages.forEach(function(age, index){
    console.log(`At ${index} index, Age is ${age}`);
});

// double the ages

ages.forEach(function(age){
    console.log(`Age is ${age * 2}`);
});

// real life example

const users = [
    {firstName : "Ashwani", age : 24},
    {firstName : "Kunal", age : 22},
    {firstName : "Eddie", age : 40},
    {firstName : "Harish", age : 24},
];

users.forEach(function(users){
    console.log(users.firstName);
});

// we do this earlier
for(let user of users){
    console.log(user.firstName);
}

// forEach() is better than for of bcz for of is new

Map

// most important array method

// map() --> Returns a new array
// if return is not there in callback(), than newArray have undefined

const numbers = [1,2,3,4,5];

function square(number){
   return number * number;
    // console.log(number * number);
}

const newArray = numbers.map(square);
console.log(newArray);

// if we not return anything in line 9
// and just console.log() --> op - 1,4,9,16,25 in new lines
// and line 13 prints -->  [undefined, undefined, undefined, undefined, undefined]

const users = [
    {firstName : "Ashwani", age : 24},
    {firstName : "Kunal", age : 22},
    {firstName : "Eddie", age : 40},
    {firstName : "Harish", age : 24},
];

const firstNames = users.map((user)=> user.firstName);
console.log(firstNames);  // op -  ['Ashwani', 'Kunal', 'Eddie', 'Harish']

Filter

// filter
// filter takes a callback
// filter's callback always returns a boolean value

const numbers = [1,2,3,4,5,6,7,8,9];

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);

Reduce

// reduce

const numbers = [1,2,3,4,5,6];

// if you want to initialize accumulator with a value
// than give your value just after callback() look line 11
// now, the first call start as 100 1 = 101
// now continue from line 15
const sum = numbers.reduce((accumulator, currentValue)=>{
    return accumulator + currentValue;
}, 100);

console.log(sum);

// accumulator , currentValue,  return
// 1                  2           3
// 3                  3           6
// 6                  4           10
// 10                 5           15
// 15                 6           21


const userCart = [
    {productId : 1, productName : "Keyboard", price : 800},
    {productId : 2, productName : "Mouse", price : 200},
    {productId : 3, productName : "Monitor", price : 18000},
    {productId : 4, productName : "Mic", price : 19000},
];

const totalAmount = userCart.reduce((totalPrice, {price}) =>  totalPrice + price, 0);

console.log(totalAmount);

// totalPrice,   price,   return
// 0             800        800
// 800           200        1000
// 1000          180000     190000
// 19000         190000     380000

sort

// sort -  sorts values as strings/sorts an array alphabetically

// it changes the original array

const numbers = [32,644,2367,1200,5000];


// it store array as string and 
//sort on the basic of ASCII code of first letter
numbers.sort();
console.log(numbers); 

const userNames = ['Ashwani', 'ashu', 'lucky', 'tony', 'Bucky'];
userNames.sort();
console.log(userNames);  // op -  ['Ashwani', 'Bucky', 'ashu', 'lucky', 'tony']

// first come capital letters and small letters 
// bcz ASCII value of A is less than a
// It sort in dictionary format


// If you want to sort numbers via sort()
const myNum = [1,2,55,30,60];
myNum.sort((a,b) => a-b); // this callback() sort in asc order
// if you want desc order, than b-a
console.log(myNum);

// a            b             +/-
// 1            2             -
// if -ve, than put a first
// if +ve, than put b first

// real life example
// sort price HighToLow

const productsList = [
    {productId : 1, productName : "Keyboard", price : 800},
    {productId : 2, productName : "Mouse", price : 200},
    {productId : 3, productName : "Monitor", price : 18000},
    {productId : 4, productName : "Mic", price : 19000},
];

const highToLow = productsList.slice(0).sort((a,b)=>a.price - b.price);
const lowToHigh = productsList.slice(0).sort((a,b)=>b.price - a.price);

console.log(highToLow);
console.log(lowToHigh);

// If we don't use slice, than sort() changes the original productsList
// that's why we clone it

find

// find() --> returns the value of the first element that passes a test.

const pets = ["Monkey", "Snake", "cat", "dog"];
// it takes a callback()

const ans = pets.find((string)=>string.length === 3);
console.log(ans); // op -- cat

// real life example

const users = [
    {uid: 1, firstName : "Ashwani", age : 24},
    {uid: 2, firstName : "Kunal", age : 22},
    {uid: 3, firstName : "Eddie", age : 40},
    {uid: 4, firstName : "Harish", age : 24},
];

const myUser = users.find((user)=>user.uid === 3);
console.log(myUser["firstName"]);     // op -- Eddie

every

// every --> returns true if the function returns true for all elements.
// returns false if the function returns false for one element.

const numbers = [2,4,6,8,10];

// all numbers are even
const ans = numbers.every(number => number % 2 === 0);
console.log(ans);



const userCart = [
    {productId : 1, productName : "Keyboard", price : 800},
    {productId : 2, productName : "Mouse", price : 200},
    {productId : 3, productName : "Monitor", price : 18000},
    {productId : 4, productName : "Mic", price : 31000},
];

// all product price below 20000
const isTrue = userCart.every(user => user.price < 20000);
console.log(isTrue);

some

// some() --> If any single element satisfies the callback() 
//than it return true

const numbers = [2,4,6,8,9];
const ans = numbers.some(number => number % 2 !== 0);
console.log(ans);  // op - true

const userCart = [
    {productId : 1, productName : "Keyboard", price : 800},
    {productId : 2, productName : "Mouse", price : 200},
    {productId : 3, productName : "Monitor", price : 10000},
    {productId : 4, productName : "Mic", price : 31000},
];

// is there any item > 100000
const myAns = userCart.some(user => user.price > 100000);
console.log(myAns); // op - false

fill

// fill 

// suppose you have to create a array of length 10 with 0 in all index

const myZero = new Array(10).fill(0);
console.log(myZero);  // op -> [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

// suppose you have to change existing array with new value 1
myZero.fill(1, 2, 5);
// fill() takes first the static value, start index, end Index (not include)
console.log(myZero); // op -> [0, 0, 1, 1, 1, 0, 0, 0, 0, 0]

splice

// splice
// start index, delete, insert
// it changes the original array

const items = ["item1", "item2", "item3"];

items.splice(1, 1);
// it also returns the deleted items
console.log(items);  // op - ['item1', 'item3']

const newItems = ["i1", "i2", "i3", "i4"];
const deletedItems = newItems.splice(2,2,"ni1","ni2");
console.log(newItems, deletedItems); // ['i1', 'i2', 'ni1', 'ni2'], ['i3', 'i4']

Iterable

// iterable
// those data structures, in which we use for of loop
// like : strings and array
// objects are not iterable

const myName = "Ashwani";
for(let i of myName){
    console.log(i); // A s h w a n i --) every letter in new line
}

const myArray = ["i1", "i2", "i3", "i4"];
for(let i of myArray){
    console.log(i);
}

const myObj = {'Key1' : 'value1', 'Key2' : 'value2'};
for(let i of myObj){
    console.log(i); // Uncaught TypeError: myObj is not iterable
}


// Array like object
// those who have length property
// accessible via index
// like string



console.log(myName.length, myName[3]);  // op - 7, 'w'

Day 23

sets

// sets (iterable)
// store data
// can store heterogenous elements
// also have its own methods
// NO index based accessing
// Order is not guranteed
// unique items only(no duplication allowed)


// one way to store data
// const numbers = new Set([1,2,4]);

// another way
const myArray = ["i1", "i2", "i3", "i4"];
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(myArray);
mySet.add(myArray);
// ignore line 20 myArray bcz 19,20 have same address
mySet.add([11,12,13]);
mySet.add([11,12,13]);
// we can add array which have same elements
// bcz JS consider both different arrays
// bcz of different address
console.log(mySet);


// now you want to check some element is present in your set or not
if(mySet.has(1)){
    console.log("1 is present");
}else{
    console.log("1 is absent");
}

for(let set of mySet){
    console.log(set);
}

// real life example

const num2 = [1,2,3,4,4,5,6,5,7,8,1];
const uniqueElements = new Set(num2);
console.log(uniqueElements);
console.log(num2);

let len = 0;
for(let i of uniqueElements){
    len++;
}
console.log(len);

Map Object

// map object


// difference b/w Map and objects
// we can store any type of key 
// like: {}, "", number 

// store data as key value pair like objects
// Map is iterable
// store data in ordered fashion
// duplicate keys are not allowed like objects


const person = new Map();
person.set("firstName", "Ashwani");
person.set('age', 7);
person.set(1, "one");
person.set([1,2,3], "myArray");
person.set({'k1':'v1'}, "keyAsObject");
console.log(person);
console.log(person.get(1));

for(let key of person.keys()){
    console.log(key, typeof key); // give all the keys
}

// In object we use for in loop 
// but in map object we use for of loop

for(let [key,value] of person){
 //   console.log(key, Array.isArray(key));   // gives op as key value pair in array
    console.log(key,value);  // firstName Ashwani --) gives all key value

}


// you can store data in map like this also
const myNewPerson = new Map([['firstName', 'Ashwani'], [1, 'one']]);
console.log(myNewPerson);

// suppose you have an object and 
// you have to add data, not in the object(person1), without using object, so we use Map

const person1 = {
    id : 1,
    firstName : "Ashwani"
}

const otherInfo = new Map();
otherInfo.set(person1, {age: 23, gender : "Male"});
console.log(otherInfo);
// op - key : {id: 1, firstName: 'Ashwani'}
//     value : {age: 23, gender: 'Male'}

console.log(person1.id);  // op - 1
console.log(otherInfo.get(person1).age);  // op - 23

Object Assign

// clone using Object.assign()

// we use spread operator to clone the obj

// clone via spread operator

const obj = {
    key1 : 'Value1',
    key2 : 'Value2'
}

const obj2 = obj;  // this is not cloning
// this point to the same address that obj has
// and if we change anything in obj 
// than it also reflect in obj2


const obj3 = {...obj};
obj.key3 = "Value3";
console.log(obj);
console.log(obj3);


// clone via Object.assign

const obj4 = Object.assign({},obj);
obj.key4 = "Value4";
console.log(obj4);

Option Chaining

// optional chaining

const person = {
    firstName : "Ashwani",
    address : {
        houseNo : 21,
        state : 'Delhi'
    }
}

// now, how we can access person property
console.log(person.firstName);
console.log(person.address.houseNo);

// now, suppose we dont have address right now
// but it come in future
// if we use line 13, than it gives error

// we don't want error

console.log(person?.firstName);
console.log(person?.address?.houseNo);

Function inside Object

// function inside object

const person = {
    firstName : "Mohit",
    age : 24,
    about : function(){
        console.log('Ashwani is my name and age is 24');

        // the below line still gives error
       // console.log(`${firstName} is my name and age is ${age}`);

       // we have to use this
        console.log(`${this.firstName} is my name and age is ${this.age}`);
        // this means whole object

        console.log(this); // op - {firstName: 'Mohit', age: 24, about: ƒ}

        
    },
}


console.log(person.about) // gives whole function
console.log(person.about()) // 'Ashwani is my name and age is 24'

// there is a problem
// if somehow firstName is change, but in the about(), firstName is still Ashwani
// goto line 9 and continue from there


// Another way 
function myInfo(){
    console.log(`My name is ${this.firstName} and age is ${this.age}`);
}


const person1 = {
    firstName : "Harsh",
    age : 13,
    aboutMe : myInfo
}
const person2 = {
    firstName : "Harish",
    age : 14,
    aboutMe : myInfo
}
const person3 = {
    firstName : "Harsita",
    age : 15,
    aboutMe : myInfo
}

person1.aboutMe();
person2.aboutMe();
person3.aboutMe();

this

// what if you print this

console.log(this); // op - gives us window object
console.log(window);  // op - gives us window object


function hello(){
    console.log(this);
}
hello();  // op - gives us window object
window.hello(); // op - gives us window object

// hello() is present in the window object

Call, Apply, Bind

// call 

function favMovies(movie, rating){
    console.log(this.firstName, this.age, movie, rating)
}

const user1 = {
    firstName : "Harshit",
    age : 18,
    about : function(){
        console.log(this.firstName, this.age);
    }
}


const user2 = {
    firstName : "Mohit",
    age : 28
}

// Now, you have to call the about(), for user2
// about is not in user2, but you still have to call it
// you have to borrow the about()

user1.about();   // Harshit 18
user1.about.call(user2); // Mohit 28
user1.about.call(user1); // Harshit 18
// you have to pass object in the call(), bcz this needs it
// if you don't pass object, than it shows undefined


// you can also defined func(), outside the object line 5

favMovies.call(user1, "IronMan", 8);  // Harshit 18 IronMan 8
favMovies.call(user2, "Avengers", 9.8);  // Mohit 28 Avengers 9.8


// apply

// same as call(), internally worked on call
// the only difference is, we have to pass arguments as an array

favMovies.apply(user1, ["DaVinchi Code", 6]); // Harshit 18 DaVinchi Code 6


// bind
// bind do nothing, it just returns a function
// and whenever you need, just call it

const func = favMovies.bind(user2, "Forrest Gump", 9);
func(); // Mohit 28 Forrest Gump 9

Silly Mistakes

const user1 = {
    firstName : "Harshit",
    age : 18,
    about : function(){
        console.log(this.firstName, this.age);
    }
}

// never do like this
const fun = user1.about;
fun(); // undefined undefined
// bcz this required object
// line 10, just paste func(){.....} to fun 
// so, this have no idea what to do 

// if you still have to store reference in the variable 
// than use bind()

Arrow Function and this

// arrow func takes this from their surronding

const user1 = {
    firstName : "Harshit",
    age : 18,
    about : () => {
        console.log(this.firstName, this.age);  // undefined undefined
    }
}

user1.about();

// for arrow fun, this is one step above(surronding)

Short Syntax

const user1 = {
    firstName : "Harshit",
    age : 18,
    about : function(){
        console.log(this.firstName, this.age);  // undefined undefined
    }
}

const user2 = {
    firstName : "Mohit",
    age : 8,
    about(){
        console.log(this.firstName, this.age);  // undefined undefined
    }
}

// user1 and user2's about() works same

user1.about();
user2.about();

Day 24

Create Function for multiple objects

// you have to create a millions of object
// how you can do?

// by creating functions for them

function createUser(firstName, lastName, age, address, email){
    const user = {};
    user.firstName = firstName;
    user.lastName = lastName;
    user.age = age;
    user.address = address;
    user.email = email;
    user.about = function(){
        return `${this.firstName} is ${this.age} years old`;
    }
    user.is18 = function(){
        return this.age >= 18;
    }
    return user;
}

const user1 = createUser("Ashwani", "Kumar", 24, "Delhi", "ak@ak.in");
console.log(user1);
console.log(user1.is18());

store methods in different objects

// store methods in different objects

// suppose there are 2 million user 
// and the function about, is18 create 2 million times
// and consume more memory
// but we need only one time
// store that methods in different object

const userMethods = {
    about : function(){
        return `${this.firstName} is ${this.age} years old`;
    },
    is18 : function(){
        return this.age >= 18;
    },
    movie : function(){
        return "love you 3000";
    }
}

function createUser(firstName, lastName, age, address, email){
    // by using below line, we don't have to
    // give the reference
    const user = Object.create(userMethods);
    user.firstName = firstName;
    user.lastName = lastName;
    user.age = age;
    user.address = address;
    user.email = email;
    return user;
}

const user1 = createUser("Ashwani", "Kumar", 24, "Delhi", "ak@ak.in");
const user2 = createUser("Eager", "Ashwani", 24, "Delhi", "eg@ak.in");
const user3 = createUser("Anmol", "Kumar", 20, "Delhi", "an@ak.in");

console.log(user1.about());
console.log(user3.about());

Solve via Object Create

// suppose you have to add 1000 methods
// what you do
// previously, we create 1000 methods
// and also pass their reference to the function


const user1 = {
    key1 : "value1",
    key2 : "value2"
}

const user2 = {};
user2.key3 = "value3";

console.log(user2.key3);  // value 3

// now, we want to access the key1 via user2
// how can we do that?
// we have another way to create empty object

const user3 = Object.create(user1);
user3.key4 = "value4";

console.log(user3.key1);  // value1
console.log(user3);  // {key4: 'value4'}

// __proto__ and [[prototype]] are same
// but, prototype is different

console.log(user3.__proto__); // {key1: 'value1', key2: 'value2'}

Prototype

// js function = fun() + object

function hello(){
    console.log("Hello World");
}

// there is a property in js fun() named name--> tells fun() name

console.log(hello.name);  // hello

// you can add your own properties in function()

hello.myBeat = 120;
console.log(hello.myBeat);  // 120

// func provides more useful properties

// imp
// func gives us free space(actually there is nothing like free space)
// and that free space is prototype
// free space means empty object {}
// only func provide prototype property

console.log(hello.prototype); 
// constructor : ƒ hello()
// [[Prototype]] : Object


hello.prototype.firstName = "Ashwani";
hello.prototype.movie = function(){
    return "Avengers Endgame";
}

console.log(hello.prototype); // {firstName: 'Ashwani', movie: ƒ, constructor: ƒ}
console.log(hello.prototype.movie());  // Avengers Endgame



// lets create an array
//const numbers = [1,2,3];
// but internally it works like this
const numbers = new Array(1,2,3);
console.log(Array.prototype); // [....prototype....]
// but we study earlier prototype is an object
// if you check isArray(), it's true

// suppose you need to know about the prototype of numbers
console.log(Object.getPrototypeOf(numbers));  // same as line 43

console.log(numbers);


// you can also change your prototype

function helloHi(){
    console.log("Hello HI");
}

console.log(hello.prototype);
hello.prototype = [];
console.log(hello.prototype);
hello.prototype.push(1);
console.log(hello.prototype);

use Prototype

function createUser(firstName, lastName, age, address, email){
    // by using below line, we don't have to
    // give the reference
    const user = Object.create(createUser.prototype);
    user.firstName = firstName;
    user.lastName = lastName;
    user.age = age;
    user.address = address;
    user.email = email;
    return user;
}

createUser.prototype.about = function(){
    return `${this.firstName} is ${this.age} years old`;
};

createUser.prototype.is18 = function(){
    return this.age >= 18;
};

createUser.prototype.movie = function(){
    return "love you 3000";
};


const user1 = createUser("Ashwani", "Kumar", 24, "Delhi", "ak@ak.in");
const user2 = createUser("Eager", "Ashwani", 24, "Delhi", "eg@ak.in");
const user3 = createUser("Anmol", "Kumar", 20, "Delhi", "an@ak.in");

console.log(user1.about());
console.log(user3.movie());

`new` keyword

// new keyword
// 1. this = {}
// 2. return this
// 3. no need to create link with proto


// this func is called constructor function
// convention --> if a func is a constructor func, than first letter is caps
// capital letter indicates that the func needs new keyword
function CreateUser(firstName, lastName, age, address, email){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.address = address;
    this.email = email;
}
CreateUser.prototype.about = function(){
    return `${this.firstName} is ${this.age} years old`;
};

CreateUser.prototype.is18 = function(){
    return this.age >= 18;
};

CreateUser.prototype.movie = function(){
    return "love you 3000";
};


const user1 = new CreateUser("Ashwani", "Kumar", 24, "Delhi", "ak@ak.in");
const user2 = new CreateUser("Eager", "Ashwani", 24, "Delhi", "eg@ak.in");
const user3 = new CreateUser("Anmol", "Kumar", 20, "Delhi", "an@ak.in");

console.log(user1.about());
console.log(user3.movie());

hasOwnProperty

function CreateUser(firstName, lastName, age, address, email){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.address = address;
    this.email = email;
}
CreateUser.prototype.about = function(){
    return `${this.firstName} is ${this.age} years old`;
};

CreateUser.prototype.is18 = function(){
    return this.age >= 18;
};

CreateUser.prototype.movie = function(){
    return "love you 3000";
};


const user1 = new CreateUser("Ashwani", "Kumar", 24, "Delhi", "ak@ak.in");
const user2 = new CreateUser("Eager", "Ashwani", 24, "Delhi", "eg@ak.in");
const user3 = new CreateUser("Anmol", "Kumar", 20, "Delhi", "an@ak.in");

// suppose you want to access the property of user1
for(let key in user1){
    //console.log(key);  // gives all property including those who are in prototype
// but you don't want prototype property
   
    if(user1.hasOwnProperty(key)){
        console.log(key);
    }
}

Class

// class keyword
// 2015/ ES6
// classes are fake

class CreateUser{
    constructor(firstName, lastName, age, address, email){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.address = address;
        this.email = email;
    }
    about(){
        return `${this.firstName} is ${this.age} years old`;
    };
    is18(){
        return this.age >= 18;
    };
    movie(){
        return "love you 3000";
    };
}

// Internally above class works like folder 80


const user1 = new CreateUser("Ashwani", "Kumar", 24, "Delhi", "ak@ak.in");
const user2 = new CreateUser("Eager", "Ashwani", 24, "Delhi", "eg@ak.in");
const user3 = new CreateUser("Anmol", "Kumar", 20, "Delhi", "an@ak.in");

console.log(user1.firstName);
console.log(user2.is18());
console.log(Object.getPrototypeOf(user1));  // {constructor: ƒ, about: ƒ, is18: ƒ, movie: ƒ}



// Practice
class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    eat(){
        return `${this.name} Is eating`;
    }

}

const animal1 = new Animal("hobbit", 1);
console.log(animal1.name);
console.log(animal1.eat());


// suppose you have to make same class with named Dog
// one way is copy paste the Animal class code
// other is Inheritance

class Dog extends Animal {

}

// there is nothing in Dog class
// but Dog extends Animal
// so with the help of Anmial constructor
// lucky object is created

const lucky = new Dog("Lucky", 1);
console.log(lucky);
console.log(lucky.eat());

// Dog is sub class
// Animal is base class

`super` keyword

// super keyword

class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    eat(){
        return `${this.name} Is eating`;
    }

}

class Dog extends Animal {
   // we dont need to add name,age in Dog class constructor
   // we can use Animal class constructor to achieve this behaviour
   constructor(name,age,speed){
    // super keyword is used to call the constructor of 
    // its parent class to access the parent's properties and methods
    super(name,age);
    this.speed = speed;
   }

   run(){
    return `${this.name} is runs at ${this.speed} kmph`;
   }
}

// object also called as instance
// now lucky have another property named speed
// how can we add ?
const lucky = new Dog("Lucky", 1, 45);
console.log(lucky);
console.log(lucky.name);
console.log(lucky.run());

Inheritance

// same methods in sub class

class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    eat(){
        return `${this.name} Is eating`;
    }

}

class Dog extends Animal {
   constructor(name,age,speed){
    super(name,age);
    this.speed = speed;
   }

   eat(){
    return `${this.name} eats Royal Canin`;
   }

   run(){
    return `${this.name} is runs at ${this.speed} kmph`;
   }
}

const lucky = new Dog("Lucky", 1, 45);
console.log(lucky);
console.log(lucky.name);
console.log(lucky.run());
// eat() is not in the Dog class,
// so, JS look into its parent class
// if eat() present in Dog class
// than the eat() of Dog is called
console.log(lucky.eat());

Getters and setters

// getters and setters

class Person {
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get fullName(){
        return `${this.firstName} ${this.lastName}`;
    }

    // for setter
    set fullName(fullName){
        // below line split the fullname when space arrived
     //   fullName.split(" "); // something like this [Ashwani, Kumar]
     const [firstName, lastName] = fullName.split(" ");
     this.firstName = firstName;
     this.lastName = lastName;
    }
}

const person1 = new Person("Ashwani", "Kumar", 24);
//console.log(person1.fullName());

// but I want to use fullName as property not like a function
// I want this person1.fullName not person1.fullName()

// just add get in front of fullName(){}
// now the line 16, gives error
// person1.fullName is not a function
console.log(person1.fullName);

person1.fullName = "Elizabeth Olsen";
console.log(person1);

Static Methods

// static methods and properties

// there are methods you have no need to create object to call them

class Person {
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    // static methods
    static personInfo(){
        return 'Person Info static method';
    }

    // static property
    static desc = "Description of static property";

    eat(){
        return `${this.firstName} is eating`;
    }

    get fullName(){
        return `${this.firstName} ${this.lastName}`;
    }

    set fullName(fullName){
     const [firstName, lastName] = fullName.split(" ");
     this.firstName = firstName;
     this.lastName = lastName;
    }
}

const person1 = new Person("Ashwani", "Kumar", 2);
//console.log(person1.personInfo()); // gives error
// person1.personInfo is not a function


// you can call static method by class name 
const info = Person.personInfo();
console.log(info);
console.log(Person.desc);

Day 25 - JS DOM

Async vs Defer

// How to link JS file to HTML file

// one way
// <script src="./JS DOM/1_AsyncVsDefer.js"></script> in head tag in our HTML document
// Disadvantage:
// when the HTML document is loaded in the browser, it start reading the HTML file
// and when Browser get .js file, than the further reading of HTML document stops 
// and browser start parsing(read line by line) the js file, after loading the js file, 
// browser start executing the script and got div header and other tags but
// Browser have no idea about them, so execution is stopped and Error is occurred.
// Thats why this way is not used.


// second way
// <script src="./JS DOM/1_AsyncVsDefer.js"></script> </body>
// add script just before the closing body tag.
// Browser start executing the HTML document line by line
// and when it reaches the end of the body end, it get script
// than browser loads the js and start executing it,
// this time browser knows about the div, header etc.
// but still its not a good way. Why?
// First HTML document parsing, it takes time.
// Than JS Load, it also takes some time.
// Than JS Executes, it takes some time.



// third way
// <script src="./JS DOM/1_AsyncVsDefer.js" async></script> in the head tag.
// First browser start parsing the HTML document and when it get the script
// along with the parsing, browser start loading the JS 
// when JS is loaded and start executing at that time if any HTML document is parsing
// than it stopped. It may cause problems that's why we don't this way.



// fourth way
// <script src="./JS DOM/1_AsyncVsDefer.js" defer></script> in the head tag.
// First browser start parsing the HTML document and when it get the script
// along with the parsing, browser start loading the JS 
// When JS is loaded than browser still continue parsing the HTML document
// when the HTML document is parsed completely than browser start executing the JS.
// It takes less time BECAUSE when HTML document is parsing at that time 
// JS is start loading, and when the HTML parsing is complete
// Browser start executing the script because it's already loaded.
// This is the best way.

DOM

// DOM - Document object model

// Browser start reading the HTML document line by line
// First get HTML tag
// than Two tags Head and Body
// In the head -> title and meta is present
// In the body -> Header, section, aside, footer etc.

// Now browser makes an Object and we call that object a document.
// Browser add this document in the window object.
// Now document become a property of the window object.

// In the browser console just write window and hit enter.
// you got the window object and document object as a property of the window object.
// You can do anything with this document object
// document object is the main reason we can see our webpages

console.log(window.document); // human readable representation

console.dir(window.document); // Browser format

// we don't need to give window because window is already given by browser

console.dir(document);

getElementById

// I want to select some elements from my website
// And you know we have document object

// select elements by getElementById

// Our HTML looks like this
// <h2 id="heading">Heading</h2>

console.log(document.getElementById('heading')); // this gives us an Object in human readable format
console.dir(typeof document.getElementById('heading')); // this gives us an Object


// We can also store above code in a variable
const heading = document.getElementById('heading');
console.log(heading)

querySelector

// select element using query selector

// Via getElementById we can only able to select elements that has id attribute

// With the help of the querySelector we can access the element same as we access in CSS(like classes and id)

const selectElement = document.querySelector('#heading');
console.log(selectElement);

// As you know that, there is unique id attribute in HTML document.
// but what about class attribute


// There are several classes in the document
// Suppose we have a navbar with 3 link in ul list
const navItem = document.querySelector('.nav-item');
console.log(navItem);
// It returns the first element that matches the .nav-item and stop further processing


// If you want all elements that have .nav-item than use querySelectorAll instead
const navItems = document.querySelector('.nav-item');
console.log(navItems); // It returns a NodeList with all 3 li elements, it kind of array but not exactly array

textContent and innerHTML

// textContent and InnerText

// I want to select a text and change that.

const heading = document.getElementById('heading');
console.log(heading.textContent); // textContent returns the text

// Now I want to change the text
// heading.textContent = 'This is changed by textContent';
// console.log(heading.textContent); 

// <h2 id="heading">My Heading <span style="display: none;">Hello Span</span></h2>
// If we comment out line 9 and 10
// In browser it only shows My Heading but in console it shows `My Heading Hello Span` complete text

// To tackle this we have InnerText
console.log(heading.innerText); // It prints My Heading in console

change style

// change the style of the element

// `My Heading` is in Black color
const heading = document.querySelector('#heading');
heading.style.color = 'blue';

// properties that has - in it like background-color have some issues
heading.style.backgroundColor = 'black'
// instead of - we use Capital letter of second word without space(CamelCase)

get and set attribute

// get and set attribute

const link = document.querySelector('a');
console.log(link.getAttribute('href')); // #home (Human readable format)

// I dont want # 
console.log(link.getAttribute('href').slice(1));

// Lets set the attribute
link.setAttribute('href', 'https://github.com');
console.log(link.getAttribute('href'));

getElementsByClassName

// get all elements by using get Element by class name
// get all elements by using querySelectorAll

const navItems = document.getElementsByClassName('nav-item');
console.log(navItems); // It returns a HTMLCollection (Its also an array like object, we use index and iterate over it)
console.log(navItems[0])
console.log(typeof navItems)


const navAll = document.querySelectorAll('.nav-item');
console.log(navAll); // It returns a NodeList (Its also an array like object, we use index and iterate)
console.log(navAll[1]);

iterate Elements

// I want to change the text color to white and background color to black

// we also have a method named getElementsByTagName
const navItems = document.getElementsByTagName('a');
console.log(navItems) // It also returns a HTMLCollection

// loop
// simple for loop
// for of loop
// forEach 

// we can't use forEach to iteration through HTMLCollection

for(let i = 0; i < navItems.length; i++){
    const navItem = navItems[i];
    navItem.style.backgroundColor = 'black';
    navItem.style.color = 'white';
}

for(let item of navItems){
    item.style.backgroundColor = 'orange';
    item.style.color = 'white';
}

// if you want to use foreach than first convert HTMLCollection in array
// instead of const in navItems use let

// navItems = Array.from(navItems);
// navItems.forEach(navItem => {
//     navItem.style.backgroundColor = 'purple';
//     navItem.style.color = 'white';
// })

// NodeList
// In nodeList you can use all 3 loops
// simple for loop
// for of loop
// for each
// you can also change NodeList into an array
// same as above

innerHTML

// innerHTML

{/* <header>
<h2 id="heading">My Heading <span style="display: none;">Hello Span</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, alias.</p>
</header> */}

// everything between header tag is a innerHTML.
// all child tag of a parent tag is innerHTML.

const myhead = document.querySelector('.mainhead')
myhead.innerHTML = '<h1> HTML changed by innerHTML</h1>'

// if you want to add more innerHTML
myhead.innerHTML += '<p class= \"btn\">I am para</p>'
console.log(myhead.innerHTML);

// \" means "

DOM Tree

<html>
<head>
    <title>DOM Tree</title>
</head>
<body>
    <div class="container">
        <h1>Hello DOM </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quae.</p>
    </div>
</body>
</html>

// Lets look how browser read the html file and make document model


// Browser knows everything going in Document
// On Top level Document is present, all HTML going to add in Document, sometimes we call this Document as Root Node.
// HTML is root element(child node of Document) 
// Head is child node of HTML and so on.
// Go through the DOM tree image below

Traversing DOM

Day 26

Day 30

First React

Lets setup React CDN for our first app

Add below lines in your .html file in the head tag.

  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Add below line in the body tag

<script src="hello.js" type="text/babel"></script>

Now, we can call ReactDOM.render() provided by react-dom.development libraray in our JS file
ReactDOM.render() takes two input, first is the html part(What is going to render) and second is where render.
```
ReactDOM.render(<h1>Hello React</h1>, document.getElementById("root"));
```
Lets give root id to html element
```
<div id="root"></div>
```

First React Practice

Try to write that 1 linear of React code again! This time, see if you can figure out how to render an

s inside

ReactDOM.render(<ul><li>Hello 1</li><li>Hello 2</li></ul>, document.getElementById("root"));

Why React? - It's composable

We can make components and put together that build a website.
This helps to make our code more maintainable and flexible.

Challenge : Create your custom component call it MainContent

const MainContent = (){
  return (
  <h1>I am learning React</h1>
  )
}
ReactDOM.render(
  <div>
    <MainContent />
  </div>, document.getElementById("root));

Why React? - It's Declarative

Just tell me what to do, and I'll worry about how I get it done.

JSX

JSX stands for JavaScript XML. JSX allows us to write HTML in React.

const element = <h1 className="header">I am learning react </h1>
console.log(element);
// { $$typeof: Symbol(react.element), type: 'h1', key: null, ref: null, 
// props: {className: 'header', children: 'I am learning react '}
// ref: null
// type: "h1"
// _owner
// : 
// null … }

ReactDOM.render(element, document.getElementById("root"));

JSX return plain JS object.
We have to return only single parent element(We can't give multiple lines of html code in render function).

If you still need more elements than wrap up your html inside div element or <></>.

ReactDOM.render( <div>
    <h1 className="header">I am learning react </h1>
    <h1 >I am learning stock market </h1>
   </div>, document.getElementById("root"));

We can also put html in variable.

const page = (
<div>
    <h1 className="header">I am learning react </h1>
    <h1 >I am learning stock market </h1>
</div>
);

ReactDOM.render(page, document.getElementById("root"));

Challenge :

const navbar = (
  <nav>
      <h1>Ashwani Kumar</h1>
      <ul>
        <li>Pricing</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
  </nav>
);

ReactDOM.render(navbar, document.getElementById("root"));

Thought Expeiment

const page = (
    <div>
        <h1>H1</h1>
        <h1>H1 again</h1>
        <h1>H1 again x2</h1>
        <h1>H1 again x2 return</h1>
    </div>
)

document.getElementById("root").append(JSON.stringify(page))
// above line prints the object in the browser. Why..?? 
// Because JSX return plain object
// ReactDOM.render renders this object as real element that browser can understand

// Comment .append() line and uncomment below line and you see you element
// ReactDOM.render(page, document.getElementById("root"))

Day 31

Pop Quiz

1. Why do we need to import React from "react" in our files?
React is what defines JSX
1. If I were to console.log(page) in index.js, what would show up?
A JS object. React elements that describe what react should eventually add to the DOM for us.
1. Can we put multiple html elements in page?
We need our JSX to be nested under a single parent element.
1. What does it mean for something to be "declarative" instead of "imperative"
Declarative means I can tell the computer WHAT to do and expect it to handle the details. Imperative means I need to tell it HOW to do each step.
1. What does it mean for something to be "composable"?
We have small pieces that we can put together to make something larger than the individual pieces.

Custom Components

What is react component?
- Function that returns react element (UI).
Creating variable like page is good enough but its not recommended.

React adopts the concept of having a function that allows us to create user interface or create elements over and over again if we wanted to.

function whyReact(){
  return (
      <div>
          <ol>
              <li>It is composable</li>
              <li>It is declarative</li>
              <li>Easy and Fast</li>
          </ol>
      </div>
      )
  }

  ReactDOM.render(whyReact(), document.getElementById("root"))

We have to follow some conventions
- Use PascalCase instead of camelCase
- Instead of () we have to use < /> with our function component
```
  ReactDOM.render(<WhyReact/>, document.getElementById("root"))
```

Lets create a component having header,nav, ol, footer etc.

  function MyComponent(){
    return (
          <div>
              <header>
                  <nav>
                    <img src="react-logo.png" alt="" width="40px" />     
                  </nav>
              </header>
      
              <h1>Reasons I'm Excited learn React</h1>
              <ol>
                  <li>Job Demand</li>
                  <li>Easy to understand</li>
                  <li>Fast rendering</li>
                  <li>Single Page Application</li>
              </ol>
      
              <footer>
                  &#169; 2022 Kumar Development. All rights reserved.
              </footer>
          </div>
      );
  } 

  ReactDOM.render(<MyComponent />, document.getElementById("root"));

If we build our app like above code, than why we use react
Its monolithic approach.
We have to build components and bring them together.

Parent and Child Component

    function Header(){
        return (
            <header>
                <nav>
                <img src="react-logo.png" alt="" width="40px" />     
                </nav>
            </header>
        );
    }

    function MainContent(){
        return (
            <>
            <h1>Reasons I'm Excited learn React</h1>
            <ol>
                <li>Job Demand</li>
                <li>Easy to understand</li>
                <li>Fast rendering</li>
                <li>Single Page Application</li>
            </ol>
            </>
        );
    }

    function Footer(){
        return (
            <footer>
              &#169; 2022 Kumar Development. All rights reserved.
            </footer>
        );
    }

    function MyComponent(){
      return (
            <div>
              <Header />
              <MainContent />
              <Footer />
            </div>
        );
    } 

    ReactDOM.render(<MyComponent />, document.getElementById("root"));

MyComponent is Parent Component and Header, MainContent and Footer is child component.

Let's add some styling

function Header(){
     return (
         <header>
             <nav>
                 <img src="react-logo.png" alt="" width="40px" /> 
                 <ul className="nav-items">
                     <li>Pricing</li>
                     <li>About</li>
                     <li>Contact</li>
                 </ul>
             </nav>
         </header>
     );
 }

.nav-items{
  list-style: none;
  display: flex;
  justify-content: space-around;  
  align-items: center;  
  }

Organize Components

Now, Lets organize the components
Make Header.js, always follow PascalCase for files that have jsx code
Paste the Header function code
Now to import Header(), we have to export it
And import in index.js or main file

export default function Header(){
    return (
        <header>
            <nav>
                <img src="react-logo.png" alt="" width="40px" /> 
                <ul className="nav-items">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>

            </nav>
        </header>
    );
}

import Header from "./Header";

Do same for Footer and MainContent

Update on React 18

ReactDOM.render() is not supported in React 18
instead of import ReactDOM from "react-dom", use import ReactDOM from "react-dom/client"

instead of ReactDOM.render(page, documentElementById("root")), use

const root = ReactDOM.createRoot(documentElementById("root"))
root.render(page);

Local system setup

Install node
Check node and npm installed successfully
Standard Way
- Create react app
  - npx create-react-app
  - cd
  - npm start
With Vite
- npm create vite@latest
- cd
- npm install
- npm run dev

Day 32 - React official docs (Quickstart)

For, Now we are going to follow official react docs.

Creating and Nesting components

React apps are made up of components. A component is the pieace of UI that has its own logic and appearance. Everything in the UI is component eg : Button, section, even text can be a component.

React components are JS functions that returns Markup

  function MyButton(){
    return (
      <button> Who Am I? </button>
    );
  }

Lets Nest MyButton into another component

export default function App(){
  return (
    <>
      <h1> I am Heading </h1>
      <MyButton/>
    </h1>
  );
}

React components are always start with capital letter while HTML tags with small letter.

Writing markup with JSX

Above markup syntax is JSX.
JSX is stricter than HTML.
All components and tags must be wrap up with single parent(<></> or div).
<></> is called fragment.

Adding Styles

You can specify CSS class with className. It works same as HTML class tag.

  <h1 className="textMe"> I am Heading </h1>

  .textMe{
    font-size : 80px;
  }

You can import CSS file like this

import './App.css';

Displaying Data

JSX helps you put markup inside JS.

You can embed JS variable from your code and display it.

  return (
    <h1>
      {user.name}
    </h1>
  );

Look the below example

  function DisplayingData(){
    const user = {
      name : 'Ashwani Kumar',
      imgUrl : 'https://i.imgur.com/yXOvdOSs.jpg',
      imgSize : 120
    }
    return (
      <>
        <h1>{user.name}</h1>
        <img src={user.imgUrl} alt={'Photo of' + user.name}
           style={{
              width: user.imgSize,
              height : user.imgSize
            }}
           srcset="" className= "avatar"/>
      </>

    );
  }

style use two {{}}, outer {} is for style attribute and inner one is for JSX.

Conditional Rendering

Use JS conditions eg: if else

let content;
if(isLoggedIn){
  content = <AdminPanel />
} else {
  content = <LoginForm/>
}

return (
  <div>
    {content}
  </div>
);

You can also use ternary operator

<div>
 {isLoggedIn ? (<AdminPanel />) : (<LoginForm />)}
</div>

If you don't need else, use logical && syntax.

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Rendering Lists

We can use for loop or map() to render list.

lets take some products in an array. Eg:

    const products = [
      { name : 'Apple Pencil', id : 1},
      { name : 'iphone 14', id : 2},
      { name : 'ipad Pro M2', id : 3},
      { name : 'Apple Watch Ultra', id : 4},
    ]

Lets transform array of products into array of list
```
const listitems = products.map(product => {
  return <li key={product.id}>
    {product.name}
  </li>
});

return(
  <>
    {listitems}
  </>
)
```
- li has key(string or number) attribute, it uniquely identifies that item along ites siblings
- React need this keys to understand what happens later, if you insert, delete or reorder the items.\

Responding to events

You can respond to events by declaring event handlers functions inside your component.
```
function MyButton(){
  function handleClick(){
    alert('You clicked me');
  }

  return (
    <button onClick={handleClick}> Click me </button>
  );
}
```
- onClick = {handleClick} has no parantheses.
- React will call your event handler when the user clicks on button.

Updating the screen

Sometimes, you want your component to remenber some information and display it. Eg: No of times button clicked.
To achieve this, add state to your component.
First, import

import {useState} from 'react';
Now, declare a state variable inside your component.
```
function UpdateState(){
  const [count, setCount] = useState(0);
}
```
- useState gives two things:
  - the current state (count)
  - the function that lets you update it (setCount)
  - Always follow this convention [something, setSomething]
  - First time the button displayed, count will be 0, because we pass 0 to useState().
  - When you want to change the state, call setCount() and pass the new value to it.
```
function MyUpdateState(){
 const [count, setCount] = useState(0);

 function handleClick(){
   setCount(count + 1);
 }

 return (
   <button onClick={handleClick}> My press count is {count}</button>
 )
}
```
- React will call your function again and again like 1,2 and so on.
- If we render same component multiple times, each will get its own state and doesn't effect other buttons state.

Using Hooks

Functions starting with use are called Hooks. useState is a built-in Hook.
We can write our own Hooks by combining the existing ones.
You can only call Hooks at top level of your components.

Sharing data between components

In useState, we can see MyButton had its own independent count and when each button was clicked, only the count for the button clicked changed.
Sometimes we needd components to share data and always update together.

To make same count and update together, we have to move the state from individual buttons upwards to closet component containing all of them.

Move the state from MyUpdateState to App

Then, pass the state down from App to each Button, together with the shared click handler.

export default function MyApp() {
    const [count, setCount] = useState(0);

    function handleClick() {
      setCount(count + 1);
    }

    return (
      <div>
        <h1>Counters that update together</h1>
        <MyButton count={count} onClick={handleClick} />
        <MyButton count={count} onClick={handleClick} />
      </div>
    );
  }

The information you pass down like this is called props.

To read the props you have passed from its parent component.

function MyButton({ count, onClick }) {
    return (
      <button onClick={onClick}>
        Clicked {count} times
      </button>
    );
 }

Day 33 - React Again

React is a library not a framework.
In library we need to add other packages like react-router-dom, etc.
Component based, we can use same component over and over again.
SPA, UI change according to data, website never reloads like youtube, gmail.
Two ways to create react app
- via global cli
  - You have to install react in your system
  - To create app
    - create-react-app appname
    - appname in small letters only.
- via npx
  - You have to do nothing
  - npx create-react-app appname
To run react app
- npm start
Only index.html, index.js, App.js, App.css are important files.
noscript in index.html shows message if javascript is not enable.

Day 40

React Router v5.2.0

First install react router in your project
```
npm i react-router-dom
```
- In this project, we are going to use version 5.2.0
```
npm install react-router-dom@5.2.0
```
Lets import BrowserRouter, Switch, Route from react-router-dom in App.js
```
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
```
- BrowserRouter as Router means, we're aliasing the BrowserRouter
- We can use Router in our project instead of BrowserRouter.
Lets create some components
- Use react snipets rafce, rfc, rafc.
In App.js
```
  <>
    <Router>
      <Switch>
        <Route path="/" component={Home}>Home</Route>
        <Route path="/about" component={About}>About</Route>
      </Switch>
    </Router>
  </>
```
- When we add /about in our browser still Home component shows.
  - Why?
    - Whenever react get / in browser url it renders the Home component
  - If we remove Switch than the browser shows both components.
    - Why?
      - After getting / react still continues to find the matching components
      - And shows all components start with /
  - You have to use exact in Route of Home component
```
<Route path="/" component={Home} exact>Home</Route>
```
Lets add simple nav
```
 <Router>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <Switch>
```
- Everytime we click on Home and About, our browser reload the page, so what's the use of react?
- To tackle this problem, use , import from react-router-dom.

React Router v6

In v6

import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';

<Router>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <br/>
      
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="about" element={<About />}></Route>
      </Routes>
</Router>

Lets create a new component for router named navbar and put above code inside it.

const NavBar = () => {
return (
  <>
  <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="about">About</Link></li>
  </ul>
  </>
)
}

If you want to use navigation anywhere in your app
<Link to="/about">Go to About</Link> use like this

404 and redirect

Create a new component, and in App.js

    <Routes>
         <Route path="/" element={<Home />}></Route>
         <Route path="about" element={<About />}></Route>
         <Route path="*" element={<Page404 />}></Route>
   </Routes>

- means, if all paths that mentioned above is not found than load Page404 component.
To redirect, first import Navigate from react-router-dom <Route path="*" element={<Navigate to="/" />} />
- In the element give Navigate with to and give the path, where you want to redirect.

Dynamic routing with param

Suppose you have a list of users and you have to show particular user profile and url change based on username.
Why Its important?
- Suppose we have 1000s of users, we don't make 1000s Route url instead we use dynamic routing with params.

Lets create a new component

import { useParams } from "react-router-dom";

  const User = () => {
      const params = useParams();
      const {name} = params;
      return (
          <>
              <h1>I am {name}'s page </h1>
          </>
      );
  }

  export default User;

With the help of useParamas(), you can get data from urls.

In App.js

<Route path='user/:name' element={<User/>} />

Lets create their Link

<Link to="user/anil">Anil</Link>
<Link to="user/ashwani">Ashwani</Link>

You can pass multiple params.

<Route path='page/:name/:id' element={<Page404/>} />

Link and Nav Link Styles

Lets add some styles to our navbar

.navbar{
text-align: right;
}

.navbar li{
  display: inline-block;
  padding: 10px 5px;
}

.nav-bar-link{
color: black;
text-decoration: none;
}

.nav-bar-link:hover{
  color: orange;
}

We cant apply style to Link tag, so instead of Link tag we use NavLink tag

  <ul className='navbar'>
      <li><NavLink className='nav-bar-link' style={{color:'red'}} to="/">Home</NavLink></li>
      <li><NavLink className='nav-bar-link' to="about">About</NavLink></li>
      <li><NavLink className='nav-bar-link' to="user/anil">Anil</NavLink></li>
      <li><NavLink className='nav-bar-link' to="user/ashwani">Ashwani</NavLink></li>
  </ul>

Active Link

We can simply use .active class
```
.navbar .active{
  color:  green;
}
```
- Sometimes Home Path is always active, use end
Home

useSearchParam() Hook and setSearchParams

Sometimes url have a query like this ....com/filter?price=10
And when we have to use this query in our app, there we use SearchParams.

useSearchParams is same as react states.

const Filter = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const age = searchParams.get('age');
  const name = searchParams.get('name');
  const handleChange = (e)=>{
      setSearchParams({name : e.target.value, age: 21},)
  }
  return (
      <>
          <h1>This is Filter Page</h1>
          <h3>My name is {name} and age is {age}</h3>
          <input type="text" onChange={handleChange} />
      </>
  )
}

Navigation on Button Click

Mainly we want to implement navigation by our button.

To achieve this, we use useNavigate().

 const navigate = useNavigate();
 ....
 <button onClick={()=>{navigate('/')}}>Go to Home</button>
 <button onClick={()=>{navigate('/about')}}>Go to About</button>

You can also use function for navigation.

Day 41

Nested Routing

Routing inside routing.
suppose we have a contact component and this component have 3 different components link.
localhost:3000/contact/company this is the example of nested routing.

Contact.js

import { Link, Outlet } from "react-router-dom";

const Contact = ()=>{
    return (
        <>
            <h1>I am Contact</h1>
            <Link to='company'>Company</Link>
            <Link to='channel'>Channel</Link>
            <Link to='other'>Others</Link>
            <Outlet/>
        </>
    );
}

export default Contact;

We have to define Outlet tag, otherwise component not renders.

In App.js

   <Route path='contact/' element={<Contact/>} >
          <Route path='company' element={<Company />}/>
          <Route path='channel' element={<Channel />}/>
          <Route path='other' element={<Others />}/>
   </Route>

Make sure path and to have same spellings, to avoid non-viewable error like route will work but component not shows.

useLocation() Hook

Whenever we move from one route to another and we want all the data that route have, we can use useLocation().
It gives all object data.
It has search, Hash, Key, state.
As you know, we can't pass more data via route, we can use state <li><NavLink className='nav-bar-link' to="user/ashwani" state={{name: "Ashwani", age: 24}}>Ashwani</NavLink></li>

Protected Routes

Many website restrict outsiders to access their website, it you want to access website you must login to website, and manytimes website show only single content and show popups/navbar to login.
To achieve this we use protected routes, Its basically a logic.

Lets create a ProtectedRoute.js

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom';

const ProtectedRoute = (props) => {
    const {Component} = props;
    const navigate = useNavigate();
    useEffect(()=>{
        let login = localStorage.getItem('login')
        if(!login)
            navigate('/login')
    })

  return (
    <div>
        <Component />
    </div>
  )
}

export default ProtectedRoute

Login.js

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom';

const Login = () => {
    const Login = ()=>{
        localStorage.setItem('login', true);
        navigate('/')
    }
    const navigate = useNavigate();
    useEffect(()=>{
        let login = localStorage.getItem('login');
        if(login)
            navigate('/')

    })
  return (
    <>
        <div>Login</div>
        <input type="text" />
        <br/>
        <button onClick={Login}>Login</button>
    </>
  )
}

export default Login

In App.js
```
 <Route path="filter" element={<ProtectedRoute Component={Filter} />}></Route>
```
- Now add ProtectedRoute in element to those element who you want to first login than component.

Interview Question

Where we can use react routing?
- on web
- on server-side with Node js
- with react-native
Link vs NavLink
- With NavLink we can add custom style and classes
- With NavLink we can add active link feature
- Style is not recommended with Link
What is nested routes?
- make route inside a route
- we can make tabs or pages inside a page
- multiple nested routes also possible.
How to Add 404 page?
Some Important Hooks
- useParams
- useSearchParams
- useLocation
- useNavigate
useParams and useSearchParams
- useParams : use to get Dynamic routing value
  - Eg: localhost:3000/user/100
  - ```
  localhost:3000/user/101
```
- 100 is dynamic value here
- useSearchParams : use for get query params.
  - Eg: localhost:3000/user?id=100
  - id=100 is query paramas here
Redirect on button click
a href vs Link
- No refresh with Link
- Refresh with anchor tag
Hash Route vs Browser Route
- Mostly we use Browser route
- Hash route used for hiding route from the server
- Eg BR : localhost:3000/about
- Eg HR : localhost:3000#about

Day 43

React Redux

What is redux?
- Redux is an open source JavaScript library for managing and centralizing application state.
Suppose
- To understand, state is like a variable don't take it seriously
- Our App structure looks like this
  - --> -->
  - Now a variable C = 20, means C's state is 20.
  - Now I want to access C in , and , first declare C in and than pass to and than
  - But suppose I declare C in , Can we still use C in ? No, because in react data flow from outer component to inner component.
    - In real life example, we have an api of Users in .
  - To access api data in or <Home / >, we use redux.
  - Lets create a new area(file) named store and declare C inside it.
  - Now, I can access C in , and
  - That is redux.

Some Terminologies

Store : A seprate place where our data is stored
Reducer : With the help of reducer, we can change the state of our data.
Action : Its like a trigger of gun, and reducer is the gun, when the action is called reducer activates.
State : C = 20, C's state is 20

Redux Toolkit

First install the Redux Toolkit and react-redux
- npm i @reduxjs/toolkit react-redux
Now Create a component

App.js

function App() {
const value = 20;
return (
  <>
    <Home value = {value} />
  </>
  )
}

Home.js

const Home = ({value}) => {

return (
  <div>
      <h2>{value}</h2>
      <button>Increment</button>
      <button>Decrement</button>
  </div>
)
}

We can do this, declare variable in App and pass it to Home and show there.
But, we have to use redux. So, we have to declare value in new file.

Reset App and Home.js

const Home = () => {
const value = 20;
return (
  <div>
      <h2>{value}</h2>
      <button>Increment</button>
      <button>Decrement</button>
  </div>
)
}

Lets create a new file store.js

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
    // reducer takes multiple reducers
    reducer: {}
});

export default store;

Lets create a new file Reducers.js
We can create reducers by two ways
- createReducers
- createSlice

Reducers.js

import { createReducer } from "@reduxjs/toolkit";

const initialState = {
    c:0,
}

export const customReducer = createReducer( initialState, {
    // all reducers case
    increment: (state, action ) => {
        state.c += 1;

    },

    incrementByValue: (state, action) => {
        state.c += action.payload;
    },

    decrement : (state, action) => {
        state.c -= 1;
    }
});

createReducer take two values one is initial state and other is all reducers.

Lets import our customReducer in store.js

 reducer: {
    custom : customReducer
}

Lets add our reducer in index.js

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Install Redux DevTools Chrome Extension
Lets update Home.js

import React from 'react';
import {useDispatch, useSelector} from 'react-redux';

const Home = () => {
  const dispatch = useDispatch();
  // use selector to get state value
  // custom is defined in store.js
  const {c} = useSelector(state => state.custom);

  const addBtn = () => {
    dispatch({
        type: 'increment'
    })
    
}
  const addBtn25 = () => {
    dispatch({
        type: 'incrementByValue',
        payload: 25
    })
    
}

const subBtn = () => {
      dispatch({
          type: 'decrement'
      })

  }
  return (
    <div>
        <h2>{c}</h2>
        <button onClick={addBtn}>Increment</button>
        <button onClick={addBtn25}>Increment By Value</button>
        <button onClick={subBtn}>Decrement</button>
    </div>
  )
}

export default Home

Lets use value of c in another component App.js

function App() {
const {c} = useSelector(state => state.custom);

return (
  <>
    <h1>{c} - App </h1>
    <Home />
  </>
  )
}

Now, you can access c, everywhere in our whole application.

Day 50 - MongoDB

It is document based means all data in one object.
It is no sql database.
Store data in JSON format.

MongoDB Document

Records in mongoDb is called documents. Eg:

    {
    title: "Post Title 1",
    body: "Body of post.",
    category: "News",
    likes: 1,
    tags: ["news", "events"],
    date: Date()
   }

Install MongoDb in your system

Follow installation guide based on your system.
check mongodb is installed successfully or not via mongosh --version
run the mongo shell via mongosh
you can see > that means you are in mongodb shell.
To close mongodb shell, just write exit
To clear the mongodb shell Ctrl + L.
When we installed mongodb, some databases are already there or say preinstalled databases.

MongoDB commands

To show all the databases

show dbs;

; is optional.
admin, config and local dbs are there.
Above command shows all the databases along with there size.

To create a new database

use <dbname> 
eg: use ecom

Lets create a collection, collections are same as tables in sql dbs.

To view all the collections in dbs

show collections

Our ecom dbs has no data, so there is no collections are there.

To create a collection

db.createCollection('products')

products is the name of collection.
if monogodb shell prints {ok:1}, than our collection is created successfully.
Now, show collections shows products when we run show collections.

Switch to other db

Lets suppose pizza dbs is already there.
```
use pizza
```
- You can see use is used for both to create a dbs or switch a dbs.
- If dbs is not there than use create that dbs and if dbs is exist than use switch to that dbs.
Lets create a new collection named users and delete products collection.

To delete a collection

db.products.drop()

It returns a boolean value

To delete a database

Now, we want to delete ecom database.
```
db.dropDatabase()
```
- Note : Before deleting database, must ensure you are in correct database.
Now, I recreate everything ecom databse and products collection
I want to see whats have in my products collections

To see collections data

db.products.find()

If above commands return nothing, that means our collection have nothing.
If you enter wrong collection name that doesn't even exist than still mongodb not gives you error, it shows nothing.

To insert a document in collection

db.products.insertOne({ name : 'Keyboard' , price : 250})

insertOne() takes data in json format.
After data successfully inserted in collection, mongodb shell shows an object with insertedId and acknowlwdged like below.

 {
 acknowledged: true,
 insertedId: ObjectId("634e8415725a4382a8da306d")
 }

Everytime we insert new data, mongodb generates new unique ID for us.

Now, we run db.products.find(), than it shows an array of object and the object looks like.

[
  {
    _id: ObjectId("634e8415725a4382a8da306d"),
    name: 'Keyboard',
    price: 250
  }
]

find(), return all documents in the collection.

[
  {
    _id: ObjectId("634e8415725a4382a8da306d"),
    name: 'Keyboard',
    price: 250
  },
  {
    _id: ObjectId("634e8559725a4382a8da306e"),
    name: 'Monitor',
    price: 25000
  }
]

we can give option in the find()
Now, I want to show that product having price equal to 250

find() with filters

db.products.find({price:250})

It shows only that product have 250 price.
If we give filter that doesn't exist db.products.find({price:2500}), than mongodb shell shows nothing.
Now, I only want one document.

To get only one document

db.products.findOne({price:250})

It shows an object
If we give filter that doesn't exist, it shows null.

Insert many documents

To insert many documents in collection.

db.products.insertMany([{name : 'Mouse', price: 100}, {name : 'Table', price: 500}])

It shows

 {
    acknowledged: true,
    insertedIds: {
      '0': ObjectId("634e8b7c725a4382a8da306f"),
      '1': ObjectId("634e8b7c725a4382a8da3070")
    }
  }

We can use .pretty() method on approx every command, to rectify the output.

To Update exsiting document

Update the name of product that has 100 price(Mouse).
```
db.products.update({_id : ObjectId("634e8b7c725a4382a8da306f")}, { $set : { name : 'RAM'}})
```
- The first parameter is filter
- The second parameter is operator within operator we have to give an object with key value pair, here we give value we want to update.
- .update() is deprecated, we can use .updateOne()
```
 db.products.updateOne({_id : ObjectId("634e8b7c725a4382a8da306f")}, { $set : { name : 'RAM'}})
```

Delete a document

db.products.deleteOne({ _id : ObjectId("634e8b7c725a4382a8da3070")})

Delete multiple documents

db.products.deleteMany({_id: { $in : [ObjectId("634e8559725a4382a8da306e"),ObjectId("634e8b7c725a4382a8da306f")]}})

$in => is a operator

Related data in MongoDb

We can store related data in mongodb also like mysql.
It's not a good practice.
Lets create a new collection named reviews

Lets insert some documents in reviews collections. To accomplish relations we have to provide foriegn key. eg : we have to link reviews with their corresponding product.

db.reviews.insertMany([
  {text: "Great App", stars : 4, productId : ObjectId("634e8415725a4382a8da306d")}, 
  {text : "Awesome Website", stars: 5, productId : ObjectId("634e8415725a4382a8da306d")}
  ])

As you know this is not recommended.

We have to keep reviews in corresponding document(recommended).

db.products.updateOne({_id : ObjectId("634e8415725a4382a8da306d")}, {$set: {reviews : [{text : 'Great app', stars : 4}, {text : "Awesome website", stars : 5}]}})

and the db.products.find() shows

[
 {
   _id: ObjectId("634e8415725a4382a8da306d"),
   name: 'Keyboard',
   price: 250,
   reviews: [
     { text: 'Great app', stars: 4 },
     { text: 'Awesome website', stars: 5 }
   ]
 }
]

In mongodb we don't care about what a document have in a collection.

We add new document
db.products.insertOne({name:'Mouse', price : 100, category : 'computers'})
It shows

      {
        _id: ObjectId("634e8415725a4382a8da306d"),
        name: 'Keyboard',
        price: 250,
        reviews: [
          { text: 'Great app', stars: 4 },
          { text: 'Awesome website', stars: 5 }
        ]
      },
      {
        _id: ObjectId("634ea06c725a4382a8da3075"),
        name: 'Mouse',
        price: 100,
        category: 'computers'
      }
    ]

You can see one document have reviews and other have category.
There is no restriction about schema in mongodb.

Operators

Don't forget to ⭐ this repo

Building with the COMMUNITY for the COMMUNITY ❤️

License

eagerashwani/100DaysOfCode

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages