apna-college · Ashu-code09 · Jan 24, 2026
diff --git a/Ashutosh Kumar/README.md 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
diff --git a/Ashutosh Kumar/app.js 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!!");
+
+    }
+}
diff --git a/Ashutosh Kumar/index.html b/Ashutosh Kumar/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather and Air quality Checker</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.13.2/dist/axios.min.js"></script>
+    <div>
+    <h1 id="heading">Temperature and air quality checker</h1>
+    <h2 id="sub_heading">Check the current temperature and air quality of any city</h2>
+
+    <div class="container">
+
+        <input type="text" placeholder="City name" id="input">
+        <button id="btn">Go</button>
+        <div class="temp info">
+            <!-- <h2 class="info_heading">Temperature</h2>
+            <p class="data">25 &#8451</p> -->
+        </div>
+        <div class="aqi info">
+            <!-- <h2 class="info_heading">AQI</h2>
+            <p>PM2.5 = 70</p>
+            <p>PM2.5 = 70</p> -->
+        </div>
+        <!-- <button id="clear_btn">Clear</button> -->
+    </div>
+</div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Ashutosh Kumar/style.css 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;
+}