JavaScript接下来的小项目

本文主要是介绍JavaScript接下来的小项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

● 接下来，我们将学习如下所示的一个小项目，这个项目是一个地图的项目，我们可以在地图上标记一些我们运动的位置进行记录，并且浏览器在本地会帮我们记录他们，其他一些功能后面慢慢阐述并实现
在这里插入图片描述

启动代码

JS代码

'use strict';// prettier-ignore
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];const form = document.querySelector('.form');
const containerWorkouts = document.querySelector('.workouts');
const inputType = document.querySelector('.form__input--type');
const inputDistance = document.querySelector('.form__input--distance');
const inputDuration = document.querySelector('.form__input--duration');
const inputCadence = document.querySelector('.form__input--cadence');
const inputElevation = document.querySelector('.form__input--elevation');

CSS代码

:root {--color-brand--1: #ffb545;--color-brand--2: #00c46a;--color-dark--1: #2d3439;--color-dark--2: #42484d;--color-light--1: #aaa;--color-light--2: #ececec;--color-light--3: rgb(214, 222, 224);
}* {margin: 0;padding: 0;box-sizing: inherit;
}html {font-size: 62.5%;box-sizing: border-box;
}body {font-family: 'Manrope', sans-serif;color: var(--color-light--2);font-weight: 400;line-height: 1.6;height: 100vh;overscroll-behavior-y: none;background-color: #fff;padding: 2.5rem;display: flex;
}/* GENERAL */
a:link,
a:visited {color: var(--color-brand--1);
}/* SIDEBAR */
.sidebar {flex-basis: 50rem;background-color: var(--color-dark--1);padding: 3rem 5rem 4rem 5rem;display: flex;flex-direction: column;
}.logo {height: 5.2rem;align-self: center;margin-bottom: 4rem;
}.workouts {list-style: none;height: 77vh;overflow-y: scroll;overflow-x: hidden;
}.workouts::-webkit-scrollbar {width: 0;
}.workout {background-color: var(--color-dark--2);border-radius: 5px;padding: 1.5rem 2.25rem;margin-bottom: 1.75rem;cursor: pointer;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: 0.75rem 1.5rem;
}
.workout--running {border-left: 5px solid var(--color-brand--2);
}
.workout--cycling {border-left: 5px solid var(--color-brand--1);
}.workout__title {font-size: 1.7rem;font-weight: 600;grid-column: 1 / -1;
}.workout__details {display: flex;align-items: baseline;
}.workout__icon {font-size: 1.8rem;margin-right: 0.2rem;height: 0.28rem;
}.workout__value {font-size: 1.5rem;margin-right: 0.5rem;
}.workout__unit {font-size: 1.1rem;color: var(--color-light--1);text-transform: uppercase;font-weight: 800;
}.form {background-color: var(--color-dark--2);border-radius: 5px;padding: 1.5rem 2.75rem;margin-bottom: 1.75rem;display: grid;grid-template-columns: 1fr 1fr;gap: 0.5rem 2.5rem;/* Match height and activity boxes */height: 9.25rem;transition: all 0.5s, transform 1ms;
}.form.hidden {transform: translateY(-30rem);height: 0;padding: 0 2.25rem;margin-bottom: 0;opacity: 0;
}.form__row {display: flex;align-items: center;
}.form__row--hidden {display: none;
}.form__label {flex: 0 0 50%;font-size: 1.5rem;font-weight: 600;
}.form__input {width: 100%;padding: 0.3rem 1.1rem;font-family: inherit;font-size: 1.4rem;border: none;border-radius: 3px;background-color: var(--color-light--3);transition: all 0.2s;
}.form__input:focus {outline: none;background-color: #fff;
}.form__btn {display: none;
}.copyright {margin-top: auto;font-size: 1.3rem;text-align: center;color: var(--color-light--1);
}.twitter-link:link,
.twitter-link:visited {color: var(--color-light--1);transition: all 0.2s;
}.twitter-link:hover,
.twitter-link:active {color: var(--color-light--2);
}/* MAP */
#map {flex: 1;height: 100%;background-color: var(--color-light--1);
}/* Popup width is defined in JS using options */
.leaflet-popup .leaflet-popup-content-wrapper {background-color: var(--color-dark--1);color: var(--color-light--2);border-radius: 5px;padding-right: 0.6rem;
}.leaflet-popup .leaflet-popup-content {font-size: 1.5rem;
}.leaflet-popup .leaflet-popup-tip {background-color: var(--color-dark--1);
}.running-popup .leaflet-popup-content-wrapper {border-left: 5px solid var(--color-brand--2);
}
.cycling-popup .leaflet-popup-content-wrapper {border-left: 5px solid var(--color-brand--1);
}

HTML代码

<!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" /><linkhref="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap"rel="stylesheet"/><link rel="stylesheet" href="style.css" /><script defer src="script.js"></script><title>mapty // Map your workouts</title></head><body><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">Type</label><select class="form__input form__input--type"><option value="running">Running</option><option value="cycling">Cycling</option></select></div><div class="form__row"><label class="form__label">Distance</label><input class="form__input form__input--distance" placeholder="km" /></div><div class="form__row"><label class="form__label">Duration</label><inputclass="form__input form__input--duration"placeholder="min"/></div><div class="form__row"><label class="form__label">Cadence</label><inputclass="form__input form__input--cadence"placeholder="step/min"/></div><div class="form__row form__row--hidden"><label class="form__label">Elev Gain</label><inputclass="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> --></ul><p class="copyright">&copy; Copyright by<aclass="twitter-link"target="_blank"href="https://twitter.com/jonasschmedtman">Jonas Schmedtmann</a>. Use for learning or your portfolio. Don't use to teach. Don't claimas your own.</p></div><div id="map"></div></body>
</html>