Resilient-Labs · Kyle-P23 · Oct 23, 2023
diff --git a/README.md b/README.md
@@ -1,22 +1,29 @@
-# 📊 Project: Complex API 2
-
-### Goal: Use data returned from one api to make a request to another api and display the data returned
-
-### How to submit your code for review:
-
-- 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!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# Define and Display 📝📸
+
+Web application that allows users to input a word and receive its definition along with an image related to that word. It utilizes two APIs, one for retrieving word definitions and another for fetching related images.
+
+## Features
+
+- **Word Definition**: Enter a word in the input field and click the "Generate" button to get its definition.
+
+- **Image Display**: After retrieving the word's definition, the application fetches an image related to the word and displays it.
+
+## How to Use
+
+1. Enter a word in the text input field.
+2. Click the "Generate" button.
+3. The application will fetch and display the word's definition and an image associated with it.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## API Usage
+
+This project uses two APIs:
+
+1. **Dictionary API**: It retrieves word definitions using the [Dictionary API](https://dictionaryapi.dev/). The API URL is generated based on the word entered by the user.
+
+2. **Unsplash API**: It fetches images related to the word using the [Unsplash API](https://unsplash.com/developers). The API URL is generated using the word retrieved from the dictionary API.
diff --git a/css/gears.gif b/css/gears.gif
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,16 @@
+*{
+    box-sizing: border-box;
+}
+html{
+    font-family: Roboto, sans-serif;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url(gears.gif);
+}
+body{
+    border: solid 1px black;
+    border-radius: 25px;
+    background-color: rgba(0, 0, 0, 0.339);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="2 APIs that bring the user an image and definition">
+  <meta name="keywords" content="Dictionary, Generator, API">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Define and Display</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Delicious+Handrawn&family=Roboto&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1>Define & Display</h1>
+
+    <h2>Input one word and be amazed</h2>
+
+    <input type="text" name="" id="input">
+    <button type="button">Generate</button>
+    <h3>Word</h3>
+    <p>Definition</p>
+    <img src="" alt="">
+
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,29 @@
+function picBook() {
+    let picFind = document.querySelector('input').value;
+    const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${picFind}`;
+    console.log(url);
+
+    fetch(url)
+    .then(response => response.json())
+    .then(data => {
+        console.log(data);
+        console.log(data[0].meanings[0].definitions[0].definition);
+        console.log(data[0].word)
+        document.querySelector('h3').innerText = data[0].word
+        document.querySelector('p').innerText = data[0].meanings[0].definitions[0].definition
+
+
+
+
+        const secondUrl = `https://api.unsplash.com/search/photos/?page=1&query=${data[0].word}.&client_id=GsTYXyEKLSPqtxZHmjmtLtSc4Gr9-6Txtu35Ox_C66o`
+        console.log(secondUrl)
+        fetch(secondUrl)
+        .then(response => response.json())
+        .then(data2 => {
+        console.log(data2);
+        console.log(data2.results[0].urls.regular)
+        document.querySelector('img').src = data2.results[0].urls.regular
+    });
+})
+}
+document.querySelector('button').addEventListener('click', picBook);