BananaMaster

5 Your First Website in 1 Lesson: Todo List and Calculator with AI

If you forgot something, click to go to the lesson

🧮 Homework — Calculator

You already know how to work with AI — now put it into practice. First ask AI to generate a ready-made calculator, then complete 20 tasks to improve it one by one.

Where to start

Step 0 — Ask AI to create a calculator

Before starting the tasks — ask AI to generate a basic calculator. Use this prompt:

Make me a calculator in a single HTML file. Beautiful design, dark background. Buttons: digits 0–9, decimal point, plus, minus, multiply, divide, equals, and clear (AC). HTML, CSS and JS only.

🎨 Appearance 1–4

Change the color of operator buttons

The +, −, ×, ÷ and = buttons should be a different color — for example orange or blue. This makes them instantly visible among the digits.

Ask AIMake the operator buttons (+, −, ×, ÷, =) a different color so they stand out among the digit buttons.

Add a calculator title

There should be a heading above the buttons, for example "My Calculator". You can write any name you like.

Ask AIAdd a heading "My Calculator" above the display — nice-looking, matching the rest of the design.

Change the overall style to your taste

Change the page background, font, or button border-radius. Make it look the way you like — it's your calculator.

Ask AIRestyle the calculator: make the background dark purple, buttons more rounded, add a subtle shadow.

Button press animation

When you press a button it should slightly "sink in". This makes the calculator feel alive and pleasant to use.

Ask AIAdd a press animation to the buttons: on click they slightly shrink and bounce back.

🌙 Dark and Light Theme 5–6

Theme toggle

Add a 🌙 / ☀️ button — it switches between dark and light view. Everything smoothly changes color on click.

Ask AIAdd a dark/light theme toggle button. When 🌙 is pressed — it becomes light, when ☀️ is pressed — it goes dark.

Theme is saved

If you selected dark theme and reloaded the page — dark theme should remain. The browser should remember the choice.

Ask AISave the selected theme so it is restored after the page is reloaded.

🛡️ Error Protection 7–9

Division by zero — show "Error"

Right now the calculator shows "Infinity" when dividing by zero. Replace that with a clear "Error" message in red.

Ask AIWhen dividing by zero instead of Infinity show the word "Error" in red on the display. Pressing AC clears the error.

Prevent two decimal points in one number

If a number already has a decimal point and you press it again — nothing should happen. One decimal point per number.

Ask AIPrevent entering a second decimal point if the current number already has one. The decimal point press is simply ignored.

⌫ button — delete last character

Add a ⌫ (backspace) button. Press it — the last entered character is deleted. If nothing remains — show "0".

Ask AIAdd a ⌫ button that deletes the last character from the display. If no characters remain — show "0".

➕ New Buttons 10–11

% button — calculates percentages

Add a % button. Example: type 200 + 10% = and get 220. Useful for discount and markup calculations.

Ask AIAdd a % button — it calculates the percentage of the first number. Example: 200 + 10% = 220.

"Copy result" button

Add a small 📋 button next to the display. Press it — the result is copied to the clipboard. "Copied!" appears on screen for a second.

Ask AIAdd a small icon button next to the display that copies the number to the clipboard. After pressing, show a "Copied!" notification for 2 seconds.

📋 Calculation History 12–16

Show last 5 calculations

Below the calculator a list appears: the last 5 examples and their results. For example: "2 + 3 = 5".

Ask AIBelow the calculator add a list of the last 5 calculations. Each line: "expression = result".

History persists after reload

Closed the tab, opened it again — history is still there. The browser remembers all your calculations.

Ask AISave the calculation history so it does not disappear when the page is reloaded.

Show time of each calculation

Next to each history entry add the time when the calculation was done. For example: "14:32".

Ask AIAdd the time to each history entry — show the hours and minutes when the calculation was performed.

Click on an entry — inserts the result

Clicked on a history entry — its result appears on the display. You can immediately continue calculating.

Ask AIWhen clicking on a history entry, insert its result onto the calculator display.

Clear history button with confirmation

Add a "Clear History" button. On click a popup appears: "Are you sure?" with "Yes" and "No" buttons.

Ask AIAdd a "Clear History" button. When pressed show a modal window with "Yes" and "No" buttons. Only clear if "Yes" is clicked.

⌨️ Usability 17–20

Keyboard support

You can calculate without clicking buttons with the mouse: digits from the keyboard, Enter = calculate, Escape = reset, Backspace = delete a character.

Ask AIAdd keyboard support: digits and operators are entered from the keyboard, Enter calculates the result, Escape resets, Backspace deletes a character.

Display digit size

Add two small buttons A+ and A−. Press A+ — digits on the display get larger. A− — smaller.

Ask AIAdd A+ and A− buttons that increase and decrease the font size on the display. Save the size in localStorage.

Looks good on mobile

Open the calculator on a phone or narrow the browser window — it should be comfortable. Large buttons, everything fits on screen.

Ask AIMake a responsive design: on small screens (phone) the calculator should fill the entire screen with large comfortable buttons.

"Engineering mode" button

Add a toggle that reveals an extra row of buttons: √ (square root), x² (square). Press again — the row hides.

Ask AIAdd an "Engineering" button. When pressed an extra row appears with √ and x² buttons. When pressed again the row hides.