Skip to content

Instantly share code, notes, and snippets.

@FridaHellander

FridaHellander/index.html

Created May 15, 2019 19:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FridaHellander/97488694e607b3ac81af2dc1a1bb944e to your computer and use it in GitHub Desktop.
Save FridaHellander/97488694e607b3ac81af2dc1a1bb944e to your computer and use it in GitHub Desktop.
Download ZIP
Translator // source https://jsbin.com/cihonus/237
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Translator</title>
<style id="jsbin-css">
h1 {
position: absolute;
z-index: 1;
left: 442px;
top: 200px;
width: 400px;
}
p{
position: absolute;
z-index: 1;
left: 450px;
top: 250px;
width: 300px;
}
input{
position: absolute;
z-index: 1;
left: 442px;
top: 350px;
}
button{
position: absolute;
z-index: 1;
left: 687px;
top: 350px;
}
p1{ /*output*/
position: absolute;
z-index: 1;
left: 450px;
top: 400px;
width: 400px;
}
#img1{
position: absolute;
left: 750px;
top: 450px;
height: 300px;
}
#img2{
position: absolute;
left: 125px;
top: 500px;
height: 200px;
}
body{
background-image: url("https://static.vecteezy.com/system/resources/previews/000/298/392/large_2x/vector-sheet-of-old-paper.jpg");
background-repeat: no-repeat;
background-position: left top;
height: 700px;
width: 50%;
}
</style>
</head>
<body>
<h1>Rövarspråk-Translator</h1>
<p>Skriv in en text på vanlig svenska, klicka på translate och få det översatt till rövarspråket </p>
<p1 id="output"> </p1>
<!-- Musse Pigg -->
<img id="img1" src = "https://i.ya-webdesign.com/images/pirates-clipart-goofy-13.gif">
<!-- kompassros -->
<img id="img2" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Modern_Nautical_Compass_Rose.png/1024px-Modern_Nautical_Compass_Rose.png">
<input type="text" id="myText" value="Write your text here...">
<button onclick=rovarspraket()>Translate</button>
<script>
function rovarspraket(){
var textIn = document.getElementById("myText").value; <!-- tar texten från input och stoppar i variabel text -->
text = textIn.toLowerCase();
var vokaler = ["a", "e", "i", "o", "u", "y", " ", ",", ".", "!", "?", ";", ":"];
var textUt = " ";
for(i=0; i<text.length; i++){
var vokal = false;
for(var k in vokaler) { <!-- stegar variabeln k från första till sista elementet i array vokaler -->
if(textIn.charAt(i) === vokaler[k]) {
vokal = true;
break;
}
}
if (vokal) {
textUt = textUt + (textIn.charAt(i));
}
else{
textUt = textUt + (textIn.charAt(i) + "o" + text.charAt(i));
}
}
document.getElementById("output").innerHTML = textUt; <!-- Tar värdet som textUt har och stoppar i output-fältet -->
}
</script>
<script id="jsbin-source-html" type="text/html">
<!DOCTYPE html>
<html>
<head>
<title>Translator</title>
</head>
<body>
<h1>Rövarspråk-Translator</h1>
<p>Skriv in en text på vanlig svenska, klicka på translate och få det översatt till rövarspråket </p>
<p1 id="output"> </p1>
<\!-- Musse Pigg -->
<img id="img1" src = "https://i.ya-webdesign.com/images/pirates-clipart-goofy-13.gif">
<\!-- kompassros -->
<img id="img2" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Modern_Nautical_Compass_Rose.png/1024px-Modern_Nautical_Compass_Rose.png">
<input type="text" id="myText" value="Write your text here...">
<button onclick=rovarspraket()>Translate</button>
<script>
function rovarspraket(){
var textIn = document.getElementById("myText").value; <\!-- tar texten från input och stoppar i variabel text -->
text = textIn.toLowerCase();
var vokaler = ["a", "e", "i", "o", "u", "y", " ", ",", ".", "!", "?", ";", ":"];
var textUt = " ";
for(i=0; i<text.length; i++){
var vokal = false;
for(var k in vokaler) { <\!-- stegar variabeln k från första till sista elementet i array vokaler -->
if(textIn.charAt(i) === vokaler[k]) {
vokal = true;
break;
}
}
if (vokal) {
textUt = textUt + (textIn.charAt(i));
}
else{
textUt = textUt + (textIn.charAt(i) + "o" + text.charAt(i));
}
}
document.getElementById("output").innerHTML = textUt; <\!-- Tar värdet som textUt har och stoppar i output-fältet -->
}
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">h1 {
position: absolute;
z-index: 1;
left: 442px;
top: 200px;
width: 400px;
}
p{
position: absolute;
z-index: 1;
left: 450px;
top: 250px;
width: 300px;
}
input{
position: absolute;
z-index: 1;
left: 442px;
top: 350px;
}
button{
position: absolute;
z-index: 1;
left: 687px;
top: 350px;
}
p1{ /*output*/
position: absolute;
z-index: 1;
left: 450px;
top: 400px;
width: 400px;
}
#img1{
position: absolute;
left: 750px;
top: 450px;
height: 300px;
}
#img2{
position: absolute;
left: 125px;
top: 500px;
height: 200px;
}
body{
background-image: url("https://static.vecteezy.com/system/resources/previews/000/298/392/large_2x/vector-sheet-of-old-paper.jpg");
background-repeat: no-repeat;
background-position: left top;
height: 700px;
width: 50%;
}
</script>
</body>
</html>
Raw
jsbin.cihonus.css
h1 {
position: absolute;
z-index: 1;
left: 442px;
top: 200px;
width: 400px;
}
p{
position: absolute;
z-index: 1;
left: 450px;
top: 250px;
width: 300px;
}
input{
position: absolute;
z-index: 1;
left: 442px;
top: 350px;
}
button{
position: absolute;
z-index: 1;
left: 687px;
top: 350px;
}
p1{ /*output*/
position: absolute;
z-index: 1;
left: 450px;
top: 400px;
width: 400px;
}
#img1{
position: absolute;
left: 750px;
top: 450px;
height: 300px;
}
#img2{
position: absolute;
left: 125px;
top: 500px;
height: 200px;
}
body{
background-image: url("https://static.vecteezy.com/system/resources/previews/000/298/392/large_2x/vector-sheet-of-old-paper.jpg");
background-repeat: no-repeat;
background-position: left top;
height: 700px;
width: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment