Skip to content
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

Added weather app #1999

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

Added weather app #1999

Show file tree
Hide file tree
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
255 changes: 255 additions & 0 deletions Projects/WeatherApp/App.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="nav">
<span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="rgb(21, 2, 66)" width="80px" height="80px" viewBox="0 0 64 64" version="1.1" xml:space="preserve">

<g id="cloudy_sunny"/>

<g id="bright"/>

<g id="cloudy"/>

<g id="high_rainfall"/>

<g id="windy">

<g>

<path d="M50,25h-3c-0.5-7.8-7-14-15-14c-6.4,0-12.1,4.1-14.2,10.1C17.2,21,16.6,21,16,21C8.8,21,3,26.8,3,34s5.8,13,13,13h34 c6.1,0,11-4.9,11-11S56.1,25,50,25z M50,45H16C9.9,45,5,40.1,5,34s4.9-11,11-11c0.8,0,1.5,0.1,2.3,0.2c0.5,0.1,1-0.2,1.2-0.7 C21,16.9,26.2,13,32,13c7.2,0,13,5.8,13,13c0,0.6,0.4,1,1,1h4c5,0,9,4,9,9S55,45,50,45z"/>

<path d="M24,30h-1c-2.2,0-4,1.8-4,4c0,1.7,1.3,3,3,3c0.6,0,1-0.4,1-1s-0.4-1-1-1c-0.6,0-1-0.4-1-1c0-1.1,0.9-2,2-2h1 c1.7,0,3,1.3,3,3s-1.3,3-3,3H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h12c2.8,0,5-2.2,5-5S26.8,30,24,30z"/>

<path d="M48,33h-1c-2.2,0-4,1.8-4,4c0,1.7,1.3,3,3,3c0.6,0,1-0.4,1-1s-0.4-1-1-1c-0.6,0-1-0.4-1-1c0-1.1,0.9-2,2-2h1 c1.7,0,3,1.3,3,3s-1.3,3-3,3H30c-0.6,0-1,0.4-1,1s0.4,1,1,1h18c2.8,0,5-2.2,5-5S50.8,33,48,33z"/>

<path d="M41,49H19c-0.6,0-1,0.4-1,1s0.4,1,1,1h22c1.7,0,3,1.3,3,3s-1.3,3-3,3h-1c-1.1,0-2-0.9-2-2c0-0.6,0.4-1,1-1 c0.6,0,1-0.4,1-1s-0.4-1-1-1c-1.7,0-3,1.3-3,3c0,2.2,1.8,4,4,4h1c2.8,0,5-2.2,5-5S43.8,49,41,49z"/>

</g>

</g>

<g id="rain_with_thunder"/>

<g id="clear_night"/>

<g id="cloudy_night"/>

<g id="moon"/>

<g id="sun"/>

<g id="rainy_night"/>

<g id="windy_night"/>

<g id="night_rain_thunder"/>

<g id="windy_rain"/>

<g id="temperature"/>

<g id="humidity"/>

<g id="air_pressure"/>

<g id="low_rainfall"/>

<g id="moderate_rainfall"/>

<g id="Sunset"/>

</svg>
</span>
<ul class="navBar">
<li Id = "Weather">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="white" width="80px" height="60px" viewBox="0 0 64 64" version="1.1" xml:space="preserve">

<g id="cloudy_sunny"/>

<g id="bright"/>

<g id="cloudy"/>

<g id="high_rainfall">

