Posts

Activity 2

Image
 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Activity </ title > </ head > < body >     < input placeholder = "Enter State Province" >     < button > Search </ button >     < ul id = "list" ></ ul >     < script src = "https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js" ></ script >     < script src = "Activity2.js" ></ script > </ body > </ html > CSS let url = "http://universities.hipolabs.com/search?country=india&name=" ; let btn = document . querySelector ( "button" ); btn . addEventListener ( "click" , async () => {   let state = document . querySelector ( "input" ). value ;   l...

Activity using query Strings

Image
 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Activity </ title > </ head > < body >     < input placeholder = "Enter Country" >     < button > Search </ button >     < ul id = "list" ></ ul >     < script src = "https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js" ></ script >     < script src = "Activity.js" ></ script > </ body > </ html > CSS let url = "http://universities.hipolabs.com/search?name=" ; let btn = document . querySelector ( "button" ); btn . addEventListener ( "click" , async () => {   let country = document . querySelector ( "input" ). value ;   let colleges = await ...

Sending headers

Image
  let url = "https://icanhazdadjoke.com/" ; async function getJoke () {   try {     const config = {       headers : {         Accept : "application/json"       },     };     let res = await axios . get ( url , config );     console . log ( res . data );     console . log ( res . data . joke );   } catch ( e ) {     console . log ( e );   } } getJoke ();

Dog picture API

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Dog API </ title > </ head > < body >     < h1 > Show Random Dog images </ h1 >     < button > show image </ button >     < img id = "result" >     < script src = "https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js" ></ script >     < script src = "DogAPI.js" ></ script > </ body > </ html > CSS let url = "https://dog.ceo/api/breeds/image/random" ;; let btn = document . querySelector ( "button" ); btn . addEventListener ( "click" , async () => {     let link = await getImg ();     console . log ( link );     let img = document . querySelector ( "#result" ...

Axios

Image
 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Axios </ title > </ head > < body >     < h1 > Get Random Facts </ h1 >     < button > Show Fact </ button >     < p id = "result" ></ p >     < script src = "https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js" ></ script >     < script src = "Axios.js" ></ script > </ body > </ html > CSS let btn = document . querySelector ( "button" ); btn . addEventListener ( "click" , async () => {   let res = await getFact ();   console . log ( res );   let p = document . querySelector ( "#result" );   p . innerText = res ; }); let url = "https://catfact.ninj...

Using Fetch with async and await

Image
  let url = "https://catfact.ninja/fact" ; async function getFacts () {   try {     let res = await fetch ( url );     let data = await res . json ();     console . log ( data . fact );     let res2 = await fetch ( url );     let data2 = await res2 . json ();     console . log ( data2 . fact );   } catch ( e ) {     console . log ( e );   }   console . log ( "TQ" ); } console . log ( getFacts ());

API REQUEST

Image
  let url = "https://catfact.ninja/fact" ; fetch ( url ) . then (( res ) => {     console . log ( res ); return res . json (); }) . then (( data1 ) => {     console . log ( data1 . fact );     return fetch ( url ); }) . then (( res ) => {     return res . json (); }) . then (( data2 ) => {     console . log ( data2 . fact ); }) . catch (( err ) => { console . log ( err ); })