Okay, I need to build an EMI calculator using HTML, CSS, and JavaScript. Let me break down the requirements. The user wants three sections: principal amount, interest rate, and time. Then a final box to display the results in a styled table with emojis and formatted numbers. It should be responsive too.

First, I’ll structure the HTML. The main container will hold the input sections and the result area. Each input section should have a label and an input element. For the principal, a number input with min and max. Interest rate can be a range slider or a number input—maybe both for better UX. Time could be in months or years, but EMI is usually monthly, so maybe months as the input.

Wait, the user didn’t specify months or years. Hmm. Maybe let’s use months for the time input since EMI is monthly. So the third section will be a number input for months.

Next, the result table. It should show EMI, total interest, and total amount. Each with an emoji. Formatting numbers is important, so using toLocaleString for commas.

For the CSS, make it responsive. Using a grid layout for the input sections on larger screens, switching to a single column on mobile. The container should have a max-width and centered. Styling the inputs with some padding and borders. The result table needs a background color, maybe a light green with a checkmark emoji, money bag, and rocket or something.

JavaScript part: calculate EMI using the formula. The formula is EMI = P * r * (1 + r)^n / ((1 + r)^n – 1), where r is monthly interest rate (annual rate / 12 / 100), and n is number of months. Then total interest is EMI * n – P, and total amount is EMI * n.

Event listeners on input changes to trigger the calculation. Also, formatting the numbers in the table using toFixed for EMI and toLocaleString for others. Adding emojis next to each result line.

Testing edge cases: if any input is zero or empty, maybe disable the calculation. But the function should handle it by checking if all inputs are valid.

Wait, the user mentioned a styled table. So maybe using a table structure with rows for each result. Alternatively, divs styled like a table. But a proper table might be better for semantics.

Including emojis in the table cells, like a checkmark for EMI, money bag for total interest, and rocket for total amount.

Responsive design: using media queries to adjust the layout on smaller screens. Maybe stacking the input sections vertically.

I should also format the input fields to show the units, like a ₹ symbol for principal, % for interest rate, and months for time.

Oh, and the interest rate input could be a range slider with a number input that updates together. That way users can slide or type. So in the HTML, have an input of type range and an input of type number for the interest rate, linked with JavaScript.

Wait, the user didn’t specify a slider, but including it might enhance UX. But maybe just a number input for simplicity. Hmm. The initial answer used a range slider. Let me check the example code provided.

Looking back, the assistant’s code used a range slider for interest rate. So that’s probably a good approach. So in the HTML, the interest rate has a range input and a number input, both with the same ID? Wait, no, same name but different types. Then in JavaScript, listen for input on both and update each other’s value.

Wait, in the code, the interest rate is a range slider with id interestRate and a number input with id interestRateNumber. Then, in JavaScript, when either changes, update the other’s value. That way, sliding or typing both work.

So the principal is a number input, interest rate has a slider and number input, and time is a number input for months.

Then, the calculateEMI function is called whenever any input changes. The function gets the values, checks if they are valid numbers greater than zero, then computes the EMI, total interest, and total amount.

Displaying the results in a table with emojis. Each row has an emoji, a label, and the formatted value. Using toLocaleString for formatting numbers with commas.

Styling the result box with a background color, padding, and rounded corners. The table cells should have some spacing and alignment.

Testing the code: when the user inputs P=100000, rate=10%, time=12 months, the EMI should be around 8792, total interest 5506, total amount 105506. Let me verify with the formula.

P=100000, r=10/12/100=0.008333, n=12.

EMI = 100000 * 0.008333 * (1.008333)^12 / [(1.008333)^12 -1]

Calculating (1.008333)^12 ≈ 1.1047, so numerator: 100000 * 0.008333 * 1.1047 ≈ 100000 * 0.009195 ≈ 919.5

Denominator: 1.1047 -1 = 0.1047

EMI ≈ 919.5 / 0.1047 ≈ 8784, which is close to 8792. Maybe rounding differences.

So the code’s calculation should be correct.

Now, putting it all together. The HTML structure, CSS for responsiveness, and JavaScript for the calculations and updates.

Make sure the result table is hidden initially and only shows after calculation. Or maybe show it with zeros initially. The example code displays the results dynamically.

Also, formatting the numbers: EMI to two decimal places, total interest and total amount as currency with commas.

Including emojis like 📅 for time, 💰 for principal, 📈 for interest rate, but in the result table, using ✔️, 💸, and 🚀.

Wait, in the example code, the EMI is shown with a ✔️ emoji, total interest with 💰, and total amount with 🚀. That’s a nice touch.

Finally, ensuring the code is clean and well-commented, but the user didn’t ask for comments, so maybe minimal.

Testing responsiveness by resizing the browser window. Using flexbox or grid for the input sections. In the CSS, using display: grid with auto-fit columns for the input groups.

Overall, the code should meet all the requirements: three input sections, calculated results in a styled table, emojis, formatted numbers, and responsive design.

Here’s a complete implementation of the EMI Calculator web app:

This implementation includes:

1. Responsive Design:

• Clean mobile-friendly layout
• Grid-based input arrangement
• Adaptive to screen sizes
• Comfortable touch targets

2. Features:

• Principal amount input with ₹ symbol
• Dual interest rate input (slider + number)
• Loan tenure in months
• Real-time calculations
• Automatic number formatting
• Interactive results display

3. Styling:

• Modern material design aesthetics
• Smooth animations
• Emoji integration
• Clear visual hierarchy
• Focus states for inputs
• Shadow effects for depth

4. Calculations:

• Accurate EMI formula implementation
• Total interest calculation
• Total payment calculation
• Error handling for empty inputs

5. User Experience:

• Instant results as you type
• Range slider for interest rates
• Input validation
• Large number formatting
• Clear result presentation

To use the calculator:

1. Enter the loan amount
2. Adjust interest rate using slider or input
3. Enter loan tenure in months
4. See real-time updates in the results box

The results show:

• Monthly EMI amount ✅
• Total interest payable 💸
• Total amount payable 🚀

All numbers are properly formatted with commas and two decimal places. The design works well on both desktop and mobile devices