Fridgelet

Fridgelet is an interactive and adorable recipe website where a digital fridge comes to life! Explore tasty dishes in the fridge, see details, and hear cozy recipe readings

Comment

Fridgelet

A wonderful fridge for cooking enthusiasts! Github Repository: link Demo Website: link

Inspiration

I love cuisines, especially homemade dishes. I also enjoy cooking, and one day, I started wondering: what if I had a fridge that stored the delicious recipes? Whenever I want, I could just open it and listen to the recipes while cooking. That’s exactly why I made this project.

What it does

  • Explore tasty dishes inside the fridge
  • Introductions for each food item
  • View detailed recipes including ingredients, preparation, cooking, and serving steps with audio
  • Play or pause audio that reads the recipes aloud
    ## How I built it
  • Languages: HTML, CSS, JavaScript, Python
  • Editor: 100% Visual Studio Code
  • Browser: Chrome
    ## Challenges I ran into This was my first time using Google Text-to-Speech (converted directly in the VS Code terminal), and I found it initially confusing. But once I figured it out, it became incredibly convenient. The MP3 files are saved directly to my project folder! ## Accomplishments that I'm proud of I created my own imaginary website with my favorite style, cute pixel art. ## What I learned I learned how to use tts.py, how to use the text-to-speech feature to turn my text into audio that I can put in the recipe's page. ## What's next for Fridgelet
  • Set the default fridge to be closed automatically, so that people can click the fridge to explore the recipes inside, which helps increase curiosity and attractiveness.
  • Hide food items by default; display them when the fridge is clicked (add to JS)
  • Add a tag on the fridge: "Click me for a surprise!!"
  • Add a food form with fields: customized food name, image, description, recipe, and audio files.
  • Add an "X" icon, when hovering over a food icon, the "X" appears; clicking the "X" removes the food item. Then that food's position is replaced by the "Add new" button, which leads to the food form. After submitting the food form, the "Add new" button is replaced by a new customized recipe.
  • Add a customization option to change the fridge grid layout to create more space.

Built With

Share this project:

Updates