HTML CSS JAVASCRIPT REACT

Node : Engine which executes javaScript

HTML ( templates : index.html,script.js,style.css)

Attributes
- href="URL"
- id =""
Important Tags
```
 <div></div>
 <center> </center
 <br>
```
UI Creation
- BootStrap (use 5+)
- Simple Css
- Tail Wind >
  1. Search for Tail Wind CDN > Copy Script tag to similar to bootStrap
  2. Components - Seach for "Tailblocks" in google

Adding CSS to Html

Adding CSS to HTML (Seperate)

use below links to generate Animations (U need to create the object to be animated )
- Animista
- https://webcode.tools/generators
create a folder

create style.css file

  .myStyle{animation: myAnim 1s ease 0s infinite normal forwards;}
  @keyframes myAnim {
  	0% {transform: rotate(0);}
  	100% {transform: rotate(360deg);}}

create 1.html file

  <html>
    <head><link rel="stylesheet" href="styles.css" /></head>
    <body><img src="image_url" alt="" width="400"  class="myStyle" /></body>
  </html>

Adding CSS to HTML (Same File)

  <html>
    <head>
        <style type="text/css">
  		.myStyle{animation: myAnim 1s ease 0s infinite normal forwards;}
  		@keyframes myAnim {
  			0% {transform: rotate(0);}
  			100% {transform: rotate(360deg);}}
  	</style>
   </head>
    <body><img src="image_url" alt="" width="400"  class="myStyle onemore" /></body>
  </html>

Basics JS

Use Developer Mode in Browser or Install Node to run javascript locally(node or node path/file.js)
function eg: function f(){return 1;}
Print: console.log(a) ( Browser >DeveloperMode >Console)
alert("hi")

Html and JS Code can be written in Gists , Bloggers etc.,

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Document</title>
  	 <script>
  	    function fn(){alert("sdfds") }
  	 </script>   
  </head>
  <body>
  	 <center>
  		 <button onclick="fn()">Check</button><br/>			
  	 </center>
  </body>
  </html>

Datatypes (same as python )

  v="asd"
  v[1]
  v.slice(1,3)
  v=v+"2"
  <h1> Hello {v}<h1>
  	
  b=true
  	
  l=[1,2]		//l=l.concat([1,2])
  "123"[0]	//1
  "12334444".slice(1,3) //233
  	
  d={1:1} //Dict is called as objects

Others

  var a=1
  let a=1		//Constant	
  const a =1 	//Constant

If if(1==2)console.log("Wrong");else console.log("right")
Loops for(i=0;i<5;i++)console.log(i)

Functions / Anonymous Function

  function fn(a){console.log(1)} //fn(1)  

  a=(i,j)=>i+j
  console.log(a(1,2))
  
  [1,2,3].map(i => console.log(i)) //only to lists,Arrays

Events:

  //Alert
  	<script>
          function f(){alert("hi")}
    	document.addEventListener("click",f)
  </script>
  
  	//Confirm
 			function f(){
  		res=confirm("U sure");
      			console.log(res)
  	}

  	//Mouse
  	function f1(ele){ele.classList.add('css');}  
  	function f2(ele){ele.classList.remove("css");}
  	<button onmouseenter="f1(this)" onmouseleave="f2(this)"/>

Non Blocking

  f=()=>console.log("waiting")
  setTimeout(f,3000)
  console.log("run")

API

  //GET -1 
  respons = await fetch('https://www.nseindia.com/api/index-names');
  dat = await respons.json();
  console.log(dat)
  
  //GET 2
  fetch(url).then(res => res.json()).then(data => console.log(data)).catch(error => console.log(error))
  
  //POST 
  async function apiCall() {
  //jsonData=  JSON.parse(document.getElementById("1").value)
  x = parseInt(document.getElementById("A").value);
  	y = parseInt(document.getElementById("B").value);
	payload = {method: "POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({ a: x, b: y })};
 	resp = await fetch("http://localhost:5343/name", payload);
 	data = await resp.json();
	document.getElementById("C").value = data;
  }

Create dynamic rows using in JS

  <html>
    <head><title>Hello, World!</title></head>
	      <script>
  					 function addRow(){
  					 tableRow = document.getElementById("table");
  					 row = tableRow.insertRow(-1);
  					 cell1 = row.insertCell(-1);
  					 cell1.innerHTML = "data"}
        </script>
    <body>
  	  <table id="table">
  	    <tr><td>Cell of Row 1</td></tr>
  	    <tr><td>Cell of Row 2</td></tr>
  	</table>
  	<br>	  
  	<button type="button" onclick="addRow()">Add</button>
    </body>
  </html>

HTML + CSS + JS

  <!-- this.classList.add('cssName'); this.classList.remove('cssName');-->
  <html>
  <head>
      <script>
  	function change_css(this) { 
  	    if (this.style.backgroundColor == "red") {
  		this.style.backgroundColor = "blue";
  	    } else {
  		this.style.backgroundColor = "red";
  	    }
  	}
      </script>
  </head>
  <body>
      <center>
  	<div id="error"></div>
  	<center>
  	<button onclick="change_css(this)">Check</button><br/>
  	</center>
      </center>
  </body>
  </html>	
  or
  <button onclick="change_css(this)">
  function change_css(ele){ele.tyle}

REACT

Intro

Component Based Architecture (Each component is from Functions)
Entire HTML is in public/index.html
Components are supplied using src/App.js
Uses Javascript , Node and NPM (package manager)
JS execute api
Non Blocking ie., if 1 lines takes time , next line will be executed
NO need to Reload Entire Page (Use Router)

Rules

difference b/w html vs react html class tag = className tag, for = htmlFor , tab =tabIndex
Component name should start with a capital
Only 1 Component Exported per File export default function MyDiv() { return (<div>hi</div>); }
Adding BootStrap to React
- Copy BootStrap <script> and to public/index.html
- Components copy from BootStrap4/Components (sometimes tags do not have closing "/>")
- href="#" to href="/"

Install Node

download tar file
taz -zxvf file
Open ~/.bashrc
export NODE_HOME='<root path to unzip Folder >
export PATH=$NODE_HOME/bin:
sudo apt-get install npm	#npm -v
npx create-react-app myapp	#npx - without download 
npm start

Extra Addons

React Dev tools #Chrome Extension
ES7 React Extension # VS Code 
Bracket Pair Colorizer # VS Code 
live server # VS Code

CSS

 App.css
      .test{color:red;}
  	App.js
  	import './App.css'
  	<div className="test">HI</div>

Import Components and change value of Components (props)

  	//Apps.js
  	import MyDiv from './components/MyComponents';
  	function App() {
  	  return ( <> <MyDiv btname="hehe"/> </> );
  	} 
  	//MyComponent.js      
  	import React from 'react';
  	export default function MyDiv(props) {
  	  return ( <div>{props.btname}</div> );}
  	
  	//npm start

State (Perform operation without loading page)

  import React,{useState} from 'react'; 
  const [i,set_i]=useState("Hi")	//declare and ini
  fx=()=>{set_i("Bye")}	 //to change value if i
  <button onClick={fx}>myButton</button>

j-thepac/HTML_CSS_JS_REACT.md