From 3939ecaf17921962c99efda8a277d8fe4225b984 Mon Sep 17 00:00:00 2001 From: Angel Bel Date: Sun, 5 Oct 2025 12:43:08 -0400 Subject: [PATCH 1/4] Add files via upload I completed the challenge: 5 I feel good about my code: 5 --- css/style.css | 23 +++++++++++++++++ index.html | 31 +++++++++++++++++++++++ js/main.js | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 124 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7235d5c --- /dev/null +++ b/css/style.css @@ -0,0 +1,23 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 1% 0; + font-family: "Fredericka the Great", serif; +} + +img{ + display: block; + margin: 0 auto; + max-width: 500px; + max-height: 750px; + border-radius: 10px; +} + +input { + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..33c8057 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + + + + Cocktails Instructions + + + + + + + + +

Which Drink Takes Your Fancy Today?

+ + + +

+ +

Ingredients:

+

Instructions:

+ + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..b1d97a5 --- /dev/null +++ b/js/main.js @@ -0,0 +1,70 @@ +//The user will enter a cocktail. Get a cocktail name, photo, and instructions and place them in the DOM + +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}`) + }); +} \ No newline at end of file From 1598197189d946c8c73f0d2ab751cb4e90b481e1 Mon Sep 17 00:00:00 2001 From: Angel Bel Date: Sun, 5 Oct 2025 13:05:22 -0400 Subject: [PATCH 2/4] Add files via upload --- css/style.css | 16 ++++++++++------ index.html | 9 +++------ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 7235d5c..f4dfe32 100644 --- a/css/style.css +++ b/css/style.css @@ -1,16 +1,20 @@ -*{ - margin: 0; - padding: 0; +* { + margin: 1% 0; + padding: 0; box-sizing: border-box; display: flex; - flex-direction: column; + text-align: center; align-items: center; + flex-direction: column; justify-content: center; - margin: 1% 0; font-family: "Fredericka the Great", serif; } -img{ +div { + display: flex; +} + +img { display: block; margin: 0 auto; max-width: 500px; diff --git a/index.html b/index.html index 33c8057..2bb03b9 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,9 @@ + content="This website displays ingredients and instructions for making the classic cocktail and mocktail of your choice."> - Cocktails Instructions + @@ -15,16 +15,13 @@ -

Which Drink Takes Your Fancy Today?

-

-

Ingredients:

+

Ingredients:

Instructions:

- From 0e260c80a1160345b6bcea71fa1b14c3ade0823b Mon Sep 17 00:00:00 2001 From: Angel Bel Date: Sun, 5 Oct 2025 13:09:52 -0400 Subject: [PATCH 3/4] Add files via upload --- js/main.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/main.js b/js/main.js index b1d97a5..d1b194e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,5 @@ //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() { @@ -67,4 +67,5 @@ function getDrink() { .catch(err => { console.log(`error ${err}`) }); -} \ No newline at end of file +} +}) \ No newline at end of file From 9298d08ec0740e29e8f68eb43020abb232a1d49d Mon Sep 17 00:00:00 2001 From: Angel Bel Date: Mon, 10 Nov 2025 12:22:38 -0500 Subject: [PATCH 4/4] Update README.md --- README.md | 25 ++++++------------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 788ab5a..604b06f 100644 --- 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.
+Displays drink names, images, ingredients and instruction on a web page.
+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... -``` +Screenshot 2025-11-10 at 12 17 38