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

Masi Nakhjiri-Cheetahs Group #75

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

Masi Nakhjiri-Cheetahs Group #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25887eb
inc and dec temp for wave 1
masinakh Dec 6, 2022
bf1a571
add color fot tempvalue
masinakh Dec 7, 2022
0e2cf7e
add landscape styles in js
masinakh Dec 7, 2022
c0be628
finish wave 3 and 6
masinakh Dec 7, 2022
f67b5a8
complete wave 5
masinakh Dec 9, 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
44 changes: 44 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,53 @@
<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>
<header>
<h1>Weather Report</h1>
<h2>For the lovely city of </h2>
<p>✨<span id = "city-name"></span> ✨</p>
</header>
<main class = "main-container">
<section class = "general-container temperature-container">
<h2 >Temperature</h2>
<div>
<button id ="tempUp">⬆️</button>
<span id = "tempValue">80</span>
<button id = "tempDown">⬇️</button>
</div>
<div>
<button type = "button" id = "get-current-temp">Get Realtime Temperature</button>
</div>
</section>
<section class = "sky"></section>
<section class="general-container city-container">
<h2>City Name</h2>
<input type="text" id="city-name-input" name="city-name-input" placeholder="Enter City Name"><br>
<br>
<button type="button" id = "city-name-btn">Reset</button>
</section>
<section class = "general-container landscape-container">
<h2>Weather Garden</h2>
<div class="garden">
<h3>Select Sky:</h3>
<select name="sky-type" id="skys" value="snowy">
<option value="cloudy">Cloudy</option>
<option value="sunny">Sunny</option>
<option value="rainy">Rainy</option>
<option value="snowy">Snowy</option>
</select>
<!-- <div id="sky-garden"></div><br> -->
<div id="sky-garden">☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️</div><br>
<div id = "weather-garden-containing-landscape"></div>
</div>
</section>
</main>

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

</body>
</html>
145 changes: 145 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
'use strict';

const state = {
temp: 80,
tempColor: 'red',
city: 'seattle',
sky: 'snowy',
};

///refactor the code above
const showTemperature = () => {
const tempValue = document.getElementById('tempValue');
tempValue.textContent = state.temp + '\u00B0F';
// tempValue.style.color = ‘red’;
console.log(tempValue);
};

const updateCity = () => {
const updateCity = document.getElementById('city-name-input').value;
document.getElementById('city-name').innerHTML = updateCity;
};

const resetCity = () => {
const updateCity = document.getElementById('city-name-input');
const cityName = document.getElementById('city-name');
state.city = '';
cityName.textContent = state.city;
updateCity.value = state.city;
};

const tempColorAndLandscape = () => {
const tempColorElement = document.getElementById('tempValue');
const landscape = document.getElementById(
'weather-garden-containing-landscape'
);

if (state.temp <= 49) {
tempColorElement.style.color = 'teal';
landscape.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
} else if (50 <= state.temp && state.temp <= 59) {
tempColorElement.style.color = 'green';
landscape.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
} else if (60 <= state.temp && state.temp <= 69) {
tempColorElement.style.color = 'yellow';
landscape.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
} else if (70 <= state.temp && state.temp <= 79) {
tempColorElement.style.color = 'orange';
landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
} else {
tempColorElement.style.color = 'red';
landscape.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
}
};

const changeTemp = (e) => {
const tempContainer = document.querySelector('.temperature');

if (e.target.id == 'tempUp') {
state.temp += 1;
console.log(state);
showTemperature();
} else if (e.target.id == 'tempDown') {
state.temp -= 1;
showTemperature();
}
Comment on lines +58 to +65
Copy link

Choose a reason for hiding this comment

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

Great solution, nice use of the event target id!

};
Copy link

Choose a reason for hiding this comment

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

Please see my note on line 135, this is the refactor change that I recommend.

Suggested change
};
tempColorAndLandscape();
};


const changeSky = () => {
let currentSky = document.getElementById('skys').value;
let skyContainer = document.getElementById('sky-garden');

state.sky = currentSky;
if (state.sky === 'cloudy') {
skyContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
} else if (state.sky === 'sunny') {
skyContainer.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
} else if (state.sky === 'rainy') {
skyContainer.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
} else if (state.sky === 'snowy') {
skyContainer.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
}
};

// const getWeather = async () => {
// let latitude, longitude;

// await axios
// .get('http://127.0.0.1:5000/location', {
// params: {
// q: state.city,
// },
// })
// .then((response) => {
// latitude = response.data[0].lat;
// longitude = response.data[0].lon;
// })
// .catch((error) => {
// console.log('error in finding location!');
// });

// axios
// .get('http://127.0.0.1:5000/weather', {
// params: {
// lat: latitude,
// lon: longitude,
// },
// })
// .then((response) => {
// // console.log(response.data);
// const kelvinTemperature = response.data.main.temp;
// // console.log(kelvinTemperature);
// const fahrenheitTemperature = Math.round(
// (kelvinTemperature - 273.15) * 1.8 + 32
// );
// state.temp = fahrenheitTemperature;
// tempValue.innerText = `${state.temp + '\u00B0F'}`;
// tempColorAndLandscape();
// })
// .catch((error) => {
// console.log('error in finding temperature!', error);
// });
// };
Comment on lines +84 to +122
Copy link

