How to make your own simple translator in HTML & JavaScript

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