Skip to content

Commit 6e9139d

Browse files
amit265amit265
committed
splash-image finished
1 parent 82126f0 commit 6e9139d

File tree

3 files changed

+119
-0
lines changed

3 files changed

+119
-0
lines changed

‎splash-image/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+
<link rel="stylesheet" href="styles.css">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Splash Image</title>
8+
9+
</head>
10+
<body>
11+
<div class="image">
12+
<figure>
13+
<img id="imageId" alt="">
14+
<figcaption id="caption" style="color: white;"></figcaption>
15+
</figure>
16+
<button>Next</button>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎splash-image/script.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
//42nIb2L2iDo4pRmvfs2OFVFLPQoTJeNKJ2o0-C_su4o
2+
3+
const API_KEY = "42nIb2L2iDo4pRmvfs2OFVFLPQoTJeNKJ2o0-C_su4o";
4+
const API = "https://api.unsplash.com/photos/random";
5+
6+
const img = document.getElementById("imgId");
7+
const reload = document.querySelector("button");
8+
const caption = document.getElementById("caption");
9+
10+
11+
const loadImage = () => {
12+
13+
14+
let xhr = new XMLHttpRequest();
15+
xhr.open('GET', 'https://api.unsplash.com/photos/random/?client_id=42nIb2L2iDo4pRmvfs2OFVFLPQoTJeNKJ2o0-C_su4o');
16+
xhr.onload = function(){
17+
let imageData = JSON.parse(xhr.response);
18+
console.log(imageData);
19+
img.src = imageData.urls.small;
20+
caption.innerText = imageData.description;
21+
console.log(caption);
22+
};
23+
24+
xhr.onerror = function() {
25+
console.log('Something went wrong...');
26+
};
27+
28+
xhr.send();
29+
30+
31+
}
32+
33+
reload.addEventListener('click', loadImage)
34+
35+
36+
loadImage();

‎splash-image/styles.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
background-color: black;
10+
display: flex;
11+
flex-direction: column;
12+
gap: 2rem;
13+
align-items: center;
14+
justify-content: center;
15+
}
16+
17+
.image {
18+
max-width: 50%;
19+
width: 650px;
20+
min-width: 400px;
21+
box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
22+
border-radius: 10px;
23+
display: flex;
24+
height: 80%;
25+
flex-direction: column;
26+
gap: 2rem;
27+
padding: 2rem;
28+
}
29+
figure {
30+
display: block;
31+
height: 100%;
32+
display: flex;
33+
flex-direction: column;
34+
gap: 2rem;
35+
}
36+
37+
img {
38+
display: block;
39+
height: 100%;
40+
width: 100%;
41+
object-fit: cover;
42+
}
43+
img:hover {
44+
border: 1px solid red;
45+
transform: scaleX(-1);
46+
}
47+
48+
button {
49+
font-size: 2rem;
50+
padding: 1rem 0;
51+
width: 100%;
52+
background-color: rgb(196, 8, 8);
53+
color: #fff;
54+
font-weight: 900;
55+
font-family: Verdana, Geneva, Tahoma, sans-serif;
56+
border: none;
57+
}
58+
59+
button:hover {
60+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
61+
background-color: greenyellow;
62+
cursor: pointer;
63+
}

0 commit comments

Comments
 (0)