Skip to content

Commit 6cfe2ac

Browse files
mtore91mtore91
committed
added app
1 parent 9506283 commit 6cfe2ac

File tree

9 files changed

+1346
-0
lines changed

9 files changed

+1346
-0
lines changed

‎OneDrive/Desktop/100Devs/simple-express-app-submission-main/Procfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
web: node server.js

‎OneDrive/Desktop/100Devs/simple-express-app-submission-main/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<a href="indexx.html"><h1>Welcome to the football stadium API</h1></a>
11+
</body>
12+
</html>

‎OneDrive/Desktop/100Devs/simple-express-app-submission-main/indexx.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="main.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Oswald&display=swap" rel="stylesheet">
11+
<title>Football stadium app</title>
12+
</head>
13+
<body>
14+
<h1>Football Stadium App</h1>
15+
<p>Enter name of club below to get information about their stadium</p>
16+
<input type="text">
17+
<button class="btn-20">Get info</button>
18+
<span class="hidden" id="error">Sorry, that club is not in our database yet :(</span>
19+
<div class="hidden" id="info">
20+
<div class="pic">
21+
<img src="" alt="Picture of stadium" class="border" id="stadiumImage">
22+
<img src="" alt="Club logo" id="logoImage">
23+
</div>
24+
<div class="information">
25+
<ul>
26+
<li><span>Club: </span><span id="clubName"></span></li>
27+
<li><span>Stadium name: </span><span id="stadiumName"></span></li>
28+
<li><span>Capacity: </span><span id="capacity"></span></li>
29+
<li><span>Year Built: </span><span id="yearBuilt"></span></li>
30+
</ul>
31+
</div>
32+
</div>
33+
<script src="main.js"></script>
34+
</body>
35+
</html>

‎OneDrive/Desktop/100Devs/simple-express-app-submission-main/main.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.btn-20,
2+
.btn-20 *,
3+
.btn-20 :after,
4+
.btn-20 :before,
5+
.btn-20:after,
6+
.btn-20:before {
7+
border: 0 solid;
8+
box-sizing: border-box;
9+
}
10+
.btn-20 {
11+
-webkit-tap-highlight-color: transparent;
12+
-webkit-appearance: button;
13+
background-color: #000;
14+
background-image: none;
15+
color: #fff;
16+
cursor: pointer;
17+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
18+
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
19+
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
20+
font-size: 100%;
21+
font-weight: 900;
22+
line-height: 1.5;
23+
margin: 0;
24+
-webkit-mask-image: -webkit-radial-gradient(#000, #fff);
25+
padding: 0;
26+
text-transform: uppercase;
27+
}
28+
.btn-20:disabled {
29+
cursor: default;
30+
}
31+
.btn-20:-moz-focusring {
32+
outline: auto;
33+
}
34+
.btn-20 svg {
35+
display: block;
36+
vertical-align: middle;
37+
}
38+
.btn-20 [hidden] {
39+
display: none;
40+
}
41+
.btn-20 {
42+
border-radius: 99rem;
43+
border-width: 2px;
44+
overflow: hidden;
45+
padding: 0.5rem 2rem;
46+
position: relative;
47+
}
48+
.btn-20 span {
49+
mix-blend-mode: difference;
50+
}
51+
.btn-20:before {
52+
background: rgb(170, 3, 3);
53+
content:"";
54+
display: block;
55+
height: 100%;
56+
left: -100%;
57+
position: absolute;
58+
top: 0;
59+
transform: skew(0deg) translateX(-20%);
60+
transition: transform 0.2s ease;
61+
width: 120%;
62+
}
63+
.btn-20:hover:before {
64+
transform: skew(45deg) translateX(75%);
65+
66+
}
67+
68+
ul {
69+
list-style: none;
70+
}
71+
72+
.pic {
73+
width:50%;
74+
75+
}
76+
#stadiumImage {
77+
width:55%;
78+
}
79+
#logoImage {
80+
width:30%;
81+
}
82+
.information {
83+
width:50%;
84+
}
85+
.hidden{
86+
display:none;
87+
}
88+
* {
89+
font-family: 'Oswald', sans-serif;
90+
}

‎OneDrive/Desktop/100Devs/simple-express-app-submission-main/main.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
document.querySelector('.btn-20').addEventListener('click', apiRequest)
2+
3+
4+
async function apiRequest(){
5+
const clubName = document.querySelector('input').value
6+
7+
try{
8+
const response = await fetch(`https://football-stadium-api.herokuapp.com/api/${clubName}`)
9+
const data = await response.json()
10+
console.log(data)
11+
if(data.image === 'unknown'){
12+
document.getElementById('error').classList.toggle('hidden')
13+
}else{
14+
document.getElementById('info').classList.toggle('hidden')
15+
document.getElementById('clubName').innerText = data.clubName
16+
document.getElementById('stadiumName').innerText = data.stadiumName
17+
document.getElementById('capacity').innerText = data.stadiumCapacity
18+
document.getElementById('yearBuilt').innerText = data.stadiumBuilt
19+
document.getElementById('stadiumImage').src = data.image
20+
document.getElementById('logoImage').src = data.logoImage
21+
}
22+
} catch(error) {
23+
console.log(error)
24+
}
25+
}

0 commit comments

Comments
 (0)