diff --git a/README.md b/README.md
index a9a4cc6..e91d841 100644
--- 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
+
diff --git a/images/dadd.PNG b/images/dadd.PNG
new file mode 100644
index 0000000..2bc589f
Binary files /dev/null and b/images/dadd.PNG differ
diff --git a/images/istockphoto-1205345718-612x612.jpg b/images/istockphoto-1205345718-612x612.jpg
new file mode 100644
index 0000000..c8e7853
Binary files /dev/null and b/images/istockphoto-1205345718-612x612.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4532b74
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Document
+
+
+
+
Dad Joke Generator
+
+
+
+
+
+
+
Joke goes here
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..1764a3b
--- /dev/null
+++ 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
new file mode 100644
index 0000000..fc642ef
--- /dev/null
+++ 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;
+}
\ No newline at end of file