diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..2141953f Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100644 index 00000000..a3be5606 --- /dev/null +++ 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 new file mode 100644 index 00000000..c7f0c479 Binary files /dev/null and b/background.jpg differ diff --git a/index.html b/index.html index e69de29b..4f138571 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + Weather forecast + + + +
+

What's the weather like in...

+
+
+
+ +
+ +
+
+
+
+ + + diff --git a/main.js b/main.js index e69de29b..5feba38d 100644 --- 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 index e69de29b..c87cf53c 100644 --- 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; +} \ No newline at end of file