DEV Community

Cover image for How to make your own simple translator in HTML & JavaScript
Analyze_
Analyze_

Posted on

How to make your own simple translator in HTML & JavaScript

#javascript #tutorial #css #html

DESCRIPTION:

In this tutorial, I will teach you how to make a website that translates one language into another using HTML, CSS, and JavaScript.

Part One [Choosing a Language]:

When choosing a language, think of something that you are interested in learning, already know, or have some sort of connection to. In this tutorial, I am going to be using Swedish. I chose this language because I have been learning it for a pretty decent amount of time now.

Part Two [Setting Up Your Files]:

In your index.html, add the line <link href="style.css" rel="stylesheet" type="text/css" /> to your <head> in order to link your css file. Next, add <script src="script.js"></script>, & <script src="translations.js"></script> to link your JavaScript to your HTML file.

Part Three [Writing Your HTML]:

Create a <div> with the class of container. This will contain your input and output boxes. Next, inside of your <div>, create a <textarea> with the id and class of input. Set the placeholder to something like input or whatever language you will have translated into the other language (for example: English, because I am translating English to Swedish).

On the next line, create a <div> with the id and class of output. This is going to be the translated text later on. Inside of this <div>, you can create something for a place holder if you want. My placeholder is <span style="color:lightslategray;">Swedish</span>.

Cheat Sheet:
_index.html_

<!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="/fav.png" type="image/x-icon">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>English to Swedish</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <textarea name="" id="input" cols="30" rows="10" class="input" placeholder="English"></textarea>
    <div id="output" class="output">
      <span style="color:lightslategray;">Swedish</span>
    </div>
  </div>
  <script src="script.js"></script>
  <script src="translations.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Part Four [script.js]:

First, create a variable called translated. Leave the value blank. It should look like this: var translated;. Type out this next: document.getElementById('input').onkeyup = function(e){ }. What this does is detect when you type anything into the input area. Inside of the curly brackets ({} <-- these things), type: translated = " " + document.getElementById('input').value;. This code sets the variable translated to our input value. Also inside of the curly brackets, type in translate(e). After this, type: document.getElementById('output').innerHTML = translated; on the next line, in order to set the output <div> to the translated text.

Cheat Sheet:
_script.js_

var translated;
document.getElementById('input').onkeyup = function(e){
  translated = " " + document.getElementById('input').value;
  translate(e);
  document.getElementById('output').innerHTML = translated;
}
Enter fullscreen mode Exit fullscreen mode

Part Five [translations.js]:

We are now in translations.js, and are going to start and make the translations. First, create a function called translate(e). It should look like this: function translate(e){}. In the curly brackets type out:

while(translated.includes(" hello")){
  translated = translated.replace(" hello", " hey");
}
Enter fullscreen mode Exit fullscreen mode

This translated "hello" to Swedish! Copy and paste these 3 lines for each word that you translate. You also need to make a capitalized version of each word. This is what it would look like:

while(translated.includes("Hello ")){
  translated = translated.replace("Hello ", "Hey ");
}
Enter fullscreen mode Exit fullscreen mode

Part Six [CSS]:

This is the format that I made, but you can change it however you want.

/*font stuff:*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
    font-family: 'IBM Plex Sans', sans-serif;
    text-align: center;
    box-sizing: border-box;
}
html{
  overflow-y:scroll;
  overflow-x:none;
  box-shadow: 0 4px 8px 0 #00000007, 0 6px 15px 0 #0000001a;
  margin-top:7.3%;
  height:70vh;
  background:#f2f2f2;
  width:25%;
  margin-left:37.5%;
  align-content:center;
  text-align:center;
  border-radius:12px;
}
h1{
  margin:30px;
  padding-top:30px;
}
.secondary-text{
  color: #9f2dde;
}
input{
  border-radius:3px;
  border:none;
  padding:3px;
  margin-bottom:5px;
}
button{
  border-radius:3px;
  border:none;
  padding:3px;
  background:#dedede;
  width:182.5px;
  cursor:pointer;
}
hr{
  width:80%;
}
input[type=number]{
  width:19%;
}
.fileUploadDiv{
  margin-bottom:3px;
  margin-left:62.5px;
  text-align:center;
  border:none;
  width:59.3%;
  background:white;
  border-radius:3px;
  font-size:15px;
}
input[type=file]{
  display: none;
}
label{
  cursor:pointer;
}
select{
  border-radius:3px;
  border:none;
  padding:3px;
  background:white;
  width:182.5px;
  margin-bottom:3px;
  cursor:pointer;
}
input[type=checkbox]{
  cursor:pointer;
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.1em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
}
input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em black;
}

input[type="checkbox"]:checked {
  background: #9f2dde;
  background-size: 5px 5px;
}
code{
  user-select:all;
}
textarea{
  resize:none;
  border:none;
  transform:translateY(10px);
  border-radius:12px;
}
.output{
  font-size:small;
  transform:translateY(10px);
}
Enter fullscreen mode Exit fullscreen mode

Thanks For Reading!

-Quinn

Code
View Project

Top comments (6)

Collapse
 
deadreyo profile image
Ahmed Atwa •

Good job on writing this!

Let me give a tip for a higher code quality:
It's better for functions to be modular and to use parameters and returns instead of external global variables or do side-effects (changing a global variable is called a "side-effect" of a function)

Basically, translate usage in script.js should be in the form of var output = translate(input_string) and then use this output in the div. This will need you to edit the translate function so that you work in its parameter instead of the global variable, and return the result.

Collapse
 
analyze0 profile image
Analyze_ •

Thank you. Looking back at this comment I realized that right after you said this it gave me the effort (? im just really lazy I guess) to actually figure out how to create proper functions. Thanks, this made my life a lot easier.

Collapse
 
ant_f_dev profile image
Anthony Fung •

Thanks for sharing!

Quick tip: replace returns the modified string and so is chainable. So, you could do something like this:

const original = 'word1, word2, word3';

const translated = original
  .replaceAll('word1', 'translated1')
  .replaceAll('word2', 'translated2')
  .replaceAll('word3', 'translated3');

console.log(translated);
// "translated1, translated2, translated3"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
analyze0 profile image
Analyze_ •

Good to know. Thanks!

Collapse
 
analyze0 profile image
Analyze_ •

I have been trying to figure out a easier way to do this, so this is really helpful.

Thread Thread
 
ant_f_dev profile image
Anthony Fung •

No problem; glad it helped.

Read next

kanhaiyabanjara profile image

Web APIs

Kanhaiya Banjara -

jacksonsantin profile image

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Jackson Dhanyel Santin -

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -

aryankargwal profile image

Multi-Modality and Image Gen in a 1.3B Model!🔮

Aryan Kargwal -