Posts

Showing posts from December, 2022

javascript validation1

 <!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>Document</title>     <style>         span{             color:red;         }         .B{ border:2px solid red; outline: none;         }     </style>     <script>         function f1(e){             V=e.value;            console.log(V)             Id=e.id;             console.log(Id);             errid="err"+e.id;             // alert(err...

usecontexthook

context api:prop drilling redux: global state/logic code ui code both in diff  predictable concept 1..   import   React , {  useState  }  from   'react' import   HookCustom3   from   './HookCustom3' ; export   default   function   HookCustom () {    const  [ count , setCount ]= useState ( 0 );      return  (      < div >          { count }          < button   onClick = { () => setCount ( prevcount => prevcount + 1 ) } > increment </ button >          < HookCustom3   value = { count } />               </ div >   ) } 2... import   React   from   'react' import   HookCustom1   from   './HookCusto...

react class lifecycle2

Image
 1... 2.. timeinterval:

useEffect1

  import   React ,{ useEffect , useState }  from   'react' export   default   function   EFF1 () { const  [ T , setT ]= useState ( new   Date (). toLocaleTimeString ()); const  [ message , setmessage ]= useState ( "good morning" ); useEffect (() => { console . log ( "good morning" ); const   interval = setInterval ( showDate , 1000 ); return  () => {      console . log ( "interval is clearning" );      clearInterval ( interval ); }     },[])      const   showDate =() => {          setT ( new   Date (). toLocaleTimeString ())     }      const   change =() => {          setmessage ( "hello students" );     }    return  (    ...

useEffect

  import   React ,{ useEffect ,  useState }  from   'react' export   default   function   Eff () {    const  [ T , setT ]= useState ( new   Date (). toLocaleTimeString ());   const  [ message , setMessage ]= useState ( 'ducat' );   //mounting and updating if [] then only mounting    useEffect (() => { console . log ( "good m orning" ); const   interval = setInterval ( showData , 1000 ); //cleanup:-- return  () => {    console . log ( "cleanup function called" );    clearInterval ( interval ); }   },[])    //on the basis of time....[T]    const   showData =() => {      setT ( new   Date (). toLocaleTimeString ());   }      const   changeData =() => {      console . log ( ...

learning channels

  This One Line Of Code Catches React Bugs For You (1390) Full React Tutorial #9 - Intro to React Dev Tools - YouTube (1390) This One Line Of Code Catches React Bugs For You - YouTube https://www.netlify.com/blog/2018/09/13/how-to-run-express.js-apps-with-netlify-functions/ javafullstack:-- html and css html 5 multimedia html 5 Graphics css:- css 3 modules multiple column layout user Interface' text effects

scrolleventjavascript3

  < html >      < head > < title > facebook.com </ title >      </ head >      < style >          div {              background-color :  green ;              width :  200px ;              height :  200px ;              display :  none ;             position :  fixed ;             bottom :  0px ;             right :  0px ;         }        ...

scrolleventjavascript2

  < html >      < head > < title > facebook.com </ title >      </ head >      < style >          div {              background-color :  green ;              width :  200px ;              height :  200px ;              display :  none ;         }          body {              height :  2000px ;         }      </ style >      < body >     ...

scrolleventjavascript1

  < html >      < head > < title > facebook.com </ title >      </ head >      < style >          div {              background-color :  green ;              width :  200px ;              height :  200px ;         }          body {              height :  2000px ;         }      </ style >      < body >         < div   id = 'a' >         </ di...

mongodbAggregation

https://learn.mongodb.com/learn/course/mongodb-aggregation/lesson-1-introduction-to-mongodb-aggregation/learn?page=2  Aggregation operations process multiple documents and return computed results. You can use aggregation operations to: Group values from multiple documents together. Perform operations on the grouped data to return a single result. Analyze data changes over time. To perform aggregation operations, you can use: Aggregation pipelines , which are the preferred method for performing aggregations. The command to use Aggregation is: db.collecationname.aggregate(pipeline,options) Pipeline: A sequence of data aggregation opeartions or stages Pipeline is an array filtered grouped sorted transformed $match: filters data that matches criteria $Group: Groups documents based on criteria $sort: puts the document in specified order 1:ascending -1 :descending..  $out: writes the document that are returned by an aggregation pipeline into a collection it crates new collection if ...

Child to parent data in react js(liftingstate)

 1..Parent.js import   React   from   'react' import  {  Child  }  from   './Child' export   const   Parent  = ()  =>  {   function   show (){       alert ( 'good morning' );  }   function   display ( data ){       alert ( `good morning ${ data } ` )  }      return  (      < div > Parent          < Child   info = { show }   info1 = { display } > </ Child >              </ div >   ) } 2....Child.js import   React   from   'react' export   const   Child  = ( props )  =>  {    console . log ( props );      return  (      < div > Child ...

Css module

 1:-components/style folder:-- filename:-Content1.module.css: .bt {      color : Red ; } 2:-- second file:- Content2.module.css: .bt {      color :  blue ; } 3.In the component folder js file:-- Content1.js import   React   from   'react' import   secondcss   from   './style/Content1. module.css' export   const   Content1  = ()  =>  {    return  (      < div >          < button   className = { secondcss . bt } > click1 </ button >      </ div >   ) } 4:-another js file:- import   React   from   'react' import   Firstcss   from   './style/Content2. module.css' export   const   Content2  = ()  =>  {    return  (      < div >< button   c...

objectObject

  [object, object] in JavaScript – Meaning in JS (freecodecamp.org)

time method javascript[useeffect]

  Short and simple: new Date (). toLocaleTimeString (); // 11:18:48 AM //--- new Date (). toLocaleDateString (); // 11/16/2015 //--- new Date (). toLocaleString (); // 11/16/2015, 11:18:48 PM 4 hours later (use milisec: sec==1000): new Date ( new Date (). getTime () + 4 * 60 * 60 * 1000 ). toLocaleTimeString (); // 3:18:48 PM or 15:18:48 2 days before: new Date ( new Date (). getTime () - 2 * 24 * 60 * 60 * 1000 ). toLocaleDateString () // 11/14/2015 import   React ,{ useEffect ,  useState }  from   'react' export   default   function   Eff () {    const  [ T , setT ]= useState ( new   Date (). toLocaleTimeString ());   const  [ message , setMessage ]= useState ( 'ducat' );   //mounting and updating if [] then only mounting    useEffect (() => { console . log ( "good m orning" ); const   interval = setInterval ( showData , 1000 ); //...