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

weather-report panthers Tiffany Rogers #90

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

weather-report panthers Tiffany Rogers #90

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
1e5d734
weather project
Tiffany-Rogers-Dev Dec 13, 2022
cc4c6ba
tried dropdown again
Tiffany-Rogers-Dev Dec 13, 2022
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
4 changes: 0 additions & 4 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +0,0 @@
{
"singleQuote": true,
"semi": true
}
102 changes: 93 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles/index.css" />
<title>Weather Report</title>
</head>
<body>

</body>
</html>
</head>
<body>
<!-- weather garden -->
<section id="garden-container">
<header id="sky-dropdown">
<div class="seasons" id="Sunny">😎S☀️u🌞n🌅n🌞y😎</div>
<div class="seasons" id="Rainy">🌈R🌧a⛈i💧n🌦y🌈</div>
<div class="seasons" id="Cloudy">☁️C🌥l⛅️o🌤u⛅️d🌥y☁️</div>
<div class="seasons" id="Snowy">❄️S🌨n❅o❆w🌨y❄️</div>
</header>
<div></div>
<footer id="landscape">
<div class="seasons" id="summer">⛱S🍉u👙m🧴m🩳e🍉r⛱</div>
<div class="seasons" id="spring">🌷S🌸p🌼r🌱i🌼n🌸g🌷</div>
<div class="seasons" id="fall">🍂A🍁u👻t🎃u👻m🍁n🍂</div>
<div class="seasons" id="winter">⛄️W🎿i🛷n🧤t⛸e🧣r⛄️</div>
</footer>
</section>
<!--------------------->
<section>
<!-- header for input weather cards -->
<header id="weather-cards-header">
<h1>Weather Report</h1>
<h4 style="margin-top: -1rem">
For the lovely city of <span id="city-name"></span>
</h4>
</header>
<!-------------------------------------->
<!-- input weather cards -->
<section
style="
display: flex;
align-items: center;
gap: 5rem;
justify-content: center;
"
>
<div class="card" id="card1">
<button class="button" id="up-arrow">Increment</button>
<h3><span id="temp"></span>°F</h3>
<button class="button" id="down-arrow">Decrement</button>
</div>
<div class="card" id="card2">
<div style="display: flex; flex-direction: column; gap: 0.5rem">
<h3>Sky</h3>
<select id="sky-dropdown">
<option>Select Conditions</option>
<option>Sunny</option>
<option>Rainy</option>
<option>Cloudy</option>
<option>Snowy</option>
</select>
</div>
</div>
<div class="card" id="card3">
<h1>Search a City</h1>
<label for="city-search">City Name</label>
<input type="text" id="city-search" value="Columbus" />
<button
style="
Copy link

Choose a reason for hiding this comment

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

When doing this much styling it is best to move it inside of your css file so it doesn't congest your html files.

background-color: red;
font-weight: 900;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
sans-serif;
color: white;
border-radius: 40px;
width: 10rem;
padding: 1rem;
font-size: 1.5rem;
"
id="get-weather-btn"
>
Get Weather
</button>
<button id="reset-btn">Reset Search</button>
</div>
</section>
<!------------------------->
</section>
<!-- footer for page -->
<footer>
<h4>By Tiffany Rogers</h4>
</footer>
<!--------------------->
<script type="module" src="./src/index.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@

{
"dependencies": {
"axios": "^0.27.2"
"axios": "^1.2.1"
}
}
172 changes: 172 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
// Accessing DOM/HTML Elements

const upArrow=document.getElementById("up-arrow");
const downArrow=document.getElementById("down-arrow");
const temperature=document.getElementById("temp");
const summer=document.getElementById("summer");
const spring=document.getElementById("spring");
const fall=document.getElementById("fall");
const winter=document.getElementById("winter");
const cityName=document.getElementById("city-name");
const userSearch=document.getElementById("city-search");
const callApiBtn=document.getElementById("real-temp-btn");
const resetCityBtn=document.getElementById("reset-btn");
const getWeatherBtn=document.getElementById("get-weather-btn");
const skyDropDown=document.getElementById('sky-dropdown');
const Sunny=document.getElementById('sunny');
const Snowy=document.getElementById('snowy');
const Rainy=document.getElementById('rainy');
const Cloudy=document.getElementById('cloudy');
const defaultSky=document.getElementById('default-sky');

