LunaticWolf/Assignment1.html

## Assignment1.html
<!DOCTYPE html>
<html>


	<head>
		<meta charset="utf-8"/>
		<title> Team Details </title>
		<link rel="stylesheet" type="text/css" href="TeamDetails.css">
			<script type="text/javascript" src="TeamDetails.js">

				function validate()
{
	var scoreTally = [];
	var errNo = 0;

	var scoreA = document.getElementById('scoreA').value;
	scoreTally.push(validateScoreCard(scoreA,errNo));

	errNo +=1;
	var scoreB = document.getElementById('scoreB').value;
	scoreTally.push(validateScoreCard(scoreB,errNo));

	evaluateScoreCard(scoreTally);

}

function validateScoreCard(inputScore,errNo)
{

	splitScore = inputScore.split("/");

	var runs = splitScore[0];
	var wkts = splitScore[1];
	var gameStatus = false;
	var scoreCard = [];


	if(runs.length<4 && runs>=0 && wkts>=0 && wkts<=10)
		{
			gameStatus = true;
			scoreCard = { Wkts:wkts , Runs:runs };
		}

	if(gameStatus==false)
	{
		var err = document.getElementsByClassName("errMessage");
		err[errNo].innerText = "Invalid Score Format";
	}

	return scoreCard;

}


function evaluateScoreCard(scoreTally)
{
	var runsA = scoreTally[0]["Runs"];
	var runsB = scoreTally[1]["Runs"];
	var wktsA = scoreTally[0]["Wkts"];
	var wktsB = scoreTally[1]["Wkts"];
	var statusA = false;
	var statusB = false;


	if(runsA>runsB)
		statusA = true;
	else if(runsB>runsA)
		statusB = true;
	else
		if(wktsA<wktsB)
			statusB = true;
		if(wktsB<wktsA)
			statusA = true;


	displayWinner(statusA,statusB);


}

function displayWinner(statusA,statusB)
{

	if(statusA)
		document.getElementById('winningTeam').innerText = "Team - &quot;" + document.getElementById('teamA').value + "&quote";

	if(statusB)
		document.getElementById('winningTeam').innerText = "Team - &quot;" + document.getElementById('teamB').value + "&quot;";

	if(statusA == false && statusB == false)
		document.getElementById('winningTeam').innerText = "Match Draw";
}


			</script>


<!-- CSS -->

<style type="text/css">
	fieldset
	{
		position: fixed;
		width: 60%;
		left: 300px;
		cursor: context-menu;
	}


	table
	{
		font-family: Comic Sans MS;
		font-size: 20px;
		position:sticky;
		left:450px;
		top:130px;
		padding: 10px;
	}

	/*td
	{
          padding:6px
	}*/


	input[type=text]
	{
 	 	width: 80%;

  		padding: 8px;
  		border: 1px solid #ccc;
  		border-radius: 4px;
  		cursor: text;
	}


	.err,.star,.errMessage
	{
		color:red;
		font-family: comic sans ms;
	}


	#btnSpacing
	{
		padding: 30px;
	}


	#btn
	{
  		background-color: #4CAF50;
  		color: white;
  		padding: 8px 20px;
  		border: none;
  		border-radius: 50px;
  		cursor: pointer;
  		float: inherit;

  	}


	#reset
	{
		background-color: red;
		color: white;
		padding: 8px 20px;
  		border: none;
  		border-radius: 50px;
  		cursor: pointer;
  		float: inherit;
	}

</style>


