JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Image Recognizer</h1>
<p>Please select the image that matches.</p>
<p id="word"></p>
<div id="images"></div>
<input type="button" id="reset" value="Reset">
CSS
body {
font-family: Tahoma, Calibri, Arial, sans serif;
}
#images {
border: 1px solid black;
padding: 5px;
}
#images img {
border: 5px solid blue;
margin-right: 5px;
cursor: pointer;
}
#images img:hover {
border: 5px solid yellow;
}
#word {
font-size: 2em;
font-weight: bold;
margin-bottom: 0.5em;
}
#reset {
margin-top: 0.5em;
}
}
JavaScript
var
currentImages,
selectedImage;
items = [{
name: 'Coch',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbYxz2H1aVu8MtlxjawfY6ANrW0obfNjTWtoNEKWcCvmPSaZUm'
}, {
name: 'Glas',
image: 'http://4.bp.blogspot.com/_5xJ_jlTUVG4/S_PHdyb_jyI/AAAAAAAABEg/FKj-Z8K-4WM/s1600/bigstockphoto_Blue_Brushed_4167376.jpg'
}, {
name: 'Melyn',
image: 'http://i690.photobucket.com/albums/vv263/greengables_00/Sunbrella-Sunflower-Yellow-77.jpg'
}, {
name: 'Ci',
image: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdIRwEaZ5Hd66D1eYz3G8TMkq3nIEmUeiCIuLCMWUyK50dtS8k_w'
}, {
name: 'Cath',
image: 'http://www.helpinghomelesscats.com/images/cat1.jpg'
}, {
name: 'Gwyrdd',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRY0Lu1xlB8VNHjgpsA0VxtDzqbP_zZitqkIiYyrvFXeYGM4mqn'
}, {
name: 'Un',
image: 'http://2.bp.blogspot.com/_x2ojGN0Gisw/TKIsklaqleI/AAAAAAAAKsc/6fDk7GrNS0Q/s1600/1NumberOneInCircle.png'
}, {
name: 'Dau',
image: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSYczlQruekPIQfUqv1Om_0xrihA6kMAeWdc5OqjLbY9bOZHClW'
}, {
name: 'Tri',
image: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS3zoObzPA3vSdOgeiQZlZlppcWgrrTBjZi0Z3CWlx_IFTQNQi8'
}, {
name: 'Bochdew',
image: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTSKoyHmHsNBjaeRZm-4M40pns5RrnOxy1lI-f3NDw_vnuq1ETlEw'
}, {
name: 'Piws',
image: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRKveczws2uwcMX72WBMHKHWQezAgf3zKLXiuJ4tpec_PLN7M1u'
}];
//preload the images so they display immediately
(function() {
var img;
$.each(items, function(i, item) {
img = document.createElement('img');
img.src = item.image;
});
}());
function imageClick() {
if ($(this).data('correct') === true) {
window.alert('Correct!');
}
}
function imageReset() {
var selected, img,
imageContainer = $('#images').empty();
currentImages = [];
while (currentImages.length < 3) {
selected = Math.floor(Math.random() *...