Dev.to WebDev πŸ›  Dev πŸ‘ 0 πŸ“– 1 min read

My Comfort Food Project: Interactive Sri Lankan Spicy πŸ§€ Kottu Calculator! 🍜

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 legenda

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! πŸœπŸ§€

πŸ“° Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.