add readme

README.md

@@ -1,20 +1,70 @@
-# Math Workout
+# 🧮 Basic Math Operations Training App
 
-Math Workout is a web application that helps users improve their math skills through targeted training exercises. With Math Workout, users can start a workout with customized parameters like the number of questions, the maximum length of numbers in each equation, and the amount of numbers in each equation. Once the workout is complete, users can view their results and track their progress over time.
+Welcome to the **Basic Math Operations Training App**! This is a single-page application designed to help you sharpen your math skills by practicing basic arithmetic operations like addition, subtraction, and multiplication. With just a few minutes of daily practice, you’ll be able to solve these operations more quickly and improve your mental math abilities.
 
-## Installation
+---
 
-If you want to run Math Workout locally, you can clone this repository and run the following commands:
+### 💡 Why This App?
 
-```bash
-# Install dependencies
-npm install
+I created this app after realizing how reliant I had become on calculators, which slowed down my mental math skills. After consistent practice with this app, my ability to quickly solve simple arithmetic problems in my head has significantly improved—and now it's your turn to benefit!
 
-# Run the app in development mode
-npm run dev
+---
 
-# Build the app for production
-npm run build
-```
+## ✨ Features & How It Works
+
+This app is simple yet effective! Here's a quick guide to using it:
+
+1. **Configure your training session** on the main screen by choosing your desired difficulty level.
+2. **Start the training session** and quickly answer each question. Just type in the result of the operation.
+3. If your answer is correct, the box will turn green, and the next question will appear immediately.
+
+Ready to level up your mental math skills? 💪
+
+![Training in Action](./readme%20images/question.png)
+
+![Completed Question](./readme%20images/complete_question.png)
+
+---
+
+## ⚙️ App Configuration
+
+You can personalize your training by adjusting the following settings:
+
+- **Number of questions:** Choose between 5 to 100 questions per session.
+- **Number of operands:** Select between 2 to 4 operands.
+- **Max digits per operand:** Set a limit from 1 to 6 digits.
+- **Operations:** Pick the type of math you want to practice (addition, subtraction, multiplication).
+
+![Configuration Screen](./readme%20images/configuration.png)
+
+---
+
+## 🚀 How to Run the App Locally
+
+You can easily run the app on your local machine. Here's how:
+
+1. **Ensure Node.js is installed** on your system. Download it [here](https://nodejs.org/) if you haven’t already.
+2. **Clone this repository** to your local machine.
+3. **Navigate to the root folder** of the project.
+4. Run `npm install` to install all the necessary dependencies.
+5. Run `npm run dev` to start a local development server.
+6. Open your browser and go to `http://localhost:5173`.
+7. That's it! You're all set to start training! 🎉
+
+---
+
+## 👩‍💻 Built With
+
+- **Frontend:** [Svelte](https://svelte.dev) - A powerful framework for building fast, responsive web apps.
+- **Backend:** No backend needed! All logic is handled on the client side.
+
+---
+
+## 🎯 Contribute
+
+Found a bug or have a feature request? Feel free to contribute! Submit issues or pull requests to help improve the app for everyone.
+
+---
+
+Start training today and boost your mental math skills with this simple yet effective tool! 🔢💥
 
-Once the app is built, you can run it by opening the `dist/index.html` file in your web browser.

src/lib/Cards/Settings.svelte

@@ -5,11 +5,11 @@ import { AmountOfQuestions, AmountOfNumbers, NumberLength, UseMultiply, UsePlus,
 
 <div class="m-5 box is-inline-block" style="max-width: 20rem;">
     <div class="is-size-5 mb-2">Settings ⚙️</div>
-    <label for="amountofquestions">Questions per workout</label>
+    <label for="amountofquestions">Questions per training</label>
     <input  bind:value={$AmountOfQuestions} id="amountofquestions" class="input" type="number" placeholder="Questions per workout" min="5" max="100">
-    <label for="amountofnumbers">Parts</label>
-    <input bind:value={$AmountOfNumbers} id="amountofnumbers" class="input" type="number" placeholder="Numbers" min="2" max="3">
-    <label for="numberlength">Number length</label>
+    <label for="amountofnumbers">Operands</label>
+    <input bind:value={$AmountOfNumbers} id="amountofnumbers" class="input" type="number" placeholder="Numbers" min="2" max="4">
+    <label for="numberlength">Max Digits per operand</label>
     <input bind:value={$NumberLength} id="numberlength" class="input" type="number" placeholder="Max Number Length" min="1" max="6">
     <div class="is-size-6 mt-2 mb-2">Operations</div>
     <div>

src/lib/Header.svelte

@@ -9,7 +9,7 @@
 <nav class="navbar" aria-label="main navigation">
     <div class="navbar-brand">
         <div class="navbar-item brand-name">
-            Math Workout ➗
+            Math Training ✅
         </div>
     </div>
 
@@ -19,7 +19,7 @@
                 {#if $CurrentWorkout}
                     <button on:click={toMainScreen} class="button 
                     {$CurrentWorkout.Completed?"is-primary":"is-danger"}">
-                        {$CurrentWorkout.Completed?"Continue":"Cancel workout"}
+                        {$CurrentWorkout.Completed?"Continue":"Cancel"}
                     </button>
                 {:else}
                     <button on:click={StartNewWorkout} class="button is-primary">Start new workout</button>

src/lib/Workout.svelte

@@ -29,7 +29,6 @@
     <div class="is-flex is-justify-content-center">
         <div>
             <div class="has-text-centered m-5">
-                <h3 class="is-size-4">Workout</h3>
                 <h4 class="has-text-weight-bold">Question {questionIndex + 1} out of {workout.Questions.length}</h4>            
             </div>