From 93c524558972dd92de7d50a768e6dcb637725127 Mon Sep 17 00:00:00 2001 From: Shawn1042 Date: Fri, 3 Oct 2025 17:51:01 -0400 Subject: [PATCH 1/4] dad jokes api project --- README.md | 39 +++++++++++++++++---------------------- index.html | 18 ++++++++++++++++++ script.js | 18 ++++++++++++++++++ style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 106 insertions(+), 22 deletions(-) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/README.md b/README.md index 788ab5a..efbbeb7 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,17 @@ -# 📊 Project: Simple API 2 - -### Goal: Display data returned from an api - -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +# Simple API 2 Project + +This project fetches a joke from a jokes API and display that joke on the UI! + +## How It's Made: + +**Tech used:**: HTML, CSS, and JavaScript + +I used html for the markup, css for the styling, andI used Javascript for the logic of this project. + +## Lessons Learned: + +I learned how to run javascript code in HTML strings, and turn the output into a number via the eval function. + +## Image of Project: + +![calculator image](horoscope.png) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..d77f6d6 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + Document + + + +
+

+ +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..df40737 --- /dev/null +++ b/script.js @@ -0,0 +1,18 @@ +// Get a Joke API PROJECT! + + +let button = document.querySelector('button') + +button.addEventListener("click", getJoke) + +function getJoke(){ + let joke = document.querySelector('h2') + let API_URL = ' https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist&type=single' + fetch(API_URL) + .then(res => res.json()) + .then(data => { + console.log(data) + joke.innerText = data.joke + }) + +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..7ffb887 --- /dev/null +++ b/style.css @@ -0,0 +1,53 @@ +/* box shadow citation https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */ +/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions */ + + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: #abc5ec; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} + +main { + background: #fff; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + max-width: 500px; + width: 90%; + text-align: center; +} + +h2 { + min-height: 2em; + font-size: 1.3rem; + color: #333; +} + +button { + padding: 10px 20px; + font-size: 1rem; + background: #4caf50; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background 0.2s ease; +} + +button:hover { + background: #45a049; +} From e4657b36363a24007d13852ec24412f2f3fa3564 Mon Sep 17 00:00:00 2001 From: Shawn1042 Date: Fri, 3 Oct 2025 17:54:42 -0400 Subject: [PATCH 2/4] image for project --- dadjokesapiimg.png | Bin 0 -> 9282 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 dadjokesapiimg.png diff --git a/dadjokesapiimg.png b/dadjokesapiimg.png new file mode 100644 index 0000000000000000000000000000000000000000..e69b0fe1bebabedfa7e6f368e0f194457663e639 GIT binary patch literal 9282 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 FzW`xeH(CGy literal 0 HcmV?d00001 From 07c469e2b3b007f409fadb62955f5483cd9a6774 Mon Sep 17 00:00:00 2001 From: Shawn Edward-Homes Date: Fri, 3 Oct 2025 17:58:59 -0400 Subject: [PATCH 3/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index efbbeb7..4b06305 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,4 @@ I learned how to run javascript code in HTML strings, and turn the output into a ## Image of Project: -![calculator image](horoscope.png) \ No newline at end of file +![dadjokes image](dadjokesapiimg.png) From de93747883942f574d9bfed19d35724a149c9ae5 Mon Sep 17 00:00:00 2001 From: Shawn Edward-Homes Date: Wed, 12 Nov 2025 10:59:05 -0500 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4b06305..cf4f73b 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This project fetches a joke from a jokes API and display that joke on the UI! ## How It's Made: -**Tech used:**: HTML, CSS, and JavaScript +**Tech used:** HTML, CSS, and JavaScript I used html for the markup, css for the styling, andI used Javascript for the logic of this project.