From 71f25460851db66e2d1b294a746dc1ef47358d9f Mon Sep 17 00:00:00 2001 From: fikretellek Date: Fri, 23 Feb 2024 14:45:59 +0000 Subject: [PATCH] programmer humour ticket implemented --- programmer-humour/index.html | 11 +++++++++++ programmer-humour/script.js | 25 +++++++++++++++++++++++++ programmer-humour/style.css | 31 +++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+) create mode 100644 programmer-humour/index.html create mode 100644 programmer-humour/script.js create mode 100644 programmer-humour/style.css 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; +}