extra

https://code.visualstudio.com/download
https://github.com/
https://github.com/Aakashdeveloper
https://github.com/Aakashdeveloper/edu_intern_web
git bash> https://git-scm.com/downloads

>> only one time
git clone https://github.com/Aakashdeveloper/edu_intern_web
go inside edu_intern_web
git pull

HTML > structure
CSS  > design
Bootstrap 3,4,5 > Responsive
JavaScript > Dynamic

NodeJS
Express
mongodb
postgress
redis
React

>>>extension
auto close tag
vscode-icons
tabnine
gitlens
githistory

//////HTML//////
Block Level
Inline 

///////Css///////
Inline 
StyleTag 
StyleSheet

Inline > StyleTag > StyleSheet

<h1>Hii</h1>

{
   color:red;
   font-size:20px; 
   text-align:center;
   margin:1%
}

inline{
    color:red;
    font-size:20px;
}

StyleTag{
    color:orange;
    text-align:center;
    font-size:40px;
}

StyleSheet{
    color:olive;
    text-align:right;
    font-size:40px;
    margin:1%
}

h1 > It will target all the h1 tag of page unless if they don't have any other property
id > To target any unique element
class > to target group of element

solid
dotted
dashed
double
groove


bootstrap3
grid Basic
col-xs < 768px
sm > 768px
md > 992px
lg > 1200px
https://getbootstrap.com/docs/3.3/components/


bootstrap4
col- <576px
col-sm >576px
col-md > 768px
col-lg >992px
col-xl >1200px


bootstrap5
xs < 576px
sm > 576px
md > 768px
lg > 992px
xl > 1200px
xxl> 1400

12/4
3


// first time
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/Aakashdeveloper/stockmarket.git
git push -u origin master

// next all time 
git add .
git commit -m "first commit"
git push