<path d="M61,35c0-6.1-4.9-11-11-11h-3c-0.5-7.8-7-14-15-14c-6.4,0-12.1,4.1-14.2,10.1C9.8,19,3,25.2,3,33c0,4.7,2.6,9,6.6,11.3 C9.2,45.2,9,46.2,9,47c0,3.9,3.1,7,7,7s7-3.1,7-7c0-0.3,0-0.7-0.1-1h2.2C25,46.3,25,46.7,25,47c0,3.9,3.1,7,7,7s7-3.1,7-7 c0-0.3,0-0.7-0.1-1h2.2C41,46.3,41,46.7,41,47c0,3.9,3.1,7,7,7s7-3.1,7-7c0-0.7-0.1-1.3-0.4-2C58.5,43.2,61,39.3,61,35z M16,52 c-2.8,0-5-2.2-5-5c0-0.8,0.3-1.7,0.8-2.7c0,0,0,0,0,0c0,0,0,0,0,0c1.1-2.1,2.9-4.4,4.2-5.8c1.9,2,5,6,5,8.6C21,49.8,18.8,52,16,52z M32,52c-2.8,0-5-2.2-5-5c0-2.6,3.1-6.5,5-8.6c1.9,2,5,6,5,8.6C37,49.8,34.8,52,32,52z M48,52c-2.8,0-5-2.2-5-5 c0-2.6,3.1-6.5,5-8.6c1.4,1.5,3.4,4,4.4,6.3c0,0,0,0,0,0c0,0,0,0,0,0.1c0.3,0.8,0.6,1.5,0.6,2.2C53,49.8,50.8,52,48,52z M53.8,43.1 c-1.7-3.3-4.7-6.4-5.1-6.8c-0.4-0.4-1-0.4-1.4,0c-0.5,0.5-4,4.1-5.6,7.7h-3.5c-1.5-3.6-5.1-7.2-5.6-7.7c-0.4-0.4-1-0.4-1.4,0 c-0.5,0.5-4,4.1-5.6,7.7h-3.5c-1.5-3.6-5.1-7.2-5.6-7.7c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-3.1,3.2-4.8,6.2C7.1,40.5,5,36.9,5,33 c0-6.8,6.2-12.2,13.3-10.8c0.5,0.1,1-0.2,1.2-0.7C21,15.9,26.2,12,32,12c7.2,0,13,5.8,13,13c0,0.6,0.4,1,1,1h4c5,0,9,4,9,9 C59,38.5,57,41.6,53.8,43.1z"/>

</g>

<g id="windy"/>

<g id="rain_with_thunder"/>

<g id="clear_night"/>

<g id="cloudy_night"/>

<g id="moon"/>

<g id="sun"/>

<g id="rainy_night"/>

<g id="windy_night"/>

<g id="night_rain_thunder"/>

<g id="windy_rain"/>

<g id="temperature"/>

<g id="humidity"/>

<g id="air_pressure"/>

<g id="low_rainfall"/>

<g id="moderate_rainfall"/>

<g id="Sunset"/>

</svg>
Weather
</li>
<li Id = "cities">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="_x32_" width="60px" height="60px" viewBox="0 0 512 512" xml:space="preserve" fill="#000000">

<g id="SVGRepo_bgCarrier" stroke-width="0"/>

<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

