How to make your own simple translator in HTML & JavaScript
Tags: javascript, tutorial, css, html
Published: 2023-05-31 15:23:59

## **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>
```

---

## 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;
}
```

---

## 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");
}
```
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 ");
}
```

--- 

## 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);
}
```
---

## Thanks For Reading!

-Quinn




[Code](https://github.com/Analyze0/swedish-translator)
[View Project](https://swedish-translator.analyze185.repl.co/)