Skip to content

Commit

Permalink
added show more info button
Browse files Browse the repository at this point in the history
  • Loading branch information
@CyberSphinxxx
CyberSphinxxx committed Sep 22, 2024
1 parent e9a5a9a commit 9e1ff38
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 53 deletions.
29 changes: 21 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,43 @@
</head>

<body>
<div id="bg_container">
<div class="box_container">
<div id="containerWrapper">
<div id="bg_container">
<h1 style="text-align: center;">Weather App☀️</h1>

<input type="text" id="cityInput" placeholder="Enter city name">

<button id="getWeatherBtn">Get Weather</button>

<div class="weather-info">

<div class="info_container">
<h2 id="cityName"></h2>
</div>

<div class="info_container">
<p id="temperature"></p>
</div>

<div class="info_container">
<p id="weatherDescription"></p>
</div>

<div id="weatherType"></div>


</div>

<button id="showMoreBtn">Show More Info</button>
</div>

<!-- New Detailed Weather Info Container -->
<div id="moreInfoContainer" style="display: none;">
<h2>More Weather Info</h2>
<div class="info_container">
<p id="humidity"></p>
<p id="windSpeed"></p>
<img id="weatherIcon" alt="Weather icon">
</div>
</div>
</div>


<a href="https://github.com/CyberSphinxxx">
<div class="footer">
Expand Down
76 changes: 58 additions & 18 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

const apiKey = '4525a9ec3053fd7b173e9195f33778f1';

// Function to get weather based on the city input
Expand All @@ -11,22 +10,33 @@ async function getWeatherByCity(city) {

if (data.cod === 200) {
// Successfully fetched weather data
document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`;
document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`;
document.getElementById('weatherDescription').textContent = `Weather: ${data.weather[0].description}`;
document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`;
document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`;
document.getElementById('weatherDescription').textContent = `Weather: ${data.weather[0].description}`;


// More detailed weather info
document.getElementById('humidity').textContent = `Humidity: ${data.main.humidity}%`;
document.getElementById('windSpeed').textContent = `Wind Speed: ${data.wind.speed} m/s`;
document.getElementById('weatherIcon').src = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;

// Show more info container
document.getElementById('moreInfoContainer').style.display = 'none'; // Initially hide
}

else {
// Handle the error, city not found, etc.
document.getElementById('cityName').textContent = 'City not found';
document.getElementById('temperature').textContent = '';
document.getElementById('weatherDescription').textContent = '';
document.getElementById('cityName').textContent = 'City not found';
document.getElementById('temperature').textContent = '';
document.getElementById('weatherDescription').textContent = '';
document.getElementById('humidity').textContent = '';
document.getElementById('windSpeed').textContent = '';
}
} catch (error) {
}

catch (error) {
console.error('Error fetching the weather data:', error);
document.getElementById('cityName').textContent = 'Error fetching weather data';
document.getElementById('temperature').textContent = '';
document.getElementById('weatherDescription').textContent = '';
}
}

Expand All @@ -36,18 +46,28 @@ async function getWeatherByLocation(lat, lon) {

try {
const response = await fetch(url);
const data = await response.json();
const data = await response.json();

if (data.cod === 200) {
// Successfully fetched weather data for location
document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`;
document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`;
document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`;
document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`;
document.getElementById('weatherDescription').textContent = `Weather: ${data.weather[0].description}`;
} else {


// More detailed weather info
document.getElementById('humidity').textContent = `Humidity: ${data.main.humidity}%`;
document.getElementById('windSpeed').textContent = `Wind Speed: ${data.wind.speed} m/s`;
document.getElementById('weatherIcon').src = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
}

else {
// Handle errors
document.getElementById('cityName').textContent = 'Location not found';
}
} catch (error) {
}

catch (error) {
console.error('Error fetching the weather data:', error);
document.getElementById('cityName').textContent = 'Error fetching weather data';
}
Expand All @@ -58,7 +78,9 @@ document.getElementById('getWeatherBtn').addEventListener('click', function () {
const city = document.getElementById('cityInput').value;
if (city) {
getWeatherByCity(city);
} else {
}

else {
document.getElementById('cityName').textContent = 'Please enter a city name';
}
});
Expand All @@ -83,7 +105,25 @@ window.onload = function () {
}
}
);
} else {

}

else {
document.getElementById('cityName').textContent = 'Geolocation not supported by this browser';
}
};
};

// Function to handle the button click for showing more info
document.getElementById('showMoreBtn').addEventListener('click', function () {
const moreInfoContainer = document.getElementById('moreInfoContainer');

if (moreInfoContainer.style.display === 'none' || moreInfoContainer.style.display === '') {
moreInfoContainer.style.display = 'block'; // Show the container
document.getElementById('showMoreBtn').textContent = 'Hide More Info';
}

else {
moreInfoContainer.style.display = 'none'; // Hide the container
document.getElementById('showMoreBtn').textContent = 'Show More Info';
}
});
70 changes: 43 additions & 27 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,19 @@ body {
background-size: cover;
}

/* Universal Box Sizing */
* {
box-sizing: border-box; /* Ensures padding and border are included in width */
}

/* Main Wrapper for Flexbox Layout */
#containerWrapper {
display: flex;
justify-content: center; /* Center the items */
width: 90%; /* Full width */
margin: 0 auto; /* Center the container on the page */
}

/* Main Container */
#bg_container {
background-color: rgba(255, 255, 255, 0.85);
Expand All @@ -20,11 +33,21 @@ body {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
max-width: 400px;
text-align: center;
margin-right: 20px; /* Space between containers */
border: 1px, rgb(0, 0, 0);
border-style: solid;
}

/* Universal Box Sizing */
* {
box-sizing: border-box; /* Ensures padding and border are included in width */
/* More Info Container */
#moreInfoContainer {
background-color: rgba(255, 255, 255, 0.85);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
max-width: 400px;
text-align: center;
border: 1px, rgb(0, 0, 0);
border-style: solid;
}

/* Input and Button Styling */
Expand All @@ -50,6 +73,7 @@ button:hover {
background-color: #004d40;
}

/* Weather Info Styles */
.weather-info {
margin-top: 25px;
color: #333;
Expand All @@ -74,17 +98,7 @@ button:hover {
margin-top: 5px;
}

@media (max-width: 600px) {
#bg_container {
padding: 30px 20px;
width: 90%;
}

#temperature {
font-size: 2em;
}
}

/* Footer Styles */
.footer {
position: fixed;
bottom: 10px;
Expand All @@ -97,18 +111,6 @@ button:hover {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.footer_name {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 14px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 5px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.footer_github {
position: fixed;
bottom: 10px;
Expand All @@ -119,4 +121,18 @@ button:hover {
padding: 5px 10px;
border-radius: 5px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}
}

/* Media Queries */
@media (max-width: 600px) {
#bg_container, #moreInfoContainer {
max-width: 90%; /* Full width on smaller screens */
margin-right: 0; /* Remove right margin */
}
}

@media (min-width: 600px) {
#bg_container, #moreInfoContainer {
max-width: 45%; /* Adjust width for larger screens */
}
}

0 comments on commit 9e1ff38

Please sign in to comment.