Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

NW6 | Sabella Fisseha | Module JS-3 -Programmer Humour | WEEK-3 #299

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

NW6 | Sabella Fisseha | Module JS-3 -Programmer Humour | WEEK-3 #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4792d9e
comic image
Sabella-8 Feb 14, 2024
6465653
corrected sonar
Sabella-8 Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions programmer-humour/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div class="container">
<h1>Comic Viewer</h1>
<div id="comic-container">
<img id="imageComic" src="" />
</div>
</div>
<script src="script.js"></script>
</body>
</html>
19 changes: 19 additions & 0 deletions programmer-humour/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const imageComic = document.getElementById("imageComic");

function fetchingImg() {
return fetch("https://xkcd.now.sh/?comic=latest")
.then((res) => {
if (!res.ok) {
throw new Error("error");
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure your errors always give some more information about what went wrong. If you just see the text "error", you might be confused about what actually happened

}
return res.json();
})
.then((data) => {
console.log(data);
imageComic.src = data.img;
})
.catch((error) => {
console.error("Error fetching comic:");
});
}
fetchingImg();
23 changes: 23 additions & 0 deletions programmer-humour/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}

h1 {
margin-bottom: 20px;
}

#comic-container {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great opportunity to mention margin collapsing. Because your h1 and #comic-container have a bottom/top margin, and they are next to each other (or more technically they are 'adjacent siblings'), their margins 'collapse' into a single 20px margin.

This basically means that your margin-top isn't having any affect.

My personal preference here is to avoid margin-top and only apply margin-bottom to elements arranged vertically, so it's really clear which margins are being applied. In that case, the h1 would have a bottom margin, and the #comic-container wouldn't have any margin at all.

margin-top: 20px;
}

#imageComic {
max-width: 100%;
}