Hi everyone! š±š°
For the DEV Frontend Challenge: Comfort Food Edition, I wanted to build a web page inspired by the ultimate street comfort food from my home country, Sri Lanka ā *Spicy Cheese Kottu!
*
Kottu is a legendary Sri Lankan street food made with shredded parotta roti, aromatic spices, fresh vegetables, eggs, and meat. In this special version, we add a massive amount of melted cheese to balance out the heavy spice. It's warm, comforting, and the perfect meal for a quiet midnight craving.
š Live Demo
You can try out my live interactive web app here:
š Click Here to See My Cozy Kottu Website
What I Built š ļø
Inspired by a cozy midnight ramen illustration, I created a dark-themed UI featuring a soft glowing moon, stars, a warm lamp effect, and a steaming Kottu bowl.
I implemented an Interactive Ingredient Portion Calculator using vanilla JavaScript. When a user adjusts the number of servings, the application dynamically calculates the exact amount of Parotta Roti, Melted Cheese, and Chicken needed in real-time!
The Code Snippet š»
Here is the JavaScript logic I used to handle the real-time serving calculations based on the input element:
const servingsInput = document.getElementById('servings');
const rotiSpan = document.getElementById('roti');
const cheeseSpan = document.getElementById('cheese');
const baseRoti = 2;
const baseCheese = 50;
servingsInput.addEventListener('input', () => {
const servings = parseInt(servingsInput.value) || 1;
rotiSpan.textContent = baseRoti * servings;
cheeseSpan.textContent = baseCheese * servings;
});
Why this is my Comfort Food ā¤ļø
In Sri Lanka, Kottu isn't just food; it's an experience. The rhythmic sound of metal blades chopping the roti on hot iron griddles can be heard down every street at night. Whenever we gather with friends or family after a long day, a warm, cheesy bowl of Kottu always makes us feel right at home.
I would love to hear your feedback! Have you ever tasted authentic Sri Lankan Kottu or any spicy street food like this? Let me know in the comments below! šš§
Top comments (1)
Good Job