Iñigo Martínez

1637920273

Cree Captcha personalizado en HTML CSS y JavaScript

En este tutorial, aprenderá a crear Captcha personalizado en HTML, CSS y JavaScript.

Principalmente, Captcha se usa en comentarios o formularios de contacto de sitios web para restringir que los robots (bots) comenten en publicaciones de blogs o envíen mensajes a administradores. Puede haber una imagen o código aleatorio en el captcha y el usuario debe seleccionar la imagen correcta o hacer coincidir los códigos para completar su tarea.

En este pequeño proyecto [Captcha personalizado en JavaScript], como puede ver en la imagen de vista previa, hay una imagen con 6 caracteres y números aleatorios. También puede actualizar el captcha y obtener un nuevo código con el botón de recarga.

En el campo de entrada debes ingresar el código captcha que se muestra en la imagen. Si su código coincide con el código captcha, aparecerá un mensaje de éxito; de lo contrario, aparecerá un mensaje de error. Si ha hecho coincidir los códigos, luego de 4 segundos se generará un nuevo captcha.

Al principio, en el archivo JavaScript, almacené todos los caracteres y números en la matriz, luego dentro del bucle for, usando la función Math.random (), obtuve 6 caracteres aleatorios de la matriz dada.

Y pase estos códigos o caracteres al captcha agregando espacio entre cada carácter. Luego obtengo los valores ingresados ​​por el usuario, los separo y los concateno con espacios ('') para que el usuario no necesite escribir espacios para que coincidan con el código.

Después de igualar los valores de usuario, hice coincidir este valor de usuario con los captchas. Si el valor no coincide, mostraré un mensaje de error y si el valor coincide, mostraré un mensaje de éxito y generaré un nuevo código aleatorio después de 4 segundos usando la función setTimeout ().

Crear captcha personalizado en JavaScript 

Para crear este programa [Captcha personalizado en JavaScript]. Primero, necesita crear tres archivos: HTML, CSS y JavaScript. Después de crear estos archivos, simplemente pegue los siguientes códigos en su archivo. También puede descargar los archivos de código fuente de este programa Captcha desde el botón de descarga dado.

Primero, cree un archivo HTML con el nombre index.html y pegue los códigos dados en su archivo HTML. Debe crear un archivo con la extensión .html y recordar que las imágenes utilizadas en este programa no aparecerán. Así que descargue los archivos de código para usar las imágenes también.

<!DOCTYPE html>
<!-- Coding By Codequs - youtube.com/codequs -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Captcha in JavaScript | Codequs</title>
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome CDN Link for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Captcha in JavaScript</header>
    <div class="captcha-area">
      <div class="captcha-img">
        <img src="captcha-bg.png" alt="Captch Background">
        <span class="captcha"></span>
      </div>
      <button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
    </div>
    <form action="#" class="input-area">
      <input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
      <button class="check-btn">Check</button>
    </form>
    <div class="status-text"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

En segundo lugar, cree un archivo CSS con el nombre style.css y pegue los códigos dados en su archivo CSS. Recuerde, debe crear un archivo con la extensión .css.

