Skip to content

Commit c64f0b9

Browse files
khalidbihkhalidbih
committed
Add Abi programmer humour app
1 parent 3a422e9 commit c64f0b9

3 files changed

Lines changed: 50 additions & 0 deletions

File tree

‎fetch/programmer-humour/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
<title>Programmer Humour</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
10+
<body>
11+
<h1>Comic</h1>
12+
<div id="comic-container"></div>
13+
<p id="error-message"></p>
14+
<script src="script.js"></script>
15+
</body>
16+
</html>

‎fetch/programmer-humour/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
function getComic() {
2+
fetch("https://xkcd.now.sh/?comic=latest")
3+
.then((res) => res.json())
4+
.then((data) => {
5+
console.log(data);
6+
document.getElementById("comic-container").innerHTML =
7+
`<img src="${data.img}">`;
8+
})
9+
.catch(() => {
10+
document.getElementById("error-message").textContent =
11+
"Error loading comic";
12+
});
13+
}
14+
getComic();

‎fetch/programmer-humour/style.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
body {
2+
text-align: centre;
3+
font-family: Arial, sans-serif;
4+
}
5+
6+
img {
7+
max-width: 100%;
8+
background-color: rgb(174, 130, 217);
9+
padding: 10%;
10+
display: block;
11+
}
12+
h1{
13+
text-align: center;
14+
font-family: 'Courier New', Courier, monospace;
15+
background-color: blanchedalmond;
16+
}
17+
img {
18+
display: block;
19+
margin: 0 auto;
20+
}

0 commit comments

Comments
 (0)