20 lines
762 B
HTML
20 lines
762 B
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<h1>Current Weather</h1>
|
|
<p>Temperature: {{ temperature }} {{ temperature_unit }} | {{(temperature * 9/5) + 32}}°F</p>
|
|
<p>Wind Speed: {{ wind_speed }} {{ wind_speed_unit }}</p>
|
|
<div class="wind-container">
|
|
<p>Wind Direction: {{ wind_direction }} {{ wind_direction_unit }}</p>
|
|
<div class="arrow" id="wind-arrow"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// JavaScript to rotate the arrow dynamically
|
|
const windDirection = {{ wind_direction }};
|
|
const arrowElement = document.getElementById('wind-arrow');
|
|
|
|
// Rotate the arrow based on wind direction
|
|
arrowElement.style.transform = `rotate(${windDirection}deg)`;
|
|
</script>
|
|
{% endblock %} |