// ---------------------------

let temp=0;
colors();
getApi();

function getApi() {
let latitude;
let longitude;
axios
.get(`http://127.0.0.1:5000/location?q=${userSearch.value}`)
.then(function apiResponse(response) {
latitude = response.data[0].lat;
longitude = response.data[0].lon;

axios
.get(`http://127.0.0.1:5000/weather?&lat=${latitude}&lon=${longitude}`)
.then((res) => {
const fahrenheitConversion = Math.floor(
((res.data.main.temp - 273.15) * 9) / 5 + 32);
temperature.textContent = fahrenheitConversion;
temp = fahrenheitConversion;
seasonChange()
})
})
.catch((error) => {
alert(error);
})
};
Copy link

@mikellewade mikellewade Jan 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Nice promise chaining for these functions, Tiffany! I have one refactoring advice for you and that is to implement the async &c await functionality of Javascript in order to make your code more concise and readable. doing something like:

const getAPI = async () => {
  let lat, long;
  
try {
   const response = await axios.get('http://127.0.0.1:5000/location', {
      params: {
        q: userSearch.value,
        format: 'json',
      }})
  
    lat = response.data[0].lat;
    long = response.data[0].lon;
    
   getWeather(lat, long) 
} catch (err) {
    console.log(err);
  }
}

Using the await keyword lets us stop the global execution for the function it is in and wait for the promise to be fulfilled. This allows us to cut out the promise chaining here and just save return information from the axios calls as variables. We can then use said variables like we ordinarily would in the then chain of the promise. Then we can use a try/catch block for error handling. Finally, I would suggest breaking the location and weather API calls into their own functions so that you can avoid nesting try/blocks and just overall concise code.


temperature.textContent = temp

function increment(){
temp += 1;
temperature.textContent=temp
console.log(temp)
Copy link

Choose a reason for hiding this comment

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

Remember to remove your console.logs before pushing into production!

colors()
seasonChange()
};

function decrement(){
temp -= 1;
temperature.textContent=temp
console.log(temp)
colors()
seasonChange()
};

function colors(){
if (temp >= 90){
temperature.style.color="#ab0000"
}else if (temp <= 89 && temp >= 80){
temperature.style.color="red"
}else if (temp <= 79 && temp >= 70){
temperature.style.color="orange"
}else if (temp <= 69 && temp >= 60){
temperature.style.color="green"
}else if (temp <= 59 && temp >= 50){
temperature.style.color="#38f9cc"
}else if (temp <= 49 && temp >= 40){
temperature.style.color="#378aea"
}else if (temp <= 39 && temp >= 30){
temperature.style.color="blue"
}else {
temperature.style.color="#1100ab"
}
Copy link

Choose a reason for hiding this comment

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

So here you have the right idea for your if statements, however you could just put this here:

if (temp > 60)

};

function seasonChange(){
if (temp >= 80){
summer.style.display="flex"
spring.style.display="none"
fall.style.display="none"
winter.style.display="none"
}else if (temp >= 65){
summer.style.display="none"
spring.style.display="flex"
fall.style.display="none"
winter.style.display="none"
}else if (temp >= 45){
summer.style.display="none"
spring.style.display="none"
fall.style.display="flex"
winter.style.display="none"
}else if (temp <= 44){
summer.style.display="none"
spring.style.display="none"
fall.style.display="none"
winter.style.display="flex"
}
Copy link

@mikellewade mikellewade Jan 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

So here, the refactor that I would suggest would start in the HTML file. Instead of putting all the landscapes I would just put one of them. Something like : <div id='landscape'></div> After that, I would change the code you have here into something like:

const landscape = document.getElementById('landscape')

if (temp >= 65) {
   landscape.innerHTML = 😎S☀️u🌞n🌅n🌞y😎
}

This way you can save your fingers from typing a lot more code! I would do the same thing in the dropDownValue function.

};

