diff --git a/Web Dev Projects_or_Portfolios/weatherApp/index.html b/Web Dev Projects_or_Portfolios/weatherApp/index.html new file mode 100644 index 000000000..4f4dd75fe --- /dev/null +++ b/Web Dev Projects_or_Portfolios/weatherApp/index.html @@ -0,0 +1,34 @@ + + + + + + Weather + + + + +
+

Weather

+
+
+ +
+
+

Search

+
+
+

+
+
+

+
+
+

+
+
+ +
+ + + diff --git a/Web Dev Projects_or_Portfolios/weatherApp/readme.md b/Web Dev Projects_or_Portfolios/weatherApp/readme.md new file mode 100644 index 000000000..9c4ae26a2 --- /dev/null +++ b/Web Dev Projects_or_Portfolios/weatherApp/readme.md @@ -0,0 +1,6 @@ +# This is a Weather Application project. + +**This Project is Built using :** + * HTML + * CSS + * Javascript diff --git a/Web Dev Projects_or_Portfolios/weatherApp/script.js b/Web Dev Projects_or_Portfolios/weatherApp/script.js new file mode 100644 index 000000000..4f2788b55 --- /dev/null +++ b/Web Dev Projects_or_Portfolios/weatherApp/script.js @@ -0,0 +1,62 @@ +const input=document.querySelector("input"); +const search=document.querySelector(".third"); +const show=document.querySelector(".show"); +const h1temp=document.querySelector("#temp"); +let inputValue = document.querySelector("#myInput"); +const h1location=document.querySelector("#location"); +const description=document.querySelector('#description'); +const icon=document.querySelector('#image'); +const error=document.querySelector("#error"); + + +/* Calling the function after window Load*/ + +const gePosition=function(){ + return new Promise (function(resolve,reject){ + navigator.geolocation.getCurrentPosition(resolve,reject); + }); +}; + + +const whereamI= async function() { + try{ + const position=await gePosition(); + console.log(position); + const {latitude,longitude} = position.coords; + const resGeo=await fetch(`https://geocode.xyz/${latitude},${longitude}?geoit=json`); + const dataGeo=await resGeo.json(); + console.log(dataGeo); + console.log(dataGeo.city); + getInformation(dataGeo.city); + } + catch{ + alert("User Denied Location"); + } + } +whereamI(); +// +/* Calling the function after search button click*/ +search.addEventListener("click",async function(){ + try{ + await getInformation(inputValue.value); + } + catch(erro){ + alert("Whoops! No City Was Found"); + } +}); + + +/* Start of getInformation of weather function */ +async function getInformation(arg){ + + const response=await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${arg}&units=metric&appid=6a96533f811b24ebc00ff8c9d665e0b4`); + const data=await response.json(); + //console.log(data); + h1temp.innerHTML=data.main.temp+'°C'; + h1location.innerHTML=data.name; + description.innerHTML= data.weather[0].main; + icon.src="https://openweathermap.org/img/w/"+data.weather[0].icon+".png"; + inputValue.value=""; +} +/* End of getInformation of weather function */ + diff --git a/Web Dev Projects_or_Portfolios/weatherApp/style.css b/Web Dev Projects_or_Portfolios/weatherApp/style.css new file mode 100644 index 000000000..1e3ac0706 --- /dev/null +++ b/Web Dev Projects_or_Portfolios/weatherApp/style.css @@ -0,0 +1,129 @@ +body{ + background-color:#343434; +} + +.first{ + width: 200px; + height: 90px; + background-color:#343434; + box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959; + border-radius: 50px; + position: absolute; + top: 10%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.second{ + width: 320px; + height: 90px; + background-color:#343434; + box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959; + border-radius: 50px; + position: absolute; + top: 22%; + left: 50%; + transform: translate(-50%, -50%); +} +.third{ + width: 200px; + height: 100px; + background-color:#2fb315; + box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959; + border-radius: 50px; + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} +.fourth{ + width: 320px; + height: 100px; + background-color:#084752; + box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959; + border-radius: 50px; + position: absolute; + top: 53%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} +.five{ + width: 200px; + height: 100px; + background-color:#343434; + box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959; + border-radius: 50px; + position: absolute; + top: 65%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} +.six{ + width: 200px; + height: 100px; + background-color:#869215; + box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959; + border-radius: 50px; + position: absolute; + top: 78%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} +.seven{ + width: 200px; + height: 100px; + background-color:#862546; + box-shadow: 5px 5px 10px #191b1b, -5px -5px 10px #595959; + border-radius: 50px; + position: absolute; + top: 91%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + #heading{ + color: rgb(255, 255, 255); + font-size: 40px; +} + + +#myInput{ + margin-left: 33px; + margin-top: 23px; + height: 40px; + width:250px; + border-radius: 25px; + font-size: 20px; +} + +#search{ + color: white; + font-size: 40px; +} + +#location{ + color: rgb(255, 255, 255); + font-size: 40px; +} +#temp{ + color: rgb(255, 255, 255); + font-size: 40px; +} +#description{ + color: rgb(255, 255, 255); + font-size: 40px; +} +#image{ + color: rgb(255, 255, 255); + height: 90px; +} +#error{ + color: rgb(255, 255, 255); + padding-left: 80px; + padding-top: 20px; +} \ No newline at end of file