/////////
dummy url
/////////
*Install NodeJs (https://nodejs.org/en/)

^One Time^
##Windows##
> open cmd as administrator
> npm i -g json-server
> close cmd

##Mac/Linux##
> open terminal
> sudo npm i -g json-server
>>>>>>>><<<<<<<<<
json-server --watch employee.json --port 8500


//////target/////
id (unique)
Class (common)
Tag (h1,p,a)

storage
Filter
darkmode
geolocation
////////
stocksapp

https://api.openweathermap.org/data/2.5/forecast/daily?lat=30.7333148&lon=76.7794179&mode=json&units=metric&cnt=5&appid=fbf712a5a83d7305c3cda4ca8fe7ef29
http://api.openweathermap.org/data/2.5/forecast/daily?q=Delhi&mode=json&units=metric&cnt=5&appid=fbf712a5a83d7305c3cda4ca8fe7ef29


NodeJs>>
Node is single threaded, Async, Nonblocking I/O

convert code in byte

code
||
\/
machine
||
\/
byte

code
||
\/
byte

npm
> node package manager

//////////
package.json
//////
> Entry point to application
> metadata > Description,version,name,author
> script (start,test,build)
> packages

>>>>><<<<<<
Step to generate package.json
>>>>><<<<<<
*NodeJs must be installed in our system
> open cmd/terminal
> navigate to the folder
> npm init
> answer all question
> type "yes"

>>>>><<<<<<
Step to install packages
>>>>><<<<<<
> open cmd/terminal
> navigate to the folder
> npm i packagename

> local dependencies
# local to the folder
# used in same folder
# do not need admin access

> global dependencies
# install in your system(laptop)
# used for any application
# only those package that help to
    start, build ,test application
# Need admin access

///// step to install global packages /////
>>>Window<<<
> open cmd as administrator
> npm i -g package name
> close cmd

>>>Mac/Linux<<<
> open terminal
> sudo npm i -g package name
> close terminal


> npm i -g nodemon


C > Create (insert) (post)
R > Read   (select) (get)
U > Update (update) (put)
D > Delete (remove) (delete)


npm i mongodb morgan chalk cors body-parser

/////
params /
> params are complusory to define the

queryparams ?
> no need to define

/******GetAllUser*****/
(GET)> https://developerjwt.herokuapp.com/api/auth/users

/******Register*****/
(POST)> https://developerjwt.herokuapp.com/api/auth/register
(body) => {"name":"Aakash", "email":"aa@gmail.com","password":"12345678","phone":343432,role?":"user"}


/******Login*****/
(POST) => https://developerjwt.herokuapp.com/api/auth/login
(body)  => {"email":"aa@gmail.com","password":"12345678"}
(response)=> {auth:true,token:'dgsdg'}

/******UserInfo*****/
(GET) => https://developerjwt.herokuapp.com/api/auth/userinfo
(Header) => {'x-access-token':'token value from login'}


npm i packagename --save

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh


React
> react is a frontend framework that help to
build single page application using components
 npm i create-react-app
create-react-app appname

/// step to generate react app///
> go inside the folder
> npx create-react-app appname

//////

react  >>>>> This is the main package
react-dom >>>>> This package help to bind Js with html
react-script >>>> This help to run the application

functional component
>>> dumb component
>>> only use for displaying
>>> we cannot maintain the state and cannot all api

class component
>>> logical components
>>> we can call api, maintain state as well as displaying
>>> heavy as compare to functional components

HookComponent

//////////
State
> state act like a local variables
> every component have its own state
> scope of state will be in same component
> we can update the value of state(mutable)
> Any data interaction should happen through state only

props
> Help to transfer data between components
> We can transfer data only between the nested component
> We cannot update the value of props(immutable)


parent > child (props)
child > parent (props with function)

// parent
function add(a,b){
    return a+b
}

// child
add(1,2)

npm i react-router-dom@5.3.0 

params /
queryparams ?

////Default Props///
History > For redireaction
Location > for queryparams
Match > for params


https://dashboard.paytm.com/next/apikeys

var a = "status=TXN_SUCCESS&ORDERID=TEST_49069&date=2021-12-26%2011:45:02.0&bank=Axis%20Bank"
undefined
a.split('&')
(4) ['status=TXN_SUCCESS', 'ORDERID=TEST_49069', 'date=2021-12-26%2011:45:02.0', 'bank=Axis%20Bank']
a.split('&')[0]
'status=TXN_SUCCESS'
a.split('&')[0].split('=')
(2) ['status', 'TXN_SUCCESS']
a.split('&')[0].split('=')[1]
'TXN_SUCCESS'
a.split('&')[1].split('=')[1]
'TEST_49069'
a.split('&')[2].split('=')[1]
'2021-12-26%2011:45:02.0'
a.split('&')[3].split('=')[1]
'Axis%20Bank'
a.split('&')[1].split('=')[1].split('_')
(2) ['TEST', '49069']
a.split('&')[1].split('=')[1].split('_')[1]
'49069'

                    If Correct Info                   Token valid
Register  => Login ------------------> Generate Token ------------> Get User Profile
                         |                                 |
                         | if wrong info                   | Invalid Token
                         |                                 |
                         \/                                \/
                    Dont let you login                   Dont let you login

npm i jsonwebtoken bcryptjs body-parser cors express mongoose


/////////////
/******GetAllUser*****/
(GET)> https://developerjwt.herokuapp.com/api/auth/users

/******Register*****/
(POST)> https://developerjwt.herokuapp.com/api/auth/register
(body) => {"name":"Aakash", "email":"aa@gmail.com","password":"12345678","phone":343432,role?":"user"}


/******Login*****/
(POST) => https://developerjwt.herokuapp.com/api/auth/login
(body)  => {"email":"aa@gmail.com","password":"12345678"}
(response)=> {auth:true,token:'dgsdg'}

/******UserInfo*****/
(GET) => https://developerjwt.herokuapp.com/api/auth/userinfo
(Header) => {'x-access-token':'token value from login'}