vubao2303 / Project-1

Group Project

What's for Dinner?

As a person who needs to eat everyday, I would like some help with cooking or deciding what to eat. I want to have many choices of recipes, and when I can't decide on what to eat I will have a chance to pick a random recipe. On the day I don't feel like cooking or following recipes, I want to go out to eat, or in this COVID-19 seasons, get some to go from restaurant near me, I will be present with the top ten restaurant in my city.

Site Picture

Table of Contents

Title

Site Picture

Table of Contents

Description of Page Building

Code Snippet

Technologies Used

Deployed Link

Authors

License

Description of Page Building

• Create a html file, a css file, and a javascript file

• In HTML file

  • Construct HTML file in semantic style
  • Use Foundation CSS framework to style the page
  • Add images to jazz up the page
  • Use flex box and grid tool for responsiveness
  • Create search box for user input
  • Add authors info in the footer

  • In Javascript file

    • Utilize TheMealDB and Zomato API
    • Use AJAX function to pull data
    • Name variables as pointer to html file and for functions
    • Create event listener for buttons to generate recipe info, recipe lists, and restaurant list
    • Validate user input
    • Create HTML in semantic style

    • In Javascript file

      • Name variables for different objects and function
      • Set current date and time using Jquery
      • Use on click function for save button to save user input in local storage
      • Go throught the loops of objects by using the for loop to get the value of ingridients
      • Apply JSON.stringify funtion to add into storage and JSON.parse to get items to the page

    • In Style.Css file

      • Adjust texts, margin, and padding
      • Add colors to elements
      • Add background images
      • Select font styles and sizes
      • Use hover tools for buttons on images
      • Align cards side by side

    Code Snippet

    Name contents using variables

    var APIKey = "563492ad6f91700001000001f270577a46c942ff96c8a4e60398816d";
    var recipeSTR = JSON.stringify(data);
    var oldRecipeSTR = recipeData.meals[recipeIndex].strInstructions;
        

    Use AJAX function to pull date

    function getRecipes() {
        return $.ajax({
            url: "https://www.themealdb.com/api/json/v1/1/search.php?s=" + keywordSearch,
            method: "GET",
            cors: true,
            success: function(data) {
                var recipeSTR = JSON.stringify(data);
                recipeData = JSON.parse(recipeSTR);
                console.log("---- Recipe Data ----")
                console.log(recipeData);
            }
        })
    }

    Generate function that create html elements

    function displayRandomRecipe() {
        console.log("displayRandomRecipe: " + randomData)
        $("#recipe").empty();
        $("#recipe").append(`<img id="random-recipe" src=${randomData.meals[0].strMealThumb} alt="mealImg" >`);
        $("#recipe").append(`<h1 id="randomTitle" >${randomData.meals[0].strMeal}</h1>`);
        $("#recipe").append(`<h3 id="random-ingred" >Ingredients:</h3>`);
        var ingredList = $(`<ul id="ingredient-list"></ul>`);
        $("#recipe").append(ingredList);

    Use on click function to attaches on click event to button element

    $(document.body).on("click", ".recipe-button", function(event) {
        event.preventDefault();
        $("#recipe-list").empty();
        recipeIndex = $(this).attr("value");
        displayKeywordRecipe(recipeIndex);
    });

    Use conditional statement to place recipe in html accordingly

       if (randomData.meals[0]["strIngredient" + (i+1)] === "" || null) {
              continue;
          } else {
              $("#ingredient-list").append(`<li>${randomData.meals[0]["strIngredient" + (i+1)] + " - " + randomData.meals[0]["strMeasure" + (i+1)]}</li>`);
          }

    Technologies Used

    • HTML - used to create elements on the DOM
      • HTML
    • CSS - styles html elements on page
      • CSS
    • Javascript - gives interacticve elements to web pages
      • Javascript
    • Jquery - use API to makes DOM traversal, manipulation, event handling, etc. simpler
      • Jquery
    • Git - version control system to track changes to source code
      • Git
    • GitHub - hosts repository that can be deployed to GitHub Pages
      • Github
    • TheMealDb - An open database of recipes from around the world.
      • theMealDb
    • Zomato- give data access to more than 1 million restaurants across 10,000 cities globally
      • Zomato
    • Foudation - Responsive CSS frameworks
      • Foundation
    • Micromodal - A lightweight, configurable and a11y-enabled modal library written in pure JavaScript
      • Micromodal.js

    Deployed Link

    • See Live Site

    Authors

    • Jordan Kelly
      • Github
      • LinkedIn
    • B Tram Vu
      • Github
      • LinkedIn
    • Jessny Joseph
      • Github
      • LinkedIn
    • Hudson Barnes
      • Github
      • LinkedIn

    License

    © 2020 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.

    © 2021 TheMealDB. All Rights Reserved