Foodie Haven!

Devlog 7: Shipping my project:
Welcome back to another project update!
Finally, I am going to ship my project.
🛠️What’s fixed:

1. Checking all the pictures, fixing some silly mistakes by typing the wrong asset picture name.
2. Added a gradient background and finished debugging the City Food Recommendation Page
3. Added Google Maps hyperlinks so users can click the location and navigate directly using Google Maps
4. Edited the navigation bar to make it cleaner and clearer
5. Changed CSS based on screen size

Thank you for following my devlog. I am hoping to create a story-based line game soon, see ya!

Devlog 6:Restyling website to improve UI experience
Welcome back to another project update!
In this devlog, the focus based on resyle the navigation bar to improve UI experience,so it doesn’t used up the whole upper screen to show other navigation
🛠️ What’s New:

1. Changing the whole navigation bar, instead of using the normal navigation which show all pages, I change to a style where it only show current navigaion bar, click the three line to show the rest of the navigation bar
2. Restyling the blog, so people are easy to understand the layout, choosing what food you are craving, click the image and it will show the blog that I have written
3. Starting to finish off the last page, recommendation page, this is a page where I recommendate people to go to which restaurant to try to most authestic food.

🔮 What’s Next

1. Finishing off the recommendation page
2. Styling the website
3. Hope to ship at the next devlog

Devlog 5 Restyle the webpage and adding more information for the pages:
Welcome back to another project update!
In this log, the focus based on restyle the webpage to make it more attraction and providing more information, user are easier to navigate.
🛠️ What’s New:

1. Adding more information to the 15 minutes recipe, now it extend to 20 countries
2. Adding more Blogs, the blogs are a place where I share my favourite food, it’s more like a food blogs where introudce new food and giving comment
3. Adding fade in and other animation throughtout the system to make it more user friendly

🔮 What’s Next?

1. Restyle the navigation bar to improve UI experience
2. Restyle the blog so people can choose what they want to look at

Devlog #4: Tuning Mood & Launching the Dynamic Food Pathway
Welcome back to another project update!
In this log, the focus was completely on improving user navigation and building the core feature of the platform: connecting a user’s current emotional state directly to their food choices.
🛠️ What’s New

1. Polishing the Index Page:
   The home page needed a facelift to make it cleaner and more intuitive. The layout was streamlined to reduce clutter so that when users arrive—especially.
2. The Core Feature: The Mood-to-Food Pathway Page
   The biggest milestone of this update is the brand-new Mood Selection Page. This page acts as a personalized culinary compass.
   Instead of browsing a standard, boring menu, users are greeted with an emotional checkpoint:
   “How are you feeling right now?”
   Once a user selects their mood, the application branches into two distinct operational pathways based on their energy levels:
   The “Cook” Pathway: Allowing people to cook for themselves based on their mood. Different mood has its own recipe.  
   The “Eat” Pathway: It is by passing recipes entirely to recommend instant comfort fixes.
   🔮 What’s Next?
   Adding CSS into this page, as I didn’t have time to finish stylish this page yet.
   Adding more on mood depending recipe or dining out option.
   Want to update my blogs on food.I hope everyone enjoy this website, please comment about what can I improve and what can I add to this new page.

Devlog #03: Building the “World Map Cuisine”
Hey everyone! Welcome back to the project.

Instead of only writing a static blog post for each country, I built a Single Page Application using JavaScript that hold 10 different global cuisines.

Here is how the structure of World Map Cuisine:
–Start Screen (startscreen())
The Entry Point: Welcomes the player,features a prominent “Start” button to launch the game.

–Country Selection (countryScreen())
The World Map:Each button is automatically labelled with the country’s name and its national flag emoji

–The Recipe (recipeScreen())
It displays the dish name, splits the layout into a split-pane view ingredients on the left, dish photo on the right, step-by-step instructions below, and appends navigation buttons to easily go “Back”, which returns to countryscreen or “Return Home,” which returns to startscreen

Our Global Recipe:
Every single recipe added to our country’s data object has been carefully designed to hit that sweet spot of intense flavour and a strict 15-minute limit

Which international dishes should I add to the page? Let us know in the comments!

url playdemo: https://theodora-sin.github.io/WebOS/game.html

Devlog #2 Creating a sensation quiz based on food
Hey everyone! Welcome back to my second devlog. In this devlog I was developed a sensation quiz based on food.
Here is a quick look at how it works:
The core structure:
The quiz contain 5 question
Every answer aligns with a specific “sensation personality” trait
Once completed, the game calculates your dominant trait to descibe your unique tastes
How the Scoring Works:
To unlock your personality profile and get your custom recommendations, you must match at least 3 out of 5 categories.
This baseline ensures your final result accurately reflects your true sensory preferences!
Thank you all for following my development journey. Try out the quiz, enjoy, and have fun!
url: https://theodora-sin.github.io/WebOS/personality.html

My First Devlog:
Hey everyone! Welcome to my very first devlog. I’ve been working on a personal website from scratch using HTML, CSS, and JavaScript, and I wanted to share what I’ve built so far.

My project is structured with an index.html introduction page, a portfolio page featuring an interactive avatar, and a blog section dedicated to my favourite comfort foods.
Avatar:
The coolest part of the portfolio is the interactive avatar. I wanted to make the page feel alive, so I used JavaScript to create a toggle effect.When a visitor clicks on the avatar’s eye, it triggers an event.
To add a bit of unpredictability and fun, I wrote a script that changes the text color of the avatar page completely at random every time you refresh that page. It makes the site feel different every time you visit.

The Comfort Food Blog
Beyond the code and the portfolio, I wanted a cosy space to share things I love. I built a blog section entirely dedicated to introducing my ultimate comfort foods. It’s a clean, simple layout designed to make you feel right at home.
url: https://theodora-sin.github.io/WebOS/index.html