Untitled
plain_text
a month ago
2.4 kB
0
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Speed Converter Tool</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <style> body { background-color: #f0f0f0; padding: 20px; } .converter-container { max-width: 500px; margin: 0 auto; background-color: #fff; border-radius: 10px; padding: 20px; } h2 { text-align: center; margin-bottom: 20px; color: #007bff; } .form-group { margin-bottom: 15px; } .result { font-weight: bold; text-align: center; margin-top: 15px; } </style> </head> <body> <div class="container"> <div class="converter-container"> <h2>Speed Converter</h2> <div class="form-group"> <label for="speed">Enter Speed:</label> <input type="number" id="speed" class="form-control" placeholder="Enter speed..."> </div> <div class="form-group"> <label for="unit">Select Unit:</label> <select id="unit" class="form-control"> <option value="m/s">m/s</option> <option value="km/h">km/h</option> <option value="mph">mph</option> </select> </div> <div class="form-group"> <button class="btn btn-primary btn-block" onclick="convertSpeed()">Convert</button> </div> <div class="result" id="result"></div> </div> </div> <script> function convertSpeed() { const speed = parseFloat(document.getElementById('speed').value); const unit = document.getElementById('unit').value; let result = ''; if (isNaN(speed)) { result = 'Please enter a valid number for speed.'; } else { switch (unit) { case 'm/s': result = `${speed.toFixed(2)} m/s`; break; case 'km/h': result = `${(speed * 3.6).toFixed(2)} km/h`; break; case 'mph': result = `${(speed * 2.237).toFixed(2)} mph`; break; } } document.getElementById('result').textContent = result; } </script> </body> </html>