We All Love Maths!

Love Maths is a fun and interactive math quiz game built with HTML, CSS, and JavaScript.

Overview

We All Love Maths is a web-based application that challenges users to solve maths problems across four operations: addition, subtraction, multiplication, and division. The game tracks correct and incorrect answers, providing instant feedback to let users know if they have submitted the correct answer.

Deployment

This project has been deployed using GitHub Pages.

To deploy the site, I navigated to the repository's Settings tab. Scrolled down to the Pages section in the left-hand menu. Under source I selected the main branch and set the root folder (/) as the source. GitHub Pages automatically deployed the webpage and after a few minutes a live site link was available.

You can find the link here: https://verytee.github.io/love-maths/

This application works on all modern browsers including Google Chrome.

Features

• Four Maths Operations: Addition (+), Subtraction (-), Multiplication (×), and Division (/)
• Score Tracking: Keep track of correct and incorrect answers in real-time
• Responsive Design: Optimised for desktop, tablet, and mobile devices
• Instant Feedback: Get immediate answers
• User-Friendly Interface: Colour coded operation buttons and easy to use

Wireframes

I created wireframes for the project using Balsamiq.

How to Play

1. Click one of the four operation buttons (green for +, blue for -, orange for ×, red for /)
2. A maths question will appear on screen
3. Enter your answer in the input box
4. Click submit, or press enter to check your result
5. Your score updates with each correct or incorrect answer
6. If you're having fun then keep playing!

Project Structure

love-maths/
├── index.html           # Main HTML structure
├── README.md           # Project documentation
├── assets/
│   ├── css/
│   │   └── styles.css  # Styling and responsive design
│   ├── js/
│   │   └── script.js   # Game logic and interactivity
│   ├── images/
│   │   └── logo.webp   # Heart logo image
│   └── docs/           # Documentation files

Technologies Used

• HTML - For markup and structure
• CSS - Styling with responsive media queries
• JavaScript - Game logic, event handling, and score management
• Font Awesome - Icon library for operation symbols
• Google Fonts - Raleway and Righteous selected as fonts

Future Enhancements

Possible improvements for future versions:

• Difficulty levels (easy, medium, hard)
• Timed challenges
• Leaderboard system

License

This project is open source and available for educational use.