Resilient-Labs · AngelBelRoth · Oct 5, 2025 · Oct 5, 2025 · Oct 5, 2025 · Nov 10, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,9 @@
-# 📊 Project: Simple API 2
+# Cheers!
 
-### Goal: Display data returned from an api
+**Cheers!** is a simple project that fetches and displays data from a public drink API.</br>
+Displays drink names, images, ingredients and instruction on a web page.</br>
+The core goal is to demonstrate retrieving JSON from an external endpoint and rendering it in a user-friendly web interface.
 
-### 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...
-```
+<img width="1600" height="761" alt="Screenshot 2025-11-10 at 12 17 38" src="https://github.com/user-attachments/assets/8db4bdc6-65ea-44e6-a007-ab692d1c2f29" />
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,27 @@
+* {
+  margin: 1% 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  font-family: "Fredericka the Great", serif;
+}
+
+div {
+  display: flex;
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+  max-width: 500px;
+  max-height: 750px;
+  border-radius: 10px;
+}
+
+input {
+  text-align: center;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="description"
+		content="This website displays ingredients and instructions for making the classic cocktail and mocktail of your choice.">
+	<meta name="keywords" content="Cocktails, instruction">
+	<!-- <title>Drink Instructions</title> -->
+	<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=Fredericka+the+Great&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+	<h1>Which Drink Takes Your Fancy Today?</h1>
+	<input type="text" name="" value="">
+	<button type="button" name="button">Get Drink</button>
+	<h2></h2>
+	<img src="" alt="">
+	<div><h3><strong>Ingredients: </strong></h3></div>
+	<h4><strong>Instructions: </strong></h4>
+	<script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,71 @@
+//The user will enter a cocktail. Get a cocktail name, photo, and instructions and place them in the DOM
+document.addEventListener('DOMContentLoaded', () => {
+document.querySelector('button').addEventListener('click', getDrink)
+
+function getDrink() {
+    const inputText = document.querySelector('input').value
+    console.log(inputText)
+
+    const url = `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${inputText}`
+    fetch(url)
+        .then(res => res.json()) // parse response as JSON
+        .then(data => {
+            console.log(data)
+
+            document.querySelector('h2').innerText = data.drinks[0].strDrink
+            document.querySelector('img').src = data.drinks[0].strDrinkThumb
+            document.querySelector('h4').innerText = data.drinks[0].strInstructions
+
+            //Justin Joshi helped me with the if condition
+            if (data.drinks[0].strIngredient1) {
+                document.querySelector('h3').innerText += ` ${data.drinks[0].strIngredient1}`
+            }
+            if (data.drinks[0].strIngredient2) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient2}`
+            }
+            if (data.drinks[0].strIngredient3) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient3}`
+            }
+            if (data.drinks[0].strIngredient4) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient4}`
+            }
+            if (data.drinks[0].strIngredient5) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient5}`
+            }
+            if (data.drinks[0].strIngredient6) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient6}`
+            }
+            if (data.drinks[0].strIngredient7) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient7}`
+            }
+            if (data.drinks[0].strIngredient8) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient8}`
+            }
+            if (data.drinks[0].strIngredient9) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient9}`
+            }
+            if (data.drinks[0].strIngredient10) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient10}`
+            }
+            if (data.drinks[0].strIngredient11) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient11}`
+            }
+            if (data.drinks[0].strIngredient12) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient12}`
+            }
+            if (data.drinks[0].strIngredient13) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient13}`
+            }
+            if (data.drinks[0].strIngredient14) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient14}`
+            }
+            if (data.drinks[0].strIngredient15) {
+                document.querySelector('h3').innerText += `, ${data.drinks[0].strIngredient15}`
+            }
+
+        })
+        .catch(err => {
+            console.log(`error ${err}`)
+        });
+}
+})