<header>
<h2 class="title">Вимірювання швидкості за допомогою геолокації</h2>
<p class="description">Цей інтерфейс дозволяє вимірювати швидкість користувача в реальному часі за допомогою геолокації.</p>
</header>
<main>
<div class="result">
<p id="status">Швидкість: Невідомо</p>
<button id="startBtn">Почати відстеження</button>
<button id="stopBtn" disabled>Зупинити відстеження</button>
</div>
</main>
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
button {
padding: 10px 20px;
margin: 5px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
let watchId;
let isTracking = false;
const statusElement = document.getElementById("status");
const startButton = document.getElementById("startBtn");
const stopButton = document.getElementById("stopBtn");
// Функція для оновлення швидкості
function updateSpeed(position) {
const speed = position.coords.speed;
if (speed !== null) {
statusElement.textContent = `Швидкість: ${speed.toFixed(2)} м/с`;
} else {
statusElement.textContent = "Швидкість: Невідомо";
}
}
// Функція для початку відстеження
function startTracking() {
if (navigator.geolocation) {
watchId = navigator.geolocation.watchPosition(updateSpeed, function(error) {
statusElement.textContent = "Не вдалося отримати місцезнаходження";
});
isTracking = true;
startButton.disabled = true;
stopButton.disabled = false;
} else {
statusElement.textContent = "Геолокація не підтримується вашим пристроєм.";
}
}
// Функція для зупинки відстеження
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
isTracking = false;
startButton.disabled = false;
stopButton.disabled = true;
statusElement.textContent = "Швидкість: Невідомо";
}
// Додавання обробників подій до кнопок
startButton.addEventListener("click", startTracking);
stopButton.addEventListener("click", stopTracking);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.