Captcha Colors experiment

Developer
Moncho Varela
Size
4,057 Kb
Views
42,504
  1. Captcha Colors experiment Previews
  2. Captcha Colors experiment HTML Codes
  3. Captcha Colors experiment CSS Codes
  4. Captcha Colors experiment JS Codes

How do I make an captcha colors experiment?

What is a captcha colors experiment? How do you make a captcha colors experiment? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

Captcha Colors experiment Previews
IQ Test

Captcha Colors experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Captcha Colors experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <h3>Resolve the Captcha color <br /> <small>And get the freebie</small></h3> <span class="info">You can use keys and tab. (0 - 9)</span> <span class="divider"></span> <ul id="captcha"> <li class="captcha_color">&nbsp;</li> <li class="captcha_color">&nbsp;</li> <li class="captcha_color">&nbsp;</li> <li class="captcha_color">&nbsp;</li> <li class="captcha_color">&nbsp;</li> </ul> <form id="lock"> <ul> <li> <input type="number" min="0" max="9" /> </li> <li> <input type="number" min="0" max="9" /> </li> <li> <input type="number" min="0" max="9" /> </li> <li> <input type="number" min="0" max="9" /> </li> <li> <input type="number" min="0" max="9" /> </li> <li> <button type="submit" id="unlock" ><i class="fa fa-lock"></i> </button> </li> </ul> </form> <!-- lightModal --> <div class="lightModal"> <div class="lightModal-inner"> <button class="lightModal-close" role="button">&times;</button> <h3 class="lightModal-title"></h3> <div id="result"></div> </div> </div> <!-- / lightModal -->
</div> <script src="js/index.js"></script>
</body>
</html>

Captcha Colors experiment - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { margin: 0; padding: 0;
}
.wrapper { width: 21em; margin: 10em auto; text-align: center; padding-bottom: 1em; background: #FFF; border: 1px solid #C7C7C7;
}
.wrapper h3 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: #E74C3C; margin: 0; padding: 0.5em 0; text-transform: uppercase;
}
span.info { font-size: 0.7em; color: #3498DB;
}
span.divider { display: block; background: #C7C7C7; width: 100%; height: 1px; margin: 0.2em;
}
#captcha { margin: 0 auto; padding: 0; list-style: none;
}
#captcha li { display: inline-block; margin: 0.5em; padding: 0.5em 1em; border: 1px solid #ECF0F1;
}
form ul { margin: 0 auto; padding: 0; list-style: none;
}
form ul li { display: inline-block; margin: 0; padding: 0;
}
form ul li input { width: 3em; height: 3em; border: 1px solid #C7C7C7; padding: 0.2em; text-align: center; color: white; background: #FFF; -webkit-transition: all 0.8s ease; transition:all 0.8s ease;
}
form ul li button,
#result a { display: inline-block; border: 1px solid #C7C7C7; min-width: 3em; height: 3em; padding: 0.2em; margin: 1em auto; text-align: center; color: #3498DB; background: #FFF; text-decoration: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
#result a { height: auto; width: auto; padding: 1em; text-transform: uppercase;
}
form ul li button:hover,
#result a:hover { text-decoration: none; border: 1px solid #3498DB; color: #C7C7C7; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
.error { color: #E74C3C;
}
.success { color: #3498DB;
}
.input_selected{ border-radius:100%; outline:none; -webkit-transition: all 0.8s ease; transition:all 0.8s ease;
}
/* Modal */
.lightModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0; visibility: hidden; -webkit-transition: all 0.8s ease; transition: all 0.8s ease;
}
.lightModal .lightModal-inner { display: block; width: 75%; height: 75%; margin: 10em auto; padding: 0;
}
.lightModal .lightModal-inner .lightModal-title { font-family: sans-serif; font-weight: 300; color: #777; border-bottom: 1px solid #EFEFEF;
}
.lightModal .lightModal-inner .lightModal-close { position: absolute; top: 0.2em; right: 0.2em; background: #FFF; border: none; font-size: 3em; line-height: 1; font-family: serif; color: #464646;
}
.lightModal .lightModal-inner .lightModal-close:hover { color: #f55;
}
.lightModal .lightModal-inner .lightModal-image { display: block; margin: 0 auto; width: 100%; max-height: 95%;
}
.show { opacity: 1; visibility: visible; -webkit-transition: all 0.8s ease; transition: all 0.8s ease;
}

Captcha Colors experiment - Script Codes JS Codes

// Array of Colors
var colors = [ '#1ABC9C', '#34495E', '#E67E22', '#2ECC71', '#9B59B6', '#F1C4F', '#E74C3C', '#95A5A6', '#3498DB', '#000'], // Captcha id captcha = document.getElementById('captcha'), items = captcha.querySelectorAll('.captcha_color'), elements = Array.prototype.slice.call(items), // form vars form = document.getElementById('lock'), input_number = Array.prototype.slice.call( form.querySelectorAll('input[type="number"]')), // modal vars result = document.getElementById('result'), modal = document.querySelector('.lightModal'), modalTitle = document.querySelector('.lightModal-title'), modalClose = document.querySelector('.lightModal-close');
// onload run init
window.addEventListener('load', init);
// init function
function init() { // for each elements Array.prototype.forEach.call(elements, function(obj, index) { // random colors var rand = colors[Math.floor(Math.random() * colors.length)]; // change background on load obj.style.background = rand; // if fail use first color if (obj.style.background === '') { obj.style.background = colors[0]; } }); // for each arr var Array.prototype.forEach.call(input_number, function(obj, index) { // init focus input_number[0].focus(); input_number[0].style.color = '#fff'; input_number[0].style.borderColor = '#f55'; input_number[0].style.background = colors[0]; elements[0].classList.add('input_selected'); // change color on change value _change(obj); // on focus function obj.addEventListener('focus', function() { obj.style.color = '#fff'; obj.style.borderColor = '#f55'; obj.style.background = colors[0]; elements[index].classList.add('input_selected'); }); // on blur function obj.addEventListener('blur', function(e) { obj.style.color = ''; obj.style.borderColor = ''; elements[index].classList.remove('input_selected'); }); }); // on submit form.addEventListener('submit', function(e) { e.preventDefault(); return _compare(); }); // close modal modalClose.addEventListener('click', function(e) { e.preventDefault(); modal.classList.remove('show'); modalTitle.textContent = ''; result.textContent = ''; });
}
// compare
function _compare(){ var a = elements; var b = input_number; // condition if and if(_bck(a[0]) === _bck(b[0]) && _bck(a[1]) === _bck( b[1]) && _bck(a[2]) === _bck(b[2]) && _bck(a[3]) === _bck(b[3]) && _bck(a[4]) === _bck(b[4])) { // return success if captcha is good return _success(); }else{ // return error if captcha is not good return _error(); }
}
// get background color of element
function _bck(el){ return el.style.backgroundColor;
}
// success function
function _success() { modal.classList.add('show'); modalTitle.textContent = 'Good Job ! get your Freebie'; result.innerHTML = '<a href="#" onclick="return freebie()">Download Freebie</a>'; } // error function
function _error() { modal.classList.add('show'); modalTitle.textContent = 'Error'; result.innerHTML = '<p class="error">You need get Good Password to show link.</p>'; } // change color function
function _change(el) { return el.addEventListener('change', function() { this.style.background = _swicth(this.value); }, false);
}
// shitch function
function _swicth(condition) { var stuff = { 0: function() { return colors[0]; }, 1: function() { return colors[1]; }, 2: function() { return colors[2]; }, 3: function() { return colors[3]; }, 4: function() { return colors[4]; }, 5: function() { return colors[5]; }, 6: function() { return colors[6]; }, 7: function() { return colors[7]; }, 8: function() { return colors[8]; }, 9: function() { return colors[9]; } }; if (typeof stuff[condition] !== 'function') { return '#ffffff'; } return stuff[condition]();
}
// use php for this
function freebie() { return window.open("https://www.dropbox.com/s/hdgzg0k91lixa38/thephotografer.zip?dl=0");
}
Captcha Colors experiment - Script Codes
Captcha Colors experiment - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 4,057 Kb
Views 42,504
Do you need developer help for Captcha Colors experiment?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moncho Varela (nakome) Script Codes
Name
Responsive Gallery with Json data
IndexedDB demo
Responsive table with json data.
Background video
Filter divs only Javascript
Css3 slide
Html demos with data uri
Get json with data attributes
Calendar with json events mobile concept
Another intro
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!