Giter VIP home page Giter VIP logo

paribhandarkar / multiplication-app Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 4 KB

A simple web application that generates random multiplication problems and asks the user to solve them. The app keeps track of the user's score and updates it based on their answers. It also uses local storage to persist the score across multiple sessions.

Home Page: https://paribhandarkar.github.io/multiplication-app/

HTML 27.13% JavaScript 33.09% CSS 39.79%
100-days-of-code 100daysofcode 30-days-of-code 30daysofcode 30daysofjavascript css html javascript multiplication-app multiplication-game

multiplication-app's Introduction

Multiplication App

This project is a simple multiplication app that tests your multiplication skills. The app generates two random numbers and asks you to multiply them. You can submit your answer, and the app will let you know if your answer is correct or not. Your score is displayed on the form, and it is incremented if you answer correctly and decremented if you answer incorrectly. The app uses local storage to store your score, so you can continue playing the game and keep track of your progress. It's a fun and easy way to practice your multiplication skills!

Demo

You can try out the application by visiting this link.

Technologies Used

  • HTML
  • CSS
  • JavaScript

Getting Started

To get started with this project, clone the repository and open the index.html file in your preferred web browser.

New Things I Learned

While working on the multiplication app, I learned how to use the "autofocus" and "autocomplete" attributes on input elements. I found that setting "autofocus" was particularly helpful because it automatically focuses the user's attention on a specific input field when the page loads. This can help guide the user's experience and make the form more user-friendly.

I also learned how to use JSON methods to store and retrieve data from local storage. Initially, I was confused about how to update the score value in local storage without resetting it to zero each time the page reloaded. However, I learned that by using JSON.stringify() to store the score in local storage and JSON.parse() to retrieve it, I could update the score value without losing its previous value.

Overall, I found that working with local storage was a useful skill to have as a web developer. It allowed me to store data on the user's computer and retrieve it later, which can be useful for a variety of purposes such as tracking user progress or maintaining user preferences.

Challenges I faced

One of the challenges I faced when working on the multiplication app was updating the score. Initially, the score would start from 0 every time I refreshed the page, which was not what I wanted. I wanted the score to persist even after the app was closed or the page was refreshed.

To solve this challenge, I decided to store the score in local storage. Local storage is a feature in modern web browsers that allows web developers to store data in the browser. This data persists even after the browser window is closed or the computer is shut down. I created a new function called "storeInLocalStorage()" to store the score in local storage whenever it was updated.

When the app loads, I retrieve the score from local storage and display it on the form. This way, the score remains persistent across page loads and app restarts.

Using local storage to store data in web applications is a common solution to this type of challenge. It allows us to store data locally on the user's computer and retrieve it later, which is useful for maintaining state and keeping track of user progress in web applications.

image

multiplication-app's People

Contributors

paribhandarkar avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.