Add files via upload

hammadliaquat77 · May 28, 2024 · 0e55294 · 0e55294
1 parent 4b45620
commit 0e55294
Show file tree

Hide file tree

Showing 5 changed files with 313 additions and 0 deletions.
diff --git a/Userdetail.js b/Userdetail.js
@@ -0,0 +1,98 @@
+
+// function drone(){
+//     var Name = document.getElementById('name').value
+//     var fatherName = document.getElementById('Fathername').value
+//     var Email = document.getElementById('email').value
+//     var UserName = document.getElementById('userName').value
+//     var password = document.getElementById('password').value
+//     var cnic = document.getElementById('Cnic').value
+//     var adress = document.getElementById('Adress').value
+//     var city = document.getElementById('City').value
+//     var Qualification = document.getElementById('qualification').value
+//     var contact = document.getElementById('Contact').value
+
+//     // console.log(`name: ${Name}  userName: ${userName} email: ${Email} adress: ${dress} 
+//     // city: ${city} cnic: ${cnic} qualification: ${Qualification} password: ${password}
+//     //  contact: ${contact} Fathername: ${fatherName}`);
+
+//     console.log("name ===>"+ Name);
+//     console.log("Fathername ===>"+ fatherName);
+//     console.log("username ===>"+ UserName);
+//     console.log("email ===>"+ Email);
+//     console.log("Adress ===>"+ adress);
+//     console.log("City ===>"+ city);
+//     console.log("Cnic ===>"+ cnic);
+//     console.log("Qualification ===>"+ Qualification);
+//     console.log("Password ===>"+ password);
+//     console.log("Contact ===>"+ contact);
+
+// }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function data(){
+    var userName = document.getElementById('userName').value
+    var user = document.getElementById('name').value
+    var email = document.getElementById('email').value
+    var passw = document.getElementById('password').value
+    var num =  document.getElementById('Num').value
+
+            console.log("User ===>  " + user);
+            console.log("UserName ===>  " + userName);
+            console.log("Email ===>  " + email);
+            console.log("MObile Number ===>  " + num);
+            console.log("Password ===>  " + passw);
+
+            document.getElementById('userName').value =""
+            document.getElementById('name').value =""
+            document.getElementById('email').value =""
+            document.getElementById('password').value =""
+            document.getElementById('Num').value =""
+
+
+
+        }    
+
+    function pass() {
+
+ let passw = document.getElementById('password');
+ let image = document.getElementById('img');
+
+if (passw.type == 'password') {
+    passw.type = 'text'
+    image.src = 'img/1.png'
+
+}else{
+    passw.type = 'password'
+    image.src = 'img/2.png'
+}
+
+}
+
+
+document.addEventListener('keypress' , function(e){
+
+    if(e.key === 'Enter'){
+    data()
+    }
+})
+
+
+
diff --git a/img/1.png b/img/1.png
diff --git a/img/2.png b/img/2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Detail</title>
+</head>
+<link rel="stylesheet" href="style.css">
+<body>
+
+
+<!--  
+ <input type="text" id="name" placeholder="Enter your Name"><br>
+ <input type="text" id="Fathername" placeholder="Enter your FatherName"><br>
+ <input type="email" id="email" placeholder="Enter your Email"><br>
+ <input type="text" id="userName" placeholder="Entter your UserName"><br>
+ <input type="password" id="password" placeholder="Enter your Password"><br>
+ <input type="text" id="Cnic" placeholder="Enter your cnic Number"><br>
+ <input type="text" id="Adress" placeholder="Enter your Adress"><br>
+ <input type="text" id="City" placeholder="Enter your City"><br>
+ <input type="text" id="qualification" placeholder="Enter your Qualification"><br>
+ <input type="text" id="Contact" placeholder="Enter your Contact Number"><br>
+ <button onclick="drone()">Submit</button> 
+   -->
+
+
+
+
+
+
+<div class="enter">
+   <h1>Enter Your Detail</h1>
+  <input type="text" id="name" placeholder="Enter your Name" required><br> 
+  <input type="text" id="userName" placeholder="Your FatherName" required><br>
+  <input type="email" id="email" placeholder="Enter your Email" required><br>
+  <input type="text" id="Num" placeholder="Enter your Mobile Number" required maxlength="11" minlength="11">
+  <input type="password" id="password" placeholder="Enter your Password" required minlength="8" maxlength="12"><br><br>
+  <img src="img/2.png" alt="" id="img" onclick="pass()">
+  <button onclick="data()">Submit</button> 
+
+</div>
+
+<!-- <div id="details" style="display: none;">
+  <h2>your details</h2>
+  <p><b>Your Name</b> <span id="showname"></span></p>
+  <p><b>UserName</b> <span id="showusername"></span></p>
+  <p><b>Your Email</b> <span id="showemail"></span></p>
+  <p><b>Password</b> <span id="showpassword"></span></p>
+  
+</div> -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <script src="Userdetail.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,146 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    /* background-color: #250057; */
+    background-color: rgb(222, 199, 199);
+}
+
+.enter{
+   height: 450px;
+   width: 350px;
+   background-color: whitesmoke;
+   text-align: center;
+   display: inline-block;
+   /* justify-content: center; */
+   /* align-items: center; */
+   margin-left: 500px;
+   margin-top: 120px;
+   border-radius: 5px;
+   border: 1px solid black;
+   box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
+}
+
+h1{
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: italic;
+    margin-top: 20px;
+    color: black;
+    text-decoration: underline black;
+    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
+    0px -4px 10px rgba(255,255,255,0.3);
+}
+
+
+#name{
+    padding: 12px;
+    width: 320px;
+    margin-top: 30px;
+    border-radius: 5px;
+    font-size: 20px;
+    text-align: center;
+    outline: none;
+    font-weight: bold;
+
+}
+
+
+
+
+#email{
+    padding: 12px;
+    width: 320px;
+    margin-top: 5px;
+    border-radius: 5px;
+    font-size: 20px;
+    text-align: center;
+    outline: none;
+    font-weight: bold;
+
+}
+
+#userName{
+    padding: 12px;
+    width: 320px;
+    margin-top: 5px;
+    border-radius: 5px;
+    font-size: 20px;
+    text-align: center;
+    outline: none;
+    font-weight: bold;
+
+}
+
+#Num{
+    padding: 12px;
+    width: 320px;
+    margin-top: 5px;
+    border-radius: 5px;
+    font-size: 20px;
+    text-align: center;
+    outline: none;
+    font-weight: bold;
+}
+
+
+
+#password{
+    padding: 12px;
+    width: 320px;
+    margin-top: 5px;
+    border-radius: 5px;
+    font-size: 20px;
+    text-align: center;
+    outline: none;
+    font-weight: bold;
+}
+
+
+/* button{
+    padding: 10px;
+    border-radius: 10px;
+    background-color: black;
+    color: white;
+    font-size: 15px;
+} */
+
+button {
+    padding: 17px 40px;
+    border-radius: 50px;
+    cursor: pointer;
+    border: 0;
+    background-color: black;
+    color: white;
+    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    font-size: 15px;
+    transition: all 0.5s ease;
+  }
+
+  button:hover {
+    letter-spacing: 3px;
+    background-color: hsl(261deg 80% 48%);
+    color: hsl(0, 0%, 100%);
+    box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
+  }
+
+  button:active {
+    letter-spacing: 3px;
+    background-color: hsl(261deg 80% 48%);
+    color: hsl(0, 0%, 100%);
+    box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
+    transform: translateY(10px);
+    transition: 100ms;
+  }
+
+
+img{
+    position: absolute;
+    width: 25px;
+    margin-top: -55px;
+    margin-left: 190px;
+}