// Func for users city search and display name
function displayInput() {
cityName.textContent = userSearch.value;
}

function resetCity() {
userSearch.value = 'Columbus';
cityName.textContent = 'Columbus';
getApi();
}

displayInput()
seasonChange()


// Function for getting value of sky/conditions dropdown
function dropdownValue() {
console.log(skyDropDown.value);
console.log('1');
// if(skyDropDown.value === 'Select Conditions'){
// sunnySky.style.display = 'none';
// cloudySky.style.display = 'none';
// rainySky.style.display = 'none';
// snowSky.style.display = 'none';
// defaultSky.style.display = 'block';
} if (skyDropDown.value === 'Sunny'){
Sunny.style.display = 'block'
Cloudy.style.display = 'none';
Rainy.style.display = 'none';
Snowy.style.display = 'none';
defaultSky.style.display = 'none';
} else if (skyDropDown.value === 'Rainy') {
Sunny.style.display = 'none'
Cloudy.style.display = 'none';
Rainy.style.display = 'block';
Snowy.style.display = 'none';
defaultSky.style.display = 'none';
} else if (skyDropDown.value === 'Cloudy') {
Sunny.style.display = 'none'
Cloudy.style.display = 'none';
Rainy.style.display = 'none';
Snowy.style.display = 'block';
defaultSky.style.display = 'none';
} else if (skyDropDown.value === 'Snowy') {
Sunny.style.display = 'none';
Cloudy.style.display = 'none';
Rainy.style.display = 'none';
Snowy.style.display = 'block';
defaultSky.style.display = 'none';
};

dropdownValue()
Copy link

Choose a reason for hiding this comment

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

I see you are invoking the certain functions in order to get the intital data displayed on the first render of the page. I would just move these all somewhere together. Given that you used the function keyword your functions have been hoisted and you can move them anywhere you please.


upArrow.addEventListener('click', increment);
downArrow.addEventListener('click', decrement);
resetCityBtn.addEventListener('click', resetCity);
getWeatherBtn.addEventListener('click', getApi);
userSearch.addEventListener('input', displayInput);
skyDropDown.addEventListener('change', dropdownValue);
Copy link

Choose a reason for hiding this comment

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

Here the only suggestion is to move these inside a registerHandlers function that is made the callback to theDOMContentLoadedevent handler.

32 changes: 32 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
#weather-cards-header{
text-align: center;
font-size: 2rem;
color:crimson
}

.card {
border:1.5px solid black;
padding:1rem 1rem
}

#card1{
min-width: 15%;
min-height: 15%;
}

#temp{
font-size: 6rem;
}

.seasons{
font-size: 120px;
justify-content: center;
}

#garden-container{
background-color: aqua;
text-align: center;
}
footer{
text-align: center;
}
Copy link

Choose a reason for hiding this comment

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

All in all, great work Tiffany! ✨

1 change: 1 addition & 0 deletions weather-report
Open in desktop
Submodule weather-report added at 703348
24 changes: 15 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ asynckit@^0.4.0:
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==

axios@^0.27.2:
version "0.27.2"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
axios@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
dependencies:
follow-redirects "^1.14.9"
follow-redirects "^1.15.0"
form-data "^4.0.0"
proxy-from-env "^1.1.0"

combined-stream@^1.0.8:
version "1.0.8"
Expand All @@ -27,10 +28,10 @@ delayed-stream@~1.0.0:
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=

follow-redirects@^1.14.9:
version "1.15.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4"
integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==
follow-redirects@^1.15.0:
version "1.15.2"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==

form-data@^4.0.0:
version "4.0.0"
Expand All @@ -52,3 +53,8 @@ mime-types@^2.1.12:
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
dependencies:
mime-db "1.52.0"

proxy-from-env@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==