/* Import Google font - Poppins & Noto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
::selection{
  color: #fff;
  background: #4db2ec;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4db2ec;
}
.wrapper{
  max-width: 485px;
  width: 100%;
  background: #fff;
  padding: 22px 30px 40px;
  border-radius: 10px;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.05);
}

.wrapper header{
  color: #4db2ec;
  font-size: 33px;
  font-weight: 500;
  text-align: center;
}
.wrapper .captcha-area{
  display: flex;
  height: 65px;
  margin: 30px 0 20px;
  align-items: center;
  justify-content: space-between;
}
.captcha-area .captcha-img{
  height: 100%;
  width: 345px;
  user-select: none;
  background: #000;
  border-radius: 5px;
  position: relative;
}
.captcha-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  opacity: 0.95;
}
.captcha-img .captcha{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  color: #fff;
  font-size: 35px;
  text-align: center;
  letter-spacing: 10px;
  transform: translate(-50%, -50%);
  text-shadow: 0px 0px 2px #b1b1b1;
  font-family: 'Noto Serif', serif;
}
.wrapper button{
  outline: none;
  border: none;
  color: #fff;
  cursor: pointer;
  background: #4db2ec;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.wrapper button:hover{
  background: #2fa5e9;
}
.captcha-area .reload-btn{
  width: 75px;
  height: 100%;
  font-size: 25px;
}
.captcha-area .reload-btn i{
  transition: transform 0.3s ease;
}
.captcha-area .reload-btn:hover i{
  transform: rotate(15deg);
}
.wrapper .input-area{
  height: 60px;
  width: 100%;
  position: relative;
}
.input-area input{
  width: 100%;
  height: 100%;
  outline: none;
  padding-left: 20px;
  font-size: 20px;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
}
.input-area input:is(:focus, :valid){
  padding-left: 19px;
  border: 2px solid #4db2ec;
}
.input-area input::placeholder{
  color: #bfbfbf;
}
.input-area .check-btn{
  position: absolute;
  right: 7px;
  top: 50%;
  font-size: 17px;
  height: 45px;
  padding: 0 20px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-area input:valid + .check-btn{
  opacity: 1;
  pointer-events: auto;
}
.wrapper .status-text{
  display: none;
  font-size: 18px;
  text-align: center;
  margin: 20px 0 -5px;
}

@media (max-width: 506px){
  body{
    padding: 0 10px;
  }
  .wrapper{
    padding: 22px 25px 35px;
  }
  .wrapper header{
    font-size: 25px;
  }
  .wrapper .captcha-area{
    height: 60px;
  }
  .captcha-area .captcha{
    font-size: 28px;
    letter-spacing: 5px;
  }
  .captcha-area .reload-btn{
    width: 60px;
    margin-left: 5px;
    font-size: 20px;
  }
  .wrapper .input-area{
    height: 55px;
  }
  .input-area .check-btn{
    height: 40px;
  }
  .wrapper .status-text{
    font-size: 15px;
  }
  .captcha-area .captcha-img{
    width: 250px;
  }
}

Finalmente, cree un archivo JavaScript con el nombre script.js y pegue los códigos dados en su archivo JavaScript. Recuerde, debe crear un archivo con la extensión .js

const captcha = document.querySelector(".captcha"),
reloadBtn = document.querySelector(".reload-btn"),
inputField = document.querySelector(".input-area input"),
checkBtn = document.querySelector(".check-btn"),
statusTxt = document.querySelector(".status-text");

//storing all captcha characters in array
let allCharacters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
                     'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd',
                     'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
                     't', 'u', 'v', 'w', 'x', 'y', 'z', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getCaptcha(){
  for (let i = 0; i < 6; i++) { //getting 6 random characters from the array
    let randomCharacter = allCharacters[Math.floor(Math.random() * allCharacters.length)];
    captcha.innerText += ` ${randomCharacter}`; //passing 6 random characters inside captcha innerText
  }
}
getCaptcha(); //calling getCaptcha when the page open
//calling getCaptcha & removeContent on the reload btn click
reloadBtn.addEventListener("click", ()=>{
  removeContent();
  getCaptcha();
});

checkBtn.addEventListener("click", e =>{
  e.preventDefault(); //preventing button from it's default behaviour
  statusTxt.style.display = "block";
  //adding space after each character of user entered values because I've added spaces while generating captcha
  let inputVal = inputField.value.split('').join(' ');
  if(inputVal == captcha.innerText){ //if captcha matched
    statusTxt.style.color = "#4db2ec";
    statusTxt.innerText = "Nice! You don't appear to be a robot.";
    setTimeout(()=>{ //calling removeContent & getCaptcha after 2 seconds
      removeContent();
      getCaptcha();
    }, 2000);
  }else{
    statusTxt.style.color = "#ff0000";
    statusTxt.innerText = "Captcha not matched. Please try again!";
  }
});

function removeContent(){
 inputField.value = "";
 captcha.innerText = "";
 statusTxt.style.display = "none";
}

Eso es todo, ahora ha creado con éxito su Captcha personalizado en HTML CSS y JavaScript.

What is GEEK

Buddha Community

Lyda White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

Web Monster

Web Monster

1677108125

Creating a Responsive Blog with HTML, CSS, and JavaScript

Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video 

tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step. 

 

From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript, 

we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger, 

web developer, or simply looking to learn new skills, this tutorial is for you! 

We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience. 

🔔 Subscribe for more! 

https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔗 Source code 

https://upfiles.com/KO0VqqK

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☝ Start developing the project (base files + images) 

- Click on the UpFiles link 

- Click the green button (code) 

- Click Download ZIP 

- Extract the project to the desired location 

📂Assets 

Icons: https://boxicon.com/

 Fonts: https://fonts.google.com/

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

 🔥 Follow me! 

Facebook 

https://bit.ly/3IMfk04

 Instagram 

https://bit.ly/3GHoQyT

 Twitter 

https://bit.ly/3IOBEqc

 Linkedin 

https://bit.ly/3INnwNY

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Tags: 

#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial. 

 

So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!

 

Link of The Video :

https://youtu.be/BqgWIel4uuU

Saurabh Kumar

Saurabh Kumar

1671267560

Personal Portfolio Website Using Html Css and Javascript

#HTML #CSS #JavaScript 

In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function

 ∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website

Features : -

  • Fully Responsive 
  • Dark mode/light mode
  • Browser compatibility
  • Social Media Icon
  • and many more

#css  #html  #javascript 

 

 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

code savvy

code savvy

1629473371

Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript

 

Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) 📁

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline

 

#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial