Login Box Events bgcolor changing

nilajcoder · nilajcoder · commit 314f0d97c111 · 2023-12-02T13:10:16.000+05:30
diff --git a/Login Box Events Change/practice.html b/Login Box Events Change/practice.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Practice Event in Js</title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+
+ 
+
+<body>
+
+    <div class="login-container">
+        <h2>Login</h2>
+        <form id="loginForm">
+            <div class="input-group">
+                <label for="username">Username:</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="input-group">
+                <label for="password">Password:</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit">Login</button>
+            <button id="mode"> Change Mode</button>
+        </form>
+        <p id="loginMessage"></p>
+    </div>
+ 
+
+   
+    <script src="practice.js"></script> 
+</body>
+</html>
diff --git a/Login Box Events Change/practice.js b/Login Box Events Change/practice.js
@@ -0,0 +1,19 @@
+let modeBtn=document.querySelector("#mode");
+let body=document.querySelector("body");
+let curmode="light"//black
+
+modeBtn.addEventListener("click",()=>{
+    if(curmode==="light"){
+        curmode="dark";
+        body.classList.add("dark");
+        body.classList.remove("light");
+    }else{
+        curmode="light";
+        body.classList.add("light");
+        body.classList.remove("dark");
+    }
+    console.log(curmode);
+
+})
+
+
diff --git a/Login Box Events Change/style.css b/Login Box Events Change/style.css
@@ -0,0 +1,57 @@
+.dark{
+    background-color: black;
+    color: white;
+}
+
+
+.light{
+    background-color: white;
+    color: black;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+
+/* Style your login page here */
+.login-container {
+    width: 300px;
+    margin: 50px auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: calc(100% - 10px);
+    padding: 5px;
+}
+
+button {
+    padding: 8px 15px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
