Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Qoder IDE folder
.qoder/

# Node modules (if any)
node_modules/

# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# Logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# IDE files
.vscode/
.idea/
*.swp
*.swo
*~

# Temporary files
*.tmp
*.temp
Comment on lines +1 to +31

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This .gitignore file is a good start. To make it more comprehensive for a typical web project, I suggest adding entries for common build output directories (like dist/ or build/) and environment variable files (e.g., .env). Also, it's a general best practice for text files to end with a newline character.

# Qoder IDE folder
.qoder/

# Node modules (if any)
node_modules/

# Build output
/dist
/build

# Environment variables
.env*
!.env.example

# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# Logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# IDE files
.vscode/
.idea/
*.swp
*.swo
*~

# Temporary files
*.tmp
*.temp

Binary file added 15-Mapty/Mapty-architecture-final.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 15-Mapty/Mapty-architecture-part-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 15-Mapty/Mapty-flowchart.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 15-Mapty/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
145 changes: 145 additions & 0 deletions 15-Mapty/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" type="image/png" href="/icon.png" />

<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>

<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
defer
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script defer src="script.js"></script>
<title>mapty : Map your workouts</title>
</head>
<body>
<!-- Dark Mode Toggle -->
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
<span class="theme-icon" id="themeIcon">πŸŒ™</span>
<span class="theme-text" id="themeText">Dark Mode</span>
</button>
<div class="sidebar">
<img src="logo.png" alt="Logo" class="logo" />

<ul class="workouts">
<form class="form hidden">
<div class="form__row">
<label class="form__label" for="type">Type</label>
<select id="type" class="form__input form__input--type">
>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

There is a stray > character inside the <select> element. This is invalid HTML and will be rendered as text on the page. It should be removed to ensure the markup is correct.

<option value="running">Running</option>
<option value="cycling">Cycling</option>
</select>
</div>
<div class="form__row">
<label class="form__label" for="distance">Distance</label>
<input
id="distance"
class="form__input form__input--distance"
placeholder="km"
/>
</div>
<div class="form__row">
<label class="form__label">Duration</label>
<input
class="form__input form__input--duration"
placeholder="min"
/>
</div>
<div class="form__row">
<label class="form__label">Cadence</label>
<input
class="form__input form__input--cadence"
placeholder="step/min"
/>
</div>
<div class="form__row form__row--hidden">
<label class="form__label">Elev Gain</label>
<input
class="form__input form__input--elevation"
placeholder="meters"
/>
</div>
Comment on lines +57 to +77

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

For accessibility and proper form functionality, <label> elements should be associated with their corresponding <input> controls. The labels for 'Duration', 'Cadence', and 'Elev Gain' are missing the for attribute, and their inputs are missing id attributes. Adding these will improve the user experience, especially for users of assistive technologies.

          <div class="form__row">
            <label class="form__label" for="duration">Duration</label>
            <input
              id="duration"
              class="form__input form__input--duration"
              placeholder="min"
            />
          </div>
          <div class="form__row">
            <label class="form__label" for="cadence">Cadence</label>
            <input
              id="cadence"
              class="form__input form__input--cadence"
              placeholder="step/min"
            />
          </div>
          <div class="form__row form__row--hidden">
            <label class="form__label" for="elevation">Elev Gain</label>
            <input
              id="elevation"
              class="form__input form__input--elevation"
              placeholder="meters"
            />
          </div>

<button class="form__btn">OK</button>
</form>

<!-- <li class="workout workout--running" data-id="1234567890">
<h2 class="workout__title">Running on April 14</h2>
<div class="workout__details">
<span class="workout__icon">πŸƒβ€β™‚οΈ</span>
<span class="workout__value">5.2</span>
<span class="workout__unit">km</span>
</div>
<div class="workout__details">
<span class="workout__icon">⏱</span>
<span class="workout__value">24</span>
<span class="workout__unit">min</span>
</div>
<div class="workout__details">
<span class="workout__icon">⚑️</span>
<span class="workout__value">4.6</span>
<span class="workout__unit">min/km</span>
</div>
<div class="workout__details">
<span class="workout__icon">🦢🏼</span>
<span class="workout__value">178</span>
<span class="workout__unit">spm</span>
</div>
</li>

<li class="workout workout--cycling" data-id="1234567891">
<h2 class="workout__title">Cycling on April 5</h2>
<div class="workout__details">
<span class="workout__icon">πŸš΄β€β™€οΈ</span>
<span class="workout__value">27</span>
<span class="workout__unit">km</span>
</div>
<div class="workout__details">
<span class="workout__icon">⏱</span>
<span class="workout__value">95</span>
<span class="workout__unit">min</span>
</div>
<div class="workout__details">
<span class="workout__icon">⚑️</span>
<span class="workout__value">16</span>
<span class="workout__unit">km/h</span>
</div>
<div class="workout__details">
<span class="workout__icon">β›°</span>
<span class="workout__value">223</span>
<span class="workout__unit">m</span>
</div>
</li> -->
Comment on lines +81 to +127

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This large block of commented-out HTML appears to be example data. While useful during development, it adds clutter to the production code. It's best to remove it to keep the codebase clean and maintainable.

</ul>

<p class="copyright">
&copy; Copyright by
<a
class="twitter-link"
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/jonasschmedtman"
>Jonas Schmedtmann</a
>. Use for learning or your portfolio. Don't use to teach. Don't claim
as your own.
</p>
</div>

<div id="map"></div>
</body>
</html>
Binary file added 15-Mapty/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading