From 08dc058cfe1184281fef89c0c484b9e8a6b7a6b7 Mon Sep 17 00:00:00 2001 From: Saumit Dinesan Date: Wed, 13 Sep 2023 19:08:54 +0530 Subject: Lab04: HTML Form Validation + Factorial --- Lab04/fact/README.md | 11 +++++++++ Lab04/fact/index.html | 33 ++++++++++++++++++++++++++ Lab04/fact/screenshot.png | Bin 0 -> 79283 bytes Lab04/fact/script.js | 23 ++++++++++++++++++ Lab04/fact/style.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++ Lab04/index.html | 45 +++++++++++++++++++++++++++++++++++ Lab04/insert.php | 54 ++++++++++++++++++++++++++++++++++++++++++ Lab04/style.css | 12 ++++++++++ 8 files changed, 237 insertions(+) create mode 100644 Lab04/fact/README.md create mode 100644 Lab04/fact/index.html create mode 100644 Lab04/fact/screenshot.png create mode 100644 Lab04/fact/script.js create mode 100644 Lab04/fact/style.css create mode 100644 Lab04/index.html create mode 100644 Lab04/insert.php create mode 100644 Lab04/style.css (limited to 'Lab04') diff --git a/Lab04/fact/README.md b/Lab04/fact/README.md new file mode 100644 index 0000000..6451270 --- /dev/null +++ b/Lab04/fact/README.md @@ -0,0 +1,11 @@ +# Lab04 - Factorial Calculator + +This directory contains files for a simple web application that calculates the factorial of a non-negative integer entered by the user using Javascript and displays using `innerText`. + +## Description + +Factorial is a mathematical operation that involves the multiplication of a positive integer with all the smaller positive integers leading up to it. This web application allows users to input a number, and it will calculate and display the factorial of that number. + +## Brief Look + +![Factorial Calculator Screenshot](screenshot.png) diff --git a/Lab04/fact/index.html b/Lab04/fact/index.html new file mode 100644 index 0000000..a6f7456 --- /dev/null +++ b/Lab04/fact/index.html @@ -0,0 +1,33 @@ + + + + + + + Factorial Calculator + + +

Factorial

+

Factorial is a mathematical operation that involves the multiplication of a positive integer with all the smaller positive integers leading up to it.
It is denoted by the symbol "!" following a number.
For instance, the factorial of 5 (written as 5!) equals the product of 5 × 4 × 3 × 2 × 1, resulting in 120.

+
+ + +
+ +

+ + + diff --git a/Lab04/fact/screenshot.png b/Lab04/fact/screenshot.png new file mode 100644 index 0000000..00a1ec0 Binary files /dev/null and b/Lab04/fact/screenshot.png differ diff --git a/Lab04/fact/script.js b/Lab04/fact/script.js new file mode 100644 index 0000000..a8f397e --- /dev/null +++ b/Lab04/fact/script.js @@ -0,0 +1,23 @@ +function factorial(n) { + if (n === 0) { + return 1; + } + return n * factorial(n - 1); +} + +document.addEventListener("DOMContentLoaded", function () { + const button = document.getElementById("submitbutton"); + const resultElement = document.getElementById("result"); + const numberInput = document.getElementById("numberInput"); + + button.addEventListener("click", function () { + const input = parseInt(numberInput.value); + + if (!isNaN(input) && input >= 0) { + const result = factorial(input); + resultElement.innerText = `The factorial of ${input} is equal to ${result}`; + } else { + resultElement.innerText = "Please enter a non-negative number."; + } + }); +}); diff --git a/Lab04/fact/style.css b/Lab04/fact/style.css new file mode 100644 index 0000000..b0452b7 --- /dev/null +++ b/Lab04/fact/style.css @@ -0,0 +1,59 @@ +body, h1, p, div { + margin: 0; + padding: 0; +} + +/* Apply some basic styles */ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + text-align: center; + padding: 20px; +} + +h1 { + color: #333; + font-size: 24px; + margin-bottom: 10px; +} + +p { + color: #666; + font-size: 16px; + line-height: 1.4; + margin-bottom: 20px; +} + +div { + margin-bottom: 20px; +} + +label { + font-weight: bold; +} + +input[type="number"] { + width: 30%; + padding: 5px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#result { + font-weight: bold; + color: #333; + font-size: 18px; +} diff --git a/Lab04/index.html b/Lab04/index.html new file mode 100644 index 0000000..f433526 --- /dev/null +++ b/Lab04/index.html @@ -0,0 +1,45 @@ + + + + + + + HTML Form Creation + + +

Registration Form

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+ + \ No newline at end of file diff --git a/Lab04/insert.php b/Lab04/insert.php new file mode 100644 index 0000000..6a5a04f --- /dev/null +++ b/Lab04/insert.php @@ -0,0 +1,54 @@ + + + + + Insert Page page + + + +
+ Data stored in a database successfully." + . " Please browse your localhost php my admin" + . " to view the updated data"; + + echo nl2br("\n$first_name\n $last_name\n " + . "$gender\n $phone \n $email \n $city\n $department"); + +} else{ + echo "ERROR: Could not insert the data values $sql. " + . mysqli_error($conn); +} + +// Close connection +mysqli_close($conn); +?> +
+ + + \ No newline at end of file diff --git a/Lab04/style.css b/Lab04/style.css new file mode 100644 index 0000000..3f1fdbe --- /dev/null +++ b/Lab04/style.css @@ -0,0 +1,12 @@ +html { + font-family: sans-serif; + margin-top: 1%; + margin-left: 3%; + background-color: whitesmoke; + margin-right: auto; + } + +h1 { + text-decoration: underline; + font-size: 1.9rem; +} \ No newline at end of file -- cgit v1.2.3