42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<!-- Display header for current weather information -->
|
|
<h1>Current Weather</h1>
|
|
|
|
<!-- Display temperature with unit and conversion to Fahrenheit -->
|
|
<p>
|
|
Temperature: {{ temperature }} {{ temperature_unit }}
|
|
|
|
|
<!-- Convert Celsius to Fahrenheit using (°C * 9/5) + 32 formula -->
|
|
{{(temperature * 9/5) + 32}}°F
|
|
</p>
|
|
|
|
<!-- Display wind speed with unit -->
|
|
<p>
|
|
Wind Speed: {{ wind_speed }} {{ wind_speed_unit }}
|
|
</p>
|
|
|
|
<!-- Container for displaying wind direction and arrow -->
|
|
<div class="wind-container">
|
|
<!-- Display wind direction with unit -->
|
|
<p>
|
|
Wind Direction:
|
|
{{ wind_direction }} {{ wind_direction_unit }}
|
|
</p>
|
|
<!-- Dynamically rotate the arrow based on wind direction -->
|
|
<div class="arrow" id="wind-arrow"></div>
|
|
</div>
|
|
|
|
<!-- JavaScript code to dynamically rotate the wind arrow based on wind direction -->
|
|
<script>
|
|
// Store wind direction value from template variables
|
|
const windDirection = {{ wind_direction }};
|
|
|
|
// Select HTML element with id "wind-arrow"
|
|
const arrowElement = document.getElementById('wind-arrow');
|
|
|
|
// Rotate the arrow by applying transform style with wind direction value
|
|
arrowElement.style.transform = `rotate(${windDirection}deg)`;
|
|
</script>
|
|
{% endblock %} |