Created
May 27, 2019 15:05
-
-
Save nccharles/ba10320eef15064166653439f244d3b2 to your computer and use it in GitHub Desktop.
Isomorphic
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Topic --> | |
| <div class="topic"> | |
| <h1>Isomorphic</h1> | |
| <p>Two strings str1 and str2 are called <b>isomorphic</b> if there is a one to one mapping | |
| possible for every character of str1 to every character of str2.</p> | |
| </div> | |
| <!-- Firt string Box --> | |
| <div class="first-input"> | |
| <input type="text" id="first-string" placeholder="Enter first string..."> | |
| </div> | |
| <!-- Second String Box Input --> | |
| <div class="second-input"> | |
| <input type="text" id="second-string" placeholder="Enter second string..."> | |
| </div> | |
| <!-- Output --> | |
| <div class="answer"> | |
| <h3 id="answer"></h3> | |
| </div> | |
| <!-- Button --> | |
| <div class="button"> | |
| <button type="submit" class="btn" onclick="iso()">Check</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // DOM declaration | |
| const first = document.querySelector("#first-string"); | |
| const second = document.querySelector("#second-string"); | |
| const result = document.querySelector("#answer"); | |
| // Isomorphic function | |
| const iso=()=> { | |
| // get inserted values | |
| str1 = first.value; | |
| str2 = second.value; | |
| // remove spaces from inserted values | |
| fStr = str1.trim(); | |
| sStr = str2.trim(); | |
| // get length of trimmed inserted values | |
| length1 = fStr.length; | |
| length2 = sStr.length; | |
| if (length1 !== 0 && length2 === 0) { | |
| result.style.color = "red"; | |
| result.innerHTML = "Please Input String Two" | |
| return false; | |
| } else if (length1 === 0 && length2 !== 0) { | |
| result.style.color = "red"; | |
| result.innerHTML = "Please Input String One" | |
| return false; | |
| } else if (!fStr || !sStr) { | |
| result.style.color = "red"; | |
| result.innerHTML = "Please Input String One and String Two" | |
| return false; | |
| } | |
| // check if length of two inserted strings are equal | |
| if (length1 != length2) { | |
| result.style.color = "red"; | |
| result.innerHTML = "Please Input Strings of the same length" | |
| return false; | |
| } | |
| // check one to one mapping | |
| let checkMap = {}; | |
| for (let i = 0; i < length1; i++) { | |
| if (!checkMap[fStr[i]]) { | |
| checkMap[fStr[i]] = sStr[i]; | |
| } else if (checkMap[fStr[i]] !== sStr[i]) { | |
| result.style.color = "red"; | |
| result.innerHTML = "False" | |
| return false; | |
| } | |
| } | |
| result.style.color = "green"; | |
| result.innerHTML = "True" | |
| return true; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| background-color: #30336b; | |
| } | |
| .container div { | |
| padding: 5px; | |
| text-align: center; | |
| background-color: #30336b; | |
| } | |
| .topic { | |
| background-color: #30336b; | |
| color: #ecf0f1; | |
| } | |
| .topic p { | |
| font-size: 16px; | |
| } | |
| .btn { | |
| background-color: #30336b; | |
| color: #6ab04c; | |
| font-weight: bold; | |
| width: 250px; | |
| margin: 2px 0; | |
| padding: 12px 18px; | |
| border-radius: 50px; | |
| } | |
| .first-input, .second-input { | |
| background-color: #30336b; | |
| color: #6ab04c; | |
| font-size:20px; | |
| font-weight: bold; | |
| } | |
| .answer { | |
| background-color: #6ab04c; | |
| color: white; | |
| font-size: 25px; | |
| } | |
| input { | |
| width: 250px; | |
| background-color: "transparent"; | |
| margin: 2px 0; | |
| box-sizing: border-box; | |
| border: 1px solid #22a6b3; | |
| padding: 12px 18px; | |
| border-radius: 50px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment