diff --git a/index.html b/index.html index 68b320b9a..a535757fd 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,57 @@ Weather Report + + - + +
+ +
+ +
70
+ + + +
+ +
+ + + + + +
+ + +
+

+ + + +
+ +
+
Garden's sky
+
πŸŒˆβ˜€β˜€β˜€β˜€πŸŒπŸŒπŸŒπŸŒβ˜€β˜€β˜€β˜€β˜€πŸŒˆ
+ +
+ + +
+
Garden's landscape
+
✨✨✨✨✨🌏🌏🌏🌏🌏 +
+
+ +
+ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..9038d482c 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,155 @@ + +const getLatAndLon = (city) => { + return axios + .get('http://127.0.0.1:5000/location', { + params: { + q: city, + }, + }) + .then((response) => { + console.log(response.data); + return { + lat: response.data[0].lat, + lon: response.data[0].lon, + }; + }) + .then((response)=>{ +console.log(response); +getWeatherKelvin(response.lat,response.lon) + }) + + .catch((error) => { + console.log('Error finding the latitude and longitude:', error.response); + }); +}; + +const getWeatherKelvin = (lat, lon) => { + return axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: lat, + lon: lon, + }, + }) + .then((response) => { + console.log(response); + return response.data.current.temp; + }) + .then((response)=>{ + console.log(response); + return Math.floor((response - 273.15) * 9/5 + 32) + }) + .then((response)=>{ + console.log(response); + state.temp=response + tempContainer.textContent=`${state.temp}`; + + }) + .catch((error) => { + console.log('Error finding the latitude and longitude:', error.response); + }); +}; +const saveCity=()=>{ + const cityName= document.getElementById('input').value; + state.city=cityName + console.log(state.city); + getLatAndLon(state.city); + getWeatherKelvin(lat,lon); + + + +} +const realTimeButton = document.getElementById('real-time-temp'); +realTimeButton.addEventListener('click', saveCity); + + +// buttons for tempreture up and down +let btnAdd = document.querySelector('#increment'); +let btnSubstract = document.querySelector('#decrement') +let tempContainer=document.querySelector('#tempContainer') + + +const increment = ()=>{state.temp+=1; + tempContainer.textContent=`${state.temp}`; + changeLandscape(); +} +const decrement = () =>{state.temp-=1; + tempContainer.textContent=`${state.temp}`; + changeLandscape(); +} + +btnAdd.addEventListener('click',increment ); +btnSubstract.addEventListener('click',decrement ); + + +// Update name of the city +const updateCityName = () => { + let cityName = document.querySelector('#citynam'); + let inputName= document.querySelector('#input').value; + state.city = inputName; + cityName.textContent = state.city; +}; +const cityNameInput = document.getElementById('input'); +cityNameInput.addEventListener('input', updateCityName); + +// Reset name of the city +const state={city:'Tehran', +temp:70} +const reset = () => { + const cityName = document.getElementById('input'); + cityName.value = 'Tehran'; + updateCityName(); +}; +const resetButton = document.getElementById('reset'); +resetButton.addEventListener('click', reset); + +// With updated sky change the garden's sky + +const changeSky = () => { + let selectedSky = document.getElementById('skys'); + let skyOption = selectedSky.options[selectedSky.selectedIndex].text; + + let skyContainer=document.getElementById('garden-sky') + let currentSky ='πŸŒˆβ˜€β˜€β˜€β˜€πŸŒπŸŒπŸŒπŸŒβ˜€β˜€β˜€β˜€β˜€πŸŒˆ' + if (skyOption === 'Sunny') { + currentSky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + } else if (skyOption === 'Cloudy') { + currentSky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + } else if (skyOption === 'Rainy') { + currentSky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + } else if (skyOption === 'Snowy') { + currentSky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + } + skyContainer.textContent = currentSky; +}; +const changeUpSky = document.getElementById('skys'); +changeUpSky.addEventListener('change', changeSky); + +// With updated temp change the garden's landscape + +const changeLandscape = () => { + temp=state.temp + let tempContainer=document.getElementById('tempContainer') + let landscapeContainer=document.getElementById('ground') + let currentLandscape ='✨✨✨✨✨🌏🌏🌏🌏🌏' + if (temp>80) { + currentLandscape = "🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚"; + tempContainer.style.backgroundColor = 'red'; + } else if (temp>=70) { + currentLandscape = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷" + tempContainer.style.backgroundColor = 'orange'; + } else if (temp>=60) { + currentLandscape = "🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ" + tempContainer.style.backgroundColor = 'yellow'; + } else if (temp<=59) { + currentLandscape = "πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²" + tempContainer.style.backgroundColor = 'green'; + } + landscapeContainer.textContent = currentLandscape; +}; +const changeGround = document.getElementById('ground'); +changeGround.addEventListener('change', changeSky); + + + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..d620ef20e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,54 @@ +* {background-color:cornsilk ; +font-size: large;} + +.container { + display: flex; + flex-wrap: wrap; + } + + .box { + height: 50vh; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 20%; + min-width: 300px; + border-radius: 10%; + /* padding:70 px 0; */ + text-align: center; + overflow-x: auto; + border: 1px solid saddlebrown; + box-sizing: border-box; + background-color: salmon; + + } + + +.header{margin:25%; + background-color: grey; + padding: 2%; + } + + +button{margin: 20%; + padding: 10px; +} + + +/* #tempreture{background-color: aquamarine; +} + +#garden-sky{background-color: yellow; +} + +#garden-landscape{background-color: blue;} + +#city{background-color: violet;} + +#sky{background-color: bisque;} */ + +img{ + display:block; + margin:auto; + height: 100%; +} +