nccharles/index.html

## index.html
<!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>

## isomorphic.markdown

      
    Raw
  

              isomorphic.markdown
            
          
    Isomorphic

A Pen by Charles on CodePen.
License.

  
## script.js

// 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;
}

## style.css
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;
}
	<!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>

	// 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;
	}
	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;
	}