diff --git a/Ashutosh Kumar/README.md b/Ashutosh Kumar/README.md new file mode 100644 index 00000000..1dc7ec5d --- /dev/null +++ b/Ashutosh Kumar/README.md @@ -0,0 +1,11 @@ +# Temperature and air quality Checker + +## This web application is designed to tell the current temperature and air quality of the city entered by the user. + +## Technologies used + 1.HTML + 2.CSS + 3.JavaScript +## API used + +https://api.weatherstack.com \ No newline at end of file diff --git a/Ashutosh Kumar/app.js b/Ashutosh Kumar/app.js new file mode 100644 index 00000000..b189d2be --- /dev/null +++ b/Ashutosh Kumar/app.js @@ -0,0 +1,80 @@ +let btn = document.querySelector("#btn"); +let url = "https://api.weatherstack.com/current?access_key=5e18e53dcf9fa00f1b13883ae4e82a8c&query="; +let input = document.querySelector("#input"); +btn.addEventListener("click", async () => { + let city = input.value; + if(city == ""){ + alert("Please! Enter a valid value"); + return; + } + let data = await getData(city); + printData(data); + + // let clr_btn = document.createElement("button"); + // let cont = document.querySelector(".container"); + // clr_btn.setAttribute("id","clear_btn"); + // clr_btn.innerText = "Clear"; + // cont.appendChild(clr_btn); + + // clr_btn +}) + +function printData(data){ + let temp_cont = document.querySelector(".temp"); + let aqi_cont = document.querySelector(".aqi"); + temp_cont.innerHTML = ""; + aqi_cont.innerHTML = ""; + let h2_temp = document.createElement("h2"); + h2_temp.innerText = "Temperature"; + h2_temp.classList.add("info_heading"); + let h2_aqi = document.createElement("h2"); + h2_aqi.innerText = "Aqi"; + h2_aqi.classList.add("info_heading"); + temp_cont.appendChild(h2_temp); + aqi_cont.appendChild(h2_aqi); + + let temp_data = document.createElement("p"); + temp_data.classList.add("data"); + temp_data.innerText = data.temperature; + temp_cont.appendChild(temp_data); + + let aqi_data2 = document.createElement("p"); + aqi_data2.classList.add("data"); + aqi_data2.innerText = "pm10 = "+data.air_quality.pm10; + aqi_cont.appendChild(aqi_data2); + + let aqi_data3 = document.createElement("p"); + aqi_data3.classList.add("data"); + aqi_data3.innerText = "co = "+data.air_quality.co; + aqi_cont.appendChild(aqi_data3); + + let aqi_data4 = document.createElement("p"); + aqi_data4.classList.add("data"); + aqi_data4.innerText = "no2 = "+data.air_quality.no2; + aqi_cont.appendChild(aqi_data4); + + + if(temp_cont.innerHTML != ""){ + let clr_btn = document.createElement("button"); + let cont = document.querySelector(".container"); + clr_btn.setAttribute("id","clear_btn"); + clr_btn.innerText = "Clear"; + cont.appendChild(clr_btn); + clr_btn.addEventListener("click" , () => { + temp_cont.innerHTML = ""; + aqi_cont.innerHTML = ""; + input.value = ""; + clr_btn.remove(); + }) + } +} + +async function getData(city) { + try{ + let res = await axios.get(url+city) + return res.data.current; + } catch(err) { + alert("Data not found!!"); + + } +} \ No newline at end of file diff --git a/Ashutosh Kumar/index.html b/Ashutosh Kumar/index.html new file mode 100644 index 00000000..d579964c --- /dev/null +++ b/Ashutosh Kumar/index.html @@ -0,0 +1,33 @@ + + + + + + Weather and Air quality Checker + + + + +
+

Temperature and air quality checker

+

Check the current temperature and air quality of any city

+ +
+ + + +
+ +
+
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/Ashutosh Kumar/style.css b/Ashutosh Kumar/style.css new file mode 100644 index 00000000..958356af --- /dev/null +++ b/Ashutosh Kumar/style.css @@ -0,0 +1,87 @@ +body{ + text-align: center; + background-color: #8affd0; + } + +#heading{ + background-color: #8affc4; + height: 4rem; + /* width: 500px; */ + display: flex; + align-items: center; + justify-content: center; + } +#sub_heading{ + margin: 20px; +} +#input{ + padding-left: 1.25rem; + margin: 20px 8px; + height: 50px; + width: 350px; + border-radius: 53px; + background-color: white; +} +.container{ + position: relative; + border: 5px solid black; + display: flex; + flex-wrap: wrap; + justify-content: start; + align-content: start; + height: 500px; + width: 500px; + padding: 20px; + margin: 5px auto; + border-radius: 20px; + background-color: #d08aff; + box-shadow: 10px 5px 30px black; +} +.info{ + height: 200px; + width: 200px; + padding: 12px; + border: 2px solid black; + display: flex; + flex-direction: column; + justify-content: start; + /* flex-wrap: wrap; */ + border-radius: 10%; + background-color: #ff8ab9; +} +.aqi{ + margin-left: 1.25rem; + overflow: auto; + +} +.temp{ + margin-right: 1.25rem; +} +.info_heading{ + /* margin-bottom: 2rem; */ + text-decoration: underline; +} +#btn{ + margin: 20px 8px; + height: 50px; + width: 90px; + background-color: #ffd08a; + border-radius: 20px; + cursor: pointer; +} +.data{ + font-size: 1.5rem; +} +#clear_btn{ + margin: 20px 8px; + height: 50px; + width: 90px; + + background-color: #ffd08a; + position: absolute; + bottom: 0.7rem; + right: 0.7rem; + /* right: 35rem; */ + border-radius: 20px; + cursor: pointer; +} \ No newline at end of file