Skip to content

Instantly share code, notes, and snippets.

@FridaHellander

FridaHellander/index.html

Created May 14, 2019 20:49
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/f0445b928d380b9b9a49fe04a1c6b5ca to your computer and use it in GitHub Desktop.
Save FridaHellander/f0445b928d380b9b9a49fe04a1c6b5ca to your computer and use it in GitHub Desktop.
Download ZIP
Translator // source https://jsbin.com/cihonus
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{
text-align: absolute;
position: relative;
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{
position: absolute;
z-index: 1;
left: 450px;
top: 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="target"> </p1>
<img id="img1" src = "https://i.ya-webdesign.com/images/pirates-clipart-goofy-13.gif">
<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 text = document.getElementById("myText").value;
text = text.toLowerCase();
var vokaler = ["a", "e", "i", "o", "u", " ", ",", ".", "!", "?"];
var y = " ";
for(i=0; i<text.length; i++){
var vokal = false;
for(var m in vokaler) {
if(vokaler[m] === text.charAt(i)) {
vokal = true;
break;
}
else {
vokal = false;
}
}
if (vokal) {
y = y + (text.charAt(i));
}
else{
y = y + (text.charAt(i) + "o" + text.charAt(i));
}
}
console.log(y);
document.getElementById("target").innerHTML = y;
}
</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="target"> </p1>
<img id="img1" src = "https://i.ya-webdesign.com/images/pirates-clipart-goofy-13.gif">
<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 text = document.getElementById("myText").value;
text = text.toLowerCase();
var vokaler = ["a", "e", "i", "o", "u", " ", ",", ".", "!", "?"];
var y = " ";
for(i=0; i<text.length; i++){
var vokal = false;
for(var m in vokaler) {
if(vokaler[m] === text.charAt(i)) {
vokal = true;
break;
}
else {
vokal = false;
}
}
if (vokal) {
y = y + (text.charAt(i));
}
else{
y = y + (text.charAt(i) + "o" + text.charAt(i));
}
}
console.log(y);
document.getElementById("target").innerHTML = y;
}
<\/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{
text-align: absolute;
position: relative;
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{
position: absolute;
z-index: 1;
left: 450px;
top: 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{
text-align: absolute;
position: relative;
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{
position: absolute;
z-index: 1;
left: 450px;
top: 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