Mapty is a web application that allows users to track their workouts and visualize them on an interactive map. This project demonstrates the use of modern web technologies and best practices in JavaScript programming.
- Interactive Map: Utilizes Leaflet.js to plot workout routes on a map.
- User Input Forms: Collects essential workout data such as type, duration, distance, and elevation gain through user-friendly forms.
- Responsive Design: The application is designed to provide an optimal user experience primarily on desktop devices.
- Local Storage: Saves user workouts in the browser's local storage, allowing data persistence even after the page is refreshed.
- HTML: For the basic structure of the web pages.
- CSS: To style the application, focusing on a clean and modern look.
- JavaScript: Main programming language for implementing interactive features and functionality.
- Leaflet.js: A JavaScript library for interactive maps that allows users to visualize their workouts.
The project incorporates several modern JavaScript (ES6) features and best practices, including:
- Modules: Utilizes ES6 module syntax to organize code into separate files for better maintainability and reusability.
- Async/Await: Implements asynchronous programming to handle promises more elegantly, especially when fetching data.
- Classes: Uses ES6 class syntax to define workout types, promoting code organization and reusability.
This project was developed following a course by GitHub user jonasschmedtmann. Website link: https://mapty.netlify.app