From 4aa58f25f44c3d90e597b6bf21b2793463966b8d Mon Sep 17 00:00:00 2001 From: ChrisB1099 Date: Mon, 21 Oct 2024 19:28:59 -0400 Subject: [PATCH 1/3] add index.html --- index.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..6edcc67 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + Document + + + +
+

Is this funny?

+
+
+ +
+ +
+

+
+ + + + \ No newline at end of file From 649f7da73df98de927a8dab073064e1b386af7bd Mon Sep 17 00:00:00 2001 From: ChrisB1099 Date: Mon, 21 Oct 2024 20:05:36 -0400 Subject: [PATCH 2/3] added style.css --- cs/style.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 cs/style.css diff --git a/cs/style.css b/cs/style.css new file mode 100644 index 0000000..9ee0959 --- /dev/null +++ b/cs/style.css @@ -0,0 +1,5 @@ +.one{ + display: flex; + justify-content: center; + border: 2px solid black; +} \ No newline at end of file From 93bf051ed0b2817dba01c5d3521c4d07cbf4c2d9 Mon Sep 17 00:00:00 2001 From: ChrisB1099 Date: Mon, 21 Oct 2024 20:05:49 -0400 Subject: [PATCH 3/3] added main.js --- js/main.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 js/main.js diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..92b9115 --- /dev/null +++ b/js/main.js @@ -0,0 +1,31 @@ +// need a button so that when clicked, a random image with its title will pop up +// need to connnect the button to the DOM (event listener) +// need to get random image from API and the title asssciated with image +// need to display the image to the DOM +// need to display the title to the DOM + +document.querySelector('button').addEventListener('click', getRandomPic) + +function getRandomPic(){ + +fetch("https://geek-jokes.sameerkumar.website/api?format=json") + .then(res => res.json()) + .then(data => { // data is pulled here, so anything you want to grab has to be after this line + console.log(data) //data is the parameter for the nested function, so if you want use data we have to use it inside of the function that has the data parameter + const randomIndex =data.joke; // you needed .joke becuase you pulled this from the object + + document.querySelector('h2').innerText = randomIndex // this allowed for you to display the jokes into the DOM + + }) + .catch(err =>{ + console.log(`error ${err}`) + }) + + + } + + +// "https://api.disneyapi.dev/character" + + +// /Math.floor(Math.random() * data.imageUrl.length); \ No newline at end of file