{"id":23346738,"url":"https://github.com/filonenkodima/mapty","last_synced_at":"2025-04-07T17:23:05.637Z","repository":{"id":255743282,"uuid":"852061849","full_name":"FilonenkoDima/Mapty","owner":"FilonenkoDima","description":"Mapty is a web application for tracking workouts on a map. It allows users to record running or cycling activities and visualize their location using Google Maps.","archived":false,"fork":false,"pushed_at":"2024-09-14T12:32:25.000Z","size":7325,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T19:40:45.495Z","etag":null,"topics":["clean-architecture","frontend","google-maps-api","html-css-javascript","oop","responsive-design"],"latest_commit_sha":null,"homepage":"https://filonenkodima.github.io/Mapty/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FilonenkoDima.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-04T06:50:26.000Z","updated_at":"2024-09-14T12:33:57.000Z","dependencies_parsed_at":"2024-09-14T19:43:34.940Z","dependency_job_id":null,"html_url":"https://github.com/FilonenkoDima/Mapty","commit_stats":null,"previous_names":["filonenkodima/mapty"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilonenkoDima%2FMapty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilonenkoDima%2FMapty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilonenkoDima%2FMapty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilonenkoDima%2FMapty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FilonenkoDima","download_url":"https://codeload.github.com/FilonenkoDima/Mapty/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694878,"owners_count":20980733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clean-architecture","frontend","google-maps-api","html-css-javascript","oop","responsive-design"],"created_at":"2024-12-21T07:14:50.154Z","updated_at":"2025-04-07T17:23:05.591Z","avatar_url":"https://github.com/FilonenkoDima.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mapty\n\n## About the Project\n\nMapty is a web application for tracking workouts on a map. It allows users to record running or cycling activities and visualize their location using Google Maps.\n\n## Purpose\n\nThe project was created to:\n\n- Practice object-oriented JavaScript.\n- Master the use of external libraries such as Google Maps API for map integration.\n- Implement local storage to save and retrieve user data.\n- Learn about geolocation and event handling in JavaScript.\n\n## Demo\n\nYou can view the live demo of the project here: [Mapty Demo](https://filonenkodima.github.io/Mapty/) \\\n![](demo.gif)\n\n## Project Setup\n\nTo run this project locally, follow these instructions:\n\n1. Clone the repository: `git clone https://github.com/FilonenkoDima/Mapty.git`\n2. Navigate to the project directory: `cd Mapty`\n3. Open the `index.html` file in your browser. No server setup is required as this is a pure front-end project.\n\n## Project Structure\n\n- `/css/style.css` - All styles for the project\n- `/img/` - Project images\n- `/js/script.js` - Main JavaScript file handling logic\n- `/index.html` - Main HTML file\n\n## OOP\n\n`Workout` Class \\\nThe Workout class is the base class used to represent a generic workout. It contains common properties such as:\n\n- distance: The total distance covered during the workout (in kilometers).\n- duration: The duration of the workout (in minutes).\n- coords: The GPS coordinates where the workout took place.\n- date: The date when the workout was performed.\n\n`Running` and `Cycling` Subclasses\nBoth Running and Cycling are subclasses of Workout, extending it to represent specific types of workouts.\n\n- Running: Adds properties like cadence and calculates pace (minutes per kilometer).\n- Cycling: Adds properties like elevation gain and calculates speed (kilometers per hour).\n\n`App` Class\nThe App class is the main controller of the application, handling the overall workflow and coordination of the app. This class is responsible for:\n\n- Managing the state: The app keeps track of all workouts, storing them in an array and loading them from local storage when available.\n- It listens for user actions such as adding a new workout, displaying the workout on the map, and resetting the application.\n- The app manages the map display and places workout markers at the correct GPS locations.\n- Upon starting the app, it retrieves the user's current position using the Geolocation API and centers the map on the user's location.\n\nKey Methods of App Class\n\n- \\_getPosition(): Uses the Geolocation API to get the user's current location and set up the map.\n- \\_loadMap(position): Initializes the Google Map centered at the user's position and adds workout markers.\n- \\_newWorkout(e): Handles the creation of a new workout (either running or cycling) based on the user's input.\n- \\_renderWorkoutMarker(workout): Places a marker on the map for each workout, showing its location.\n- \\_renderWorkout(workout): Displays workout information in the UI, including type, distance, duration, and location.\n- \\_setLocalStorage(): Stores all workout data in the browser's local storage to persist data between sessions.\n- \\_getLocalStorage(): Retrieves stored workouts from local storage when the app is loaded.\n\n## API and Functionality\n\n- Google Maps API is used to embed the map and track the user's location.\n- Local Storage is used to save the user's workout data, ensuring persistence between page reloads.\n- Geolocation API is employed to get the user's current location and display it on the map.\n\n## Key Features\n\n- Add and track workouts (running and cycling).\n- Save workouts locally to view them later.\n- View workouts on the map using Google Maps, with icons differentiating between running and cycling activities.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilonenkodima%2Fmapty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilonenkodima%2Fmapty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilonenkodima%2Fmapty/lists"}