<body>
	<form>
		<fieldset>
				<legend> <h1> Match Summary </h1></legend>

				<table>
					<thead>
						<th> Match Details </th>
					</thead>

					<tbody>
						<tr>
							<td>
								Team A<span class="star">*</span>:
							</td>
							<td>
								<input type="text" name="TeamA" id = "teamA" placeholder="Enter Team A" title="Enter TeamA" required/>
							</td>
							<td>
								<i class="err" id="errMessageforTeam"></i>
							</td>
						</tr>

						<tr>
							<td>
								Team B<span class="star">*</span>:
							</td>
							<td>
								<input type="text" name="TeamB" id = "teamB" placeholder="Enter Team B" title="Enter TeamB" required/>
							</td>
							<td>
								<i class="err" id="errMessageforTeam"></i>
							</td>
						</tr>

						<tr>
							<td>
								Date<span class="star">*</span>:
							</td>
							<td>
								<input type="text" name="Date" id = "date" placeholder="dd/MM/yyyy" title="Enter Match Date" required/>
							</td>
							<td>
								<i class="err" id="errMessageforDate"> </i>
							</td>
						</tr>

				  		<tr>
				  			<td>
				  				Time<span class="star">*</span>:
				  			</td>
				  			<td>
				  				<input type="text" name="Time" id = "time" placeholder="HH:mm:ss" title="Enter Time Details" required/>
				  			</td>
				  			<td>
				  				<i class="err" id="errMessageforTime"> </i>
				  			</td>
				  		</tr>
						<tr>
							<td>
								Score A<span class="star">*</span>:
							</td>
							<td>
								<input type="text" name="ScoreA" id="scoreA" placeholder="Runs/wkts" title="Enter Team-A Score" required/>
							</td>
							<td>
								<i class="errMessage"></i>
							</td>
						</tr>
						<tr>
							<td >
								Score B<span class="star">*</span>:
							</td>
							<td>
								<input type="text" name="ScoreB" id="scoreB" placeholder="Runs/wkts" title="Enter Team-B Score"/ required>
							</td>
							<td>
								<i class="errMessage"></i>
							</td>
						</tr>
						<tr>
							<td></td>
							<td id="btnSpacing">
										<input type="button" id="btn" value="Save" onclick="validate()" />

										<input type="reset" name="Reset" id="reset" value="Reset" />

							</td>
						</tr>
					</tbody>
				</table>


				<br><br><br>
				<h3> Winner - <i id="winningTeam">  </i> </h3>

			</fieldset>
		</form>

	</body>
