Scribd Logo
Upload

Welcome to Scribd!

  • HTML, CSS and JavaScript.

    Uploaded by

    Souhardya Kundu
    3 views7 pages
    The document describes building a simple tic-tac-toe game using JavaScript with 3 sentences: 1. The game is played on a 3x3 grid where two players take turns marking squares with X or O symbols until one player gets 3 in a row, at which point they win. 2. The code creates the grid with divs, tracks the current player and game state, and checks for a win after each turn. 3. When all squares are marked or there is a win, the game ends and alerts the winner or a tie.

    Original Description:

    Games ussing html,css and javascript

    Original Title

    HTML,CSS and JavaScript.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes building a simple tic-tac-toe game using JavaScript with 3 sentences: 1. The game is played on a 3x3 grid where two players take turns marking squares with X or O symbols until one player gets 3 in a row, at which point they win. 2. The code creates the grid with divs, tracks the current player and game state, and checks for a win after each turn. 3. When all squares are marked or there is a win, the game ends and alerts the winner or a tie.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views7 pages

    HTML, CSS and JavaScript.

    Uploaded by

    Souhardya Kundu
    The document describes building a simple tic-tac-toe game using JavaScript with 3 sentences: 1. The game is played on a 3x3 grid where two players take turns marking squares with X or O symbols until one player gets 3 in a row, at which point they win. 2. The code creates the grid with divs, tracks the current player and game state, and checks for a win after each turn. 3. When all squares are marked or there is a win, the game ends and alerts the winner or a tie.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    BCSE203E- WEB Programming

    aSSignmEnt 2.3
    Arnav Chaturvedi
    22BCE2110
    Q1. Create an HTML file that lists:
    To create a very simple income tax form. The form will have two text fields.
    The first one is where the
    user will enter their total income. The second field is where the computed
    income tax is displayed. The
    form will also need one button. When this button is pressed, the income
    tax is computed for the income
    entered in the first field. The form could look something as follows:
    Here is the income range and tax slab for computation.

    CODE:
    Index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Income Tax Calculator</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="container">
    <h1>Income Tax Calculator</h1>
    <form id="incomeTaxForm">
    <label for="income">Enter Yearly Income:</label>
    <input type="number" id="income" name="income" required>
    <button type="submit">Calculate Tax</button>
    </form>
    <p>Your Income Tax is: <span id="taxAmount"></span></p>
    </div>
    <script src="index.js"></script>
    </body>
    </html>

    Index.js
    document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('incomeTaxForm');
    const taxAmountElement = document.getElementById('taxAmount');

    form.addEventListener('submit', function(event) {
    event.preventDefault();
    const income = parseFloat(document.getElementById('income').value);
    const taxAmount = calculateTax(income);
    taxAmountElement.textContent = '$' + taxAmount.toFixed(2);
    });
    });

    function calculateTax(income) {
    let taxAmount = 0;
    if (income > 120000) {
    taxAmount = 18320 + 0.32 * (income - 120000);
    } else if (income > 80000) {
    taxAmount = 8720 + 0.24 * (income - 80000);
    } else if (income > 40000) {
    taxAmount = 2320 + 0.16 * (income - 40000);
    } else if (income > 20000) {
    taxAmount = 720 + 0.08 * (income - 20000);
    } else if (income > 2000) {
    taxAmount = 0.04 * (income - 2000);
    }
    return taxAmount;
    }

    Styles.css
    body {
    font-family: Arial, sans-serif;
    }

    .container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    }

    h1 {
    text-align: center;
    }

    form {
    margin-bottom: 20px;
    }

    label {
    display: block;
    margin-bottom: 5px;
    }

    input[type="number"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    }

    button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }

    button:hover {
    background-color: #45a049;
    }

    p {
    font-size: 18px;
    }

    OUTPUT:
    Q2. You will create a 3×3 grid where two players will take turns marking
    the grid with cross and circle
    symbols. The first player to get three marks in a horizontal, vertical, or
    diagonal row wins the game.
    Building a simple Tic Tac Toe game using JavaScript.
    1. The game is played on a grid that's 3 squares by 3 squares.
    2. You are X, your friend (or the computer in this case) is O. Players take
    turns putting their marks in empty squares.
    3. The first player to get 3 of her marks in a row (up, down, across, or
    diagonally) is the winner.
    4. When all 9 squares are full, the game is over. If no player has 3 marks
    in a row, the game ends in a tie.

    CODE:
    Index.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="board"></div>
    <script src="index.js">
    </script>
    </body>
    </html>

    Index.js
    document.addEventListener('DOMContentLoaded', function() {
    const board = document.querySelector('.board');
    let currentPlayer = 'X';
    let cells = ['', '', '', '', '', '', '', '', ''];
    let gameEnded = false;

    // Create the grid


    for (let i = 0; i < 9; i++) {
    const cell = document.createElement('div');
    cell.classList.add('cell');
    cell.dataset.index = i;
    cell.addEventListener('click', () => {
    if (!gameEnded && cells[i] === '') {
    cells[i] = currentPlayer;
    cell.textContent = currentPlayer;
    if (checkWin()) {
    alert(currentPlayer + ' wins!');
    gameEnded = true;
    } else if (cells.every(cell => cell !== '')) {
    alert('It\'s a tie!');
    gameEnded = true;
    } else {
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
    }
    });
    board.appendChild(cell);
    }

    function checkWin() {
    const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
    ];
    for (let line of lines) {
    const [a, b, c] = line;
    if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
    return true;
    }
    }
    return false;
    }
    });
    Styles.css
    .board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 180px;
    height: 120px;
    }
    .board .cell {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    }
    OUTPUT:

    You might also like