shriya-tiwari / reciplay_website

A website built using basic HTML, CSS and Javascript for beginner developers to learn basic developing and API calling.

Reciplay_website

There have been times when even after having enough ingredients at home, we can't decide what to cook from them. This website called "Reciplay" is dedicated to solve this very problem using simple API fundamentals. Just enter the ingredients that you currently have and get random recipes, choose from them depending on your taste. The API that is used here is Spoonacular API, which can educate people about the nutrition in the meals they have among many other uses like building a website like this one. :)

Go ahead and read the documentation of Spoonacular API. The number of requests to the API is limited so please be cautious while coding, I can wait for few days if you want to continue your work 😄.

Below are the screenshots of current state of the website. Screenshot - 1 Screenshot - 2

Looking forward to some interesting contributions :) !!!

reciplay_website's Issues

dark mode and light mode

I want to add dark mode and light mode and want to include some animations too. can you assign this issue to me?

There is no Deployed URL for this project

add footer

I would love to add a nice looking footer to the web page, please assign me with the task. Thanks.

Improve the scrollbar of the home page

The scrollbar in the home page is very simple. It requires some modifications. Adding a back to top button can also be included

I will redesign the homepage of the website

As I am looking into your website that looks so plane. With the help of the tailwind CSS will redesign you website. I will only cover the front end.

No validations

I'd like to fix this issue and add some features like (assign this issue to me):

• It validates before adding ingredients to the our list
• Hover state to the ingredients

Results of no validations:
Imagine if these things were getting added in the backend everyone would've seen them

Improve the design of the navbar

No Error Handling

I'd like to add error handling
If there's an error (no recipe found), it'll be displayed with proper illustration

Current website looks something like this without error handling:

I'd like to add something like this:

Your API key is public

In js/config

API keys should not be committed to a public repository

Improve the UI of the cuisine page

Improve the card design of the dishes

The card design displayed is very simple, looking forward to some enhancements in it.

Make the website responsive

Missing Favicon

Currently the project doesn't have any favicon. Would like to add one. Please assign me this issue
Thank you :)

Change the images

I want to change the images of the dishes in the home page. Can you assign me this issue? I want to work on it

Remove alerts and instead show toasts on different events

The websites currently uses HTML alerts at some places. Create toast notifications for relevant actions with brief but clear message in them.