</html>
	<!DOCTYPE html>
	<html>


	<head>
	<meta charset="utf-8"/>
	<title> Team Details </title>
	<link rel="stylesheet" type="text/css" href="TeamDetails.css">
	<script type="text/javascript" src="TeamDetails.js">

	function validate()
	{
	var scoreTally = [];
	var errNo = 0;

	var scoreA = document.getElementById('scoreA').value;
	scoreTally.push(validateScoreCard(scoreA,errNo));

	errNo +=1;
	var scoreB = document.getElementById('scoreB').value;
	scoreTally.push(validateScoreCard(scoreB,errNo));

	evaluateScoreCard(scoreTally);

	}

	function validateScoreCard(inputScore,errNo)
	{

	splitScore = inputScore.split("/");

	var runs = splitScore[0];
	var wkts = splitScore[1];
	var gameStatus = false;
	var scoreCard = [];


	if(runs.length<4 && runs>=0 && wkts>=0 && wkts<=10)
	{
	gameStatus = true;
	scoreCard = { Wkts:wkts , Runs:runs };
	}

	if(gameStatus==false)
	{
	var err = document.getElementsByClassName("errMessage");
	err[errNo].innerText = "Invalid Score Format";
	}

	return scoreCard;

	}



	function evaluateScoreCard(scoreTally)
	{
	var runsA = scoreTally[0]["Runs"];
	var runsB = scoreTally[1]["Runs"];
	var wktsA = scoreTally[0]["Wkts"];
	var wktsB = scoreTally[1]["Wkts"];
	var statusA = false;
	var statusB = false;


	if(runsA>runsB)
	statusA = true;
	else if(runsB>runsA)
	statusB = true;
	else
	if(wktsA<wktsB)
	statusB = true;
	if(wktsB<wktsA)
	statusA = true;


	displayWinner(statusA,statusB);


	}

	function displayWinner(statusA,statusB)
	{

	if(statusA)
	document.getElementById('winningTeam').innerText = "Team - "" + document.getElementById('teamA').value + "&quote";

	if(statusB)
	document.getElementById('winningTeam').innerText = "Team - "" + document.getElementById('teamB').value + """;

	if(statusA == false && statusB == false)
	document.getElementById('winningTeam').innerText = "Match Draw";
	}



	</script>


	<!-- CSS -->

	<style type="text/css">
	fieldset
	{
	position: fixed;
	width: 60%;
	left: 300px;
	cursor: context-menu;
	}



	table
	{
	font-family: Comic Sans MS;
	font-size: 20px;
	position:sticky;
	left:450px;
	top:130px;
	padding: 10px;
	}

	/*td
	{
	padding:6px
	}*/


	input[type=text]
	{
	width: 80%;

	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: text;
	}


	.err,.star,.errMessage
	{
	color:red;
	font-family: comic sans ms;
	}


	#btnSpacing
	{
	padding: 30px;
	}


	#btn
	{
	background-color: #4CAF50;
	color: white;
	padding: 8px 20px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	float: inherit;

	}



	#reset
	{
	background-color: red;
	color: white;
	padding: 8px 20px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	float: inherit;
	}

	</style>
























	<body>
	<form>
	<fieldset>
	<legend> <h1> Match Summary </h1></legend>

	<table>
	<thead>
	<th> Match Details </th>
	</thead>

	<tbody>
	<tr>
	<td>
	Team A<span class="star">*</span>:
	</td>
	<td>
	<input type="text" name="TeamA" id = "teamA" placeholder="Enter Team A" title="Enter TeamA" required/>
	</td>
	<td>
	<i class="err" id="errMessageforTeam"></i>
	</td>
	</tr>

	<tr>
	<td>
	Team B<span class="star">*</span>:
	</td>
	<td>
	<input type="text" name="TeamB" id = "teamB" placeholder="Enter Team B" title="Enter TeamB" required/>
	</td>
	<td>
	<i class="err" id="errMessageforTeam"></i>
	</td>
	</tr>

	<tr>
	<td>
	Date<span class="star">*</span>:
	</td>
	<td>
	<input type="text" name="Date" id = "date" placeholder="dd/MM/yyyy" title="Enter Match Date" required/>
	</td>
	<td>
	<i class="err" id="errMessageforDate"> </i>
	</td>
	</tr>

	<tr>
	<td>
	Time<span class="star">*</span>:
	</td>
	<td>
	<input type="text" name="Time" id = "time" placeholder="HH:mm:ss" title="Enter Time Details" required/>
	</td>
	<td>
	<i class="err" id="errMessageforTime"> </i>
	</td>
	</tr>
	<tr>
	<td>
	Score A<span class="star">*</span>:
	</td>
	<td>
	<input type="text" name="ScoreA" id="scoreA" placeholder="Runs/wkts" title="Enter Team-A Score" required/>
	</td>
	<td>
	<i class="errMessage"></i>
	</td>
	</tr>
	<tr>
	<td >
	Score B<span class="star">*</span>:
	</td>
	<td>
	<input type="text" name="ScoreB" id="scoreB" placeholder="Runs/wkts" title="Enter Team-B Score"/ required>
	</td>
	<td>
	<i class="errMessage"></i>
	</td>
	</tr>
	<tr>
	<td></td>
	<td id="btnSpacing">
	<input type="button" id="btn" value="Save" onclick="validate()" />

	<input type="reset" name="Reset" id="reset" value="Reset" />

	</td>
	</tr>
	</tbody>
	</table>


	<br><br><br>
	<h3> Winner - <i id="winningTeam"> </i> </h3>

	</fieldset>
	</form>

	</body>
	</html>