Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Answer #235

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions cs/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.one{
display: flex;
justify-content: center;
border: 2px solid black;
}
23 changes: 23 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="one">
<h1>Is this funny?</h1>
</section>
<section class="two">
<button type="button" id="getShow">Get Jokes</button>
</section>

<section class="three">
<h2></h2>
</section>

<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
31 changes: 31 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -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);