<g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#ffffff;} </style> <g> <path class="st0" d="M467.594,111.844c-4.563-6.656-9.344-13.047-14.469-19.203C406.156,36,335.281,0,256,0 S105.844,36,58.875,92.641c-5.125,6.156-9.906,12.547-14.469,19.203C16.406,152.875,0,202.469,0,256 c0,53.438,16.406,103.031,44.313,144.078c4.563,6.641,9.375,13.047,14.5,19.203C105.75,475.906,176.641,512,256,512 s150.25-36.094,197.203-92.719c5.109-6.156,9.922-12.563,14.484-19.203C495.594,359.031,512,309.438,512,256 C512,202.469,495.594,152.875,467.594,111.844z M463.531,243.969h-77.844c-0.844-29.375-4.813-57.25-11.281-82.719 c19.391-6.031,37.422-13.438,53.516-22.125C448.594,169.359,461.313,205.281,463.531,243.969z M267.984,50.781 c21.422,5.125,41.984,23.75,58.922,53.844c6.813,12.094,12.563,25.563,17.469,39.875c-23.844,5.625-49.594,9-76.391,9.813V50.781z M243.984,50.781v103.531c-26.781-0.813-52.547-4.188-76.391-9.813c4.906-14.313,10.656-27.781,17.469-39.875 C202,74.531,222.578,55.906,243.984,50.781z M243.984,178.313v65.656h-93.547c0.813-26.797,4.313-52.563,10.313-76.313 C186.656,173.859,214.703,177.484,243.984,178.313z M243.984,267.969v65.719c-29.266,0.813-57.297,4.438-83.234,10.656 c-6-23.781-9.5-49.563-10.313-76.375H243.984z M243.984,357.688v103.469c-21.406-5.125-41.984-23.766-58.922-53.844 c-6.797-12.078-12.547-25.516-17.438-39.813C191.469,361.875,217.188,358.5,243.984,357.688z M267.984,461.156V357.688 c26.766,0.813,52.516,4.188,76.359,9.828c-4.891,14.297-10.641,27.734-17.438,39.797 C309.969,437.406,289.406,456.031,267.984,461.156z M267.984,333.688v-65.719h93.547c-0.813,26.797-4.313,52.563-10.313,76.344 C325.313,338.094,297.266,334.5,267.984,333.688z M267.984,243.969v-65.656c29.266-0.813,57.328-4.438,83.25-10.641 c5.984,23.766,9.484,49.516,10.297,76.297H267.984z M412.969,119.75c-13.688,7.094-29,13.188-45.359,18.313 C356.859,106.031,341.875,79,324,59.453C358.75,71.531,389.375,92.531,412.969,119.75z M187.969,59.438 c-17.875,19.563-32.859,46.594-43.609,78.625c-16.375-5.125-31.703-11.219-45.391-18.313 C122.609,92.531,153.219,71.516,187.969,59.438z M137.578,161.219c-6.469,25.469-10.453,53.375-11.297,82.75H48.469 c2.219-38.75,14.938-74.688,35.531-104.938C100.109,147.734,118.156,155.156,137.578,161.219z M48.469,267.969h77.813 c0.844,29.406,4.828,57.313,11.313,82.797c-19.406,6.047-37.422,13.484-53.516,22.203 C63.406,342.703,50.672,306.688,48.469,267.969z M99.031,392.234c13.688-7.078,29-13.172,45.344-18.297 c10.781,32.063,25.781,59.094,43.672,78.625C153.281,440.5,122.703,419.469,99.031,392.234z M323.938,452.563 c17.875-19.531,32.875-46.563,43.656-78.609c16.313,5.125,31.609,11.203,45.281,18.281 C389.281,419.469,358.688,440.5,323.938,452.563z M374.391,350.719c6.469-25.469,10.453-53.375,11.297-82.75h77.844 c-2.219,38.719-15,74.656-35.688,104.906C411.75,364.172,393.75,356.75,374.391,350.719z"/> </g> </g>

</svg>
Cities</li>
<li Id = "map">
<svg viewBox="0 0 24 24" fill="none" width = "60px"height= "60px" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M9 20L3 17V4L9 7M9 20L15 17M9 20V7M15 17L21 20V7L15 4M15 17V4M9 7L15 4" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Map</li>
<li id="setting">
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 48 48" id="Layer_2" data-name="Layer 2" fill="#fffafa" stroke="#fffafa">

<g id="SVGRepo_bgCarrier" stroke-width="0"/>

<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

<g id="SVGRepo_iconCarrier">

<defs>

<style>.cls-1{fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;}</style>

</defs>

<path class="cls-1" d="M39.23,26a16.52,16.52,0,0,0,.14-2,16.52,16.52,0,0,0-.14-2l4.33-3.39a1,1,0,0,0,.25-1.31l-4.1-7.11a1,1,0,0,0-1.25-.44l-5.11,2.06a15.68,15.68,0,0,0-3.46-2l-.77-5.43a1,1,0,0,0-1-.86H19.9a1,1,0,0,0-1,.86l-.77,5.43a15.36,15.36,0,0,0-3.46,2L9.54,9.75a1,1,0,0,0-1.25.44L4.19,17.3a1,1,0,0,0,.25,1.31L8.76,22a16.66,16.66,0,0,0-.14,2,16.52,16.52,0,0,0,.14,2L4.44,29.39a1,1,0,0,0-.25,1.31l4.1,7.11a1,1,0,0,0,1.25.44l5.11-2.06a15.68,15.68,0,0,0,3.46,2l.77,5.43a1,1,0,0,0,1,.86h8.2a1,1,0,0,0,1-.86l.77-5.43a15.36,15.36,0,0,0,3.46-2l5.11,2.06a1,1,0,0,0,1.25-.44l4.1-7.11a1,1,0,0,0-.25-1.31ZM24,31.18A7.18,7.18,0,1,1,31.17,24,7.17,7.17,0,0,1,24,31.18Z"/>

