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

Sea Turtles - Shannon Bellemore #88

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

Sea Turtles - Shannon Bellemore #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
93b94c4
wave 1
eggoweggo Jun 18, 2022
00cc7cc
wave 2
eggoweggo Jun 20, 2022
cbf5541
wave 3
eggoweggo Jun 21, 2022
929a202
wave 4
eggoweggo Jun 21, 2022
cbe3375
wave 5
eggoweggo Jun 21, 2022
e8cb4d8
wave 6
eggoweggo Jun 22, 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
49 changes: 48 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,55 @@
<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 class="header">
Copy link

Choose a reason for hiding this comment

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

Your html page is clean and well organized! I see that you are using span and div tags for a few things. I want to share a resource that walks through when to use particular tags:
html5_element_flowchart

<h1>Weather Report</h1><br>
<span>for the city of
<span id="city-name">
Anchorage
</span>
</span>
</header>
<main class="main-container">

<section class ="general-container temperature-container">
<h2>Temperature (F):</h2>
<div>
<button id="increase-temp-button">⬆️</button>
<span id="temp-number">49</span>
<button id="decrease-temp-button">⬇️</button>
</div>
<div>
<button id="real-temp-button">Realtime Temperature!</button>
</div>
</section>

<section class="general-container city-container">
<h2>Enter City Name:</h2>
<input type="text" id="city-input" value="Anchorage"><br>
<br>
<button id="reset-city-button">Reset City</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="ground-garden">🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲</div>
</div>
</section>

</main>
<script src="src/index.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
</body>
</html>
146 changes: 146 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
"use strict";


const state = {
Copy link

Choose a reason for hiding this comment

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

👍🏽

tempDegrees: 50,
city: 'Anchorage',
sky: 'snowy',
};

// increase temperature
const increaseTemp = () => {
state.tempDegrees += 1;
const tempContainer = document.getElementById('temp-number');
tempContainer.textContent = state.tempDegrees;
changesByTemp();
};

// decrease temperature
const decreaseTemp = () => {
state.tempDegrees -= 1;
const tempContainer = document.getElementById('temp-number');
tempContainer.textContent = state.tempDegrees;
changesByTemp();
};

// change temperature display color & ground weather garden by temperature number
const changesByTemp = () => {
const tempContainer = document.getElementById('temp-number');
const gardenContainer = document.getElementById('ground-garden')
tempContainer.textContent = state.tempDegrees;
if(state.tempDegrees >= 80) {
tempContainer.style.color = '#d04123';
gardenContainer.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'
} else if(state.tempDegrees >= 70 && state.tempDegrees <= 79) {
tempContainer.style.color = '#f29f4e';
gardenContainer.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'
} else if(state.tempDegrees >= 60 && state.tempDegrees <= 69) {
tempContainer.style.color = '#f1d42d';
gardenContainer.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'
} else if(state.tempDegrees >= 50 && state.tempDegrees <= 59) {
tempContainer.style.color = '#7caf4e';
gardenContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'
} else if(state.tempDegrees <= 49) {
tempContainer.style.color = '#73a3bb';
gardenContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'
}
};

// changes the sky element
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 = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨'
}
};

// changes city name according to text input
const changeCityName = () => {
const cityInput = document.getElementById('city-input').value;
const currentCityName = document.getElementById('city-name');
currentCityName.textContent = cityInput;
state.city = cityInput;
};

// reset city name to the default
const resetCityName = () => {
const cityContainer = document.getElementById('city-input');
const currentCityName = document.getElementById('city-name');
state.city = 'Anchorage';
cityContainer.value = state.city;
currentCityName.textContent = state.city;
};

// converts given degrees kelvin to fahrenheit
const convertTemp = (degreesKelvin) => {
let degreesFahrenheit = Math.round(1.8*(degreesKelvin -273) + 32);
return degreesFahrenheit;
};

// gets latitiude and longitude for current city inputted
const getLatitudeAndLongitude = () => {
Copy link

Choose a reason for hiding this comment

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

👍🏽

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

// gets current real time temperature using latitude and longitude
const getTemperature = (latitude, longitude) => {
axios
.get('http://127.0.0.1:5000/weather', {
params: {
lat: latitude,
lon: longitude,
},
})
.then((response) => {
const degreesKelvin = response.data.current.temp;
let currentTemp = convertTemp(degreesKelvin);
state.tempDegrees = currentTemp;
changesByTemp();
})
.catch((error) => {
console.log('error with getting temp!', error.response.data);
});
}

const registerEventHandlers = () => {
Copy link

Choose a reason for hiding this comment

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

👍🏽

const increaseTempButton = document.querySelector('#increase-temp-button');
increaseTempButton.addEventListener('click', increaseTemp);

const decreaseTempButton = document.querySelector('#decrease-temp-button');
decreaseTempButton.addEventListener('click', decreaseTemp);

const cityInput = document.getElementById('city-input');
cityInput.addEventListener('input', changeCityName);

const getRealTemp = document.getElementById('real-temp-button');
getRealTemp.addEventListener('click', getLatitudeAndLongitude);

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

const resetCity = document.getElementById('reset-city-button');
resetCity.addEventListener('click', resetCityName);
};

document.addEventListener("DOMContentLoaded", registerEventHandlers);
104 changes: 104 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
header{
/* display: flex;
justify-content: flex-start; */
Comment on lines +2 to +3
Copy link

Choose a reason for hiding this comment

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

you can remove this

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;
}

#increase-temp-button{
padding: 0;
border: 0;
margin: 0;
font-size: 125%;
}

#increase-temp-button:hover{
cursor: pointer;
}

#decrease-temp-button{
padding: 0;
border: 0;
margin: 0;
font-size: 125%;
}

#real-temp-button{
color: whitesmoke;
background-color: #1e475b;
}

#real-temp-button:hover{
cursor: pointer;
}

#decrease-temp-button:hover{
cursor: pointer;
}

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

#reset-city-button{
color: whitesmoke;
background-color: #1e475b;
}

#reset-city-button:hover{
cursor: pointer;
}