cdv-poznan · kasiasolinska · May 22, 2022 · May 24, 2022 · May 24, 2022 · May 25, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# javascript-project-2022
+
+dostępny pod adresem https://kasiasolinska.github.io/javascript-project-2022/
+
+Projekt - wyszukiwarka tekstów piosenek 
+
+w toku...
+
+niestety nie udało mi się połączyć z api :(
diff --git a/background.jpg b/background.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weather forecast</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>What's the weather like in...</h1>
+    </header>
+    <section>
+      <form>
+        <input type="text" placeholder="Get Weather" />
+      </form>
+
+      <div class="wrapper">
+        <div class="details"></div>
+      </div>
+    </section>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,23 @@
+const apiKey = "0bd56a60b494c2b8ef7759890948e62e";
+const apiUrl = "http://api.weatherstack.com/";
+
+const form = document.querySelector("form");
+const weatherDetails = document.querySelector(".details");
+
+//event listener
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+
+  const location = document.querySelector("input").value;
+  getWeather(location);
+});
+
+async function getWeather(location) {
+  const response = await fetch(
+    `${apiUrl}current?access_key=${apiKey}&query=${location}`
+  );
+
+  const data = await response.json();
+  console.log(data);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,18 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  min-height: 100vh;
+  background-image: url("background.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color:ghostwhite;
+}