This App is about British Food where you find a list of meals that you can like and comment.

Related tags

Learning resource British-Classic-Meals
Overview

British Classic Meals

The British Classic Meals is a seclection of the most favorite and famous british recipes. Things you can do in this website:

  • check the list of meals
  • like the recipe
  • view the complete recipe including list of ingredients
  • view comments of other users
  • leave your comment about the meal

Check it out! What is your favorite from the list? Or which one would you choose to eat now if you could?

Built With

  • CSS
  • HTML
  • JavaScript
  • Webpack

Live demo

You can access the live demo through this link

Video Link

You can access the video link through this link

Getting Started

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

  • Clone this repo to your computer using git. Or

  • Download the compressed zip folder and use a decompressor to unzip it into your computer. Then open the folder and all the project files will be there.

  • then instal npm in with "npm install" and then use "npm run start" to open the application on your browser

Authors

👤 Tiago Lelinski Marin

👤 Basit Ali

🤝 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
  • v.1.0

    v.1.0

    We are publishing the first version of the this project in this pull request. All functionalities are working (like comment, and open and close modal). Also the api requests are working just fine!

    Let me know on slack if you need any further explanation about anything in the code!

    opened by tiagomarin 0
  • Display likes

    Display likes

    This pull request is adding functionality for the like button. Whenever the user clicks on it, a post is sent to the API to save the number or likes and this number is also updated for the user. When the page loads all the quantities of likes for all cards are loaded too fetching this info from the API. Also, there's new styles to the project.

    opened by tiagomarin 0
  • Display comments

    Display comments

    In this pull request I added some features regarding the comment section:

    • when the popUp is displayed, information is fetched from the API and then all the comments for that specific meal is displayed in the comments section.
    • when the popUp is displayed, information is fetched from the Involvement API and then the counter of comments is displayed on the correct place (next to "Comments")

    Also I added the functionality for the user to leave a comment about the meal. When the user adds a comment:

    • a request is made to the Involvement API to store the new comment
    • the comments counter is updated
    • the new comment is displayed to user (without the need to reach the API, only with DOM manipulation)

    And I added too a test for the comment functionality, that checks the counter function and the DOM manipulation.

    opened by tiagomarin 0
  • Details page

    Details page

    In this pull request I added the functionality to the recipe button, so whenever the user clicks on the button, a modal opens up showing more details regarding the meal. It displays:

    • an image
    • a title
    • ingredients with it's measures
    • instructions on how to prepare
    • form to leave a comment

    I tried to separate my functions into modules, and leave the DOM manipulation on a separate file, renderPopUp.js.

    opened by tiagomarin 0
  • Home page

    Home page

    You should build these interfaces: -The home page. -When the page loads, the webapp retrieves data from: -The selected API and shows the list of items on screen.

    opened by basitali111 0
  • [0.5pt] Find external API - group task

    [0.5pt] Find external API - group task

    Find an API to base the development of the webapp around it. The API should allow you to

    • Get a list of items with a unique item id (or generate the unique id).
    • For a given item, get detailed information about it. choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.
    opened by tiagomarin 0
  • [4pt] - Display list of items on the Homepage - Student A

    [4pt] - Display list of items on the Homepage - Student A

    Create the main part of the homepage that keeps the layout from the wireframe:

    Screenshot 2021-06-27 at 21 50 23

    When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

    Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

    This task does not include displaying the number of likes for each item.

    This task does not include the counter of the items.

    opened by tiagomarin 0
Owner
Tiago Lelinski Marin
Full-stack Dev || Ruby on Rails, React, Tailwind SCSS || JavaScript lover || hobby - music || problem solving enthusiast || great communicator || love nature
Tiago Lelinski Marin
GitHub
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
A website that allows users to find, like, and comment on different TV shows.

TV Shows Network A website that allows users to find, like, and comment on different TV shows. Built With: HTML SCSS JavaScript Webpack TVMaze API & I

Gabriel Fonseca 11 Dec 21, 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
A list of movies are shown and you can add a comment on them or like them.

Dynasty Entertainment. A list of movies are shown and you can add a comment on them or like them. Built With HTML, CSS & JavaScript. webpack, bootstra

Hassan Momanyi 8 Nov 25, 2022
This is food detection WebApp, which will tell users about the nutrients value of particular food image which they upload

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

Ankush Gupta 3 Sep 8, 2022
Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food you love.

Big Chief Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food

AVLESSI Matchoudi 7 Jun 1, 2022
In this project we made a Tv shows webpage where you can like or comment the different shows.

JS Capstone Project In this project we made a Tv shows webpage where you can like or comment the differents shows. Built With HTML CSS JavaScript Lint

Lucas Bonnefon 4 Mar 16, 2022
A website which displays a list of movies and allows the user to leave a comment and like.

Movie-website Description Mobile Version Desktop Version "Movie-website" is a website which display movies from TVmaze api allowing users to like and

Ushindi Gedeon 3 Nov 7, 2022
The Meal DB web application displays a list of meals that provided by an external API.

The Meal DB The Meal DB web application displays a list of meals that provided by an external API. The users can like a meal, leave some comments or m

Behnam Aghaali 5 Mar 12, 2022
The Space Traveler's Hub is an application where users can check out availble space rockets and book them or cancel the previously made booking. Also users can find a list of current missions along with their brief description and can join the selected mission or leave the mission the user joined earlier.

Space-Travelers-Hub The Space Traveler's Hub is an application where users can check out available space rockets and book them or cancel the previousl

Tiago Lelinski Marin 7 Sep 22, 2022
A webpage where the user can search for different TV shows, comment them and like them.

TV Shows In this project we built a webpage where the user can search for different TV shows, comment them and like them. Video Built With Major langu

Giuseppe Tomasini 6 Jul 9, 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
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
An App that uses an external APIs to show meals from around the world

This website displays recipes meals using APIs to retrieve details from a DataBase and also implements features like adding a functional Like button for every item and a section for adding a new comment. All these through an external API to send and receive data.

Fernando Salas 4 Mar 12, 2022
A website where all the members can participate and ask questions. anybody can comment and give the answer.

A website where all the members can participate and ask questions. anybody can comment and give the answer. if the creator of the question feels that answer is correct then he/she can mark the answer as correct. The project is under construction. Open source contributions are most welcome.??

CODEINPYTHON 17 Dec 19, 2022
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
Get the best meals - JavaScript capstone project

Get the best meals - JavaScript capstone project Project in which you can give likes, comment on and reserve your best meals. Build using Test Driven

divine charlotte 19 Jan 3, 2023
Reddit is a website where a community of registered users ( redditors) submits content. Its format resembles a traditional bulletin board system, allowing users to post messages and links to other websites and comment on each other's posts. Entries are ranked by a voting system; other users can vote comments and posts either up ( upvoted) or down.

Setup First, run the development server: npm run dev Open http://localhost:3000 with your browser to see the result. You can start editing the page by

Ibrahim Raimi 4 Jun 23, 2022
BestBuy Bot is an Add to cart and Auto Checkout Bot. This auto buying bot can search the item repeatedly on the ITEM page using one keyword. Once the desired item is available it can add to cart and checkout very fast. This auto purchasing BestBuy Bot can work on Firefox Browser so it can run in all Operating Systems. It can run for multiple items simultaneously.

BestBuy Bot — Open Source GPU/PS5/Xbox Bot I took bits from best open and closed sourced bots and made this simple bot. Please star my repo if this co

Karan Kapuria 585 Dec 31, 2022