diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/config.js b/config.js
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..38508e7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Weather app
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
index dc1968f..4fe4092 100644
--- a/style.css
+++ b/style.css
@@ -1,63 +1,41 @@
-.grid-container {
-
- display: grid;
- grid-template-columns: 50% 50%;
- background-color: white;
- padding: 5px;
- height: 100%;
- }
- .grid-item1{
-
- background-color: royalblue;
- display: grid;
- }
- .grid-item{
-
- background-color: lightgrey;
- display: grid;
- }
- h1, h3{
- color: white;
- font-weight: bolder;
- margin-top: 25%;
- }
- span{
- color: black;
- font-weight: bolder;
- }
- p{
- color: white;
-
- }
- li{
- color: white;
-
- }
- .bdy{
- margin-left: 20%;
- }
- .dd{
- margin-left: 25%;
- margin-top: 10%;
- }
- #pp{
- color: black;
- }
- #show{
- color: black;
- font-size: xx-large;
- }
- #show1,#show3{
- color: black;
- font-size: medium;
- }
- #show2{
- color: black;
- font-size: xx-large;
- }
- #tt{
- margin-left: 20%;
- margin-top: 20%;
- }
-
-
\ No newline at end of file
+body {
+ background-color: #6b029c;
+ text-align: center;
+ color: white;
+ font-size: 3rem;
+}
+input {
+ font-size: 3rem;
+ margin-top: 10%;
+ border-width: 0px;
+ border-top-left-radius: 2rem;
+ border-bottom-right-radius: 2rem;
+ padding: 10px;
+ background-color: #9e4ec2;
+ border-bottom: 3px solid #dc8a04;
+}
+.city {
+ margin-top: 2%;
+}
+
+.date {
+ font-size: 1.5rem;
+}
+.temp {
+ margin-top: 1%;
+ font-size: 8rem;
+ margin-bottom: 1%;
+ text-shadow: 0px 5px black;
+ font-weight: 900;
+}
+.weather {
+ font-size: 2rem;
+ font-style: italic;
+ font-weight: 900;
+ text-shadow: 0px 3px black;
+}
+.hi-low {
+ font-size: 1.5rem;
+ font-weight: 900;
+ text-shadow: 0px 3px black;
+}
diff --git a/weather.html b/weather.html
deleted file mode 100644
index bb2d461..0000000
--- a/weather.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
-
- Weather app
-
-
-
-
-
-
-
diff --git a/weather.js b/weather.js
index c5e0068..913e0d8 100644
--- a/weather.js
+++ b/weather.js
@@ -1 +1,54 @@
//Complete the Weather API Backend part using openweathermap api
+
+function apidata() {
+ var weekDays = [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ ];
+ var month = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December",
+ ];
+ var today = new Date();
+ var input = document.querySelector("#input").value;
+ const url = `https://api.openweathermap.org/data/2.5/weather?q=${input}&units=metric&appid=6a2547232fc58c844e7d59f7243fcd94`;
+ fetch(url)
+ .then((response) => response.json())
+ .then((data) => {
+ var temp = data.main.temp;
+ var temp_min = data.main.temp_min;
+ var temp_max = data.main.temp_max;
+ var country = data.sys.country;
+ var weather_status = data.weather[0].main;
+ var city = data.name;
+ console.log(temp, temp_min, temp_max, city, country, weather_status);
+ document.querySelector(".city").innerHTML = city + ", " + country;
+ document.querySelector(".date").innerHTML =
+ weekDays[today.getDay()] +
+ " " +
+ today.getDate() +
+ " " +
+ month[today.getMonth()] +
+ " " +
+ today.getFullYear();
+ document.querySelector(".temp").innerHTML = temp + "°c";
+ document.querySelector(".weather").innerHTML = weather_status
+ document.querySelector(".hi-low").innerHTML =
+ temp_min + "°c /" + temp_max + "°c";
+ });
+}