From 0e170e2e493453551f1117365dfb15ad18b4f328 Mon Sep 17 00:00:00 2001 From: Anjali <122084921+Anjali-Git-Hub@users.noreply.github.com> Date: Sun, 15 Oct 2023 21:52:08 +0530 Subject: [PATCH] Advice Generator App --- Fronted Projects/Advice generator app/app.js | 34 ++++++ .../images/favicon-32x32.png | Bin 0 -> 1063 bytes .../Advice generator app/images/icon-dice.svg | 1 + .../images/pattern-divider-desktop.svg | 1 + .../images/pattern-divider-mobile.svg | 1 + .../Advice generator app/index.html | 20 ++++ .../Advice generator app/style.css | 101 ++++++++++++++++++ 7 files changed, 158 insertions(+) create mode 100644 Fronted Projects/Advice generator app/app.js create mode 100644 Fronted Projects/Advice generator app/images/favicon-32x32.png create mode 100644 Fronted Projects/Advice generator app/images/icon-dice.svg create mode 100644 Fronted Projects/Advice generator app/images/pattern-divider-desktop.svg create mode 100644 Fronted Projects/Advice generator app/images/pattern-divider-mobile.svg create mode 100644 Fronted Projects/Advice generator app/index.html create mode 100644 Fronted Projects/Advice generator app/style.css diff --git a/Fronted Projects/Advice generator app/app.js b/Fronted Projects/Advice generator app/app.js new file mode 100644 index 00000000..07477318 --- /dev/null +++ b/Fronted Projects/Advice generator app/app.js @@ -0,0 +1,34 @@ +const btn=document.querySelector("button"); +const h1=document.querySelector("h1"); +const span=document.querySelector("span"); + +// Fetching API + +let id=1; +const url="https://api.adviceslip.com/advice" +const getData=async function(){ + const xhr=new XMLHttpRequest(); + const response=await fetch(`${url}/${Math.floor(Math.random() * 118) + 1}`); + if(response.ok){ + const data=await response.json(); + return data; + } + else{ + console.log("something went wrong.."); + } +} + + +btn.addEventListener("click",()=>{ + + getData() +.then(data=>{ + id++; + span.textContent=id; + h1.textContent=`"${data.slip.advice}"`; +}) +.catch(()=>{ + console.log("Check your internet connection"); +}) +btn.classList.toggle('rotate'); +}) diff --git a/Fronted Projects/Advice generator app/images/favicon-32x32.png b/Fronted Projects/Advice generator app/images/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2df7f089f46dd930239e418bf13e8e4c1cca0f GIT binary patch literal 1063 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EY0-Plzi}!G9Wnr(eF` z|M+F+!xzhMK3;zF(cgdn_B?v|`rD7+fB)V2@MY=EN9|{BEWPpQ{f}RtfBl|!^+Ea3 z%d2iZe)i@2x9`6{eg66V&!4ULpSPU4KJ)Uu^RM22`~BzO$wz&&PyPA(@7<4I`yRjQ zJAZr1#XB#){D-o5+r^Vjdc3)fsquh@R{^yA;Z|8C!Zw`1zDvzMNK{QUFr z^G~yvU&yK5nOnE3q5ts2d8Z#d`S9=G|MwriU%2{m%ii0owp@Sy>dXGuA$NemCsPvS z7YvLEt(>(tKmBDkpML+hROc(RL;oBPGFiO5x8~1ErS?rgb&N^g?k~Ih+L^ zk;M!Q+`=Ht$S`Y;1W=H@#M9T6{SlWiKeL>x)y)*39#2mf#}JFtt&`J}n+ycniko-@ z3;26vOWyCzeS7I$?C$UX{_kIKV}WAF+24(KRQ;Wbm=(hXgpO=b(eBb|byZ~P5M3dt zyDB-nDx`Zw9LoWN-GrY`kHxRfy}Q3KfBxRdclJCv_%N_mL-x0j+x*I+s%JIY&vgg3Y zTes?8j%DMbh5PocynFBNZJq}$w`Q+tKfe6=^y}tkkv_Zb+uQBmSHB|O-+X(*4%OrO zQF%8%OSj*z`t$7X`oHyz%ReTa40^8r7Z}c}C9V-ADTyViR>?)FK#IZ0z|cb1&_LJF zGQ`l-%D~vl*g)IB$jZQAv*1E06b-rgDVb@NxHTN|kz5AU01WSllAy$Lg@U5|w9K4T zg_6pGRE5lfl4J&kiaC!z@o*G|X=t4CKYhmYX%GXmGPhnbx3IFX_hb=fVFi~4lfx;@ u%9}$JPT#n4;>ejJGDp}?H+U@Y(qnifE?Dx($#g2v3I \ No newline at end of file diff --git a/Fronted Projects/Advice generator app/images/pattern-divider-desktop.svg b/Fronted Projects/Advice generator app/images/pattern-divider-desktop.svg new file mode 100644 index 00000000..14428394 --- /dev/null +++ b/Fronted Projects/Advice generator app/images/pattern-divider-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Fronted Projects/Advice generator app/images/pattern-divider-mobile.svg b/Fronted Projects/Advice generator app/images/pattern-divider-mobile.svg new file mode 100644 index 00000000..58277856 --- /dev/null +++ b/Fronted Projects/Advice generator app/images/pattern-divider-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Fronted Projects/Advice generator app/index.html b/Fronted Projects/Advice generator app/index.html new file mode 100644 index 00000000..45a1c14b --- /dev/null +++ b/Fronted Projects/Advice generator app/index.html @@ -0,0 +1,20 @@ + + + + + + + + Advice Generator App + + +
+

