Posts

JavaScript Typing Animation

Image
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typing Animation</title> <style> textarea{ word-wrap:break-word; white-space:pre-wrap; grid:1; position:fixed; z-index:1000; } .activate{ position:fixed; margin-left:0px; } .clear{ position:fixed; margin-left:100px; } body{ display:grid; grid-template-columns:repeat(2,10vw); grid-template-rows:repeat(2,10vw); gap:10px; align-items:justify; margin:5px; padding:5px; } .output{ scroll-behavior:smooth; height:auto; width:auto; grid-column:2/2; } </style> </head> <body> <textarea></textarea> <pre class="output"></pre> <div class="container"> <button class="activate">StartTyping</button> <button class="clear">Clear</button> </div> </body> <s...
Post a Comment
Read more

Simple Charging Bar Animation using CSS ?

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...
Post a Comment
Read more

AXIOS REACT JS

😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍  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); }); 😍😍😍😍😍...
Post a Comment
Read more

React UPDATE (PUT) FORM

  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...
Post a Comment
Read more

React GET FORM

  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 >     ...
Post a Comment
Read more

React POST FORM

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 />      ...
Post a Comment
Read more

React Form

Image
Post a Comment
Read more

All "event" properties in Javascript ?

// 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...
Post a Comment
Read more

JavaScript Window CSS

let element = document.querySelector('pre'); let previousContent = element.textContent; // add event listener element.addEventListener('mouseenter',(e)=>{ e.target.textContent = window.getComputedStyle(e.target)["cursor"]; }); // add event listener to get back to previous one element.addEventListener('mouseleave',(e)=>{ e.target.textContent =  previousContent; }); or element .addEventListener('mouseenter',( e )=>{ // let the cursor style display on pre tag for 5 seconds only for that we're using setTimeout() setTimeout(()=>{ e .target.textContent = window.getComputedStyle( e .target)["cursor"]; }, 5000); }); ==================================================================  let events = ["mouseenter","mouseleave"]; let element = document.querySelector('pre'); events.forEach((e)=>{ element.textContent = window.getComputedStyle(element.target)["cursor"]; }); =====================...
Post a Comment
Read more