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

Sarah Williams + Morgan Adkisson - Whales #65

Open
wants to merge 20 commits into
base: main
Choose a base branch
from
+293 −3
Open

Sarah Williams + Morgan Adkisson - Whales #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
481ca4e
initial html/css wireframe
sarah-kw Jun 7, 2022
4a4ce4a
wireframe illustration added to assets
MorganAdkisson Jun 7, 2022
7590718
add textbox and selector, adapt html/css to look more like wireframe
sarah-kw Jun 7, 2022
08601e8
add .js links
sarah-kw Jun 9, 2022
a0a5655
City text box updates site title
sarah-kw Jun 9, 2022
228b82f
pulling
MorganAdkisson Jun 9, 2022
9129e49
working implementation for wave 02- buttons incrementing and decremen…
MorganAdkisson Jun 10, 2022
9758507
wave-05 sky selector changes sky
sarah-kw Jun 10, 2022
5a2e14e
resolve merge conflict from pull temp button update (wave-02)'
sarah-kw Jun 10, 2022
60e084b
created reset button for wave 06
MorganAdkisson Jun 10, 2022
ad17bac
merged
MorganAdkisson Jun 10, 2022
79553b9
wave-04 API call and temp update
sarah-kw Jun 10, 2022
4723e36
helper function update temp
sarah-kw Jun 10, 2022
0930c3f
pulling
MorganAdkisson Jun 10, 2022
fe27bb0
Merge branch 'main' of https://github.com/MorganAdkisson/weather-report
MorganAdkisson Jun 10, 2022
93adfa6
refactored helper function for temp text and landscape changes - cond…
MorganAdkisson Jun 11, 2022
2f84ba6
added a low and high temperature box to the temp section - this gets …
MorganAdkisson Jun 13, 2022
a2d69d5
default and reset set temp display to current in Seattle; also styling
sarah-kw Jun 13, 2022
cb02e35
added current description to temperature block, added some styling, a…
MorganAdkisson Jun 13, 2022
ffced7d
Merge branch 'main' of https://github.com/MorganAdkisson/weather-report
MorganAdkisson Jun 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
Empty file added assets/wireframe
View file
Open in desktop
Empty file.
Binary file added assets/wireframe-illustration.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.
66 changes: 65 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,72 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Report</title>
<link href="styles/index.css" rel="stylesheet">
</head>
<body>

