🗺️ Mapty

A web application for mapping all the user's workouts in a nice responsive UI.

👁️ Overview

The users selects any location on the map and adds his workout details (distance, type, duration and cadence or Elev Gain). As soon as the user submits the form, a pin is put on the map and card at the side bar contains the workout details.

Project Structure

• index.html: The main HTML file.
• css/style.css: The CSS file for styling.
• css/bootstrap.min.css: Bootstrap css file.
• css/bootstrap-icons.min.css: Bootstrap-icons css file.
• js/script.js: The JavaScript file containing the app logic.
• Images: favaicon & logo.

⚙️ Features

• Interaction with real map: The user deals with interactive map as the can zoom in, zoom out and map his workout with pin and popup .
• Sorting workouts: All the user's workouts are displayed in sorted way based on distance by clicking on sort button.
• Clear: All the user's workouts are deleted by clicking on reset button.
• Advanced DOM manipulation: All the page animaions were implemented depending on advanced DOM manipulation concepts .
• High performance: By following coding best practices

🔴 Notes

All the page animations were implemented using only pure js && Leaflet third-party-library.

Technologies Used

• HTML: For the site skeleton. 🩻
• CSS: For styling components. 🎨
• Bootstrap: For more responsive design. 🤖
• JavaScript ES6/ESnext: For the whole logic. 💻
• JavaScript third-party-library: For interaction with the map. 🗺️

Installation

To get started with the Mapty project, follow these steps:

1. Clone the Repository:

   git clone https://github.com/Abdelrahman-Adel610/Mapty

2. Navigate to the Project Directory:

   cd Mapty
   
   

Usage

1. click on your workout location.
2. fill the form.
3. Have fun with the nicely formatted shown data on the map as well as sidebar for your workout.

Contributing

If you'd like to contribute to Mapty project, please follow these guidelines:

1. Fork the Repository: 🍴 Click the "Fork" button at the top right of the repository page.

2. Create a Feature Branch: 🌱

   git checkout -b feature/your-feature

3. Commit Your Changes: 💾

   git commit -am 'Add new feature'

4. Push to the Branch: ⬆️

   git push origin feature/your-feature

5. Create a Pull Request: 🔄 Go to the repository on GitHub and create a pull request.

⚖️ License

MIT License.

---

Thank you for checking out Mapty! Feel free to sent you feedback or contribute.All feedbacks and contributions are highly appreciated.