Complete solution (100% reference)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
This is the complete solution for Project 2: Math Calculator. This implementation demonstrates all the core concepts covered in the lesson including:
bind:valueon:clickproject-02-calculator-solution/
├── src/
│ ├── routes/
│ │ └── +page.svelte # Main calculator component (complete implementation)
│ └── app.html # HTML template
├── package.json # Project dependencies
├── svelte.config.js # SvelteKit configuration
├── vite.config.js # Vite build configuration
├── .gitignore # Git ignore rules
└── README.md # This file
let firstNumber = 0;
let secondNumber = 0;
let result = 0;
In Svelte, variables declared with let in the <script> tag are automatically reactive. When these values change, the UI updates automatically without any additional code.
<input id="first" bind:value={firstNumber} type="number" />
The bind:value directive creates a two-way connection:
firstNumber updatesfirstNumber changes programmatically, the input updatesThis is one of Svelte's most powerful features and eliminates the need for manual DOM manipulation.
<button on:click={addition}>Add (+)</button>
The on:click directive attaches an event listener to the button. When clicked, it calls the addition function. Svelte's event handling is clean and intuitive - you simply pass the function reference.
Each operation is implemented as a simple function:
function addition() {
result = firstNumber + secondNumber;
}
function division() {
if (secondNumber === 0) {
result = "Error: Cannot divide by zero";
} else {
result = firstNumber / secondNumber;
}
}
The division function includes important error handling to prevent division by zero, which would result in Infinity.
<h2>Result: {result}</h2>
Curly braces {} allow you to embed JavaScript expressions in your HTML. The result automatically updates in the UI whenever the result variable changes.
Install dependencies:
npm install
Run development server:
npm run dev
Open in browser:
Navigate to http://localhost:5173 (or the URL shown in terminal)
npm run build
npm run preview
Basic Operations:
Negative Numbers:
Decimals:
Error Handling:
Clear Function:
Svelte was chosen for this calculator project because:
useState or setState like in Reactbind:value and on:click are self-explanatorybind:value: Without it, inputs won't update variableson:click not onClick (React syntax){result} not result to display variablesOnce you understand this solution, try adding:
This solution includes extensive educational comments to help you understand:
When studying this code:
The starter template (Templates/project-02-calculator/) contains:
This solution provides:
This solution achieves 100% on all grading criteria:
If you have questions about this solution:
This solution is part of the Telebort Engineering educational content and is intended for learning purposes.
Remember: The goal isn't just to make it work, but to understand how and why it works. Take time to experiment with the code and make it your own!