factsandtechnology

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Language Translator</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>Language Translator</h1>

<textarea id="inputText" placeholder="Type text here..."></textarea>

<div class="options">

<select id="sourceLang">

<option value="en">English</option>

<option value="es">Spanish</option>

<option value="fr">French</option>

<option value="de">German</option>

<option value="ar">Arabic</option>

<option value="zh">Chinese</option>

</select>

<span>→</span>

<select id="targetLang">

<option value="es">Spanish</option>

<option value="en">English</option>

<option value="fr">French</option>

<option value="de">German</option>

<option value="ar">Arabic</option>

<option value="zh">Chinese</option>

</select>

</div>

<button onclick="translateText()">Translate</button>

<div id="outputBox">

<h3>Translated Text:</h3>

<p id="translatedText"></p>

</div>

</div>

<script src="script.js"></script>

</body>

</html>

Comments