Skip to content

Solved code #52

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
Hantaro171902 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Solved code #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3d0d95
solved
Hantaro171902 Nov 7, 2023
ff8229d
the switch button (solved by Hantaro)
Hantaro171902 Nov 8, 2023
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
66 changes: 0 additions & 66 deletions app.js
View file
Open in desktop

This file was deleted.

58 changes: 58 additions & 0 deletions css/dark-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
#light-switch {
appearance: none;
display: none;
}

.switch-button {
top: 10px;
margin-left: 10%;
}

.switch-mode {
position: relative;
display: block;
width: 70px;
height: 40px;
background: #1f4b66;
cursor: pointer;
border-radius: 20px;
overflow: hidden;
transition: ease-in 0.5s;
}

#light-switch:checked~.switch-mode {
background: #fff;
}

.switch-mode:before {
content: '';
position: absolute;
top: 8px;
left: 10px;
background: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
transition: 0.5s;
}

#light-switch:checked~.switch-mode:before {
transform: translateX(30px);
}

.switch-mode:after {
content: '';
position: absolute;
top: 8px;
left: 10px;
background: #1f4b66;
width: 25px;
height: 25px;
border-radius: 50%;
transition: 0.5s;
transform: translateX(30px);
}

#light-switch:checked~.switch-mode:after {
transform: translateX(0);
}
138 changes: 138 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
body {
color: black;
font-size: 25px;
transition: background-color 0.5s;
}

.dark-mode {
background-color: black;
color: white;
}

.light-mode {
background-color: #1c92d2;
color: black;
}


table {
width: 60%;
margin: auto;
}

table td {
padding: 5px;
}

table i {
margin-right: 5px;
}

.container {
width: 80%;
margin: auto;
}

h1 {
text-align: center;
margin-top: 50px;
}

form {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}

label {
font-size: 18px;
margin-right: 10px;
}

input[type="text"] {
font-size: 18px;
padding: 5px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
margin-right: 10px;
}

button[type="submit"],
button[type="reset"] {
font-size: 18px;
padding: 5px 10px;
border-radius: 5px;
border: none;
cursor: pointer;
margin-left: 10px;
}

button[type="submit"] {
background-color: #4CAF50;
color: white;
}

button[type="submit"]:hover {
background-color: #3e8e41;
}

button[type="reset"] {
background-color: #6c757d;
color: white;
}

#weather {
margin-top: 30px;
background-color: #f0f0f0;
color: black;
}

#get-weekly-forecast {
background-color: #f0f0f0;
color: black;
}

.card {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#icon {
font-size: 5rem;
text-align: center;
}

#details {
font-size: 1.5rem;
}

.loading-spinner {
border: 6px solid rgba(0, 0, 0, 0.1);
border-left: 6px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
display: none;
margin: auto;
margin-top: 20px;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

footer {
text-align: center;
padding: 20px;
}
68 changes: 53 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,59 @@
<!DOCTYPE html>
<html>
<head>

<head>
<title>Weather App</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" href="./css/dark-theme.css">
<script src="https://kit.fontawesome.com/6a8374cd04.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>Weather App</h1>
<form>
<label for="city">Enter city name:</label>
<input type="text" id="city" name="city">
<button type="submit">Get Weather</button>
</form>
<div id="weather">
<div id="icon"></div>
<div id="details"></div>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body class="light-mode">

<!-- this is for dark theme -->
<div class="switch-button">
<label>
<input id="light-switch" type="checkbox" onclick="toggleMode()">
<span class="switch-mode"></span>
</label>
</div>
<script src="app.js"></script>
</body>

<!-- <div class="switch">
<button class="switch mode" onclick="toggleMode()">Switch Mode</button>
</div> -->

<script>
function toggleMode() {
var element = document.body;
element.classList.toggle("dark-mode");
element.classList.toggle("light-mode");
}
</script>

<div class="container">
<h1>Weather App</h1>
<form>
<label for="city">Enter city name:</label>
<input type="text" id="city" name="city" placeholder="Enter city name">
<button type="submit">Get Weather</button>
<button type="reset">Clear</button>
</form>
<div id="loadingSpinner" class="loading-spinner"></div>
<div id="weather" class="card">
<h3 id="weatherTitle">Enter city name to see the weather information</h3>
<div id="icon"></div>
<div id="details"></div>
</div>
</br>
<div id="get-weekly-forecast" class="card">
<h3 id="weeklyForecastTitle">Weekly Forecast</h3>
<ul id="weeklyForecastList">
</ul>
</div>
<footer>Made with ❤️ by Thanusha</footer>
<script src="./js/app.js"></script>
</body>

</html>
Loading