如何使用 HTML、CSS 和 JavaScript 创建句子翻译器？

在本文中，我们将使用 JavaScript 借助 API 制作一个句子翻译应用程序。

基本设置：打开 VS Code 并从驱动器中打开一个文件夹，在其中创建此项目并命名为 Translate-Sentence(folderName)。打开后创建以下文件：

• 索引.html
• 翻译.js
• 样式.css

项目结构：应该是这样的：

HTML 文件：这是连接到 style.css 文件的主索引页面，用于样式化和 translate.js 用于网站中的逻辑操作。

HTML 文件基本上包含三个部分：

• 标题
• 主容器：它包含两个部分：
  • 输入文本区域
  • 输出文本区域
• 页脚

索引.html

HTML

  

    
    
    
    
    Document

  

  
    Translate It
    
        
                          
        
  
        Translate
        
                          
        
    
    About Us
    

  

JavaScript 文件：此 javaScript 文件获取按钮的 id 并输入文本并将文本输出到变量。

https://api.funtranslations.com/translate/minion.json

注意： API 可用于每小时 5 次调用。通过使用上面的API语句将被翻译成minion语言

javascript中逻辑的主要做法是：

1. 单击按钮时，将调用函数clickHandler 。
2. clickHandler函数从 输入 Textarea 并更新 apiUrl。
3. 接下来，调用fetch 方法，将 inputText 转换为 minion 语言，并将其反映到输出 TextArea。

Fetch 方法： Fetch 将Url作为参数，然后返回一个解析响应对象的承诺，然后从该响应对象中 outputText 获取翻译后的内容。

翻译.js

JavaScript

var inputText = document.querySelector('#input-text');
var outputText = document.querySelector('#output-text');
var buttonTranslate = document.querySelector('#btn-translate');
var apiUrl = "https://api.funtranslations.com/translate/minion.json";
  
function errorHandle(error) {    
    // In case error occurs the errorHandle
    // function will be called
    alert('Error occurred')
    console.log("error occurred", error);
}
  
function clickHandler() {        
    // When someone clicks on translate
    // button clickHandler will be called
    var text = inputText.value;
    var updatedUrl = apiUrl + "?text=" + text;
    fetch(updatedUrl).then(response =>
    response.json()).then(json =>
    outputText.innerText = 
        (json.contents.translated)).catch(errorHandle);
}
  
  
  
buttonTranslate.addEventListener("click", clickHandler);    
// Adding the event listner click

CSS 文件：此文件负责 HTML 页面的样式。

样式.css

CSS

textarea {
        display: block;
        margin: 1rem;
        width: 70vw;
        height: 20vh;
        padding: 1rem;
        box-sizing: border-box;
        justify-content: center;
    }
      
    * {
        box-sizing: border-box;
    }
      
    .header {
        font-size: 50px;
        text-align: center;
        background-color: #f77e38;
        padding: 1rem;
    }
      
    #btn-translate {
        background-color: #f77e38;
        border-radius: 12px;
        height: 5vh;
        width: 20vw;
        font-size: larger;
        margin-left: 25vw;
        cursor: pointer;
    }
      
    .main {
        box-sizing: border-box;
        margin-left: 15vw;
    }
      
    .footer {
        font-size: 40px;
        align-items: center;
        margin-top: 8rem;
        height: 7rem;
        background-color: #f77e38;
        text-align: center;
    }

输出：在 VS Code 中安装实时服务器扩展。单击Live Server ，我们的应用程序现已准备就绪。