Транслит
поделюсь с вами программкой Транслит из Русских букв (Кириллица) в Латинские (Английские).
пример:
вы напишите.
"Привет мир!"
выведет.
"Privet mir!".
программка использует технологии HTML, CSS, JavaScript
можете скачивать и пользоваться.
можете до работать под свои нужды.
вот код. а ниже можете посмотреть программку и скачать.
CSS
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
box-sizing: border-box;
}
body {
width: 100%;
max-width: 100%;
background-color: #000;
position: relative;
}
.bg {
position: fixed;
width: 100%;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.content {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
.container {
max-width: 1200px;
width: 100%;
margin: 40px auto;
}
.forma {
display: block;
width: 47%;
}
.content-form {
display: flex;
width: 100%;
justify-content: space-between;
}
.txt {
display: block;
width: 100%;
min-height: 300px;
background-color: #affc0f;
font-size: 20px;
font-weight: 700;
color: red;
}
.itog {
display: block;
width: 47%;
min-height: 300px;
background-color: #000;
font-size: 20px;
font-weight: 700;
color: yellow;
white-space: pre;
}
.but {
display: inline-block;
background-color: red;
color: yellow;
font-size: 20px;
font-weight: 900;
padding: 15px 20px;
margin: 20px;
border-radius: 20px;
}
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
box-sizing: border-box;
}
body {
width: 100%;
max-width: 100%;
background-color: #000;
position: relative;
}
.bg {
position: fixed;
width: 100%;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.content {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
.container {
max-width: 1200px;
width: 100%;
margin: 40px auto;
}
.forma {
display: block;
width: 47%;
}
.content-form {
display: flex;
width: 100%;
justify-content: space-between;
}
.txt {
display: block;
width: 100%;
min-height: 300px;
background-color: #affc0f;
font-size: 20px;
font-weight: 700;
color: red;
}
.itog {
display: block;
width: 47%;
min-height: 300px;
background-color: #000;
font-size: 20px;
font-weight: 700;
color: yellow;
white-space: pre;
}
.but {
display: inline-block;
background-color: red;
color: yellow;
font-size: 20px;
font-weight: 900;
padding: 15px 20px;
margin: 20px;
border-radius: 20px;
}
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Транслит</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video src="background.mp4" class="bg" autoplay muted loop></video>
<div class="content">
<div class="container">
<div class="content-form">
<form class="forma">
<textarea id="kis" class="txt"></textarea>
<button class="but">Отправить</button>
</form>
<p class="itog"></p>
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Транслит</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video src="background.mp4" class="bg" autoplay muted loop></video>
<div class="content">
<div class="container">
<div class="content-form">
<form class="forma">
<textarea id="kis" class="txt"></textarea>
<button class="but">Отправить</button>
</form>
<p class="itog"></p>
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
JS
const rusToLat = function(str) {
let ru = {
'а': 'a',
'б': 'b',
'в': 'v',
'г': 'g',
'д': 'd',
'е': 'e',
'ё': 'yo',
'ж': 'j',
'з': 'z',
'и': 'i',
'к': 'k',
'л': 'l',
'м': 'm',
'н': 'n',
'о': 'o',
'п': 'p',
'р': 'r',
'с': 's',
'т': 't',
'у': 'u',
'ф': 'f',
'х': 'h',
'ц': 'c',
'ч': 'ch',
'ш': 'sh',
'щ': 'shch',
'ы': 'y',
'э': 'e',
'ю': 'yu',
'я': 'ya',
'ъ': '`',
'ь': '`',
'й': 'y'
};
let newString = [];
return [...str].map(l => {
let latL = ru[l.toLocaleLowerCase()];
if (l !== l.toLocaleLowerCase()) {
latL = latL.charAt(0).toLocaleUpperCase() + latL.slice(1);
} else if (latL === undefined) {
latL = l;
}
return latL;
}).join('');
}
let kis = document.querySelector("#kis");
let but = document.querySelector(".but");
let itog = document.querySelector(".itog");
but.addEventListener("click", function (e) {
e.preventDefault();
const str = kis.value;
itog.innerHTML = rusToLat(str);
})
let ru = {
'а': 'a',
'б': 'b',
'в': 'v',
'г': 'g',
'д': 'd',
'е': 'e',
'ё': 'yo',
'ж': 'j',
'з': 'z',
'и': 'i',
'к': 'k',
'л': 'l',
'м': 'm',
'н': 'n',
'о': 'o',
'п': 'p',
'р': 'r',
'с': 's',
'т': 't',
'у': 'u',
'ф': 'f',
'х': 'h',
'ц': 'c',
'ч': 'ch',
'ш': 'sh',
'щ': 'shch',
'ы': 'y',
'э': 'e',
'ю': 'yu',
'я': 'ya',
'ъ': '`',
'ь': '`',
'й': 'y'
};
let newString = [];
return [...str].map(l => {
let latL = ru[l.toLocaleLowerCase()];
if (l !== l.toLocaleLowerCase()) {
latL = latL.charAt(0).toLocaleUpperCase() + latL.slice(1);
} else if (latL === undefined) {
latL = l;
}
return latL;
}).join('');
}
let kis = document.querySelector("#kis");
let but = document.querySelector(".but");
let itog = document.querySelector(".itog");
but.addEventListener("click", function (e) {
e.preventDefault();
const str = kis.value;
itog.innerHTML = rusToLat(str);
})
