Wordnik 是一個非營利團體推出的線上英文字典，提供使用者查詢英文單字的定義、同義字、反義字等的資訊。Wordnik 的 API 在 Programmable Web 上的字典分類 API 裡排行前幾名。

其實在尋找要使用哪一個字典 API 的時候，也是找得有點辛苦，Oxford Dictionary 的 API 我還沒搞懂怎麼使用、Cambridge Dictionary 的 API 只有試用免費 30 天、Longman Dictionary 的 API 已經不開放了、Merriam-Webster 的 API 回傳的是 XML……我當然也可以嘗試與 XML 合作，不過如果不是走投無路（？）先不考慮。

那麼，既然要使用 Wordnik 的 API ，先來註冊一個一般用戶的帳號。

然後到達 Wordnik 的 API 頁面，在右側的表格裡，填寫申請 API Key 的資料。

**過了幾天，**Wordnik 才悠悠的給了我一封信，裡面有個給出 API Key 的連結：

現在就來看看文件。
我決定要做一個非常簡易版的字典 APP，使用者可以填寫一個英文單字，然後 APP 會展示出關於那個單字的兩個釋義。

那麼，我們要找的就是 word 分類裡面的 Definition：

// API Request URL 
'GET', '/word.json/{word}/definitions'

在此 Request URL 裡面，唯一的必填參數是 URL 中間的 { word } 參數。其他參數的設定，可以去玩玩文件上附設的 API Tester:

（雖然我昨天改用了 Fetch API ，但今天還是回來用我比較熟悉的 XHR）
下面就先做一個基本的 XHR：

var apiKey = "5a1d59fba2c80d6e9a20b0c83da02b0a4c862a9668479c8f2";
var word = 'apple';

var url = 
  "https://api.wordnik.com/v4/word.json/"+ 
  word + 
  "/definitions" +
  "?useCanonical=true" +
  "&limit=5" +
  "&api_key=" + apiKey;   

function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response);
  };
  xhr.open("GET", url, true);
  xhr.send();
}

makeRequest();

得到的 Response ：

於是我們就可以來寫這個小小的字典 APP 了。
首先在 HTML 裡面放上一個表格，還有單字釋義會出現的區域：

// 表格
<form>
  <label for="submitword">Enter Word Here</label>
  <input id="submitword" type="text" name="name">
  <input type="submit" value="submit">
</form>

// 查詢標題
<h1 class="title">Meaning of <span class="qword"></span> </h1>
// 釋義
<p class="definition"></p>

接著來寫一點 Javascript ，監聽 <form> 的 submit 事件，然後取得 <input> 裡面使用者輸入的內容:

var form = document.querySelector('form');

form.addEventListener('submit',function(e){
  e.preventDefault();
  var input = e.target[0].value;
  console.log(input)
  e.target[0].value = '';

})

此時如果按下 submit，Console 裡面會出現

現在，為了產生呼叫 API 的 Request URL，我做了一個 function

function makeUrl(word){
  return "https://api.wordnik.com/v4/word.json/"+ word + "/definitions" +
  "?useCanonical=false" +
  "&limit=200" +
  "&api_key=" + apiKey;
} 

這樣一來，只要在呼叫前把 input 傳入 makeUrl 這個 function 裏，就可以把使用者輸入的單字放進 API Request URL 了。

完整 Code 如下：

var def = document.querySelector('.definition');
var qword = document.querySelector('.qword');
var url;
var form = document.querySelector('form');
var apiKey = "5a1d59fba2c80d6e9a20b0c83da02b0a4c862a9668479c8f2";

function makeUrl(word){
  return "https://api.wordnik.com/v4/word.json/"+ word + "/definitions" +
  "?useCanonical=false" +
  "&limit=200" +
  "&api_key=" + apiKey;     
} 
function makeRequest() {
  xhr = new XMLHttpRequest();
  
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    
    // 把查詢結果放進標題
    qword.innerHTML = response[0].word;
    
    // 放兩個單字釋義
    def.innerHTML = "1. "+ response[0].text+"<br>2. "+ response[1].text;
  };
  xhr.open("GET", url, true);
  xhr.send();
}

form.addEventListener('submit',function(e){
  // 防止頁面重新整理
  e.preventDefault();
  
  // 抓取使用者輸入的字
  var input = e.target[0].value;
  
  // 產生 URL
  url = makeUrl(input);
  
  // 發出 API Request
  makeRequest();
  
  // 記得把 input 框清空
  e.target[0].value = '';

})

產生畫面如下：

完成了！！！！

不過，此時如果使用者沒有輸入任何字或是打了一個不是英文單字的東西， Console 分別會顯示 404 Not Found 跟 Type Error，所以我來把 xhr.onload() 修改一下：

xhr.onload = function() {
    if(xhr.status === 200){
      var response = JSON.parse(this.responseText);
        // 如果打錯字
        if (response[0]===undefined){
          def.innerHTML = "你單字拼錯了！！！";
        }else{
          // 把查詢結果放進標題
          qword.innerHTML = response[0].word;

          // 放兩個單字釋義
          def.innerHTML = "1. "+ response[0].text+"<br>2. "+ response[1].text;
        }

    }else if (xhr.status === 404){
      // 如果沒打字
      def.innerHTML = "請輸入一個英文單字";
    }
  };

以上感謝大家今天的收看。

Codepen 連結