commit 782db8680bcf840949c40ab7ad869a2d09e5b14f Author: Daryl Ronningen Date: Thu Oct 7 13:28:39 2021 -0700 day 1 diff --git a/Day 1/index.html b/Day 1/index.html new file mode 100644 index 0000000..c81b348 --- /dev/null +++ b/Day 1/index.html @@ -0,0 +1,63 @@ + + + + + + + + + + + Random Meal Generator + + +
+

+ +
+
+
+ Recipe image + +
+
+
+ +
    +
  • +

    +
    • + +
  • +

    +
    • + +
  • +

    +
    • + +
  • +

    +
    • +
+
+ +
+
Ingredients:
+
+
    +
    + +
    + +
    Instructions:
    +

    +
    +
    +
    +
    + + + + + diff --git a/Day 1/index.js b/Day 1/index.js new file mode 100644 index 0000000..ca59bea --- /dev/null +++ b/Day 1/index.js @@ -0,0 +1,24 @@ +(async () => { + const recipe = (await (await fetch("https://www.themealdb.com/api/json/v1/1/random.php")).json()).meals[0]; + + document.getElementById("thumbnail").src = recipe.strMealThumb; + document.getElementById("category").innerText = `Category: ${recipe.strCategory}`; + document.getElementById("location").innerText = `Area: ${recipe.strArea}`; + document.getElementById("meal").innerText = `Meal: ${recipe.strMeal}`; + document.getElementById("source").innerHTML = `Source: ${recipe.strSource}`; + document.getElementById("yt").innerHTML = `YouTube Tutorial: ${recipe.strYoutube}`; + document.getElementById("instructions").innerText = recipe.strInstructions; + + const ingredientsList = document.getElementById("ingredientsList"); + + for (let index = 0; index < 20; index++) { + const element = recipe[`strIngredient${index + 1}`]; + + if (element === '') break; + + const li = document.createElement('li'); + recipe[`strMeasure${index + 1}`] === '' ? li.innerHTML = `

    ${element}

    ` : li.innerHTML = `

    ${element}, ${recipe[`strMeasure${index + 1}`]}

    `; + + ingredientsList.appendChild(li); + } +})(); diff --git a/Day 1/styles.css b/Day 1/styles.css new file mode 100644 index 0000000..d01ee91 --- /dev/null +++ b/Day 1/styles.css @@ -0,0 +1,19 @@ +#meal { + width: 100%; + text-align: center; +} + +#border { + border: 3px solid black; + padding: 10px; +} + +#instructions { + border: 1px solid grey; + padding: 7px; +} + +#ingredientsDiv { + border: 1px solid grey; + padding: 7px; +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..1a0fede --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# Part of the #100daysofcode Project + +But since I suck with coming up with ideas, all code ideas is from but with my own code. + +| Day | Project | Link | +| --- | --- | --- | +| 001 | Random Meal Generator | [link](https://codepen.io/relms12345/full/JjyPYvX)