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 00000000..1e2df7f0 Binary files /dev/null and b/Fronted Projects/Advice generator app/images/favicon-32x32.png differ diff --git a/Fronted Projects/Advice generator app/images/icon-dice.svg b/Fronted Projects/Advice generator app/images/icon-dice.svg new file mode 100644 index 00000000..c43bdd9c --- /dev/null +++ b/Fronted Projects/Advice generator app/images/icon-dice.svg @@ -0,0 +1 @@ + \ 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