diff --git a/programmer-humour/index.html b/programmer-humour/index.html
new file mode 100644
index 00000000..bb17053c
--- /dev/null
+++ b/programmer-humour/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ Programmer Humour
+
+
+
+
+
diff --git a/programmer-humour/script.js b/programmer-humour/script.js
new file mode 100644
index 00000000..518ceac6
--- /dev/null
+++ b/programmer-humour/script.js
@@ -0,0 +1,25 @@
+fetch("https://xkcd.now.sh/?comic=latest")
+ .then((response) => response.json())
+ .then((data) => generateImg(data));
+
+function generateImg(data) {
+ const myCont = document.createElement("div");
+
+ const myTitle = document.createElement("h3");
+ myTitle.innerText = data.title;
+
+ const myDate = document.createElement("p");
+ myDate.id = "date";
+ myDate.innerText = `${data.day}/${data.month}/${data.year}`;
+
+ const myImg = document.createElement("img");
+ myImg.setAttribute("src", data.img);
+ myImg.setAttribute("alt", data.safe_title);
+
+ const mySummary = document.createElement("p");
+ mySummary.innerText = data.alt;
+
+ myCont.append(myTitle, myDate, myImg, mySummary);
+
+ document.body.append(myCont);
+}
diff --git a/programmer-humour/style.css b/programmer-humour/style.css
new file mode 100644
index 00000000..0b3669a6
--- /dev/null
+++ b/programmer-humour/style.css
@@ -0,0 +1,31 @@
+* {
+ padding: 0px;
+ margin: 0px;
+}
+body {
+ background-color: black;
+}
+
+div {
+ width: 300px;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ margin: 0px auto;
+ margin-top: 30px;
+ background-color: white;
+ align-items: center;
+ border-radius: 10px;
+
+ box-shadow: 5px 5px 5px 2px rgba(255, 255, 255, 0.34);
+
+ border: solid 1px black;
+}
+img {
+ width: auto;
+}
+
+#date {
+ align-self: flex-end;
+}