diff --git a/assets/cloudy.jpg b/assets/cloudy.jpg new file mode 100644 index 000000000..63a21ee4e Binary files /dev/null and b/assets/cloudy.jpg differ diff --git a/assets/rainy.jpg b/assets/rainy.jpg new file mode 100644 index 000000000..2a38c358a Binary files /dev/null and b/assets/rainy.jpg differ diff --git a/assets/snowy.jpg b/assets/snowy.jpg new file mode 100644 index 000000000..4824adec7 Binary files /dev/null and b/assets/snowy.jpg differ diff --git a/assets/sunny.jpg b/assets/sunny.jpg new file mode 100644 index 000000000..ec687bbc1 Binary files /dev/null and b/assets/sunny.jpg differ diff --git a/index.html b/index.html index 68b320b9a..4c3313e65 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,43 @@ - - - - + + + + + Weather Report - - - - - \ No newline at end of file + + + +
+ + + City
+ + +

+ + +
+
50
+
F°
+
+
Sioux City, IA
+
+ +
+
🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲
+
+ + + + diff --git a/src/index.js b/src/index.js index e69de29bb..cf25ffbfd 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,114 @@ +let total_element = document.getElementById('Total'); + +function Add () { + let total_value = parseInt(total_element.innerHTML); + total_element.innerHTML = total_value + 1; + let myTemp = total_value + 1; + changeLandscape(myTemp); +}; + + +function Subtract () { + let total_value = parseInt(total_element.innerHTML); + if (total_value == 0) return; + total_element.innerHTML = total_value - 1; + let myTemp = total_value - 1; + changeLandscape(myTemp); +}; + +function changeLandscape (temp) { + if (temp >=80) { + document.getElementById('landscape').innerHTML = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'; + } else if (temp >= 70) { + document.getElementById('landscape').innerHTML = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (temp >= 60) { + document.getElementById('landscape').innerHTML = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'; + } else { + document.getElementById('landscape').innerHTML = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } +}; + +function changeCityName () { + let cityInput = document.getElementById('city').value; + document.getElementById('displayCity').innerHTML = cityInput; + return cityInput; +}; + + +document.getElementById('Add').addEventListener('click', Add); + +document.getElementById('Subtract').addEventListener('click', Subtract); + +document.getElementById('city').addEventListener('input', changeCityName); + + +window.addEventListener("load", cargaPagina); +function cargaPagina() { + var btn = document.getElementById("button1").addEventListener("click", cambiaValores); +}; + +function cambiaValores() { + var inputName = document.getElementById("city"); + inputName.value = "Sioux City, IA"; + document.getElementById('displayCity').innerHTML = "Sioux City, IA"; +}; + +var x = document.getElementById("myText"); + + +function findCityLatLon () { + let city = changeCityName(); + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: city + } + }) + .then((response) => { + console.log(response.data); + let lat = response.data[0].lat; + let lon = response.data[0].lon; + getTempWithLocation(lat, lon); + }) + .catch((error) => { + console.log('Error given back by the API response:', error); + }); +}; + +function getTempWithLocation (lat, lon) { + axios + .get('http://127.0.0.1:5000/weather', { + params: {lat: lat, lon: lon + } + }) + .then((response) => { + console.log(response.data); + let kelvin = response.data['main']['temp']; + convertToFahrenheit(kelvin); + }) + .catch((error) => { + console.log('Error given back by the API response:', error); + }); +}; + +function convertToFahrenheit (kelvin) { + let fahrenheit = Math.round((kelvin * (9/5)) - 459.67); + document.getElementById('Total').innerHTML = fahrenheit; + changeLandscape(fahrenheit); +}; + +function changeSky () { + let skyDisplay = document.getElementById('sky').value; + if (skyDisplay === 'sunny') { + document.body.style.backgroundImage = "url('assets/sunny.jpg')"; + } else if (skyDisplay === 'cloudy') { + document.body.style.backgroundImage = "url('assets/cloudy.jpg')"; + } else if (skyDisplay === 'rainy') { + document.body.style.backgroundImage = "url('assets/rainy.jpg')"; + } else if (skyDisplay === 'snowy') { + document.body.style.backgroundImage = "url('assets/snowy.jpg')"; + } +}; +document.getElementById('getDisplayCityTemp').addEventListener('click', findCityLatLon); + +document.getElementById('sky').addEventListener('change', changeSky); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..adff08a2b 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,74 @@ +body { + background-image: url('https://images.pexels.com/photos/10920428/pexels-photo-10920428.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); + background-size: cover; + font-family: "Cerebri Sans", Helvetica, Arial, sans-serif; +} + +.container { + background-color: #ffffff10; + backdrop-filter: blur(10px); + border: 3px solid #edc548; + border-radius: 75px; + display: block; + max-width: fit-content; + max-height: fit-content; + margin: 0 auto; + padding: 50px; +} + +.search-label { + margin-left: 225px; + font-size: 18px; +} + +.current-temp { + margin-left: 20px; +} +.current-city { + font-size: 35px; + text-align: center; +} + +.flex-container { + display: flex; + justify-content: center; + + } + +#displayCity { + font-size: 30px; + text-align: center; + +} + +#displayWeather { + display: flex; + columns: 2; + justify-content: center; + margin: 10px; +} + +#dropDownMenu { + text-align: right; + margin: 10px; +} + +#getDisplayCityTemp { + background-color: #edc548; + border: none; + border-radius: 10px; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); + color: gray; + font-size: 15px; + font-weight: bolder; + margin: 10px; + padding: 10px 15px; + transition: all 200ms ease-in-out; + text-decoration: none; +} + +#Total { + font-size: 75px; + font-weight: bold; + text-align: center; +} \ No newline at end of file