Add files via upload

renjith-r-23 · Nov 14, 2023 · bc57f01 · bc57f01
1 parent 468c9cf
commit bc57f01
Show file tree

Hide file tree

Showing 11 changed files with 371 additions and 0 deletions.
diff --git a/JS/Task1/index.html b/JS/Task1/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="dice">
+        <div class="die">
+            <p class="dot" id="dot1"></p>
+            <p class="dot" id="dot2"></p>
+            <p class="dot" id="dot3"></p>
+            <p class="dot" id="dot4"></p>
+            <p class="dot" id="dot5"></p>
+            <p class="dot" id="dot6"></p>
+        </div>
+    </div>
+    <button class="b" onclick="rollDice()">Roll the Dice</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/JS/Task1/script.js b/JS/Task1/script.js
@@ -0,0 +1,14 @@
+function rollDice() {
+    const dots = document.querySelectorAll('.dot');
+
+
+    dots.forEach(dot => dot.style.display = 'none');
+
+
+    const randomNumber = Math.floor(Math.random() * 6) + 1;
+
+
+    for (let i = 0; i < randomNumber; i++) {
+        dots[i].style.display = 'block';
+    }
+}
diff --git a/JS/Task1/style.css b/JS/Task1/style.css
@@ -0,0 +1,42 @@
+body{
+  background-color: floralwhite;
+}
+
+.dice {
+    width: 200px;
+    height: 200px;
+    border: 3px solid #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin-left: 25rem;
+    margin-top: 25rem;
+    background-color: white;
+}
+
+.die {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 5px;
+}
+
+.dot {
+    width: 40px;
+    height: 40px;
+    background-color: red;
+    border-radius: 50%;
+    display: none;
+    padding: 4px;
+}
+
+.b{
+  margin-left: 25rem;
+  width: 13.2rem;
+  height: 2rem;
+  margin-top: 2rem;
+  font-weight: bold;
+  font-size: 1rem;
+
+}
diff --git a/JS/Task2/index.html b/JS/Task2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Addition</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h2>Enter the two numbers:</h2>
+    <input type="number" id="input1">
+    <input type="number" id="input2">
+    <button onclick="sum()">ADD</button>
+    <div class="block">
+        <p id="num"></p>
+
+    <p>The Sum is:</p>
+    <p id="op"></p>
+</div>
+</body>
+
+<script>
+    function sum(){
+        var x=Number(document.getElementById("input1").value)
+        var y=Number(document.getElementById("input2").value)
+        var sum= x+y
+        document.getElementById("op").innerHTML=sum
+    }
+
+
+</script>
+</html>
diff --git a/JS/Task2/style.css b/JS/Task2/style.css
@@ -0,0 +1,26 @@
+body {
+    background-color: aquamarine;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; 
+}
+.block {
+    border: 5px solid black;
+    margin: auto;
+    width: 10%;
+    height: 50%;
+}
+
+h2, button, p, input {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5px 0; 
+}
+
+button {
+    height: 30px; 
+}
+
+
diff --git a/JS/Task3/index.html b/JS/Task3/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EMI Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="block">
+    <h2>EMI CALCULATOR</h2>
+    <form>
+        <label for="rate">Enter the rate of interest:</label><br>
+        <input type="number" id="rate" name="rate"><br>
+        <label for="principal">Enter the Principal Amount:</label><br>
+        <input type="number" id="principal" name="principal"><br>
+        <label for="tenure">Enter the loan tenure:</label><br>
+        <input type="number" id="tenure" name="tenure"><br>
+        <button onclick="emi(); return false;">Submit</button>
+    </form>
+    <p>The Calculated EMI is:</p>
+    <p id="op"></p>
+</div>
+
+    <script>
+        function emi() {
+            var r = Number(document.getElementById("rate").value);
+            var p = Number(document.getElementById("principal").value);
+            var n = Number(document.getElementById("tenure").value);
+            var emi = (p * r * (Math.pow(1 + r, n)) / (Math.pow(1+r, n)-1));
+            console.log(emi);
+            document.getElementById("op").innerHTML = "EMI: " + emi.toFixed(2);
+        }
+    </script>
+</body>
+</html>
diff --git a/JS/Task3/style.css b/JS/Task3/style.css
@@ -0,0 +1,29 @@
+body {
+    background-color: aquamarine;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.block {
+    border: 5px solid black;
+    width: 30%; 
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+label, input, button {
+    margin-bottom: 10px;
+}
+
+button {
+    padding: 10px;
+    cursor: pointer;
+}
diff --git a/JS/Task4/index.html b/JS/Task4/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form Validation</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+
+    </style>
+</head>
+<body>
+    <div class="block">
+    <h2>Enter your details</h2>
+    <form id="myForm" onsubmit="return validateForm()">
+        <label for="name">Name:</label><br>
+        <input type="text" id="name" name="name">
+        <span id="nameError" class="error"></span><br>
+        <label for="email">Email:</label><br>
+        <input type="email" id="email" name="email">
+        <span id="emailError" class="error"></span><br>
+        <button type="submit">Submit</button>
+    </form>
+</div>
+    <script>
+        function validateForm() {
+            var name = document.getElementById("name").value;
+            var email = document.getElementById("email").value;
+            document.getElementById("nameError").innerHTML = "";
+            document.getElementById("emailError").innerHTML = "";
+            var isValid = true;
+
+            if (name.trim() === "") {
+                document.getElementById("nameError").innerHTML = "Name is required.";
+                isValid = false;
+            }
+
+            if (email.trim() === "") {
+                document.getElementById("emailError").innerHTML = "Email is required.";
+                isValid = false;
+            } else if (!isValidEmail(email)) {
+                document.getElementById("emailError").innerHTML = "Invalid email format.";
+                isValid = false;
+            }
+            return isValid;
+        }
+
+        function isValidEmail(email) {
+            var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            return emailRegex.test(email);
+        }
+    </script>
+</body>
+</html>
diff --git a/JS/Task4/style.css b/JS/Task4/style.css
@@ -0,0 +1,32 @@
+.error {
+    color: red;
+}
+body {
+    background-color: aquamarine;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.block {
+    border: 5px solid black;
+    width: 30%; 
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+label, input, button {
+    margin-bottom: 10px;
+}
+
+button {
+    padding: 10px;
+    cursor: pointer;
+}
diff --git a/JS/Task5/index.html b/JS/Task5/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    ul{
+      font-size: large;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <h1>Person Data</h1>
+  <ul id="personList"></ul>
+
+  <script>
+      fetch('persons1.json')
+          .then(response => response.json())
+          .then(data => {
+              const personList = document.getElementById('personList');
+
+              data.forEach(person => {
+                  const listItem = document.createElement('li');
+                  listItem.textContent = `Name: ${person.name},Age: ${person.age},  Place: ${person.place},  DOB: ${person.dob}`;
+                  personList.appendChild(listItem);
+              });
+          })
+          .catch(error => {
+              console.error('Error fetching or parsing JSON:', error);
+          });
+  </script>
+</body>
+</html>
diff --git a/JS/Task5/persons1.json b/JS/Task5/persons1.json
@@ -0,0 +1,50 @@
+[
+    {
+      "name": "Alice",
+      "age": 25,
+      "place": "New York",
+      "dob": "1998-03-12"
+    },
+    {
+      "name": "Bob",
+      "age": 32,
+      "place": "Los Angeles",
+      "dob": "1991-07-19"
+    },
+    {
+      "name": "Charlie",
+      "age": 41,
+      "place": "Chicago",
+      "dob": "1982-11-03"
+    },
+    {
+      "name": "David",
+      "age": 18,
+      "place": "Houston",
+      "dob": "2005-05-08"
+    },
+    {
+      "name": "Emily",
+      "age": 29,
+      "place": "San Francisco",
+      "dob": "1994-09-26"
+    },
+    {
+      "name": "Frank",
+      "age": 36,
+      "place": "Boston",
+      "dob": "1987-12-30"
+    },
+    {
+      "name": "Grace",
+      "age": 22,
+      "place": "Miami",
+      "dob": "2001-01-14"
+    },
+    {
+      "name": "Harry",
+      "age": 47,
+      "place": "Seattle",
+      "dob": "1976-06-21"
+    }
+  ]