Resilient-Labs · Michaelariasdls · Oct 23, 2023 · Nov 16, 2023
diff --git a/README.md b/README.md
@@ -2,21 +2,17 @@
 
 ### Goal: Display data returned from an api
 
-### How to submit your code for review:
+### Goal: Connect an API & allow the user to input or recieve data from API
 
-- 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!
+This project is was like setting a light bulb in my head i started to think of all the possiblities with API's & hopefully making one of my own!
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+### How it's Made
+Tech used: HTML, CSS, Javascript
+I used object orientated programming to create the board so that it would reset check for a win after each turn. This was my first project introducing OOP
+### Optimizations
+
+### Lessons Learned
+I learned how to grab & manipulate data from an API it was so cool to see how everything was communicating.
+
+## Example
+![Image Alt Text](./images/dadd.PNG)
diff --git a/images/dadd.PNG b/images/dadd.PNG
diff --git a/images/istockphoto-1205345718-612x612.jpg b/images/istockphoto-1205345718-612x612.jpg
diff --git a/index.html b/index.html
@@ -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">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">Dad Joke Generator</h1>
+        <div class="input-container">
+            <!-- <input type="number" id="amount" placeholder="Enter a number"> -->
+            <button type="button" id="generate-button">Generate Dad Joke</button>
+        </div>
+        <div class="joke-container">
+            <h2 class="joke-title"></h2>
+            <h3 class="joke" id="joke-content">Joke goes here</h3>
+        </div>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,96 @@
+// https://api.api-ninjas.com/v1/dadjokes?limit=  2
+// sample request url
+
+//user needs to enter a number for X amount of jokes & they need to be limited to under 10 *scrapped was working but ran into issue where i could not create a new element per joke maybe go back into the to-do list to see* 
+//Might have to refer to to-do-list to create new elements when jokes are listed
+
+
+document.querySelector('button').addEventListener('click', joke)
+
+function joke(){
+    console.log('working joke function test')
+
+    // let funny = document.querySelector('input').value
+    // console.log(funny)
+
+    let apiKey = 'GJpIgQGyjWrmCbtUL1ITHw==iGJD1KipvjGZOm2f'
+    // console.log(apiKey)
+
+    // let userSelect = funny
+
+    // let maxLimit = 10
+    // console.log(maxLimit)
+                            //user to set a limit for how many jokes
+    // if(userSelect > maxLimit){
+    //     userSelect = maxLimit;
+    // }
+    // userSelect = userSelect <= limit ? userSelect : limit;
+    // console.log(userSelect)
+
+    let url = `https://api.api-ninjas.com/v1/dadjokes?limit=`;
+    // console.log(url)
+
+
+    // let url = `https://api.api-ninjas.com/v1/dadjokes?limit=${funny}&funny=${limit}`;
+
+    fetch(url, {
+        method: 'GET', //Fetch do be fetching 
+        headers: {
+            'X-Api-Key': apiKey,
+            'Content-Type': 'application/json'
+        }
+    })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(result => {
+            console.log(result);
+            const jokeContent = result[0].joke
+            document.querySelector('#joke-content').textContent = jokeContent;
+        })
+        .catch(error => {
+            console.error('Error: ', error);
+        });
+
+
+      }
+
+
+
+
+// Example 2 jokes
+// [
+//     {
+//       "joke": "What sounds like a sneeze and is made of leather? A shoe."
+//     },
+//     {
+//       "joke": "How do you make a tissue dance? Put a little boogie in it!"
+//     }
+//   ]
+
+
+//Example is written in Ajax refer to weatherAPI to rewrite it using fetch
+
+// var limit = 3
+// $.ajax({
+//     method: 'GET',
+//     url: 'https://api.api-ninjas.com/v1/dadjokes?limit=' + limit,
+//     headers: { 'X-Api-Key': 'YOUR_API_KEY'},
+//     contentType: 'application/json',
+//     success: function(result) {
+//         console.log(result);
+//     },
+//     error: function ajaxError(jqXHR) {
+//         console.error('Error: ', jqXHR.responseText);
+//     }
+// });
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,58 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    margin: 0;
+    padding: 0;
+    background-image: url(./images/istockphoto-1205345718-612x612.jpg);
+
+}
+
+.container {
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.title {
+    text-align: center;
+    color: #333;
+}
+
+.input-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+input[type="number"] {
+    width: 100px;
+    padding: 5px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    padding: 8px 15px;
+    color: black;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+
+}
+
+.joke-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.joke-title {
+    font-size: 24px;
+    color: #333;
+}
+
+.joke {
+    font-size: 18px;
+    color: #444;
+}