今天來分享一下之前看 Youtube 做的小小 api 串接練習，
影片在此，
用來串接的網站是這個，
這個網址會提供你一些關於數字的小知識。
主要是拿來做筆記，
所以就不會有講解～
提供給懶得花時間看影片的人參考一下我寫的，
但是影片中有另外用 fetch，我就沒有寫啦～
還是希望大家可以去看看影片。

HTML

<div class="container">
  <div class="title">
    <h1>Number Facts</h1>
    <p>Enter a number, get a random fact.</p>
    <input id="fact" type="number" placeholder="Enter any number">
  </div>
  <div class="content">
    <h2>Nummber Fact</h2>
    <p class="text"></p>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  line-height: 1;
}

body {
  background: linear-gradient(139deg, rgba(0, 0, 0, .3) 40%, transparent 100%), url(https://images.unsplash.com/photo-1590019012497-b44f1aaa40d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80) no-repeat center center/cover;
  height: 100vh;
  padding: 150px 0;
}

.container {
  width: 100%;
  max-width: 600px;
  background-color: rgba(180, 180, 180, 0.2);
  backdrop-filter: blur(10px);
  margin: auto;
  border-radius: 10px;
}

h1,
h2,
p {
  color: #fff;
}

.title {
  padding: 30px 20px;
}

.title h1 {
  margin-bottom: .3em;
}

.title p {
  margin-bottom: .8em;
}

input {
  font-size: 20px;
  width: 100%;
  border: none;
  padding: 10px;
  border-radius: 5px;
}

input:focus {
  outline: 0;
}

.content {
  display: none;
  padding: 0px 20px 30px;
}

.content h2 {
  margin-bottom: .5em;
}

.content p {
  line-height: 1.4;
}

JS

const input = document.querySelector('input');
const content = document.querySelector('.content');
const text = document.querySelector('.text');

input.addEventListener('input', getAjax);

function getAjax() {
  const number = input.value;
  if (number !== '') {
    let xhr = new XMLHttpRequest();
    xhr.open('GET',`http://numbersapi.com/${number}`);
    xhr.onload = function () {
      if (this.status == 200) {
        content.style.display = 'block';
        text.textContent = this.responseText;
      }
    }
    xhr.send();
  }
}

今天就先到這裡啦～
我們明天見。