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

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

基本设置： 打开VS Code并在您要创建此项目的驱动器中打开一个文件夹，然后给它取名为Translate-Sentence（文件夹名称）。打开后创建以下文件：

index.html
translate.js
style.css
项目结构： 应该看起来像这样：

HTML文档： 这是连接到style.css文件以进行页面样式设置以及连接到translate.js文件用于网站逻辑操作的主索引页面。

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

头部
主容器： 包含两个部分：
- 输入文本框
- 输出文本框
底部

index.html

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
 
<body>
 
    <nav class="header">Translate It</nav>
    <div class="main">
        <div class="translation-box">
            <textarea id="input-text"
                      placeholder="Enter the sentence">
              </textarea>
        </div>
 
        <button id="btn-translate">Translate</button>
        <div id="translated-box">
            <textarea id="output-text"
                placeholder="Here you will se translated text">
              </textarea>
        </div>
    </div>
    <footer class="footer">About Us</footer>
    <script src="translate.js"></script>
</body>
 
</html>

JavaScript文件： 此JavaScript文件接收按钮的id，并将输入的文本输出到变量中。

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

注意： 每小时可使用API进行5次调用。使用上述API将句子翻译成迷你语言。

JavaScript中的逻辑主要方法如下：

点击按钮时调用一个名为 clickHandler 的函数。
clickHandler 函数从输入文本框中获取输入，并更新apiUrl。
接下来，调用 fetch方法 将输入文本转换为迷你语言，并在输出文本区域中显示。

Fetch方法： Fetch将 URL 作为参数，然后返回一个 promise 来解析响应对象，然后从响应对象中提取输出文本。

translate.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 listener click

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

style.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扩展。点击 Live Server ，我们的应用程序现在已经准备好了。

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