Captcha_Generation

Chayandas07 · Oct 30, 2023 · ef223ef · ef223ef
1 parent bdab885
commit ef223ef
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 0 deletions.
diff --git a/Dynamic_Captcha_Generation/index.html b/Dynamic_Captcha_Generation/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div class="captcha-container">
+        <div id="captcha"></div>
+        <input type="text" id="captcha-input" placeholder="Enter CAPTCHA">
+        <button onclick="validateCaptcha()">Submit</button>
+    </div>
+    <div id="captcha-status"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Dynamic_Captcha_Generation/script.js b/Dynamic_Captcha_Generation/script.js
@@ -0,0 +1,32 @@
+// Generate a random CAPTCHA string
+function generateCaptcha() {
+  let captcha = "";
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (let i = 0; i < 6; i++) { // You can change the number of characters in the CAPTCHA
+      captcha += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return captcha;
+}
+
+// Display the generated CAPTCHA
+function displayCaptcha() {
+  const captchaDiv = document.getElementById("captcha");
+  captchaDiv.textContent = generateCaptcha();
+}
+
+// Validate the user's input
+function validateCaptcha() {
+  const userInput = document.getElementById("captcha-input").value;
+  const captchaDiv = document.getElementById("captcha");
+  const statusDiv = document.getElementById("captcha-status");
+
+  if (userInput === captchaDiv.textContent) {
+      statusDiv.textContent = "CAPTCHA is correct!";
+  } else {
+      statusDiv.textContent = "CAPTCHA is incorrect. Please try again.";
+      displayCaptcha(); // Refresh the CAPTCHA on incorrect input
+  }
+}
+
+// Initialize CAPTCHA
+displayCaptcha();
diff --git a/Dynamic_Captcha_Generation/style.css b/Dynamic_Captcha_Generation/style.css
@@ -0,0 +1,30 @@
+.captcha-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+#captcha {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 10px;
+  border: 1px solid #000;
+  display: inline-block;
+  background-color: #f0f0f0;
+}
+
+#captcha-input {
+  margin: 10px;
+  padding: 5px;
+}
+
+button {
+  background-color: #0074d9;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+#captcha-status {
+  margin-top: 10px;
+}