dishamodi0910 · Kritika30032002 · Aug 5, 2024 · Jul 26, 2024
diff --git a/New_APIs/Captcha Generator/Captcha Generator/READme.md b/New_APIs/Captcha Generator/Captcha Generator/READme.md
@@ -0,0 +1,43 @@
+# Captcha Generator
+
+## Overview
+The Captcha Generator is a security tool designed to create unique and unpredictable tests to differentiate between human users and automated bots. This project is developed using HTML, CSS, and JavaScript, ensuring a seamless integration into web applications with a focus on user-friendly design and robust functionality.
+
+## Features
+* HTML Structure: Clear and semantic structure for Captcha elements.
+* CSS Styling: Visually appealing and accessible design, with responsive layouts.
+* JavaScript Functionality: Handles random challenge generation, user response validation, and feedback.
+
+## Installation
+* Clone the repository:
+
+```bash
+git clone https://github.com/yourusername/captcha-generator.git
+``` 
+
+* Navigate to the project directory:
+
+```bash
+cd captcha-generator
+```
+
+* Open index.html in your preferred web browser.
+
+## Usage
+* Generate Captcha: When the page loads, a new Captcha challenge is automatically generated.
+* Solve Captcha: Enter your response in the input field provided.
+* Submit: Click the submit button to validate your response.
+* Feedback: You will receive immediate feedback indicating whether your response was correct or incorrect.
+
+## Project Structure
+
+```bash
+captcha-generator/
+│
+├── index.html      # Main HTML file
+├── style.css       # CSS file for styling
+├── script.js       # JavaScript file for functionality
+```
+## Screenshots
+
+![alt text](image.png)
diff --git a/New_APIs/Captcha Generator/Captcha Generator/image.png b/New_APIs/Captcha Generator/Captcha Generator/image.png
diff --git a/New_APIs/Captcha Generator/Captcha Generator/index.html b/New_APIs/Captcha Generator/Captcha Generator/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- YouTube - CodingLab -->
+<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>Captcha Generator</title>
+    <link rel="stylesheet" href="style.css" />
+    <!-- Fontawesome CDN Link -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
+  </head>
+  <body>
+    <div class="container">
+      <header>Captcha Generator</header>
+      <div class="input_field captch_box">
+        <input type="text" value="" disabled />
+        <button class="refresh_button">
+          <i class="fa-solid fa-rotate-right"></i>
+        </button>
+      </div>
+      <div class="input_field captch_input">
+        <input type="text" placeholder="Enter captcha" />
+      </div>
+      <div class="message">Entered captcha is correct</div>
+      <div class="input_field button disabled">
+        <button>Submit Captcha</button>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/New_APIs/Captcha Generator/Captcha Generator/script.js b/New_APIs/Captcha Generator/Captcha Generator/script.js
@@ -0,0 +1,57 @@
+// Selecting necessary DOM elements
+const captchaTextBox = document.querySelector(".captch_box input");
+const refreshButton = document.querySelector(".refresh_button");
+const captchaInputBox = document.querySelector(".captch_input input");
+const message = document.querySelector(".message");
+const submitButton = document.querySelector(".button");
+
+// Variable to store generated captcha
+let captchaText = null;
+
+// Function to generate captcha
+const generateCaptcha = () => {
+  const randomString = Math.random().toString(36).substring(2, 7);
+  const randomStringArray = randomString.split("");
+  const changeString = randomStringArray.map((char) => (Math.random() > 0.5 ? char.toUpperCase() : char));
+  captchaText = changeString.join("   ");
+  captchaTextBox.value = captchaText;
+  console.log(captchaText);
+};
+
+const refreshBtnClick = () => {
+  generateCaptcha();
+  captchaInputBox.value = "";
+  captchaKeyUpValidate();
+};
+
+const captchaKeyUpValidate = () => {
+  //Toggle submit button disable class based on captcha input field.
+  submitButton.classList.toggle("disabled", !captchaInputBox.value);
+
+  if (!captchaInputBox.value) message.classList.remove("active");
+};
+
+// Function to validate the entered captcha
+const submitBtnClick = () => {
+  captchaText = captchaText
+    .split("")
+    .filter((char) => char !== " ")
+    .join("");
+  message.classList.add("active");
+  // Check if the entered captcha text is correct or not
+  if (captchaInputBox.value === captchaText) {
+    message.innerText = "Entered captcha is correct";
+    message.style.color = "#826afb";
+  } else {
+    message.innerText = "Entered captcha is not correct";
+    message.style.color = "#FF2525";
+  }
+};
+
+// Add event listeners for the refresh button, captchaInputBox, submit button
+refreshButton.addEventListener("click", refreshBtnClick);
+captchaInputBox.addEventListener("keyup", captchaKeyUpValidate);
+submitButton.addEventListener("click", submitBtnClick);
+
+// Generate a captcha when the page loads
+generateCaptcha();
diff --git a/New_APIs/Captcha Generator/Captcha Generator/style.css b/New_APIs/Captcha Generator/Captcha Generator/style.css
@@ -0,0 +1,95 @@
+/* Import Google font - Poppins */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #826afb;
+}
+.container {
+  position: relative;
+  max-width: 300px;
+  width: 100%;
+  border-radius: 12px;
+  padding: 15px 25px 25px;
+  background: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+}
+header {
+  color: #333;
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+}
+.input_field {
+  position: relative;
+  height: 45px;
+  margin-top: 15px;
+  width: 100%;
+}
+.refresh_button {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  background: #826afb;
+  height: 30px;
+  width: 30px;
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+}
+.refresh_button:active {
+  transform: translateY(-50%) scale(0.98);
+}
+.input_field input,
+.button button {
+  height: 100%;
+  width: 100%;
+  outline: none;
+  border: none;
+  border-radius: 8px;
+}
+.input_field input {
+  padding: 0 15px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.captch_box input {
+  color: #6b6b6b;
+  font-size: 22px;
+  pointer-events: none;
+}
+.captch_input input:focus {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+}
+.message {
+  font-size: 14px;
+  margin: 14px 0;
+  color: #826afb;
+  display: none;
+}
+.message.active {
+  display: block;
+}
+.button button {
+  background: #826afb;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+}
+.button button:active {
+  transform: scale(0.99);
+}
+.button.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}