Javascript

https://www.youtube.com/watch?
v=Z45VQuHO_VA

const player1span = Symbol(1);
const player2span = Symbol(1);
console.log(player1span === player2span);
Symbol( ) = এখানে কিছু পাস করলে সেটা ইউনিক হয়ে যায়

var productName = "Apple";
let price = 100;
const quantity = 4 + 'kg';

const player1span = 1;
const player2span = 1;
console.log(player1span === player2span);
console.log(`
This is ${productName} that is price ${price}
and quantity ${quantity}
`);

const productInfo = ["Apple", 45, 58, 9,8];

console.log(productInfo[0]);
console.log(productInfo[2]);
console.log(productInfo[3]);
console.log(productInfo[4]);

const productInfo = {
    productName = "Apple",
    price = 30,
    quantity = 3,
    productAvailable = true
}
console.log(productInfo.productName);

var productInfoObj = {
    productName = "Apple",
    productPrice = 30,
    productQuantity = 3
}
function showProduct(productObj){
    console.log(productObj);
    {
    productName = 'banna',
    Price = 20
    }
}

{
    productName, productPrice, productQuantity} =  productObj
}

showProduct(productInfoObj);
const [productName, productPrice,] = productInfoObj;

const productInfo= {
    productPrice : 30,
    productQuantity : 3,
    productAvailable : true,

    showproducinfo: function(){
        return `
        productname = ${this.productPrice},
        product quantity = ${this.productQuantity}
        `
    }

console.log(productInfo.showproducinfo());

const productInfo1= [{
    productName : "Apple",
    productPrice : 30,
    productQuantity : 3,
    productAvailable : true,

},
{
    productName : "Banana",
    productPrice : 30,
    productQuantity : 3,
    productAvailable : true,

}
]

function showproduct(product){

const[product1, product2] = product;
console.log(product1);

    return `
    productName = ${product1.productName},
    productprice = ${product2.productPrice}
    `;
    
}
showproduct(productInfo1);

let freeShiping  = false;
let handpicked = false;

var productPrice = window.prompt("Enter your name: ");

freeShiping = productPrice >=100? true :false;
handpicked = productPrice >= 60 || productPrice < 99 ?true : false;

console.log(freeShiping);
console.log(handpicked);

var productPrice =window.prompt();
switch(productPrice){
    case 100:
        freeShiping = true;
        break;
    case 200:
        freeShiping = true;
        handPicked = false;
        break;
    case 300:
        freeShiping = true;
        handPicked = false;
        break;
    case 400:
        freeShiping = true;
        break;
    case 600:
        freeShiping = false;
        handPicked = true;
        break;
    default:
        freeShiping = false;
        handPicked  =false;

const text = "        I love programming       ";

console.log(text.length);
console.log(text[0]);
console.log(text.charAt(4));
//console.log(text.indexof('e'));
console.log(text.toUpperCase());
console.log(text.includes('love'));
console.log(text.trimStart().length);
console.log(text.trimEnd());

console.log(arr.length);

//adding or removing element at the end

console.log(arr.push('!'));
console.log(arr.pop('!'));
console.log(arr);
console.log(arr.unshift('We '));
console.log(arr);
console.log(arr.slice(0,4));

console.log(arr);

const arr = ['I', 'Love', 'Programming'];

console.log(arr.slice(2));
const newArray = ['We' , arr.slice(1)]
console.log(newArray);

const arr1 = ['I', 'Love', 'Programming'];
const arr2 = ['We', 'Love', 'Programming'];

const arr3 = [...arr1, 'and', ...arr2];
console.log(arr3);

const productInfo = {
    productName : "Apple",
    price : 30,
    quantity : 3,
    productAvailable : true
}
const productInfo1 = {
    ...productInfo,
    price : 30,
    quantity : 3,
}
console.log(productInfo);

// const arr1 = ['I', "Love", "Programming"];
// const arr2 = ['We', "Love", "Programming"];

// const [index1, ...restvalue] = arr1;
// console.log(index1,restvalue); 

// console.log(arr1[0]);
// console.log(arr1[1]);
// console.log(arr1[2]);
const prodruct ={
    productName: 'Apple', 
    price : 30,
    quantity : 3,
    productAvailable : true
}

const {productName, ...restvalue} = prodruct;
console.log(productName, restvalue);

const arr= ['I', 'Love', 'Programming'];

arr.forEach(function (e, index, ){
    console.log(e, index);
})

for(let el of arr){
    console.log(el);
}
for(let em in arr){
    console.log();
}
const name = 'samim';
function reverseNumber(name){
    console.log(name);
    const re = console.log(name.split('').reverse().join(''));
    return re;
}

function great(lng, name){
   if(lng === 'en'){
       return `hello ${name}`
   } 
    return `Hello ${name}`;
}
console.log(great('sp', 'sammin'));

const products =[{
    productName = "Apple",
    price = 30,
    quantity = 3,
    productAvailable = true

},

{
    productName = "Apple",
    price = 30,
    quantity = 3,
    productAvailable = true

]
for(let product of products){
    if(product.productAvailable){
        singleProduct += `
        pname = ${productName}
        instock`; 
    }
}
const a = 10
function outerFunc(){
    console.log(a);
    const b = 5
    return function innerFunc(){
        console.log(b)
    }
}
outerFunc()()

// const a = 10
// const b = 10
// console.log(a===b)

// const aObj = {}
// const bObj = {}

// console.log(aObj === bObj);
// const aray = []
// const bray = []
// console.log(aray ===bray);

const a  = 10
function passbyVAlue(a){
    let b = a;
    b = 20
}
console.log(passbyVAlue(a));
////declare object

// const aObj = {
//     num : 10
// }
// function passByRefeence(aobj){

// const bObj = aObj
// bObj.num = 20

// }
// console.log(aObj);
const aobj= {num: 10}
function PassByReference(obj){
    let bobj = obj;
    bobj.num = 20
    console.log(bobj);
}

PassByReference(aobj);

val = document.getElementById("Container");
val = document.getElementsByClassName("Container")[0];
val = document.getElementsByTagName("Container")[0];
val = document.querySelector("body")[0];

val = document.querySelector(".product-collection-item");
///manipulating
val.style.color = "red";
///ক্যামেল কেস এ ইউজ করতে হবে
val.style.backGroundColor  = "Green";
val.textContent = "Microphone";
val.innerText = "Shirt";
val.innerText = <em>Shirt</em>
val.innerHTML= "<em>Shirt</em>"
console.log(val); 
console.log(val.textContent); 

val = document.querySelector("a").getAttribute("href", "https://facebook.com")
;
val = val.getAttribute('');
val  = document.querySelector(".product-collection");
val  = val .children[0].nextElementSibling.nextElementSibling;
console.log(val);

val = val.childNodes[0].nodeName;
val = val.childNodes[0].nodeType;
val = val.childNodes[0];
if(val.childNodes[1].nodeType !== 3){
    val.childNodes[1].classList.add("MyClass");
}

// const player1Score = document.getElementById('player1Score');
// const player2Score = document.getElementById('player2Score');
// const winningScore = document.querySelector('p span');

val = document.getElementById('player1Score');
console.dir(document);

var  val;

val = document.getElementById("container")
console.log(val)
val = document.querySelector(".para home");
console.log(val)

// var p1Score = document.getElementById('p1Score');
// var player2Score = document.getElementById('p2Score');

// var winningScoreDisplay = document.querySelector('p span');
// var inputScore = document.getElementById('inputScore');
// var play1Btn =document.getElementById('p1Btn');  
// var play2Btn =document.getElementById('p2Btn'); 
// var reset =document.getElementById('reset');

// var p1Score = 0;
// var p2Score = 0;
// var winningScore = 5;
// if(p1Score === winningScore){
//  console.log("Game Over");   
//  play1Btn.setAttribute('disabled', 'disabled');
//  play2Btn.setAttribute('disabled', 'disabled');
// }

// play1Btn.addEventListener('click', () => {
//     p1Score++;
//     p1Score.textContent = p1Score;
//     play1Btn.setAttribute('disabled', 'disable');
// });

// play2Btn.addEventListener('click', () => {
//     p2Score++;
//     p1Score.textContent = p1Score;
// });

let val;
// val = document.querySelector(".para");
// val.style.color = "red";
// val.style.backgroundColor = "red";
// val.textContent = "Microphone";
// val.innerText = "Shirt"
// val.innerHTML = "<em>Shirt</em>";
// console.log(val);
// val  = document.querySelector("a");
// val  = document.querySelector("a")
// // val = document.querySelector("a").setAttribute("href", "https://facebook
.com");
// val = val.classList;
// val.classList = "Myclass";
// val.classList.add("MyClass");

// console.log();
val = document.querySelector(".product-list");

vAL = VAL.children[0].nextElementSibling.nextElementSibling.parenElement.paren
tElement;
val = val.childNodes[0].nodeType;
val = val.childNodes[1].nodeName;
if(val.childNodes[1].nodeType !== 3){
    val.childNodes[1].classList.add("MyClass");
}

const li = document.createElement("li");
const ul = document.createElement("li");
li.className = "Product at last";
ul.appendChild(li);

ul.prepend(li);
console.log(ul);

li.appendChild(document.createTextNode("MyItem"));

/ ///class select করবো
// const oldHeading = document.querySelector(".hi");
// const newHeading = document.createElement("h1");
// newHeading.appendChild(document.createTextNode("My updated text node"));

// const h1 = "My h1";
// // const container = document.querySelector(".container");
// // container.replaceChild(newHeading, oldHeading);
// oldHeading.replaceWith(newHeading);\

const list = document.querySelector(".product-collection");
list.removeChild();
console.log(list);

var h1= document.querySelector("hi");

const li = document.querySelector("li");
const lis = document.querySelectorAll("li");
const form = document.forms[0];

function evtInformation(){
    evt.preventDefault();
    console.log('Type:',evt.type);
    console.log('Target',evt.target);
    console.log('Offset-X:',evt.offsetX);
    console.log('Offset-Y:',evt.offsetY);
    console.log('Offset-Y:',evt.clientX);
    console.log('Offset-Y:',evt.clientY);
    console.log("Clicked h1");
}

lis.forEach(li => {
    li.addEventListener("click", evtInformation)
})
h1.addEventListener(evtInformation);
li.addEventListener(evtInformation);

form.addEventListener("submit", evtInformation);

const p1ScoreDisplay = document.getElementById('p1Score');
const p2ScoreDisplay = document.getElementById('p1Score');
const wScoreDisplay = document.getElementById('p span');
var inputScore = document.getElementById('inputScore');
var p1Btn = document.getElementById('p1Btn');
var p2Btn = document.getElementById('p2Btn');
var resetBtn = document.getElementById('reset');

let p1Score = 0;
let p2Score = 0;
let winningScore = 5;
p1Btn.addEventListener('click',() =>{
    p1Score++;
    winner(p2Score);
    p1ScoreDisplay.textContent = p1Score;
});

let gameOevr = false;

p2Btn.addEventListener('click', () => {

    if(!gameOver){

        p2Score++;
    if(p2Score === winningScore){
       gameOver =true;

        console
    }
    }
    
})

function winner(oldScore, winningScore){
    if(p1Score === winningScore){
        if(p2Score === winnerScore){
            p1ScoreDisplay.classList.add(winner);
        }
        else{
            p2ScoreDisplay.classList.add('winner');
        }
        p1ScoreDisplay.classList.add('winner');
        gameOevr = true;
        console.log('Game Over');
        p1Btn.setAttribute('disabled', 'disabled');
        p2Btn.setAttribute('disabled', 'disabled');
    }
}

resetBtn.addEventListener('click', ()=>{
    p1Score = 0;
    p2Score = 0;
    gameOevr = false;
    p1ScoreDisplay.textContent = 0;
    p2ScoreDisplay.textContent = 0;
    p1ScoreDisplay.classList.remove('winner');
    p1Score.removeAttribute('disabled');
    p2Score.removeAttribute('disabled');
})

inputScore.addEventListener('click', ()=> {
    console.log(typeof inputScore.value);
wScoreDisplay.textContent= inputScore.value;
winningScore = Number(inputScore.value);
inputScore.value = '';
})

    const profileForm = document.querySelector('.profile_Form');
    const profile = document.querySelector('.profile');

    var nameInput = document.querySelector("#name");
    var nameInput = document.querySelector("#age");
    var nameInput = document.querySelector("#profession");
    

    const profileData = {
        name: nameInput.value,
        age = ageInput.value,
        profession: professionInput.value
    }

formatText(profileData);

function loadEventListener(){

}
function getProfile(){
    {
        if( localStirage.getItem(profiles !== null) ){
            profiles =JSON.parse(localStorage.getItem('profiles'));
        }
        else{
            profiles = [];
        }
        let formattedText  = '';
        profiles.forEach( profile  => {
           
           formattedText +=  formatText(profile);
        });
        profile.innerHTML = formattedText;
    }
}

document.addEventListener('DOMContentLoaded', function){

 profileForm.addEventListener('submit', 
    function(evt)
    {
        evt.preventDefault();
        const namInputValue = nameInput.value;
        const ageInputValue = ageInput.value;
        const professionInputValue = professionInput.value;
        console.log(nameInput, ageInputValue, professionInputValue);

        const formattedText =formatText(profileData);
        saveDataToStorage(profileData);
        profile.innerHTML += text;
        nameInput.value = '';
        ageInput.value = '';
        professionInput.value = '';

    });
}

    function formatText({name, age, profession}){
       return `
        <div class="profile__section">
                <h3>Name: ${profileData.name}</h3>
                <p>Age : ${profileData.age}<</p>
                <p>profession: ${profileData.profession}</p>
            </div> 
        `;
    }
function saveDataToStorage(profileData){
    let profiles = [];

if( localStirage.getItem(profiles !== null) ){
    profiles =JSON.parse(localStorage.getItem('profiles'));
}
else{
    profiles = [];
}
profiles.push(profileData);
localStorage.setItem('profiles', JSON.stringify(profiles));

function profieDetails(evt){
    evt.preventDefault();
    if(nameInput.value === '' || ageInput.value === '' || professionInput === 
''){
        alert('Please provide correct');
        }
        else{
            let  foramattedText = formatText(profileData);
            saveDataToStorage(profileData);
            profile.innerHTML += formatText;
            nameInput.value = '';
            setInput.value = '';
            profession.value = '';

        }
    }
}
    <div class="container">
        <h1>Here Your saved profile</h1>
        <div class="profile">
            <!-- <div class="profile__section">
                <h3>Name: samim</h3>
                <p>Age : 25</p>
                <p>profession: web developer</p>
            </div> 
            <div class="profile__section">
                <h3>Name: samim</h3>
                <p>Age : 25</p>
                <p>profession: web developer</p>
            </div>  -->
            <form action="" class="profile_Form">
                <div class="profileFormSection">
                    <label for="name">Name</label>
                    <input type="text" id="name">

                </div>
                <div class="profileFormSection">
                    <label for="age">Age</label>
                    <input type="text" id="age">

                </div> 
                <div class="profileForm__section">
                    <label for="profession">Profession</label>
                    <input type="text" id="profession">

                </div>
                <button class="profileForm__Btn">Save</button>
                
                
            </form>
        </div>
    </div>

// const mappedArr = arr.map(el => {
//     if(el === 'programming'){
//         return el = '!';
//     }
//     else{
//         return el;
//     }
// })

// console.log(mappedArr);

// const filterArray = arr.find((el) => {
//     return el.length > 4 && el;
// })

// const includes = arr.filter(el => el.includes('mm') && el )

const resultArray = arr.some(el => {
    return typeof el === 'string'
})

const arr = ["I", "Love", "Programming"];

// const resultArray = arr.reduce((accumulator, currentValue, v) => {
//     return accumulator + currentValue + v; 
// })

function reduceValue(evt, edt){
    arr.reduce(evt, edt, 'jony');
    return evt + edt + 'jony';

console.log(reduceValue());

// var books = [
//     {
//         name: 'Physics'
//     },{
//         name: 'Chemistry'
//     },{
//         name: "Math"
//     },{
//         name: "Science"
//     },{
//         name: "English"
//     }
// ]

function Person(name , email){
    this.name = name;
    this.email = email;
    this.dertails = function all() {
        console.log("Name" + this.name);
  }

}
// var p1  = new Person('Jony', "joy@gmail.com");
// var p2  = new Person('Rony', "Roy@gmail.com");
// var p3  = new Person('Mony', "Moy@gmail.com");
// var p4  = new Person('Dony', "Doy@gmail.com");

// var people = [p1,p2,p3,p4];
// people.forEach(data =>{
//     console.log(data.email);
// })

function Book(name, author, price){
    this.name = name;
    this.author = author;
    this.price = price;
}

var book = new Book("Physics", "JP Morgan", 500);

console.log(book.constructor);

function myFunc(){
    function innerFunc(){
        console.log(this);
    }
    new innerFunc();
}

var obj= {
    name: 'Twinkle Cats',
    print: function(){
        console.log(this);
    }
}

var print = obj.print.bind(obj);
console.log(print);

Scanner input = new Scanner(System.in);
    //Double number = -10.6;
    //   System.out.println(5);
    //   System.out.println(number);
    int number = input.nextInt();
    System.out.println("Enter Integer ");
    
    System.out.print(number);

int arr[] = {12,45,77,88,99,77,4,7};
        for(int i:arr){
            System.out.println(i);
        }

aa:
        for(int i =1; i<=3; i++){
            bb:
            for(int j =1; j<=3;j++){
                if(i ==2 && j==2){
                    break aa;
                }
                System.out.println(i+" "+j);
            }
        }

 public void eat() {
            System.out.println("I am eating");
        }
        Birds birds = new Birds();
        myjava buzo = new myjava();
        buzo.eat();
        buzo.run();
        birds.fly();
    }
    public void run() {
        System.out.println("I am running");

  /**
   * Innermyjava
   */
class Birds {
  void fly(){
      System.out.println("I am flying");
  }
      
  }

 class Innermyjava {
   private int emid;
   public void setEmpId(int eid){
     emid = eid;
   }
      
   public int getEmpId(){
     return emid;
   }
      
  }

int a;

       Scanner input = new Scanner(System.in);
       a = input.nextInt();
       if(a >= 0 && a<=40){
           System.out.println("Fail");
       }
       else if(a >= 41 && a<=50){
           System.out.println("Pass");
       }

// function printMe(){
//     console.log('Hello, '+ this.name);
// }

// printMe();

// var obj1 = {
//      name : "Jony",
//      age: 22
// }
// var obj2 = {
//      name : "Joy ",
//      email: "joy@gmail.com"
// }

//  var binde1 = printMe.bind(obj1);
//  var binde2 = printMe.bind(obj2);

//  binde1();
//  binde2();

function add(a,b){
    return (a+b) * this.c;
}
var obj1 = {
    c: 3
}
var obj2 = {
    c: 5
}
var res = add.call(obj1, 10, 5);
res;
var res = add.apply(obj1, [10, 5]);
res;
var binded = add.bind(obj1);
console.log(binded(12,5));

function Animal(){
    this.name=  name;
}
Animal.prototype.printName = function(){
    console.log(this.name);
}

function myNew(constructor){
    var Obj  = {};
    Object.setPrototypeOf(Obj, constructor.prototype);
    var argsArray = Array.prototype.slice.apply(arguments);
    constructor.apply(obj, argsArray.slice());
    return obj;
}

var Person = function(name, age ){
    this.name = name;
    this.age = age;

//var newCat = myNew(Animal);

var p1= myNew(Person,"Jony", 22);
// var cat = new Animal("Cat");
// var dog = new Animal("Dog");

// cat.printName();

function Obj(a, b){
    this.a = a;
    this.b = b;
}
function Obj2(c){
    Obj.call(his, a, b);
    this.c = c;
}

Obj.prototype = Object.create(Obj.prototype);

function Obj3(){
    Obj2.call(this , 12,45,50);
    this.c = c;
}
var Obj1 = new Obj(1,2);
var obj2 = new Obj2(4,5,6);
var opbj3 = new Obj3();

// function Person(){
//     this.name  = "Twninkle Cats"
// }
// function Teacher(){
//     Person.call(this);
//     this.subject = "Javascript"
// }

// var teacher = new Teacher();

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

function Person(){
    this.name = name;
}

Person.prototype.printName = function(){
    console.log("Name: "+ this.name);
}

Person.prototype.another = function(){
    console.log("This is another function");
}
function Student(name, id){
    Person.call(this.name);
    this.id = id;
}
//Student.prototype = Object.create(Person.prototype);

Object.setPrototypeOf(Student.prototype, Person.prototype);
Student.prototype.constructor = Student;
var Student = new Student ("Jony Nath", 89);
Person.prototype.skill = "Javascript";

function Person(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName= function(){
        console.log(`${this.firstName} and ${this.lastName}`);
    }
    console.log(this);
}
console.dir(Person);
Person.prototype.fullNameInfo = function(){
    return this.fullName;
}

function Profession(firstName, lastName, work){
    Person.call(this, firstName, lastName);
    this.work = 'WEB Developer'
}

Profession.prototype.fullNameProto = function(){
    return this.fullName;
};
Profession.prototype.__proto__ = Person
.prototype;

const samim = new Profession("Samim", "Fazlu", "Dev");
const khalil = new Person("Mahim", "Tozlu");

console.log(samim.fullName());
//console.log(samim.fullNameInfo());
console.log(khalil.fullName());

// const Person = {
//     init: function (fName, lName) {
//         this.fName = firstName;
//             this.lName = lastName;
//             return this;
//     },
//     fullName: function () {
//         console.log(`${this.firstName} , ${this.lastName}`);
//     }
// };

// const myObj = Object.create(Person,{
//     profession : {
//         value: "Web Dev"
//     }
// });
// console.log(myObj);
// console.log(myObj.firstName);
// console.log(myObj.profession);
// Person.init('Samim', "Fazlu");
// console.log(myObj.fullName());

const Person = {
    firstname: "sSamim",
    lastName: "Hasan"
}
const myObj = Object.create(Person,{
    profession:{
        value : 'Web Dev'
    }
});

const Profession  = Object.create(Person,{
    profession : {
        value : 'Web Dev'
    },
    firstName:{
        value: 'Samim'
    },
    lastName: {
        value: 'Hasan'
    },
        fullNameWithProf: {
            value: function () {
                console.log(`${this.firstName} , ${this.lastName}`);
            }
        }
    
});

const samim = Object.create(Profession);
// Profession.firstName = "samim";
// Profession.lastName = "Fazlu"
// console.log(myObj);
// console.log(myObj.firstname);

console.log(samim.fullNameWithProf());
Profession.firstName

import React from 'react';
import ReactDOM from 'react-dom';

const fname = "vinod";
const lname = "thapa";

let l, ll;
l = new Date().toLocaleDateString();
ll = new Date().toLocaleTimeString();
ReactDOM.render(
    <>
     <h1>Hello my name is {fname}</h1>
     <p>{` todays Date is  ${l}
     
      Current time is ${ll}
     `}
      </p>
     
    </>,

    document.getElementById('root'));

13:30NOW PLAYING

Introduction to React | ReactJS Tutorial for Beginners in Hindi 2020 #1

Thapa Technical

3:21NOW PLAYING

#2: What Should you Know before Learning ReactJS in Hindi in 2020
Thapa Technical

3
11:33NOW PLAYING

#3: Download & Install VS Code IDE for ReactJS in Hindi in 2020
Thapa Technical

21:22NOW PLAYING

#4: ReactJS Environment Setup | ReactJS Installation & Creating Our First React App in
Hindi in 2020
Thapa Technical

21:23NOW PLAYING

#5: ReactJS Hello World Program | React Folder Structure | JS Babel & Webpack in Hindi
Thapa Technical

6
13:14NOW PLAYING

JSX in React JS in Hindi in 2020 #6

Thapa Technical

8:57NOW PLAYING

How to Render Multiple Elements inside ReactDOM.render() in ReactJS in Hindi #7

Thapa Technical

7:07NOW PLAYING

Understanding React Fragment in React JS in Hindi in 2020 #8

Thapa Technical

9
7:46NOW PLAYING

React JS Series Challenge #1: Create a Simple Web App on Top 5 Netflix Series List using
JSX
Thapa Technical

10

10:03NOW PLAYING

JavaScript Expressions in JSX in ReactJs in Hindi in 2020 #10

Thapa Technical

11

8:04NOW PLAYING

ES6 Template Literals in JSX in ReactJS in Hindi #11

Thapa Technical

12
9:40NOW PLAYING

React JS Challenge #2: Display Current Date and Time in JSX in React JS in Hindi #12
Thapa Technical

13

15:42NOW PLAYING

JSX Attributes in ReactJS in Hindi | HTML Attribute Vs JSX Attribute in React | #13
Thapa Technical

11:10NOW PLAYING

CSS Styling & Importing CSS Files in React JS | Class Vs ClassName in React JS in Hindi in
2020 #14
Thapa Technical

15
3:01NOW PLAYING

How to use Google fonts in React JS Application in Hindi in 2020 #15

Thapa Technical

16

14:36NOW PLAYING

Internal CSS & Inline CSS Styling In React JS in Hindi in 2020 #16
Thapa Technical

17

20:29NOW PLAYING

React JS Mini-Project #1: Creating Simple Greeting Website using React JS in Hindi in 2020
#17
Thapa Technical

18
21:15NOW PLAYING

React Components in Hindi | Functional Component in React JS Hindi in 2020 #18

Thapa Technical

19

9:59NOW PLAYING

React JS Practice #4: Rewrite our React Project into Components in React JS in Hindi in
2020 #19
Thapa Technical

20

19:10NOW PLAYING

ES6 Modules Import Export in React JS in Hindi #20

Thapa Technical

21
14:03NOW PLAYING

React JS Challenge #5: Create Simple Calculator App in React JS in Hindi #21
Thapa Technical

22

26:22NOW PLAYING

#22: Props in React Js in Hindi | React JS Project Netflix App Part #1 in Hindi in 2020
Thapa Technical

23

8:39NOW PLAYING

JavaScript Tutorial in Hindi #12: Array in JavaScript in Hindi

Thapa Technical

24
18:19NOW PLAYING

#23: Arrays in React JS in Hindi | ReactJS Project Netflix App #2 in Hindi in 2020
Thapa Technical

25

21:18NOW PLAYING

ReactJS JavaScript Array Map Method in Hindi with Example

Thapa Technical

26

19:30NOW PLAYING

#24 Completing React JS Netflix App #3 | Array Map & Fat Arrow function in React Js in
Hindi in 2020
Thapa Technical

27
19:07NOW PLAYING

React Developer Tools | Debugging & Error Handling in React JS in Hindi #25
Thapa Technical

28

13:31NOW PLAYING

If Else Statement in React JS | Conditional Rendering in React JS in Hindi #26

Thapa Technical

29

5:46NOW PLAYING

React Conditional Rendering | Ternary Operator in React JS in Hindi in 2020 #27

Thapa Technical

30
16:38NOW PLAYING

#28: Slot Machine Game in React JS in Hindi | React Challenge #6 in 2020

Thapa Technical

31

6:04NOW PLAYING

ReactJS Bonus: How to Type Emoji 👍 in VS Code in 2020 | VS Code Emoji Extension
Thapa Technical

32

13:13NOW PLAYING

ES6 Tutorial #5: Array Destructuring in ES6 in JavaScript in Hindi 2020

Thapa Technical

33
23:47NOW PLAYING

#30: Hooks in React JS in Hindi | useState in Hook in React JS in Hindi in 2020

Thapa Technical

34

13:25NOW PLAYING

React Hooks Challenge #6: Get Time on Refreshing and Clicking Button using useState
Hook in Hindi
Thapa Technical

35

9:53NOW PLAYING

#32: Create a Digital Clock using React JS in Hindi | React Mini Project #2
Thapa Technical

36
22:09NOW PLAYING

#33: Handling Events in ReactJS in Hindi in 2020

Thapa Technical

37

22:33NOW PLAYING

Forms in React JS in Hindi | React Controlled Vs Uncontrolled Component in Hindi in 2020

#34
Thapa Technical

38

19:20NOW PLAYING

Login Form Submit in React Js in Hindi in 2020 #35

Thapa Technical

39
22:51NOW PLAYING

#36 : Handling Complex Multiple Input Form States in React JS in Hindi

Thapa Technical

40

22:51NOW PLAYING

#36 : Handling Complex Multiple Input Form States in React JS in Hindi

Thapa Technical

41

10:20NOW PLAYING

#37: React Login Form Challenge in React in Hindi 2020

Thapa Technical

42
14:27NOW PLAYING

React Bonus #38: What does "..." three dots do in ReactJS | Spread Operator in ReactJS in
Hindi
Thapa Technical

43

14:27NOW PLAYING

#39: How I turn 100 lines of code in just 2 lines to Complete Our Login Form in React in
Hindi 2020
Thapa Technical

44

48:27NOW PLAYING

Building a Todo List App Project in ReactJS from Scratch in Hindi in 2020
Thapa Technical

45
15:09NOW PLAYING

React Challenge #8: Incrementing and Decrementing the State Variable on Button clicked in
React JS
Thapa Technical

46

10:10NOW PLAYING

How to use Material UI Icons in React App in Hindi in 2020 #42

Thapa Technical

47

11:40NOW PLAYING

The Best UI Framework for ReactJS - Getting Started with Material UI - in Hindi in 2020
#43
Thapa Technical

48
16:05NOW PLAYING

NPM (Node Package Manager) in 10 Minutes with One Mini Project in Hindi in 2020 | React
Bonus - #44
Thapa Technical

49

33:56NOW PLAYING

React Project using Material UI Free Code: Create ToDo List App in React in Hindi in 2020
#45
Thapa Technical

50

7:21NOW PLAYING

How to Run React App in VS Code inbuilt Terminal in 2020 #45

Thapa Technical

51
11:41NOW PLAYING

How to Install and Use Bootstrap 4 in React JS in Hindi in 2020 #47

Thapa Technical

52

4:40NOW PLAYING

React Bootstrap Autocomplete Extension in VS Code in 2020

Thapa Technical

53

5:05NOW PLAYING

I tried to create React WebPage in just 1 MINUTE Only | React Bootstrap 4 Challenge #49
Thapa Technical

54
1:01:17NOW PLAYING

Google Keep App clone with ReactJS in Hindi | React Project in Hindi #50
Thapa Technical

55

25:10NOW PLAYING

Context API in React JS in Hindi in 2020 #51

Thapa Technical

56

11:38NOW PLAYING

useContext Hook in React | How useContext Hook Works in ReactJS in Hindi In 2020 #52
Thapa Technical

57
16:15NOW PLAYING

useEffect Hook in React JS in Hindi in 2020 #54

Thapa Technical

58

7:55NOW PLAYING

React Hook Challenge #7: Changing the Title value of Website on Button Click #54
Thapa Technical

59

23:25NOW PLAYING

React API Call to Get Pokemon JSON Data using Axios and useEffect in ReactJS in Hindi
#55
Thapa Technical

60
25:23NOW PLAYING

React Router Tutorial in Hindi | React Router Dom in Hindi in 2020 #56
Thapa Technical

61

13:59NOW PLAYING

Create React NAVBAR / MENU using React Router in ReactJS in Hindi in 2020 #57
Thapa Technical

62

13:59NOW PLAYING

Create React NAVBAR / MENU using React Router in ReactJS in Hindi in 2020 #57
Thapa Technical

63
16:23NOW PLAYING

React Route Render Method | Difference between Render and Component Prop on React
Router in Hindi
Thapa Technical

64

16:23NOW PLAYING

React Route Render Method | Difference between Render and Component Prop on React
Router in Hindi
Thapa Technical

65

16:56NOW PLAYING

useParams Hooks in React Router in Hindi in 2020 #57

Thapa Technical

66
16:56NOW PLAYING

useParams Hooks in React Router in Hindi in 2020 #57

Thapa Technical

67

8:46NOW PLAYING

useLocation Hook in React Router in Hindi in 2020 #60

Thapa Technical

68

8:46NOW PLAYING

useLocation Hook in React Router in Hindi in 2020 #60

Thapa Technical

69
8:35NOW PLAYING

useHistory Hook in React Router in Hindi in 2020 #61

Thapa Technical

70

8:35NOW PLAYING

useHistory Hook in React Router in Hindi in 2020 #61

Thapa Technical

71

20:47NOW PLAYING

Live Search Filter using Hooks & Router in React JS in Hindi In 2020 #62
Thapa Technical

72
20:47NOW PLAYING

Live Search Filter using Hooks & Router in React JS in Hindi In 2020 #62
Thapa Technical

73

7:08NOW PLAYING

Create React 404 Error Page Not Found using React Router in Hindi in 2020 #64
Thapa Technical

74

7:08NOW PLAYING

Create React 404 Error Page Not Found using React Router in Hindi in 2020 #64
Thapa Technical

75
5:50NOW PLAYING

Redirect in React Router | 404 Error Page Redirect to Homepage or Custom Page in React in
Hindi 2020
Thapa Technical

76

5:50NOW PLAYING

Redirect in React Router | 404 Error Page Redirect to Homepage or Custom Page in React in
Hindi 2020
Thapa Technical

77

12:32NOW PLAYING

How to Install and Use Bootstrap 5 in React JS in Hindi in 2020 #66

Thapa Technical

78
1:29:38NOW PLAYING

🔴 Complete Responsive Animated Website using React JS in Hindi in 2020

Thapa Technical

79

12:37NOW PLAYING

How To

let d;

d = new Date(2020, 5, 19);
d = d.getHours();
let greeting  = '';

const cssStyle = {}

if(d >=1 && d < 12){
  greeting = 'Good Morning';
  cssStyle.color = 'green'

}
else if(d >=12 && d <19 ){
  greeting = "Good Afternoon";
  cssStyle.color = 'orange'
}
else{
  greeting = 'Good Night';
  cssStyle.color = 'green'
}

 
ReactDOM.render(
  <>
  <h1>
  Hello Sir, <span style={cssS}>{greeting}</span>
  </h1>

  </>,
  document.getElementById('root'));

<div className="cards">
<div className="card">
<img src="" alt="myPic" className="card_img"/>
<div  className="card_info">

<span  className="card_catagory">
A Netflix Original
</span>
<h3 className="card_title"></h3>
<a href="" target="_blank">
<button>Watch Now</button>
</a>
</div>

</div>

</div>

 let d;

    d = new Date(2020, 5, 19);
    d = d.getHours();
    let greeting = '';

    const cssStyle = {}

    if (d >= 1 && d < 12) {
        greeting = 'Good Morning';
        cssStyle.color = 'green'
    }
    else if (d >= 12 && d < 19) {
        greeting = "Good Afternoon";
        cssStyle.color = 'orange'
    }
    else {
        greeting = 'Good Night';
        cssStyle.color = 'green'
    }

     return (
        
            <div>
                <h1>
                   Hello sir,  <span style={cssStyle}>
    {greeting}</span>
               </h1>
        </div>
  

     );