JSFiddle - React, Tailwind, and code Playground

by krishna chaitanya nalluri

HTML

<!DOCTYPE html>
<html>
<head>
	  <title>Coding Project</title>
</head>
<body>
<div>
  <form>
    <label for="string">Enter your String here</label>
    <input type="text" id="inputText" name="inputText" placeholder="Your string..">  
	<input type="button" name="answer" value="SUBMIT" onclick="showDiv()" />
  </form>
</div>

<div id="validity"  style="display:none;" class="validity"></div>

</body>
</html>

CSS

#validity {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=button] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=button]:hover {
    background-color: #45a049;
}
div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

JavaScript

function showDiv() {
	var textEntered = document.getElementById("inputText").value;
	var	isStringValid =validateTheString(textEntered);
  	document.getElementById("validity").innerHTML = "Entered String is "+isStringValid+"";
   	document.getElementById("validity").style.display = "block";
}
var validateTheString = function (str) {
	const rulesModel = ["String_Start_With_Capital_Letter", 
		"String_has_Even_Number_of_Quotes", 
		"String_ends_With_Period_Character",
		"String_has_no_Period_Characters_Other_than_At_End",
		"Numbers_below_13_should_be_spelled_out"
		];
	String.prototype.rules = function(){
		for(let key in rulesModel){
			if(!isRuleValid(rulesModel[key], this)) return false;
		}
		return true;
	}

	return str.rules() ? "VALID" : "INVALID";

}

let isRuleValid = function(rule, inputString){
	switch(rule){
		case "String_Start_With_Capital_Letter":
			return checkStringStartsWithCapitalLetterOrnot(inputString);
		case "String_has_Even_Number_of_Quotes": 
			return checkStringHasEvenNumberOfQuotationsOrNot(inputString);
		case "String_ends_With_Period_Character":
			return checkStringEndsWithPeriodCharacterOrNot(inputString);
		case "String_has_no_Period_Characters_Other_than_At_End":
			return checkStringHasNoPeriodCharactersOtherthanAtEnd(inputString);
		case "Numbers_below_13_should_be_spelled_out":
			return checkNumberbelow13SpelledOutorNot(inputString);
	}
}

let checkStringStartsWithCapitalLetterOrnot = function(inputString){
	 return inputString.match(/^[A-Z]/) ? true : false;
}
let checkStringHasEvenNumberOfQuotationsOrNot = function(inputString){
	let doubleQuotationsCount = inputString.match(/"/g);
	let singleQuotationsCount = inputString.match(/'/g);
	let doubleQuotescount = doubleQuotationsCount ? doubleQuotationsCount.length : 0;
	let singleQuotescount = singleQuotationsCount ? singleQuotationsCount.length : 0;
	isDoubleQuotesEven = isEvenOrOdd(doubleQuotescount);
	isSingleQuotesEven = isEvenOrOdd(singleQuotescount);
	return...