1.<!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>LAYOUT1</title>
<link rel="stylesheet" type="text/css" media="screen" href="styleb.css" />
</head>
<body>
<section>
<div class="d2">
<h2>SCORE BOARD</h2>
</div>
<div class="container">
<div class="row">
<!-- Left Column for Team A -->
<div class="col-1">
<!-- Score for Team A -->
<h1 id="team1">Score:0</h1>
<h2>City Basketball Club</h2>
<h4>Metro Road</h4>
<!-- +1 / -1 button in Score for Team A -->
<button type="button" onclick="Score('team1', 1)" class="start-btn1" name="t+">Score +1</button>
<button type="button" onclick="Score('team1', -1)" class="start-btn1">Score -1</button>
</div>
<!-- Right Column for Team B -->
<div class="col-2">
<!-- Score for Team B -->
<h1 id="team2">Score:0</h1>
<h2>Rokey Basketball Center</h2>
<h4>Town Ship</h4>
<!-- +1 / -1 button in Score for Team B -->
<button type="button" onclick="Score('team2', 1)" class="start-btn1">Score +1</button>
<button type="button" onclick="Score('team2', -1)" class="start-btn1">Score -1</button>
</div>
</div>
</div>
<div class="influencers text-center">
<p>------------------------------------------</p>
</div>
</section>
<section>
<!-- Section for Java Script -->
<!-- Variable and Functions for score increase +1 and decrease -1 -->
<script>
function Score(name, toChange) {
var x = document.getElementById(name);
var score = x.innerText.split(':');
var readScore = parseInt(score[1]) + toChange;
x.innerText = score[0] + ':' + readScore.toString();
}
</script>
</section>
</body>
</html>