Lab04: HTML Form Validation + Factorial

author: Saumit Dinesan <justsaumit@protonmail.com> 2023-09-13 19:08:54 +0530
committer: Saumit Dinesan <justsaumit@protonmail.com> 2023-09-13 19:08:54 +0530
commit: 08dc058cfe1184281fef89c0c484b9e8a6b7a6b7 (patch)
tree: 834158194e039ef4a76a30752241089f06c87be7
parent: f8a237e363b020e876f553520329046cf813da8e (diff)
8 files changed, 237 insertions, 0 deletions
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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-7">
+    <meta name="viewport" content="width=device-width, initial-scale=2.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Factorial Calculator</title>
+</head>
+<body>
+    <h1> Factorial </h1>
+    <p>Factorial is a mathematical operation that involves the multiplication of a positive integer with all the smaller positive integers leading up to it. <br>It is denoted by the symbol "!" following a number. <br> For instance, the factorial of 5 (written as 5!) equals the product of 5 × 4 × 3 × 2 × 1, resulting in 120. </p>
+    <div>
+    <label for="numberInput">Enter a number:</label>
+    <input type="number" id="numberInput">
+    </div>
+    <button type="submit" id="submitbutton">Submit</button>
+    <p id="result"></p>
+    <script>
+    function factorial(n) {
+        if (n==0){
+            return 1;
+        }
+        return n*factorial(n-1);
+    }
+    const button = document.getElementById("submitbutton")
+    button.addEventListener("click", function() {
+        const input = document.getElementById("numberInput").value;
+        const result = factorial(input)
+        document.getElementById("result").innerText=`The factorial of ${input} is equal to ${result}`;
+    });
+    </script>
+</body>
+</html>
diff --git a/Lab04/fact/screenshot.png b/Lab04/fact/screenshot.png
new file mode 100644
index 0000000..00a1ec0
--- /dev/null
+++ b/Lab04/fact/screenshot.png
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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>HTML Form Creation</title>
+</head>
+<body>
+    <h1>Registration Form</h1>
+    <form action="./insert.php" method="post">
+        <label for="fname">First name:</label><br>
+        <input type="text" id="fname" name="fname" required><br>
+        <label for="lname">Last name:</label><br>
+        <input type="text" id="lname" name="lname" required><br>
+        <label for="gender">Gender:</label><br>
+        <select name="gender" id="gender">
+            <option value="male">Male</option>
+            <option value="female">Female</option>
+            <option value="other">Other</option>
+        </select>
+        <br>
+        <label for="phone">Phone Number:</label><br>
+        <input type="number" size="10" id="phone" name="phone" required><br>
+        <label for="email">Email Address:</label><br>
+        <input type="email" id="email" name="email" required><br>
+        <label for="city">City:</label><br>
+        <input id="city" name="city" required><br>
+        <br>
+        <label for="Preferred Department">Department: </label><br>
+        <input type="radio" id="it" name="department" value="IT" required>
+        <label for="it">Information Technology</label><br>
+        <input type="radio" id="cse" name="department" value="CSE" required>
+        <label for="cse">Computer Science and Engineering</label><br>
+        <input type="radio" id="mech" name="department" value="MECH" required>
+        <label for="mech">Mechanical Engineering</label><br>
+        <input type="radio" id="civil" name="department" value="CIVIL" required>
+        <label for="civil">Civil Engineering</label><br>
+        <input type="radio" id="ece" name="department" value="ECE" required>
+        <label for="ece">Electronics and Communication Engineering</label><br>
+        <br>
+        <input type="submit" value="Submit">
+    </form> 
+</body>
+</html>
+\ 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 @@
+<!DOCTYPE html>
+<html>
+ 
+<head>
+    <title>Insert Page page</title>
+</head>
+ 
+<body>
+    <center>
+        <?php
+        $servername = "db";
+        $username = "example";
+        $password = "example";
+        $dbname = "regformdata";
+        $tablename = "regtable";
+ 
+// Create connection
+$conn = mysqli_connect($servername, $username, $password, $dbname);
+
+// Check connection
+if ($conn === false) {
+    die("Connection failed: "
+        . mysqli_connect_error());
+}
+
+$first_name = $_REQUEST['fname'];
+$last_name = $_REQUEST['lname'];
+$gender = $_REQUEST['gender'];
+$phone = $_REQUEST['phone'];
+$email = $_REQUEST['email'];
+$city = $_REQUEST['city'];
+$department = $_REQUEST['department'];
+
+$sql2 = "INSERT INTO regform VALUES (first_name, last_name, gender, phone, email, city, department)";
+if(mysqli_query($conn, $sql)){
+    echo "<h3>Data stored in a database successfully."
+        . " Please browse your localhost php my admin"
+        . " to view the updated data</h3>";
+
+    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);
+?>
+    </center>
+</body>
+ 
+</html>
+\ 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
author	Saumit Dinesan <justsaumit@protonmail.com>	2023-09-13 19:08:54 +0530
committer	Saumit Dinesan <justsaumit@protonmail.com>	2023-09-13 19:08:54 +0530
commit	08dc058cfe1184281fef89c0c484b9e8a6b7a6b7 (patch)
tree	834158194e039ef4a76a30752241089f06c87be7
parent	f8a237e363b020e876f553520329046cf813da8e (diff)