The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

Related tags

Learning resource html5 css3 es6-modules api-rest gitflow jest-tests kanban-board jacascript webpack5
Overview

taste-food

The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing data about different types of foods and we used involvement API to record the different user interactions (likes, comments).

ScreenVideo_06-02-2022_07-56-47.mp4

Built With

  • HTML - HTML5
  • CSS - CSS3
  • JavaScript

Additional Used

  • API
  • ES6 (Modules)
  • npm
  • Jest (testing)
  • Webpack
  • Linters

Live Demo

taste-food Link

Getting Started

To get a local copy up and running follow these simple example steps.

git clone [email protected]:Bondok6/taste-food.git

Then cd taste-food

Then npm install to install packages

Finally npm run start

Authors

👤 Kyrillos Hany

👤 Andres Condezo

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments
  • Test for Items counter

    Test for Items counter

    Hi @andres-condezo 🙋‍♂️

    Changes

    • I created a __tests__ folder.
    • I created getMeals.test.js file inside this folder.
    • I tested the function to ensure that the items counter is covered with unit tests using Jest.
    opened by Bondok6 2
  • Items counter

    Items counter

    Hi @andres-condezo 🙋‍♂️

    In this branch:

    • I created a simple function mealsLength which returns the number of meals.
    • I created this function in 'getMeals.js' file.
    • I display the number of meals on the home page.
    opened by Bondok6 2
  • Handle Likes

    Handle Likes

    Hi @andres-condezo 🙋‍♂️

    Changes

    • Create handleLikes.js file that contains two functions.
    • postLike() to push the numbers of likes to the API.
    • getLike() to get the numbers of likes from the API.
    • Update renderMeals() function to display the number of likes.

    Live-Demo

    opened by Bondok6 2
  • Add Homepage

    Add Homepage

    Hi @andres-condezo 🙋‍♂️

    Changes

    • Create a modules folder containing two files getMeals.js renderMeals.js
    • Implement getMeals() function to get data from the external API.
    • Implement renderMeals() function to display the data in the HomePage.
    opened by Bondok6 2
  • Add Categories Section

    Add Categories Section

    Hello there 🙋‍♂️,

    Thanks for taking the time to review our project.

    Project Live Demo 🌐

    Changes 🧾

    • Add Categories section (User can choose any category he wants).
    • Add renderCategories.js file that contains renderCategories() function.
    • Update getMeals.test.js file.
    opened by Bondok6 1
  • JavaScript group capstone

    JavaScript group capstone

    Hello there 🙋‍♂️,

    Thanks for taking the time to review our project.

    Live Demo 🌐

    taste-food Project

    Video Demo 📽

    video link

    Changes according to requirements 🧾

    • Create header and navigation similar to the given mockup.
    • Create footer similar to the given mockup.
    • Create the home page for italian foods getting data from TheMealDB API.
    • Used involvement API to record the different user interactions (likes, comments).
    • Create details button that display information about each meal.
    • Create mealsLength() function to get the number of meals.
    • Create commentsCounter() function to get the number of comments.
    • Test these two functions using Jest.
    • implement some UX improvement: Add media queries for tablet and mobile screens. (Responsive Design)
    • Use Gitflow.
    • Use webpack.
    • Use kanban board
    • Use linters
    opened by Bondok6 1
  • Final touches

    Final touches

    HI @andres-condezo 🙋‍♂️

    Changes ✅

    Check if there are no conflicts and bugs. Check if everything is working fine. Update READM.md file.

    • Add recorded video
    • Add deploy link
    opened by Bondok6 1
  • Comments counter

    Comments counter

    Hi @Bondok6 :wave: ,

    Changes:

    In this pull request

    • Created a function to show the number of comments of each item.
    • Created a test for the comments counter function.
    opened by andres-condezo 1
  • Comment section

    Comment section

    Hi @Bondok6 :wave: ,

    Changes:

    In this pull request

    • Created styles in main.css file for the comment section.
    • Created a javascript function to show the comment section in the modal pop up window using HTTP request to the API.
    opened by andres-condezo 1
  • Windows pop up

    Windows pop up

    Hi @Bondok6 :wave: ,

    Changes:

    In this pull request

    • Created modal styles in main.css file.
    • Created a javascript function to show a modal pop up window for each item.
    • Created a modal section for the pop up windows in HTML file.
    opened by andres-condezo 1
  • JavaScript group capstone: set up your Kanban board

    JavaScript group capstone: set up your Kanban board

    Hi There 👋

    Thanks for taking the time to review our project

    opened by Bondok6 1
Owner
Kyrillos Hany
Front-end Developer, In love with React and Redux || Chess lover || B.CS || Open to new opportunities.
Kyrillos Hany
GitHub https://bondok6.github.io/taste-food/
Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals.

Tasty Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals. Requirements Build a

Manel Hammouche 5 Aug 3, 2022
"Choose your Pokemon" is a Webpack project meant to fetch data from two different APIs: PokéAPI and Involvement API

"Choose your Pokemon" is a Webpack project meant to fetch data from two different APIs: PokéAPI and Involvement API. Here we display a list of 20 Pokemons for whom one can like, display more info, and comment; all based on the data from these two external resources.

Carlos HerverSolano 19 Mar 31, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to an external API. Technologies used are JavaScript(ES6), HTML5, CSS3, Webpack. Also, the Gitflow workflow was used.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Ricky Mormor 4 Apr 20, 2022
This project is the capstone for module two of Microverse Bootcamp and has been done as a team and covered the following topics: - Connections to external APIs - Testing program functionalities using Jest - Displaying some products in to the UI - Added like and Comment features to the App

JS-capstone Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learned Continued developmen

Mahdi Rezaei 6 Oct 22, 2022
Food Delivery APP is a website designed to provide interactive user experience and increase user engagement when ordering food delivery.

Food-Delivery-APP Features Food Delivery APP is a website built with HTML/Tailwind CSS/JavaScript, React and enhanced with 3D design using Spline to p

Qian Xiang 3 Oct 6, 2022
This app is the capstone project we built at the end of our JavaScript module

This app is the capstone project we built at the end of our JavaScript module. It's a nostalgic interpretation of a pokedex, and we hope you enjoy it as much as we did putting it together. Go and catch 'em all!

Fabiano Frank 2 Oct 19, 2022
This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Karla Delgado 12 Aug 29, 2022
App repository for our capstone project 😎 (Get that home).

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Cesar Martinez Vargas 4 Jul 12, 2022
This is a JavaScript leaderboad list app. In this project I used Webpack and ES6 modules. As well as HTML, and CSS for styling the app. When submitting the scores the data is preserved thanks to the external Leaderboard API service.

Leaderboard App In this project the leaderboard app allows you to create games and the user can submit their names and scores into the app to keep tra

Erick Hans 5 Oct 26, 2022
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
JavaScript API based capstone project using TVmaze API for displaying and interacting with items from the data base.

Yuriy Chamkoriyski & Bonke Gcobo Javascript capstone project API-based webapp from Module 2 at Microverse Wireframe requirements The Home Page low fid

Yuriy Chamkoriyski 5 May 30, 2022
This project uses JavaScript to request resources from PokeApi and Involvement API to display a stunning website about Pokemons.

POKEDEX CAPSTONE Web page used to retrieve information about Pokemons using Pokeapi v2 This project implements the involvement API and the Pokeapi to

Leonardo Pareja Pareja 7 Jun 13, 2022
API for the Baby Food Introduction Application. Keep your baby's food introductions in check with this application and backtrack in case of allergies!

Baby food introduction API This API is part of the Baby Food Introduction application, which aims to help technological parents keep track of the food

David Alecrim 6 Nov 25, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. This is a project for learning purposes which I'll practice medium-fidelity wireframes to create a UI.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Tiago Lelinski Marin 6 Aug 4, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Built with Html, CSS and JavaScript

Leaderboard App ?? Table of Contents ?? About the Project ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started Setup Prerequisites In

Tetteh Kodjo-Sarso 4 Mar 21, 2023
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Kyrillos Hany 9 Mar 11, 2022
Chrome extension to remove unhealthy foods from the web

Internet Diet Chrome extension to remove unhealthy foods from the web. Intro I order a lot of online food. But there are so many unhealthy restaurants

Travis Fischer 17 Jun 15, 2022
This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

leaderboad Description the project. this project is about the leaderboad i did during Microverse to build a website for adding Data to the API and fet

Emmanuel Moombe 4 May 30, 2022
This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Built with Webpack and ES6

Leaderboard This website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the

Sanja Mandic 9 Sep 30, 2022