Code Inside The Body Tag Does Not Work

  • afrasiabsajid98

    (@afrasiabsajid98)


    3 years, 1 month ago

    Hi, I’ve created a small tool with the help of chatgpt the issue it’s written inside the complete html document and it contains the head and body tags with inline CSS and javascript functions.

    If I only use the code inside the body tag then the Javascript functions don’t work and if use the head tag also there are 2 head tags and it’s not a good practice.

    <!DOCTYPE html>
<html>
<head>
    <title>GST Calculator</title>

    <!-- Embed Bootstrap CSS -->
    <style>
        /*! Bootstrap v4.3.1 (https://getbootstrap.com/) */
        /* ... (insert the full Bootstrap CSS code here) ... */
    </style>

    <!-- Custom CSS -->
    <style>
      

        .calculator {
            background-color: #F4F9FF;
            padding: 23px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .btn-custom {
            border: 1px solid #007bff;
            color: #007bff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-custom:hover {
            background-color: #007bff;
            color: #ffffff;
        }

        .btn-danger-custom {
            border: 1px solid #dc3545;
            color: #dc3545;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-danger-custom:hover {
            background-color: #dc3545;
            color: #ffffff;
        }

        .title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <main class="container mt-5">
        <!-- Title -->
        

        <!-- Calculator container -->
        <div class="calculator">
            <!-- Form for user input -->
            <h2 class="title">Enter Price To Calculate</h2>
            <form>
                <!-- Amount input -->
                <div class="form-group row">
                    <label for="amount" class="col-sm-2 col-form-label">Amount</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" id="amount" placeholder="Enter amount">
                    </div>
                </div>

                <!-- Add and Subtract GST buttons -->
                <div class="form-group row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-custom mr-2" onclick="addGST()">Add GST</button>
                        <button type="button" class="btn btn-danger-custom" onclick="subtractGST()">Subtract GST</button>
                    </div>
                </div>
            </form>

            <!-- Result display -->
            <div class="form-group row">
                <label for="result" class="col-sm-2 col-form-label">Result:</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="result" placeholder="Result" readonly>
                </div>
            </div>

            <!-- GST Amount display -->
            <div class="form-group row">
                <label for="gstAmount" class="col-sm-2 col-form-label">GST </label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="gstAmount" placeholder="GST Amount" readonly>
                </div>
            </div>
        </div>
    </main>

        <!-- Custom JavaScript for GST calculation -->
    <script>
        function addGST() {
            let amount = parseFloat(document.getElementById("amount").value);
            let gstAmount = amount * 0.1;
            let result = amount + gstAmount;
            document.getElementById("result").value = result.toFixed(2);
            document.getElementById("gstAmount").value = gstAmount.toFixed(2);
        }

        function subtractGST() {
            let amount = parseFloat(document.getElementById("amount").value);
            let result = amount / 1.1;
            let gstAmount = amount - result;
            document.getElementById("result").value = result.toFixed(2);
            document.getElementById("gstAmount").value = gstAmount.toFixed(2);
        }
    </script>
</body>
</html>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Alan Fuller

    (@alanfuller)

    3 years, 1 month ago

    Ask chatgpt to re-write it as a WordPress plugin using wp_enqueue_style and wp_enqueue_script then you make have something usable.

    If you want to get really flash get ChatGPT to re-write is as a WordPress block plugin.

    Thread Starter afrasiabsajid98

    (@afrasiabsajid98)

    3 years, 1 month ago

    Thanks let me try to convert it to a plugin. I also used chat gpt to write this code as well.

    Thanks for the idea.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Code Inside The Body Tag Does Not Work’ is closed to new replies.