Simple React Use State Example

import { useState } from "react";

function Post(){

const [inval, setInVal] = useState('');


function changeTextHandler(e){

    setInVal(e.target.value);
}

    return (
        <>
        <form>
            <textarea onChange={changeTextHandler}/>
            <div>{inval}</div>
        </form>
        </>
    )
};

export default Post;

Boostrap 5 keep last opened tab ID after page reload using Local Storage

Max length input validation inline with javascript

 <input type="text" class="form-control" id="txtProjectCreateProjectCode"

placeholder="Project Code" required oninput="if (this.value.length > 50) this.value = this.value.slice(0, 50);" name="CreateProject.Code" value="">

Bootstrap 5 Logout confirmation for .net core

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Logout Confirmation</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to sign out?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <form id="logoutForm" asp-action="logoff" asp-controller="Auth" class="navbar-right">
                        <a class="btn btn-primary"
                      @*   onclick="return alert('Are you sure do you want to sign out?')" *@
                        href="javascript:document.getElementById('logoutForm').submit()"><i class="mdi mdi-logout me-1"></i><span>Logout</span></a>
                    </form>
                </div>
            </div>
        </div>
    </div>

 <a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#exampleModal">
     <i class="mdi mdi-logout me-1"></i> Logout
 </a>

OTP Countdown JavaScript Version 2 - Initial Page load countdown

 <button id="resendOtp" class="btn  mt-0 mb-3 d-block w-100" onclick="resendOtp()" type="button" style="border:0px solid  #1f3d88;
background:transparent;
color:#1f3d88;">
                        <i class="fa-solid fa-rotate-right"></i> &nbsp;
                        Resend OTP
                    </button>

                    <div id="countdown" style="display: block; text-align: center;
    font-size: 12px;
    color: #fdb827;">
                        Resend OTP in <span id="timer">120</span> seconds
                    </div>

                    <script>

                        function startCountdown() {

                            const resendButtonInit = document.getElementById("resendOtp");
                            resendButtonInit.disabled = true;
                            let seconds = 120;

                            // Function to update the countdown timer
                            function updateTimer() {
                                const timer = document.getElementById("timer");
                                timer.textContent = seconds;
                                seconds--;

                                if (seconds < 0) {
                                    // Hide the countdown when the timer reaches 0
                                    const countdownDiv = document.getElementById("countdown");
                                    countdownDiv.style.display = "none";
                                    resendButtonInit.disabled = false;
                                } else {
                                    // Continue updating the timer
                                    setTimeout(updateTimer, 1000);
                                }
                            }

                            // Start the countdown
                            updateTimer();
                        }

                        // Call startCountdown function when the page loads
                        window.onload = startCountdown;

                        var resendOtpBtn = document.getElementById("resendOtp");

                        resendOtpBtn.addEventListener('click',function(){
                            resendOtp();
                        });

                        function resendOtp() {
                            // Get the value of the textPhoneNumber input field
                            const phoneNumber = document.getElementById("textPhoneNumber").value;

                            // Disable the "Resend OTP" button
                            const resendButton = document.getElementById("resendOtp");
                            resendButton.disabled = true;

                            // Show the countdown timer
                            const countdownDiv = document.getElementById("countdown");
                            countdownDiv.style.display = "block";

                            let seconds = 120;

                            // Function to update the countdown timer
                            function updateTimer() {
                                const timer = document.getElementById("timer");
                                timer.textContent = seconds;
                                seconds--;

                                if (seconds < 0) {
                                    // Re-enable the button and hide the countdown when the timer reaches 0
                                    resendButton.disabled = false;
                                    countdownDiv.style.display = "none";
                                } else {
                                    // Continue updating the timer
                                    setTimeout(updateTimer, 1000);
                                }
                            }

                            // Start the countdown
                            updateTimer();

                            // Create a JSON object with the MobileNo property
                            const data = {
                                MobileNo: phoneNumber
                            };

                            // Send a POST request to the API endpoint
                            fetch("https://localhost:7146/api/security/resend-otp", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json"
                                },
                                body: JSON.stringify(data)
                            })
                                .then(response => {
                                    if (response.ok) {
                                        // Handle success
                                       //alert("OTP resend request successful");

                                    } else {
                                        // Handle errors
                                        alert("OTP resend request failed");

                                    }
                                })
                                .catch(error => {
                                    console.error("An error occurred:", error);

                                });
                        }
                    </script>