Secret code - decode
<!DOCTYPE html>
<html lang="en">
<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>Secret Code d-code</title>
</head>
<body>
<style>
::selection {
color: red;
background: yellow;
}
.auto{
width: 60vw;
margin: auto;
}
input {
width: 60vw;
padding: 12px;
margin: 10px;
}
button {
background-color: lightskyblue;
color: darkblue;
font-size: 20px;
padding: 6px;
}
.code {
display: none;
margin-right: 50px;
}
.text {
display: flex;
flex-direction: row;
}
p {
cursor: pointer;
}
.typeOf {
display: none;
}
#textPrint {
color: green;
background-color: antiquewhite;
}
h1{
text-align: center;
}
</style>
<div class="sectionInput">
<h1>Enter the <u>secret</u> code of single word & convet</h1>
<div class="auto">
<input id="input" type="text" placeholder="Enter your code-text" />
<button onclick="btn()" id="button" type="submit">Convert</button>
</div>
<h4 id="textPrint"></h4>
</div>
<p onclick="document.getElementById('code').style.display = 'block'">
Code Exapmle >
</p>
<p onclick="document.getElementById('typeOf').style.display = 'block'">
Code Type >
</p>
<div class="text">
<div id="code" class="code">
<ul>
<li>ih</li>
<li>ladwohfdk</li>
<li>fdkerafdk</li>
<li>dlguoymwq</li>
</ul>
<ul>
<li>ko</li>
<li>fqeuoymzl</li>
<li>xlfnacqpr</li>
<li>vldyrtldg</li>
</ul>
</div>
<div id="typeOf" class="typeOf">
<ol>
<li>If word is 2 latter => latter must be forword.</li>
<li>
If word is large => main word <u>front add 3 </u> latter and main
word <u>end add 3 </u>word.
</li>
<li>
*** Main word front 2 value must be <u>f</u> or <u>l</u> must add.
</li>
</ol>
</div>
</div>
<script>
// html tag id add in var
var input = document.getElementById("input");
var button = document.getElementById("btn");
var textPrint = document.getElementById("textPrint");
// input add in array
let inputValRepaire = [];
// output text add
var finalText = "";
// button click function
function btn() {
// input no value alert
let inputTrim = input.value.trim();
if (inputTrim == "") {
alert("plz input the value");
input.value = "";
}
// input value == 2 code
if (input.value.length == 2) {
let x = input.value.split("");
let xStor = x[0];
x[0] = x[1];
x[1] = xStor;
finalText += `${x.join("")} `;
input.value = "";
} else {
if (
input.value[0] == "f" ||
input.value[0] == "l" ||
input.value[1] == "l" ||
input.value[1] == "f"
) {
// input value greater then 2
let mainValue = "";
let inputLen = input.value.length;
for (let i = 0; i <= inputLen - 1; i++) {
// first 3 value remove
if (i < 3) {
continue;
}
// last 3 value remove
if (inputLen - 1 == i || inputLen - 2 == i || inputLen - 3 == i) {
continue;
}
// value add in mainValue
mainValue += input.value[i];
}
// main valu output
var o = "";
for (let i = 0; i <= mainValue.length - 1; i++) {
o += mainValue[mainValue.length - 1 - i];
}
finalText += `${o} `;
input.value = "";
} else {
alert("Enter the correct code plz!!");
}
}
// final text add & autput
textPrint.innerHTML = `${finalText}`;
}
</script>