Assignment 2.3
Assignment 2.3
3 22bds0233
<!DOCTYPE html>
<html lang ="en">
<head>
<title>income tax calcultor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>INCOME TAX CALCULATOR</h4>
<form id="taxform">
<label for="income">Enter yearly income:</label><br>
<input type="number" id="income" name="income"><br><br>
<button type="button" onclick="calculatetax()">calculate
tax</button><br>
<label for="result">Income tax is:</label><br>
<input type="text" id="result" name="result"
readonly><br><br>
</form>
<script>
function calculatetax(){
const income=document.getElementById("income").value;
let tax=0;
if(income<=2000){
tax=0;
}
else if (income<=20000){
tax=(income-2000)*0.04;
}
else if (income<=40000){
tax=720+(income-2000)*0.08;
}
else if (income<=80000){
tax=2320+(income-4000)*0.16;
}
else if (income<=120000){
tax=8720+(income-8000)*0.24;
}
else {
tax=18320+(income-12000)*0.32;
}
document.getElementById("result").value=tax.toFixed(2);
}
</script>
</body>
</html>
Style.css
body{
background-color: bisque;
}
form{
margin:20px;
}
label{
display:block;
margin-bottom:5px;
}
input[type="text"]{
padding:8px;
}
button{
padding: 10px 20px;
background-color: rgb(187, 129, 42);
border: 30px;
cursor: pointer;
border-radius: 4px;
align-content: flex-end;
}
2. tic tac toe
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tic Tac Toe</title>
<style>
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 2px;
margin: 20px auto;
}
.cell {
width: 100px;
height: 100px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
cursor: pointer;
}
.cell:hover {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="board">
<div class="cell" id="cell0" onclick="cellClicked(0)"></div>
<div class="cell" id="cell1" onclick="cellClicked(1)"></div>
<div class="cell" id="cell2" onclick="cellClicked(2)"></div>
<div class="cell" id="cell3" onclick="cellClicked(3)"></div>
<div class="cell" id="cell4" onclick="cellClicked(4)"></div>
<div class="cell" id="cell5" onclick="cellClicked(5)"></div>
<div class="cell" id="cell6" onclick="cellClicked(6)"></div>
<div class="cell" id="cell7" onclick="cellClicked(7)"></div>
<div class="cell" id="cell8" onclick="cellClicked(8)"></div>
</div>
<script>
let currentPlayer = 'X';
let cells = document.querySelectorAll('.cell');
let winner = false;
function cellClicked(index) {
if (cells[index].innerText === '' && !winner) {
cells[index].innerText = currentPlayer;
if (checkWinner()) {
winner = true;
alert(currentPlayer + ' wins!');
} else if (checkDraw()) {
alert('It\'s a draw!');
} else {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
}
}
function checkWinner() {
const winConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
function checkDraw() {
for (let cell of cells) {
if (cell.innerText === '') {
return false;
}
}
return true;
}
</script>
</body>
</html>