Harjutus 6. API päring

Avame vebisait https://codesandbox.io/

Loome HTML + CSS

Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Request bacon</h1>
    <button type-"button" onclick="loadDoc()">Request bacon</button>
    <p id="demo"></p>

    <script>
      function loadDoc(){
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
          document.getElementById("demo").innerHTML = this.responseText;
        };
        xhttp.open("GET", "https://baconipsum.com/api/?type=all-meat");
        xhttp.send();
      }
    </script>

    <button type-"button" onclick="Catfacts()">Сat facts</button>
    <p id="demo"></p>

    <script>
      function Catfacts(){
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
          document.getElementById("demo").innerHTML = this.responseText;
        };
        xhttp.open("GET", "https://catfact.ninja/fact");
        xhttp.send();
      }
    </script>
  </body>
</html>

styles.css

/* Reset default styles for consistency */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styles */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  color: #333;
  padding: 20px;
}

/* Header styling */
h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #444;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

/* Button styles */
button {
  background-color: #ff6347;
  border: none;
  color: white;
  font-size: 1.2rem;
  padding: 15px 30px;
  margin: 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Button hover effect */
button:hover {
  background-color: #e5533b;
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* Button active effect */
button:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Text container styling */
#demo {
  font-size: 1.15rem;
  color: #555;
  margin-top: 25px;
  max-width: 600px;
  text-align: center;
  line-height: 1.6;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  animation: fadeIn 1s forwards;
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Adding a subtle box-shadow on body content */
body > div {
  padding: 30px;
  background-color: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

/* Responsive design */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  button {
    font-size: 1rem;
    padding: 12px 25px;
  }

  #demo {
    font-size: 1rem;
    padding: 15px;
  }
}

H6 Kokkuvõte:

xhttp.open(“GET”, url) – avab uus GTTP päring.
xttp.send() – saadab päringu serverisse.
XMLHTttpRequest – AJAX päring mis saadab API aadressile päringu