diff --git a/New_APIs/Captcha Generator/Captcha Generator/READme.md b/New_APIs/Captcha Generator/Captcha Generator/READme.md new file mode 100644 index 0000000..d71743a --- /dev/null +++ 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) \ No newline at end of file diff --git a/New_APIs/Captcha Generator/Captcha Generator/image.png b/New_APIs/Captcha Generator/Captcha Generator/image.png new file mode 100644 index 0000000..48daee2 Binary files /dev/null and b/New_APIs/Captcha Generator/Captcha Generator/image.png differ diff --git a/New_APIs/Captcha Generator/Captcha Generator/index.html b/New_APIs/Captcha Generator/Captcha Generator/index.html new file mode 100644 index 0000000..a65b3e2 --- /dev/null +++ b/New_APIs/Captcha Generator/Captcha Generator/index.html @@ -0,0 +1,33 @@ + + + + + + + + Captcha Generator + + + + + +
+
Captcha Generator
+
+ + +
+
+ +
+
Entered captcha is correct
+
+ +
+
+ + + + diff --git a/New_APIs/Captcha Generator/Captcha Generator/script.js b/New_APIs/Captcha Generator/Captcha Generator/script.js new file mode 100644 index 0000000..6c84c6c --- /dev/null +++ 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 new file mode 100644 index 0000000..4f29d19 --- /dev/null +++ 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; +}