WackyRecipes

A rng-like website that gives you weird foods to make!

Background info

I swear imma get more consistent with these devlogs💔 BUT we’re taking major steps forward regarding this project!!!

What’s new

• Recipe generator is complete!!! (sorta)
  • The main generate area is complete. check out it’s designated section for more info!
• Added more recipes and images!
• Created basic outline for the recipe collection/index
  • This page will have all the recipes for those who want to choose the recipe themselves.
  • Clicking on the images will bring in another container that has the name, ingredients, and instructions (not finished with this part tho)
• Removed the ‘saved’ page
  • Supposed to be the page where you could see all your fav recipes
  • I felt like this page would too hard to implement and was redundant
  • I’ll probably just add the main feature to the ‘collection’ page somehow

Feature done!: Generate page

I used an array to store all the info about each recipe (the images, recipe name, etc.) Then I connected it to each and . The array value is connected to a rng that changes everytime the page refreshes.

Then, to make the recipes “reroll” I just used the refresh function.

Here’s where I could use some help. I want each ingredient and instruction to be on it’s own seperate line. I’ve tried joining each value with ‘/n’, ‘/ln’, ‘/br’, ‘’, but nothing worked. So if anyone knows how to fix this, please let me know!!

To-do

• Add ingredients and instructions to the remaining of the recipes
• Work on the collection page
  • Hopefully by the next devlog, when the image is clicked, a sidebar will appear. And, maybe it’ll have some animations too :^) !!

That’s it for now. Until next time!

WackyRecipes

A rng-like website that gives you weird foods to make!

Background info

Just like I mentioned in my last devlog, I mainly focused on making the home page look better. I also worked on the rng-like mechanics of the generate page and worked a bit on the js.

What’s new

• Changed the color scheme
  • I replaced the brown with this deep red color because it looks more inviting and yummy
• New home page layout
  • I put each section into a box to keep the layout organized. I might make some tweaks to it, but I’m happy with it for now!
• Created basically on the generate page so far
  • Made the roll box, the recipe box, and made the buttons actually work (except there’s no randomizing yet </3)
• Created an array for all the recipes
• Linked the css to the other 2 pages

To-do

• Mainly focus on finishing the generate page
  • Upload images of the food
  • Work on the js to actually make the recipes appear

Extra info

I wanted to work on this project a bit more but I’m already over 4 hours for this devlog so I just decided to showcase what I have so far. Hopefully next devlog will be a bit more interesting.

That’s it for now. Until next time!

WackyRecipes - First devlog!

A rng-like website that gives you weird foods to make!

Background info

New project wooooo!! I’ve had the idea of a website that gives you absurd recipes for a while. Now that sticky streaks came out, I finally have a reason to start a new project!!

What I have so far

I was mostly focused on getting the aesthetics of the website down.

• Top/nav bar with css animations
  • I love css animations so much they’re so cool. Originally, the hovered text covered the other. However, this was quickly fixed by changing the transform from scale() to font-size
• Added text/instructions to home screen
• Linked the other pages (e.g. generate, saved) to the main/home page

To-do

• Change the top bar color to a more reddish color
• Format the text on the home page better
  • Right now it looks a bit ugly since I was just trying to get an outline of what I want. By the next devlog it should be looking a little better
• Add css to button at the bottom
• Add/link css to the other pages

Extra

This project’s looks was inspired by Flavortown’s website. Though I never participated in it, I thought the website looked really cute. I’m planning for this to be a short project (~10 hours) but I’m not the most professional expert coder, so it might take longer.

That’s it for now. Until next time!