LiorB-D/JQDemo.html

## JQDemo.html
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <body>
        <input id = "numInp"></input>
        <button>Calculate Square</button>
        <p class = "output">Enter a number</p>
    </body>

    <script>
    // We want to wait for the document to be ready before running any queries
    $(document).ready(() => {
        // Query Button and add click event
        $("button").click(() => {
            // Pull input and square it
            let num = $("#numInp").val()
            let square = num * num
            // If it is an invalid number give error message, else display square
            if(isNaN(num)) {
                $(".output").css('color', 'red')
                $(".output").html("Invalid Input: " + num)
            }else {
                $(".output").css('color', 'black')
                $(".output").html(num + " times " + num + " = " + square)
            }

        })
    })

    </script>
</html>
	<html>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	<body>
	<input id = "numInp"></input>
	<button>Calculate Square</button>
	<p class = "output">Enter a number</p>
	</body>

	<script>
	// We want to wait for the document to be ready before running any queries
	$(document).ready(() => {
	// Query Button and add click event
	$("button").click(() => {
	// Pull input and square it
	let num = $("#numInp").val()
	let square = num * num
	// If it is an invalid number give error message, else display square
	if(isNaN(num)) {
	$(".output").css('color', 'red')
	$(".output").html("Invalid Input: " + num)
	}else {
	$(".output").css('color', 'black')
	$(".output").html(num + " times " + num + " = " + square)
	}

	})
	})

	</script>
	</html>