diff options
| 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) | |
Lab04: HTML Form Validation + Factorial
| -rw-r--r-- | Lab04/fact/README.md | 11 | ||||
| -rw-r--r-- | Lab04/fact/index.html | 33 | ||||
| -rw-r--r-- | Lab04/fact/screenshot.png | bin | 0 -> 79283 bytes | |||
| -rw-r--r-- | Lab04/fact/script.js | 23 | ||||
| -rw-r--r-- | Lab04/fact/style.css | 59 | ||||
| -rw-r--r-- | Lab04/index.html | 45 | ||||
| -rw-r--r-- | Lab04/insert.php | 54 | ||||
| -rw-r--r-- | Lab04/style.css | 12 |
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 + + 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 Binary files differnew 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 |