advice #1

+

"Luck comes from hard work. Luck happens when hard work and timing and talent intersect."

+ divider image + +
+ +
+ + \ No newline at end of file diff --git a/Fronted Projects/Advice generator app/style.css b/Fronted Projects/Advice generator app/style.css new file mode 100644 index 00000000..71bc31fe --- /dev/null +++ b/Fronted Projects/Advice generator app/style.css @@ -0,0 +1,101 @@ +@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap'); +*{ + margin:0; + padding:0; + box-sizing:border-box; +} +html{ + font-size:62.5%; +} +:root{ + --primary-lightCyan: hsl(193, 38%, 86%); + --primary-neonGreen: hsl(150, 100%, 66%); + --neutral-grayishBlue:hsl(217, 19%, 38%); + --dark-grayishBlue: hsl(217, 19%, 24%); + --darkBlue: hsl(218, 23%, 16%); + --quote-fontWeight:800; + --fontFamily:'Manrope', sans-serif; + +} + +body{ + height:100vh; + width:100%; + display:flex; + justify-content:center; + align-items:center; + font-family:var(--fontFamily); + background:var(--darkBlue) +} +.box{ + max-width:470px; + width:90%; + height:290px; + border-radius:15px; + display:flex; + flex-direction:column; + align-items:center; + position:relative; + background:var(--dark-grayishBlue) +} +h1{ + font-size:2.5em; + width:90%; + text-align:center; + color:var(--primary-lightCyan); +} +img{ + width:80%; +position:absolute; +top:75%; +} +h3{ + text-transform:uppercase; + letter-spacing:3px; + margin:2em 0; + color:var(--primary-neonGreen); + font-weight:var(--quote-fontWeight); +} +.circle{ + width:62px; + height:60px; + border-radius:50%; + background:var(--primary-neonGreen); + position:absolute; + top:89%; + transition:all 0.5s ease; +} +button{ + height: 26px; + width: 27px; + border-radius:5px; + background:url(./images/icon-dice.svg); + background-position: center; + background-size: cover; + outline:none; + border:none; + position:absolute; + top:95%; + cursor:pointer; + z-index:9; + transition: transform 0.4s ease-in-out; + + +} +button.rotate{ + transform: rotate(360deg); +} +button:hover +.circle, +.circle:hover{ + box-shadow: 0 0 20px hsl(150, 100%, 66%), 0 0 40px hsl(150, 100%, 66%); +} + +/* for small devices */ + @media(max-width:500px){ + html{ + font-size:56.25%; + } + .box{ + height:300px; + } + } \ No newline at end of file