<header>
<h1>Weather for the lovely city of <span id=titleCity>Seattle</span></h1>
</header>
<section id="weatherFrame">
<section id="clickables">
<section id="tempBlock">
<header>
<h2>Temperature</h2>
</header>
<section id="tempButtonLayout">
<section id="tempChanger">
<button id="tempUp">⬆️</button>
<p id="tempValue"></p>
<button id="tempDown">⬇️</button>
</section>
<section id="realTimeDisplay">
<section id="dailyRange">
<p id="dailyLow">Today's Low: </p>
<p id="dailyHigh">Today's High: </p>
<p id="dailyDescription">Description: </p>
</section>
<button id="getTemp">Get Real-Time Temperature</button>
</section>
</section>
</section>
<section id="skyBlock">
<header>
<h2>Sky</h2>
</header>
<label for="weatherSelector">The weather is...</label>
<select id="weatherSelector">
<option value="sunny">Sunny</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
</section>
<section id="cityBlock">
<header>
<h2>City Name</h2>
</header>
<label for="cityName">Show me the weather in...</label>
<input id="cityName" type="text" placeholder="e.g. &quot;Seattle&quot;">
<button id="resetBtn">Reset</button>
</section>
</section>
<section id="gardenBlock">
<header>
<h2>
Weather Garden
</h2>
</header>
<section id="garden">
<p id="gardenSky">
☁️ ☁️ ☁️ ☀️ ☁️ ☁️
</p>
<p id="gardenLandscape">
🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃
</p>
</section>
</section>
</section>
</body>
<script src="src/index.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
</html>
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{
"dependencies": {
{ "dependencies": {
"axios": "^0.27.2"
}
}
144 changes: 144 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
const GARDENSKIES = {
Copy link

Choose a reason for hiding this comment

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

I really like this approach! Very clean and extensible!

sunny: '☁️ ☁️ ☁️ ☀️ ☁️ ☁️',
cloudy: '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️',
rainy: '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧',
snowy: '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨',
};

const CONDITIONS = {
hot: { landscape: '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂', text: 'red' },
warm: { landscape: '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷', text: 'orange' },
moderate: { landscape: '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃', text: 'yellow' },
chilly: { landscape: '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲', text: 'green' },
cold: { landscape: '❄️🌲⛄️🌲❄️🏂⛄️🌲❄️⛷🌲❄️🌲', text: 'teal' },
};
Comment on lines +8 to +14
Copy link

Choose a reason for hiding this comment

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

Style: I it would have been clearer if you called the key color instead text:

Suggested change
const CONDITIONS = {
hot: { landscape: '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂', text: 'red' },
warm: { landscape: '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷', text: 'orange' },
moderate: { landscape: '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃', text: 'yellow' },
chilly: { landscape: '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲', text: 'green' },
cold: { landscape: '❄️🌲⛄️🌲❄️🏂⛄️🌲❄️⛷🌲❄️🌲', text: 'teal' },
};
const CONDITIONS = {
hot: { landscape: '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂', color: 'red' },
warm: { landscape: '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷', color: 'orange' },
moderate: { landscape: '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃', color: 'yellow' },
chilly: { landscape: '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲', color: 'green' },
cold: { landscape: '❄️🌲⛄️🌲❄️🏂⛄️🌲❄️⛷🌲❄️🌲', color: 'teal' },
};


const state = {
tempValue: 60,
cityLow: null,
cityHigh: null,
weatherDescription: null,
};

const kelvinToFahrenheit = (temperature) =>
(temperature - 273.15) * (9 / 5) + 32;

const updateTemp = () => {
const tempValue = document.querySelector('#tempValue');
tempValue.textContent = state.tempValue;
conditionLayout(state.tempValue, tempValue);
};

const incrementTemp = () => {
state.tempValue += 1;
updateTemp();
};

const decrementTemp = () => {
state.tempValue -= 1;
updateTemp();
};

const conditionLayout = (temp, el) => {
const landscapeLayout = document.querySelector('#gardenLandscape');
let currentCondition = null;
if (temp >= 80) {
currentCondition = CONDITIONS.hot;
} else if (temp < 80 && temp >= 70) {
currentCondition = CONDITIONS.warm;
} else if (temp < 70 && temp >= 60) {
currentCondition = CONDITIONS.moderate;
} else if (temp < 60 && temp >= 50) {
currentCondition = CONDITIONS.chilly;
} else if (temp < 50) {
currentCondition = CONDITIONS.cold;
}
el.style.color = currentCondition.text;
Copy link

Choose a reason for hiding this comment

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

Using class names for this would have put all the styling in one location, though admittedly having your settings at the top of the file makes that less necessary.

landscapeLayout.textContent = currentCondition.landscape;
};

const updateTitleCity = () => {
let titleCity = document.querySelector('#titleCity');
// console.log(cityName.value);
titleCity.textContent = `${cityName.value}`;
};

const resetCity = () => {
document.querySelector('#titleCity').textContent = 'Seattle';
document.querySelector('#cityName').value = '';
getCityWeather();
};

const updateWeatherGardenSky = () => {
let gardenSky = document.querySelector('#gardenSky');
console.log(`${weatherSelector.value}`);
gardenSky.textContent = GARDENSKIES[weatherSelector.value];
};

const displayCurrentConditions = () => {
let dailyLow = document.querySelector('#dailyLow');
let dailyHigh = document.querySelector('#dailyHigh');
let description = document.querySelector('#dailyDescription');
dailyLow.innerText = `Today's Low: ${state.cityLow}`;
dailyHigh.innerText = `Today's High: ${state.cityHigh}`;
description.innerText = `Description: ${state.weatherDescription}`;
};

const getCityWeather = () => {
axios
.get('http://127.0.0.1:5000/location', {
params: { q: `${cityName.value ? cityName.value : 'Seattle'}` },
})
.then((response) => {
console.log(response.data);
axios
.get('http://127.0.0.1:5000/weather', {
params: {
lat: response.data[0]['lat'],
lon: response.data[0]['lon'],
},
})
.then((response) => {
console.log(response.data);
state.tempValue = Math.round(
kelvinToFahrenheit(response.data.current.temp)
);
updateTemp();
state.cityLow = Math.round(
kelvinToFahrenheit(response.data.daily[0].temp.min)
);
state.cityHigh = Math.round(
kelvinToFahrenheit(response.data.daily[0].temp.max)
);
state.weatherDescription =
response.data.daily[0].weather[0].description;
displayCurrentConditions();
})
.catch((error) => {
console.log('error', error);
console.log('error response', error.response);
});
})
.catch((error) => {
console.log('error', error);
console.log('error response', error.response);
});
};

const registerEventHandlers = () => {
const cityInput = document.querySelector('#cityName');
cityInput.addEventListener('input', updateTitleCity);
const resetBtn = document.querySelector('#resetBtn');
resetBtn.addEventListener('click', resetCity);
const weatherSelector = document.querySelector('#weatherSelector');
weatherSelector.addEventListener('change', updateWeatherGardenSky);
const incrementButton = document.querySelector('#tempUp');
incrementButton.addEventListener('click', incrementTemp);
const decrementButton = document.querySelector('#tempDown');
decrementButton.addEventListener('click', decrementTemp);
const getTempButton = document.querySelector('#getTemp');
getTempButton.addEventListener('click', getCityWeather);
};

document.addEventListener('DOMContentLoaded', registerEventHandlers);
document.addEventListener('DOMContentLoaded', getCityWeather);
83 changes: 83 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
button {
background: lightblue;
padding: 10px;
border-radius: 25px;
}

#weatherFrame {
Copy link

Choose a reason for hiding this comment

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

It looks like you leaned pretty hard on ids here, which does make it easier to style things but slightly hampers re-usability of styles.

display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 30px;
padding: 10px;
min-width: max-content;
max-width: 100%;
}
#weatherFrame h2{
margin-top: 0px;
}

#clickables{
display: flexbox;
}

#clickables > section{
padding: 25px;
margin: 10px;
background: grey;
border-radius: 25px;
}

#tempButtonLayout {
display: flex;
flex-direction: row;
justify-content: space-around;
border-style: double;
border-radius: 10px;
padding: 20px;
background-color: rgba(240, 255, 255, 0.225);
}

#tempValue {
font-size: 50px;
color: yellow;
}

#cityBlock ::placeholder{
color:lightgray;
}

#gardenBlock {
min-width: max-content;
max-width: 75%;
}
#gardenBlock h2{
text-align: center;
}

#garden {
display: flex;
flex-direction: column;
gap: 100px;
background: lightblue;
border-radius: 10px;
padding: 5px;
text-align: center;
}

#dailyRange {
font-size: large;
background-color: rgba(134, 203, 208, 0.384);
padding: 5px;
border-radius: 10px;
}

#realTimeDisplay {
display: flex;
flex-direction: column;
justify-content: space-around;
}

#titleCity {
font-style: italic;
}