Skip to content

Instantly share code, notes, and snippets.

@LiorB-D
Created Mar 27, 2022
Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment