diff --git a/app.js b/app.js
new file mode 100644
index 0000000..51fd7ae
--- /dev/null
+++ b/app.js
@@ -0,0 +1,32 @@
+const apiKey = '298f3c5d10d141d5843153415230404';
+const button = document.getElementById('submitButton');
+const input = document.getElementById('textInput')
+const weatherImg = document.getElementById('weatherImg');
+const cityNameDisplay = document.getElementById('cityName');
+const weatherTemperature = document.getElementById('temp');
+const weatherCondition = document.getElementById('weatherText');
+
+button.addEventListener('click', async () => {
+ let cityNameInput = input.value;
+ let response = await axios.get(
+ `http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${cityNameInput}&days=1&aqi=no&alerts=no`
+)
+ let cityName = response.data.location.name
+ let countryName = response.data.location.country
+
+ let todaysWeather = response.data.current.temp_f
+ let weatherText = response.data.current.condition.text
+ let weatherIcon = response.data.current.condition.icon
+
+ weatherCondition.innerHTML = weatherText;
+ weatherImg.src = weatherIcon;
+
+ let cityAndCountryName = `${cityName} , ${countryName}`;
+ cityNameDisplay.innerHTML = cityAndCountryName;
+ weatherTemperature.innerHTML = `${todaysWeather}ºF`
+
+ console.log(countryName)
+ console.log(response)
+ console.log(cityName)
+ console.log(todaysWeather)
+});
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bd245de
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+ Mini Weather App
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..807f3d4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,47 @@
+*{
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+}
+input{
+ padding: 5px;
+ background-color: aliceblue;
+ color: rgb(128, 128, 128);
+}
+button{
+ border-radius: 5px 5px 5px 5px;
+ background-image: linear-gradient( 135deg, #72EDF2 10%, #a0e551 100%);
+ border: solid white;
+ height: 30px;
+ text-align: center;
+ animation: color-change 3s infinite;
+}
+
+@keyframes color-change{
+ 0% { color: rgb(0, 255, 51); }
+ 50% { color: rgb(0, 136, 255); }
+ 100% { color: rgb(229, 255, 0); }
+}
+
+#cityName{
+ margin-top: 10%;
+}
+#weatherText{
+ margin-top: 10%;
+}
+#weatherContainer{
+ margin-top: 5%;
+}
+div {
+ color: white;
+ margin: auto;
+ width: 50%;
+ padding: 10px;
+ width: 500px;
+ height: 500px;
+ text-align: center;
+ background-image: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%);
+ border-radius: 5% 5% 5% 5%;
+}
+img{
+ height: 100px;
+}
\ No newline at end of file