workout-tracker
所属分类：模式识别(视觉/语音等)
开发工具：JavaScript
文件大小：0KB
下载次数：0
上传日期：2023-06-07 11:34:50
上 传 者：
sh-1993
说明： 这是一个使用面向对象编程的VanillaJavaScript项目。
(This is a Vanilla JavaScript Project using Object -oriented programming.)
文件列表:
css/ (0, 2023-06-07)
css/media-queries.css (1810, 2023-06-07)
css/style.css (11406, 2023-06-07)
img/ (0, 2023-06-07)
img/Mapty-architecture-final.png (928915, 2023-06-07)
img/Mapty-architecture-part-1.png (730837, 2023-06-07)
img/Mapty-flowchart.png (538980, 2023-06-07)
img/SVG/ (0, 2023-06-07)
img/SVG/arrow-long-down.svg (235, 2023-06-07)
img/SVG/arrow-long-up.svg (233, 2023-06-07)
img/SVG/arrow-with-circle-down.svg (452, 2023-06-07)
img/SVG/arrow-with-circle-up.svg (452, 2023-06-07)
img/SVG/calendar.svg (353, 2023-06-07)
img/SVG/check.svg (477, 2023-06-07)
img/SVG/chevron-down.svg (462, 2023-06-07)
img/SVG/chevron-up.svg (463, 2023-06-07)
img/SVG/cross.svg (524, 2023-06-07)
img/SVG/cup.svg (496, 2023-06-07)
img/SVG/dots-three-horizontal.svg (535, 2023-06-07)
img/SVG/edit.svg (499, 2023-06-07)
img/SVG/envelope.svg (487, 2023-06-07)
img/SVG/eye.svg (553, 2023-06-07)
img/SVG/grid.svg (565, 2023-06-07)
img/SVG/heart-outlined.svg (677, 2023-06-07)
img/SVG/info-with-circle.svg (774, 2023-06-07)
img/SVG/line-graph.svg (924, 2023-06-07)
img/SVG/location-pin.svg (379, 2023-06-07)
img/SVG/location.svg (502, 2023-06-07)
img/SVG/menu.svg (468, 2023-06-07)
img/SVG/minus.svg (293, 2023-06-07)
img/SVG/new-message.svg (579, 2023-06-07)
img/SVG/plus.svg (422, 2023-06-07)
img/SVG/squared-cross.svg (431, 2023-06-07)
img/SVG/stopwatch.svg (1179, 2023-06-07)
img/demo.html (17964, 2023-06-07)
img/icon.png (3704, 2023-06-07)
img/logo-header.png (8531, 2023-06-07)
img/logo-header.svg (313173, 2023-06-07)
img/marker.svg (6483, 2023-06-07)
... ...
# Workout Tracker
This is a Vanilla JavaScript Project using Object-oriented programming.
## Table of contents
- [Overview](https://github.com/marventures/workout-tracker/blob/master/#overview)
- [Screenshot](https://github.com/marventures/workout-tracker/blob/master/#screenshot)
- [Links](https://github.com/marventures/workout-tracker/blob/master/#links)
- [My process](https://github.com/marventures/workout-tracker/blob/master/#my-process)
- [Built with](https://github.com/marventures/workout-tracker/blob/master/#built-with)
- [What I learned](https://github.com/marventures/workout-tracker/blob/master/#what-i-learned)
- [Useful resources](https://github.com/marventures/workout-tracker/blob/master/#useful-resources)
- [Author](https://github.com/marventures/workout-tracker/blob/master/#author)
## Overview
### Screenshot
### Links
- DEMO:[Link](https://github.com/marventures/workout-tracker/blob/master/https://workout-tracker-kappa.vercel.app/)
## My process
### Built with
- [JavaScript (ES6 Classes)](https://github.com/marventures/workout-tracker/blob/master/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
### What I learned
- Design as a Responsive web
- Use of Local Storage API
- Geolocation API
- Displaying Google map via Leaflet Library
- Using custom icons for Leaflet instead of just normal points on the map
- Abilities to edit & delete workout and delete all workouts
- Ability to sort workouts by certain fields(distance, time)
- Position the map to show all workouts
- Click on popup, move map to corresponding popup
- Map Zoom and View control
- Markup and styling for new created submenus & realistic error message
Here is a code snippet:
```script.js
class Running extends Workout {
type = 'running';
constructor(coords, distance, duration, city, country, cadence) {
super(coords, distance, duration, city, country);
this.cadence = cadence;
this._calcPace();
this._setDescription();
}
_calcPace() {
this.pace = this.duration / this.distance;
}
}
```
### Useful resources
- [MDN Docs](https://github.com/marventures/workout-tracker/blob/master/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) - This helped me for creating ES6 classes.
- [Leaflet](https://github.com/marventures/workout-tracker/blob/master/https://leafletjs.com/) - This helped me for showing Google Maps.
## Author
- Website - [Marvin Morales Pacis](https://github.com/marventures/workout-tracker/blob/master/https://marvin-morales-pacis.vercel.app/)
- LinkedIn - [@marventures](https://github.com/marventures/workout-tracker/blob/master/https://www.linkedin.com/in/marventures/)
- Twitter - [@marventures11](https://github.com/marventures/workout-tracker/blob/master/https://www.twitter.com/marventures11)
近期下载者：
相关文件：
收藏者：