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

Jump to bottom

Amethyst - Stacey-AnBa #65

Open
wants to merge 28 commits into
base: main
Choose a base branch
from
Open

Amethyst - Stacey-AnBa #65

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
bbd8b40
linking scripts
ngwin-ab Jun 8, 2023
465cb3a
modified the position of the script linking
ngwin-ab Jun 8, 2023
ba51ecc
installs dependencies
staceyjo Jun 8, 2023
e62cd8a
co-working session updates
staceyjo Jun 8, 2023
59f8212
added the dropdown menu for weather conditions
ngwin-ab Jun 8, 2023
a2f66da
css ids
staceyjo Jun 8, 2023
1253e47
put buttons and number display in flex
ngwin-ab Jun 12, 2023
aa2e668
formatted buttons
ngwin-ab Jun 12, 2023
9a37578
displayed city name
ngwin-ab Jun 12, 2023
98ed9d4
modified functions for better readability
ngwin-ab Jun 13, 2023
ff75f9c
adds event listeners for sky conditions and temp buttons
staceyjo Jun 13, 2023
2d96274
i'm sleepy
staceyjo Jun 13, 2023
e12920f
added functions and eventListener to display location and realtime we…
ngwin-ab Jun 13, 2023
0c86290
added function to convert Kelvin to Fahrenheit
ngwin-ab Jun 13, 2023
db6f51b
experimenting with the header
ngwin-ab Jun 13, 2023
8f065f7
morning updates
staceyjo Jun 13, 2023
de07f5e
changed the original temp value to 0
ngwin-ab Jun 13, 2023
f41b8fa
merged changes
staceyjo Jun 13, 2023
59abc41
Merge branch 'main' of https://github.com/staceyjo/weather-report
staceyjo Jun 13, 2023
d972273
incorporated codes, fixed the header image
ngwin-ab Jun 13, 2023
ffdf2af
removed unnecessary blank lines
ngwin-ab Jun 13, 2023
e7bb999
added reset button
ngwin-ab Jun 13, 2023
22d6a1d
adjusts final styling
staceyjo Jun 14, 2023
5cd2a50
adjusts weather garden styling
staceyjo Jun 14, 2023
0b7b2bc
change temp color based on value
ngwin-ab Jun 14, 2023
9e42aca
increased the space between containers
ngwin-ab Jun 14, 2023
cae0abe
modified if-else statement
ngwin-ab Jun 14, 2023
8cbe7bb
removed additional feature commented code and one console log
staceyjo Jul 26, 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
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.vscode
.DS_Store
node_modules
.cache
.cache
.env
Binary file added assets/images/ameythst.jpeg
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 assets/images/taylor-van-riper-yQorCngxzwI-unsplash.jpg
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.
94 changes: 93 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -9,8 +10,99 @@
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/index.css" />
</head>

<body>
<script src="./src/index.js"></script>
<!-- Header -->
<header>
<h1>AnS Amethyst Weather Report</h1>
</header>

<main>
<h3 id="city-intro">Get the real-time weather in the beautiful city of: </h2>

<!-- Search section -->
<div id="search-container">
<input id="search-input" type="text" placeholder="Please enter a city">
<button id="search-button">Search</button>
<button id="reset-button">Reset</button>
</div>

<!-- City Header -->
<div id="city-container">

<span>
<h2 id="city-spotlight"></h2>
</span>
</div>


<!-- Temperature -->
<div id="temperature-container">
<h3 id="temp-header">Current Temperature :</h3>

<!-- Temperature Buttons -->
<div class="temp-adustment-container">
<button id="down-button">Decrease &#8595;</button>

<span>
<h2 id="temp-value"></h2>
</span>

<button id="up-button">Increase &#8593;</button>
</div>
</div>
Comment on lines +26 to +53
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markup looks great!


<!-- Sky conditions -->
<div id="sky-container">
<label for="weather-conditions" id="label">
<h4>Sky Condition :</h4>
Comment on lines +38 to +58
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markup looks great!

</label>

<select name="weather-conditions" id="weather-conditions">
<option value="general" id="select-drop-down" selected>Please select an option</option>
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
</div>


<!-- Weather Garden -->
<div id="weather-garden-container">
<h3 id="weather-garden-header">Weather Garden :</h3>

<section class="weather-icons">

<div id="sunny-garden-image-container">
<div id="sun-garden-icon">🌻 &nbsp; ☀️ &nbsp; 🌺 &nbsp;🌤 &nbsp; 🌸 &nbsp;</div>
</div>

<div id="cloudy-garden-image-container">
<div id="cloud-garden-icon">🌿&nbsp; ☁️ &nbsp; 🌷 &nbsp;</div>
</div>

<div id="rainy-garden-image-container">
<div id="rain-garden-icon"> 🌦 &nbsp; 🌹 &nbsp; 💧 &nbsp; 🌲 &nbsp; ⚡️ &nbsp; 🌈 &nbsp; 🌴 &nbsp; 🌧 &nbsp;</div>
</div>

<div id="snowy-garden-image-container">
<div id="snow-garden-icon">❄️ &nbsp; 🥀</div>
</div>

</section>

</div>
</main>


<!-- Footer -->
<footer>
<p>©2023 Amethyst Atlanta Inc. Proudly designed by Anba & Stacey</p>
</footer>

<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="./src/index.js"></script>
</body>

</html>
110 changes: 110 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"dependencies": {
"axios": "^1.2.1"
"axios": "^1.4.0"
}
}
Loading