diff --git a/README.md b/README.md
index 788ab5a..2f444fc 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,24 @@
-# 📊 Project: Simple API 2
+# Simple Recipe Website 
-### Goal: Display data returned from an api
+
-### How to submit your code for review:
+# Description
+This website enables user to enter one ingredient from their fridge and find simple recipes
-- 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!
+## How It's Made:
+Tech used:
+- HTML
+- CSS
+- JavaScript
+- API
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+## Lessons Learned:
+- How to integrate API database into JS
+- How to use innerText and HTML
+- How to use split (), trim (), map (), slice() to clean up text from API call
+
+## Notes
+- Would like to commit better styling to website
+
+#### API Used
+https://www.themealdb.com/api.php
diff --git a/css/normalize.css b/css/normalize.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/css/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..2ee7ab0
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,47 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..f27f98c
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,180 @@
+/******************************************
+/* CSS
+/*******************************************/
+
+/* Box Model Hack */
+*{
+ box-sizing: border-box;
+}
+
+/******************************************
+/* LAYOUT
+/*******************************************/
+
+html, body {
+ margin: 0;
+ padding: 0;
+ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background-color: rgb(240, 145, 3);
+ color:rgb(53, 34, 34);
+ font-size: 40px;
+}
+
+.container {
+ max-width: 80%;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+header {
+ width:100%;
+ text-align: center;
+ padding: 20px 0;
+}
+
+h2 {
+ font-size: 100px;
+ margin: 0;
+}
+
+header p {
+ margin-top: 10px;
+ font-size: 25px;
+ color:rgb(50, 54, 6);
+}
+
+section h1 {
+ font-size: 50px;
+ margin-bottom: 15px;
+ text-align: center;
+}
+
+.search-bar {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(214, 133, 79, 0.829);
+ padding: 15px;
+ border-radius: 6px;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+ margin-bottom: 20px;
+}
+
+.search-bar span {
+ margin-right: 10px;
+ font-size: 30px;
+}
+
+.search-bar input {
+ padding: 8px;
+ width: 250px;
+ max-width: 100%;
+ background-color: rgb(241, 160, 88);
+ border-radius: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ text-align: center;
+ height:45px;
+}
+
+.search-bar button {
+ font-size:30px;
+ padding: 8px 14px;
+ background-color: rgb(233, 180, 133);
+ color: rgb(31, 0, 0);
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+}
+
+.search-bar button:hover {
+ background-color: rgb(36, 19, 4);
+}
+
+#recipes-container {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 30px;
+}
+
+.hidden{
+ display:none;
+}
+
+.recipes {
+ background-color: rgb(233, 184, 94);
+ border-radius: 6px;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ border: 3px solid black;
+}
+
+.title {
+ font-size: 40px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ text-align: left;
+ color:rgb(71, 44, 1);
+}
+
+.recipe-row {
+ display: flex;
+ gap: 30px;
+ align-items: flex-start;
+ flex-wrap: nowrap;
+}
+
+.recipe-row img {
+ width: 25%;
+ height: auto;
+ flex-shrink: 0;
+ border-radius: 6px;
+}
+
+.text-section {
+ display: flex;
+ gap: 30px;
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.ingredients {
+ flex-direction: column wrap;
+ width:20%;
+}
+
+.instructions {
+ flex-direction: column wrap;
+ width:60%;
+}
+
+.ingredients li, .instructions li {
+ line-height: 1.5;
+ font-size: 25px;
+}
+
+/******************************************
+/* ADDITIONAL STYLES
+/*******************************************/
+@media (max-width: 700px) {
+ .recipe-row {
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ }
+
+ .text-section {
+ flex-direction: column;
+ gap: 15px;
+ width: 100%;
+ }
+
+ .ingredients, .instructions {
+ flex: 1 1 100%;
+ padding-left: 0;
+ }
+}
diff --git a/image-1.png b/image-1.png
new file mode 100644
index 0000000..5833870
Binary files /dev/null and b/image-1.png differ
diff --git a/image.png b/image.png
new file mode 100644
index 0000000..64385d9
Binary files /dev/null and b/image.png differ
diff --git a/img/stock-icon.png b/img/stock-icon.png
new file mode 100644
index 0000000..e4b8010
Binary files /dev/null and b/img/stock-icon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..aaadc62
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Recipe API
+
+
+
+
+
+
+
+
Welcome!
+
Find easy dinner ideas, healthy recipes, plus helpful cooking tips and techniques.
+
+
+
Recipes
+
+ What's in your fridge?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..78ad1da
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,134 @@
+// psuedo code
+// User enters in ingredient
+// Check if user input correctly, filter out number searches AND uppercase turns to lowercase fetch api objects correctly
+// Fetch from API recipes by search then use Recipes idMeal to fetch instructions, ingredients, title, and image
+// Creates a new recipe section that takes instructions, ingredients, title, and image and appends it to new recipe sections that appear
+// Use innerHTML to replace text with fetched text of objects from API
+// When there is an error show error loading recipes or failure loading fetch
+
+// main Dom
+const button = document.getElementById('search-button');
+const userSearch = document.getElementById('user-search');
+const recipesContainer = document.getElementById('recipes-container');
+
+// once user enters input and clicks search launch fetch api call
+button.addEventListener('click', fetchRecipes);
+
+// fetch from API recipes by search then use Recipes idMeal to fetch instructions, ingredients, title, and image
+
+function fetchRecipes() {
+ const input = userSearch.value.trim();
+
+ if (!isNaN(input)) { //have them enter letters only
+ alert('Please enter name of ingredient like "beef"');
+ return;
+ }
+
+ const mainIngredient = input.toLowerCase(); // turns user search lowercase
+ const url = `https://www.themealdb.com/api/json/v1/1/filter.php?i=${encodeURIComponent(mainIngredient)}`;
+ recipesContainer.innerHTML = '
Loading recipes...Please Wait
';
+
+ fetch(url) // fetch recipes when user input is placed into API url
+ .then(res => res.json())
+ .then(data => {
+ if (!data.meals) {
+ recipesContainer.innerHTML = `
No recipes found with ingredient: ${mainIngredient}
`; //if entered ingredient is not in API e.g pear
+ return;
+ }
+
+// use innerHTML to replace text with fetched text of objects from API
+ recipesContainer.innerHTML = '';
+ const meals = data.meals.slice(0, 10); //slice creates new array of 10 meal objects containing 10 different recipes
+
+ meals.forEach(meal => { // for each object in the array, place into API call using its idMeal to look up title, img, instructions, and ingredients of recipe
+ const urlDescript = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${meal.idMeal}`;
+ fetch(urlDescript) // using another api call to get recipe details
+ .then(res => res.json())
+ .then(detailData => {
+
+// creates a new recipe section that takes instructions, ingredients, title, and image and appends it to new recipe sections that appear
+// use innerHTML to replace text with fetched text of objects from API
+
+ // had trouble adding 10 fetches from api call and adding it into html. Referenced Google AI overview and StackOverflow for guidance
+ // lesson is to have js add new section with child elements and change innertext
+ const recipe = detailData.meals[0]; //gets the first and only meal object from the API response
+ const section = document.createElement('section'); //create section
+ section.className = 'recipes';
+ const title = document.createElement('h3'); //create title
+ title.className = 'title'; //give class name for styling
+ title.innerText = recipe.strMeal; //change innertext from object text grabbed from api
+ section.appendChild(title); // appends fetched title to my section
+ const row = document.createElement('div'); //create div for recipe row
+ row.className = 'recipe-row';
+ const img = document.createElement('img'); //create img
+ img.src = recipe.strMealThumb;
+ img.alt = recipe.strMeal;
+ row.appendChild(img); // appends fetched img to my section
+ const ul = document.createElement('ul'); // creates a list for my ingredients to append aka join together
+
+ // had trouble putting list into cleaned up text once pulled from ingredient list is pulled from API
+ // cleans up the text to make sure it is in a bullet point list. Referenced from Google AI overview and Learning Mode Claude
+ // lesson is to use use loop to go through each object of array and clean up the inner text
+ ul.className = 'ingredients';
+ for (let i = 1; i <= 20; i++) {
+ let ingredient = recipe["strIngredient" + i]; // get the ingredient name, like "strIngredient1", "strIngredient2", etc.
+ let measure = recipe["strMeasure" + i]; // get the matching measure, like "strMeasure1", "strMeasure2", etc.
+ if (ingredient) { // if there is an ingredient
+ if (ingredient.trim() !== "") { // make sure its not an empty space
+ let li = document.createElement("li"); // create a new list bullet point for cleaned up ingredient text
+
+ let text = ""; // start with empty string
+ if (measure) { // if there is a measure
+ text += measure + " "; //add measure to text
+ }
+
+ text += ingredient; //add ingredient name to text
+
+ li.innerText = text; // change html text to cleaned up text now
+ ul.appendChild(li); // add the ingredients into bullet list
+ }
+ }
+ }
+ row.appendChild(ul);
+ const ol = document.createElement('ol'); //create instructions
+ ol.className = 'instructions';
+// condition to see if instructions exist in API
+ // had trouble putting list into cleaned up text once pulled from instruction list is pulled from API
+ // cleans up the text to make sure it is in a ordered list. Referenced from Google AI overview and StackOverflow
+ // lesson is to use use loop to go through each object of array and clean up the inner text
+ if (recipe.strInstructions) {
+ const instructions = recipe.strInstructions // get the instruction text from API
+ .split('\n') // split whole list that was fetched into new lines
+ .map(line => line.trim()) // remove extra place from list with map and trim functions
+ .filter(line => line.length > 0); // remove empty lines with filter ()
+
+ for (let i = 0; i < instructions.length; i++) { // loop through each instruction using a for loop
+ const li = document.createElement('li'); // create a new li element
+ li.innerText = instructions[i].replace(/^\d+\.\s*/, ''); // remove numbering like "1. " from the start
+ ol.appendChild(li); // add the li to the element
+ }
+ }
+ row.appendChild(ol); // adds the ordered list to the row element
+ section.appendChild(row); // adds the row to the section
+ recipesContainer.appendChild(section); // adds the section to the main container
+ })
+
+// When there is an error show error loading recipes or failure loading fetch
+ .catch(err => { // if there is an error
+ console.log(`Error fetching recipe details: ${err}`); // show in console log
+ alert('Failed to load recipe details. Try again.'); // alert user
+ });
+});
+})
+
+// When there is an error show error loading recipes or failure loading fetch
+ .catch(err => { // if there is an error
+ console.log(`Error fetching recipes: ${err}`); // show in console log
+ recipesContainer.innerHTML = '
Error loading recipes. Please try again later.
'; // alert user
+ });
+}
+
+// Citations:
+// Referenced from Stack Overflow - https://stackoverflow.com/questions/1115310/how-can-i-add-a-class-to-a-dom-element-in-javascript and https://stackoverflow.com/questions/7695997/split-the-sentences-by-and-remove-surrounding-spaces
+// Referenced from Tutorial how to fetch from API - https://www.youtube.com/watch?v=b5rjEW-_6po
+// Referenced Google AI Overview, Stackflow, and Learning Mode of Claude (does not write answer for you) guidance for code syntax and debug
\ No newline at end of file