Choose a reason for hiding this comment

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

This is so close to working! I think with a few changes (although I didn't test it) you could get it to work. The big change is moving the second axios call to a separate function, and then calling that function inside the .then handler of the first axios call:

Suggested change
// const getWeather = async () => {
// let latitude, longitude;
// await axios
// .get('http://127.0.0.1:5000/location', {
// params: {
// q: state.city,
// },
// })
// .then((response) => {
// latitude = response.data[0].lat;
// longitude = response.data[0].lon;
// })
// .catch((error) => {
// console.log('error in finding location!');
// });
// axios
// .get('http://127.0.0.1:5000/weather', {
// params: {
// lat: latitude,
// lon: longitude,
// },
// })
// .then((response) => {
// // console.log(response.data);
// const kelvinTemperature = response.data.main.temp;
// // console.log(kelvinTemperature);
// const fahrenheitTemperature = Math.round(
// (kelvinTemperature - 273.15) * 1.8 + 32
// );
// state.temp = fahrenheitTemperature;
// tempValue.innerText = `${state.temp + '\u00B0F'}`;
// tempColorAndLandscape();
// })
// .catch((error) => {
// console.log('error in finding temperature!', error);
// });
// };
const getWeather = () => {
//let latitude, longitude;
axios
.get('http://127.0.0.1:5000/location', {
params: {
q: state.city,
},
})
.then((response) => {
const latitude = response.data[0].lat;
const longitude = response.data[0].lon;
getTempForLocation(latitude, longitude);
})
.catch((error) => {
console.log('error in finding location!');
});
};
const getTempForLocation = (latitude, longitude) => {
axios
.get('http://127.0.0.1:5000/weather', {
params: {
lat: latitude,
lon: longitude,
},
})
.then((response) => {
// console.log(response.data);
const kelvinTemperature = response.data.main.temp;
// console.log(kelvinTemperature);
const fahrenheitTemperature = Math.round(
(kelvinTemperature - 273.15) * 1.8 + 32
);
state.temp = fahrenheitTemperature;
tempValue.innerText = `${state.temp + '\u00B0F'}`;
tempColorAndLandscape();
})
.catch((error) => {
console.log('error in finding temperature!', error);
});
};


const allEventHandlers = () => {
const getRealTempBtn = document.getElementById('get-current-temp');
getRealTempBtn.addEventListener('click', getWeather);

const resetButton = document.getElementById('city-name-btn');
resetButton.addEventListener('click', resetCity);
const cityName = document.getElementById('city-name-input');
cityName.addEventListener('input', updateCity);

const increaseArrow = document.getElementById('tempUp');
increaseArrow.addEventListener('click', changeTemp);
increaseArrow.addEventListener('click', tempColorAndLandscape);
Comment on lines +134 to +135
Copy link

Choose a reason for hiding this comment

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

This works, but I recommend refactoring so that changeTemp calls tempColorAndLandscape rather than adding tempColorAndLandscape as a separate event listener. tempColorAndLandscape relies on the change to state.temp that happens in changeTemp, but adding it as a separate event listener implies that these are two completely separate actions, rather than connected.


const decreaseArrow = document.getElementById('tempDown');
decreaseArrow.addEventListener('click', changeTemp);
decreaseArrow.addEventListener('click', tempColorAndLandscape);

const changeCurrentSky = document.getElementById('skys');
changeCurrentSky.addEventListener('change', changeSky);
};

document.addEventListener('DOMContentLoaded', allEventHandlers);
102 changes: 102 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
header{
/* display: flex;
justify-content: flex-start; */

display: grid;
grid-template-rows: 1fr 1fr;
}

#city-name {
color: #ae78f0;
font-size: 150%;
font-weight: bold;
}

body{
font-family: 'Courier New', Courier, monospace;
color: #1e475b;
background-color: #bad0f1;

display: flex;
justify-content: center;
align-items: center;
}
.main-container{
display: grid;
grid-template-columns: 100px 300px 20px 300px 100px;
grid-template-rows: 50px 150px 20px 200px 50px;
}
.general-container{
color: #73a3bb;
background-color: #ffffff;
text-align: center;
border: 2px cornflowerblue;
border-style: dashed;
border-radius: 10px;
}
.temperature-container{
width: 300px;
height: 150px;
grid-column-start: 2;
grid-row-start: 2;
}

.city-container{
width: 300px;
height: 150px;
grid-row-start: 2;
grid-column-start: 4;
}

.landscape-container{
width: 620px;
height: 200px;
grid-row-start: 4;
grid-column-start: 2;
}

#tempUp{
padding: 0;
border: 0;
margin: 0;
font-size: 125%;
}

#tempUp:hover{
cursor: pointer;
}

#tempDown{
padding: 0;
border: 0;
margin: 0;
font-size: 125%;
}

#tempDown:hover{
cursor: pointer;
}

#get-current-temp{
color: whitesmoke;
background-color: #1e475b;
}

#et-current-temp:hover{
cursor: pointer;
}

#tempValue{
font-size: 200%;
font-weight: bold;
}

#city-name-btn{
color: whitesmoke;
background-color: #1e475b;
}

#city-name-btn{
cursor: pointer;
}