</g>

</svg>
Settings</li>
</ul>
</div>
<div class="main">
<div class="s">
<input type="text" name="search" placeholder="search for cities" class="search gray" id="search"></div>
<div class="display">
<div class="NameDisplay">
<div class="Name">
<h1 Id = "CityName">Madrid</h1>
<h3 Id = "Rain">Chance of rain: 0%</h3>
</div>
<div class="temp">
30%
</div>
</div>
<div class="image">
<img class="img" width="100%" height="100%" src="/WeatherApp/img/11071-removebg-preview.png" >
</div>
</div>
<div class="forecast gray down">
<div class="heading"><p>Todays forecast</p></div>
<div class="timetble">
<div class="six time">
<h3>6:00 am</h3>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-clouds-fill"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.473 9a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 14h8.5a2.5 2.5 0 1 0-.027-5z"></path> <path d="M14.544 9.772a3.506 3.506 0 0 0-2.225-1.676 5.502 5.502 0 0 0-6.337-4.002 4.002 4.002 0 0 1 7.392.91 2.5 2.5 0 0 1 1.17 4.769z"></path> </g></svg>
<h1>25</h1>
</div>
<div class="nine time">
<h3>6:00 am</h3>
<img width="94" height="94" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>
<h1>25</h1>
</div>
<div class="twelve time">
<h3>6:00 am</h3>
<img width="96" height="96" src="https://img.icons8.com/emoji/48/sun-emoji.png" alt="sun-emoji"/>
<h1>25</h1>
</div>
<div class="three time">
<h3>6:00 am</h3>
<img width="96" height="96" src="https://img.icons8.com/emoji/48/sun-emoji.png" alt="sun-emoji"/>
<h1>25</h1>
</div>
<div class="six time">
<h3>6:00 am</h3>
<img width="94" height="94" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>

<h1>25</h1>
</div>
<div class="pm time">
<h3>6:00 am</h3>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-clouds-fill"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.473 9a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 14h8.5a2.5 2.5 0 1 0-.027-5z"></path> <path d="M14.544 9.772a3.506 3.506 0 0 0-2.225-1.676 5.502 5.502 0 0 0-6.337-4.002 4.002 4.002 0 0 1 7.392.91 2.5 2.5 0 0 1 1.17 4.769z"></path> </g></svg>
<h1>25</h1>
</div>
</div>

</div>
<div class="conditions gray down" >
<div class="heading"><p>Air conditions</p></div>
<div class="cond">
<div class="condi humid"></div>
<div class="condi wind"><p>
Wind<br>40
</p><img width="50" height="50" src="https://img.icons8.com/ios-filled/50/wind--v1.png" alt="wind--v1"/>
</div>
</div>

</div>
</div>
<div class="left">
<div class="leftTime">
<p>FUTURE PREDICTIONS</p>
</div>
<div class="leftTime first">
<h3>Tuesday</h3>
<img width="64" height="64" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>

<h1>25</h1></div>
<div class="leftTime second">
<h3>Tuesday</h3>
<img width="64" height="64" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>
<h1>25</h1>
</div>
<div class="leftTime third"><h3>Tuesday</h3>
<img width="64" height="64" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>
<h1>25</h1></div>
<div class="leftTime fourth"><h3>Tuesday</h3>
<img width="64" height="64" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>
<h1>25</h1></div>
<div class="leftTime fifth"><h3>Tuesday</h3>
<img width="64" height="64" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>
<h1>25</h1></div>
<div class="leftTime sixth"><h3>Tuesday</h3>
<img width="64" height="64" src="https://img.icons8.com/3d-fluency/94/storm.png" alt="storm"/>
<h1>25</h1></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Binary file added Projects/WeatherApp/img/11071-removebg-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Projects/WeatherApp/img/11071.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading