JavaScript

Simple Charging Bar Animation using CSS ?   background: linear-gradient(direction,color1 50%,color2 50%); < html >   < head ></ head >   < style >     body {     display : flex ;     flex-direction : column ;     align-items : center ;     margin : 25% ;     }         .box {     height : 1.25rem ;     width : 5rem ;     background-color : gold ;     margin : 0.5rem ;     padding : 0.5rem ;     border-radius : 5rem ;     align-items : center ;     text-align : center ;     }     .box:hover {     animation : fro 1s linear infinite ;     }         @keyframes fro {     0%{     background : linear-gradient (to right , green 0% , gold 100% );     }     25%{     background : line...

😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍  axios({   method: 'post',   url: 'https://api.example.com/data',   data: {     // Your data object here   },   headers: {     'Content-Type': 'application/json', // For sending JSON data     'Accept': 'application/json', // For specifying what response types are acceptable     'Content-Type': 'application/x-www-form-urlencoded', // For sending form data     'Content-Type': 'multipart/form-data', // For sending multipart form data (like files)     'Content-Type': 'text/plain', // For sending plain text data     'Content-Type': 'application/xml', // For sending XML data     'Content-Type': 'application/octet-stream' // For sending binary data     // Add more headers as needed   } }) .then(response => {   console.log(response.data); }) .catch(error => {   console.error('Error:', error); }); 😍😍😍😍😍...

  import React , { useEffect } from "react" ; import axios from "axios" ; import { useState } from 'react' ; function UpdateForm (){     const [ city , setCity ] = useState ( '' );     const [ state , setState ] = useState ( '' );     const [ country , setCountry ] = useState ( '' );     useEffect (() => { // below code will show on form the data form django api         axios . put ( `http://localhost:8000/update/6/` )         . then (( response ) => {             setCity ( response . data . city );             setState ( response . data . state );             setCountry ( response . data . country );         })     },[]) // below handlechange will change data to latest data     const handleChange = ( e ) => {         const { n...

  import React , { useState , useEffect } from "react" ; import axios from "axios" ; import UpdateForm from "./UpdateForm" ; function GetDjango (){     const [ data , setData ] = useState ([]);     useEffect (() => {         axios . get ( `http://127.0.0.1:8000/home` )         . then ( response => {             setData ( response . data );         })         . catch ( error => {             console . error ( error );         });     },[]);     return (         <>         < h1 > Django API With React JS </ h1 >         < table border = "1" >             < thead >                 < tr >     ...

import React, { useState } from "react"; import axios from 'axios' ; function LatestForm (){     const [ city , setCity ] = useState ( "" );     const [ state , setState ] = useState ( "" );     const [ country , setCountry ] = useState ( "" ); const handleSubmit = ( event ) => {     event . preventDefault ();     axios . post ( `http://127.0.0.1:8000/` ,{ city , state , country })     . then ( response => {         alert ( "data has been registered on database." )     })     . catch ( error => {         console . error ( error );     });   };   return (     <>     < form method = "POST" onSubmit = { handleSubmit } >       < input type = "text" placeholder = 'city' value = { city } onChange = { e => setCity ( e . target . value ) } />< br />      ...

// Common Event Properties event.type;               // Type of the event (e.g., "click", "keydown"). event.target;             // Element that triggered the event. event.currentTarget;      // Element to which the event handler is attached. event.bubbles;            // Boolean indicating if the event bubbles up through the DOM. event.cancelable;         // Boolean indicating if the event can be canceled. event.defaultPrevented;   // Boolean indicating if preventDefault() was called. event.eventPhase;         // Current phase of event propagation (1 = capturing, 2 = at target, 3 = bubbling). event.isTrusted;          // Boolean indicating if the event was generated by a user action or script. event.timeStamp;          // Time when the event was created. // Comm...