Skip to content

Refactor index.html for readability and add comments #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RameenRamzan wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor index.html for readability and add comments #81

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 53 additions & 67 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
<!-- ======================================================
Weather App - index.html
------------------------------------------------------
This file defines the structure and layout of the Weather App.
It includes:
- Location permission modal
- Weather display area
- Sidebar with AQI and forecast
- Footer with social links
====================================================== -->

<!DOCTYPE html>
<html lang="en">

Expand All @@ -6,29 +17,29 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather app</title>

<!-- Stylesheets-->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/modal.css" />

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/f5c8e13b2d.js" crossorigin="anonymous"></script>
</head>

<body>
<!-- || LOCATION MODAL -->
<!-- The Modal -->
<!-- ===============================
LOCATION PERMISSION MODAL
================================== -->
<div id="generic_modal" class="modal" data-open="open" data-closable="no">
<!-- Modal content -->
<div class="modal-content dynamic-bg">
<!-- close button -->
<!-- <span class="close">&times;</span> -->

<!-- contents inside modal -->
<h2>This app uses your current location</h2>
<p>
This app uses your location to provide better results. Please allow
location permission
<!-- end of contents inside modal -->
</p>
<!-- an IIFE is set to invoke the function on button call -->
<button class="ok-btn" onclick="(() => {
updateCurrentLocation()
closeModal(true)
Expand All @@ -38,9 +49,13 @@ <h2>This app uses your current location</h2>
</div>
</div>

<!-- || STARTING -->
<!-- ===============================================
MAIN CONTAINER
==================================================== -->
<div class="container">
<!--|| MAIN WEATHER REPORT BOX (RIGHT-SIDE) -->
<!-- =============================================
WEATHER REPORT SECTION (Main right side)
================================================== -->
<div class="weather-report">
<!-- || NAVIGATION BAR -->
<nav>
Expand All @@ -50,17 +65,19 @@ <h3 id="country">
<i class="fa-sharp fa-solid fa-location-dot"></i>India
</h3>
</div>
<!-- Search Bar -->
<div class="search-area">
<input type="text" id="search" placeholder="Enter city name..." spellcheck="false" />
<button><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<!-- Hamburger Menu -->
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>

<!-- Dark Mode button -->
<!-- Dark Mode Toggle button -->
<div class="dark-mode-toggle">
<label class="switch">
<input type="checkbox" id="darkModeToggle" />
Expand All @@ -70,9 +87,11 @@ <h3 id="country">
</div>
</nav>

<!-- || CURRENT WEATHER STATUS BOX -->
<!-- =============================================
CURRENT WEATHER STATUS
================================================== -->
<div class="current-status">
<!-- BOX-1 MAIN WEATHER BOX-->
<!-- Box 1: Main Weather Info -->
<div class="weather weather-box1">
<div class="weather-heading">
<div class="weather-icon">
Expand All @@ -93,7 +112,7 @@ <h2 id="temp">22</h2>
</div>
<p id="description">Partly Cloudy</p>
</div>

<!-- Extra weather details -->
<div class="weather-details">
<div class="box">
<p>Pressure</p>
Expand All @@ -111,10 +130,11 @@ <h3 id="humidity">87%</h3>
</div>
</div>

<!--|| Box-2 -->
<!-- Sunrise and Sunset-->
<!-- Box 2: Sunrise, Sunset & UVI -->
<div class="weather weather-box2">
<div class="more-details">

<!-- Sunrise and Sunset -->
<div class="more-detail-box">
<p>Sunrise & Sunset</p>
<div class="sunrise-sunset">
Expand All @@ -135,8 +155,7 @@ <h3 id="sunset-time">5:56 PM</h3>
</div>
</div>

<!-- and UVI Index -->

<!-- UVI Index -->
<div class="more-detail-box uvi-rays-area">
<img src="images/clear.png" alt="" />
<div class="uvi-mesurement">
Expand All @@ -154,21 +173,26 @@ <h3 id="sunset-time">5:56 PM</h3>
</div>
</div>

<!-- || 24 HOURS WEATHER UPDATES -->
<!-- =============================================
24 HOURS WEATHER FORECAST
================================================== -->
<div class="hourly-temperature">
<div class="hourly-temperature-heading">
<h2>
How's the <br />
temperature today at?
</h2>
</div>

<!-- Hourly forecast cards -->
<div class="today-at">
<!-- Repeated hourly boxes -->
<div class="hours-box">
<p class="hours">00:00 AM</p>
<img class="hourly-icon" src="images/clear.png" alt="" />
<p class="hours-temp">21.8 °c</p>
</div>

<div class="hours-box">
<p class="hours">01:00 AM</p>
<img class="hourly-icon" src="images/clouds.png" alt="" />
Expand Down Expand Up @@ -310,14 +334,17 @@ <h2>
</div>
</div>

<!-- || SLIDEBAR -->
<!-- =============================================
SIDEBAR SECTION
================================================== -->
<div class="slidebar">
<!-- Time and Date -->
<div class="time-date">
<h2 class="time">12:03:40 AM</h2>
<p class="date">7 March 2023, Monday</p>
</div>

<!-- Air Quality Info -->
<div class="aqi-prediction-container">
<div class="aqi-prediction">
</div>
Expand All @@ -334,7 +361,7 @@ <h2 class="aqi-title">Air Quality</h2>
</div>
</div>

<!-- || Next 6 Days Weather report -->
<!-- 3 Days Forecast -->
<div class="weather-prediction">
<h3>3 Days Forecast</h3>

Expand Down Expand Up @@ -373,54 +400,13 @@ <h3>3 Days Forecast</h3>

<div class="days-temp">26°c <span>/</span> 19°c</div>
</div>

<!-- <div class="days-box">
<div>
<img class="days-icon" src="images/clouds.png" alt="">
<div class="days">
<div class="prediction-day">Sunday 10</div>
<div class="prediction-desc">Cloudy</div>

</div>
</div>

<div class="days-temp">26°c <span>/</span> 19°c</div>
</div>

<div class="days-box">
<div>
<img class="days-icon" src="images/clouds.png" alt="">
<div class="days">
<div class="prediction-day">Sunday 10</div>
<div class="prediction-desc">Cloudy</div>

</div>
</div>

<div class="days-temp">26°c <span>/</span> 19°c</div>
</div>

<div class="days-box">
<div>
<img class="days-icon" src="images/clouds.png" alt="">
<div class="days">
<div class="prediction-day">Sunday 10</div>
<div class="prediction-desc">Cloudy</div>

</div>
</div>

<div class="days-temp">26°c <span>/</span> 19°c</div>
</div> -->
</div>
</div>
</div>

<!--|| FOOTER -->
<!-- <footer>
<div class="copyright">Copyrights <span style="font-size: 16px;">&copy;</span> <span id="copyright">2023</span></div>
</footer> -->

<!-- =============================================
FOOTER SECTION
================================================== -->
<div class="s-footer">
<footer class="footer">
<div class="waves">
Expand Down