Skip to content

Commit 91d119b

Browse files
kaal-coderkaal-coder
authored
Merge pull request #217 from Anjali-Git-Hub/main
Advice Generator App
2 parents ee9b709 + 0e170e2 commit 91d119b

File tree

7 files changed

+158
-0
lines changed

7 files changed

+158
-0
lines changed

‎Fronted Projects/Advice generator app/app.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const btn=document.querySelector("button");
2+
const h1=document.querySelector("h1");
3+
const span=document.querySelector("span");
4+
5+
// Fetching API
6+
7+
let id=1;
8+
const url="https://api.adviceslip.com/advice"
9+
const getData=async function(){
10+
const xhr=new XMLHttpRequest();
11+
const response=await fetch(`${url}/${Math.floor(Math.random() * 118) + 1}`);
12+
if(response.ok){
13+
const data=await response.json();
14+
return data;
15+
}
16+
else{
17+
console.log("something went wrong..");
18+
}
19+
}
20+
21+
22+
btn.addEventListener("click",()=>{
23+
24+
getData()
25+
.then(data=>{
26+
id++;
27+
span.textContent=id;
28+
h1.textContent=`"${data.slip.advice}"`;
29+
})
30+
.catch(()=>{
31+
console.log("Check your internet connection");
32+
})
33+
btn.classList.toggle('rotate');
34+
})

‎Fronted Projects/Advice generator app/images/favicon-32x32.png‎

1.04 KB
Loading

‎Fronted Projects/Advice generator app/images/icon-dice.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Fronted Projects/Advice generator app/images/pattern-divider-desktop.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Fronted Projects/Advice generator app/images/pattern-divider-mobile.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Fronted Projects/Advice generator app/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./style.css">
7+
<script src="./app.js" defer></script>
8+
<title>Advice Generator App</title>
9+
</head>
10+
<body>
11+
<div class="box">
12+
<h3>advice #<span>1</span></h3>
13+
<h1>"Luck comes from hard work. Luck happens when hard work and timing and talent intersect."</h1>
14+
<img src="./images/pattern-divider-desktop.svg" alt="divider image">
15+
<button></button>
16+
<div class="circle"></div>
17+
18+
</div>
19+
</body>
20+
</html>

‎Fronted Projects/Advice generator app/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');
2+
*{
3+
margin:0;
4+
padding:0;
5+
box-sizing:border-box;
6+
}
7+
html{
8+
font-size:62.5%;
9+
}
10+
:root{
11+
--primary-lightCyan: hsl(193, 38%, 86%);
12+
--primary-neonGreen: hsl(150, 100%, 66%);
13+
--neutral-grayishBlue:hsl(217, 19%, 38%);
14+
--dark-grayishBlue: hsl(217, 19%, 24%);
15+
--darkBlue: hsl(218, 23%, 16%);
16+
--quote-fontWeight:800;
17+
--fontFamily:'Manrope', sans-serif;
18+
19+
}
20+
21+
body{
22+
height:100vh;
23+
width:100%;
24+
display:flex;
25+
justify-content:center;
26+
align-items:center;
27+
font-family:var(--fontFamily);
28+
background:var(--darkBlue)
29+
}
30+
.box{
31+
max-width:470px;
32+
width:90%;
33+
height:290px;
34+
border-radius:15px;
35+
display:flex;
36+
flex-direction:column;
37+
align-items:center;
38+
position:relative;
39+
background:var(--dark-grayishBlue)
40+
}
41+
h1{
42+
font-size:2.5em;
43+
width:90%;
44+
text-align:center;
45+
color:var(--primary-lightCyan);
46+
}
47+
img{
48+
width:80%;
49+
position:absolute;
50+
top:75%;
51+
}
52+
h3{
53+
text-transform:uppercase;
54+
letter-spacing:3px;
55+
margin:2em 0;
56+
color:var(--primary-neonGreen);
57+
font-weight:var(--quote-fontWeight);
58+
}
59+
.circle{
60+
width:62px;
61+
height:60px;
62+
border-radius:50%;
63+
background:var(--primary-neonGreen);
64+
position:absolute;
65+
top:89%;
66+
transition:all 0.5s ease;
67+
}
68+
button{
69+
height: 26px;
70+
width: 27px;
71+
border-radius:5px;
72+
background:url(./images/icon-dice.svg);
73+
background-position: center;
74+
background-size: cover;
75+
outline:none;
76+
border:none;
77+
position:absolute;
78+
top:95%;
79+
cursor:pointer;
80+
z-index:9;
81+
transition: transform 0.4s ease-in-out;
82+
83+
84+
}
85+
button.rotate{
86+
transform: rotate(360deg);
87+
}
88+
button:hover +.circle,
89+
.circle:hover{
90+
box-shadow: 0 0 20px hsl(150, 100%, 66%), 0 0 40px hsl(150, 100%, 66%);
91+
}
92+
93+
/* for small devices */
94+
@media(max-width:500px){
95+
html{
96+
font-size:56.25%;
97+
}
98+
.box{
99+
height:300px;
100+
}
101+
}

0 commit comments

Comments
 (0)