This is a small application that helps my decidophobia.

• Single meal combination for breakfast, lunch or dinner.
• Add find restaurant and find recipe features.

• Overview
  • Latest Update
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

• Github repository: mealCombo
• Live Site URL: What Should I Eat?

• Plan the features.
• Write with semantic markup.
• Conect to Unsplash API
• Get JavaScript working
• Go through validators.
• Bootstrap class
• Write extra CSS for certain things

• Semantic HTML5 markup
• CSS custom properties
• JavaScript
• BootStrap
• Unsplash API

Fetch images form Unsplash API:

function loadImg(meal, searchTerm) {
  let url =
    "https://api.unsplash.com/search/photos/?query=" +
    searchTerm +
    "&client_id=replaceWithAccessKey&per_page=" +
    randomNum;
  fetch(url)
    .then((response) => {
      console.log(response);
      if (response.ok) return response.json();
    })
    .then((data) => {
      const imageNodes = [];
      for (let i = 0; i < data.results.length; i++) {
        imageNodes[i] = document.querySelector("#" + meal + " .imgBox");
        imageNodes[i].style.backgroundImage =
          "url(" + data.results[i].urls.raw + ")";
      }
    });
}

• Add filters for special diet such as gluten-free and vegans.
• Improve appearance

• Unsplash API
• Unsplash API tutorial - This tutorial helps me understand how to turn the data from API turn into HTML elements.
• Regular Expression - This is a article helps me understand JavaScript promise prototype.

• Codepen - TingHueiChen
• Frontend Mentor - @hejkeikei
• Twitter - @hej_keikei

The load image function was reference from iamcodefoxx