From cbbdd9e3f562aa930c78dc00541902ae18d168bb Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 8 Oct 2020 17:31:34 -0400 Subject: [PATCH] Dad jokes --- dad-jokes/index.html | 17 ++++++++++++ dad-jokes/script.js | 36 ++++++++++++++++++++++++++ dad-jokes/style.css | 61 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 dad-jokes/index.html create mode 100644 dad-jokes/script.js create mode 100644 dad-jokes/style.css diff --git a/dad-jokes/index.html b/dad-jokes/index.html new file mode 100644 index 0000000..555bcdc --- /dev/null +++ b/dad-jokes/index.html @@ -0,0 +1,17 @@ + + + + + + + Dad Jokes + + +
+

Don't Laugh Challenge

+
// Joke goes here
+ +
+ + + diff --git a/dad-jokes/script.js b/dad-jokes/script.js new file mode 100644 index 0000000..e78e685 --- /dev/null +++ b/dad-jokes/script.js @@ -0,0 +1,36 @@ +const jokeEl = document.getElementById('joke') +const jokeBtn = document.getElementById('jokeBtn') + +jokeBtn.addEventListener('click', generateJoke) + +generateJoke() + +// USING ASYNC/AWAIT +async function generateJoke() { + const config = { + headers: { + Accept: 'application/json', + }, + } + + const res = await fetch('https://icanhazdadjoke.com', config) + + const data = await res.json() + + jokeEl.innerHTML = data.joke +} + +// USING .then() +// function generateJoke() { +// const config = { +// headers: { +// Accept: 'application/json', +// }, +// } + +// fetch('https://icanhazdadjoke.com', config) +// .then((res) => res.json()) +// .then((data) => { +// jokeEl.innerHTML = data.joke +// }) +// } diff --git a/dad-jokes/style.css b/dad-jokes/style.css new file mode 100644 index 0000000..38cc3a7 --- /dev/null +++ b/dad-jokes/style.css @@ -0,0 +1,61 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #686de0; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; + padding: 20px; +} + +.container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); + padding: 50px 20px; + text-align: center; + max-width: 100%; + width: 800px; +} + +h3 { + margin: 0; + opacity: 0.5; + letter-spacing: 2px; +} + +.joke { + font-size: 30px; + letter-spacing: 1px; + line-height: 40px; + margin: 50px auto; + max-width: 600px; +} + +.btn { + background-color: #9f68e0; + color: #fff; + border: 0; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); + padding: 14px 40px; + font-size: 16px; + cursor: pointer; +} + +.btn:active { + transform: scale(0.98); +} + +.btn:focus { + outline: 0; +}