Skip to content

Instantly share code, notes, and snippets.

@metaist
Created March 22, 2018 17:17
Show Gist options
  • Save metaist/806a377efa949c2b8af9987b571c98bc to your computer and use it in GitHub Desktop.
Save metaist/806a377efa949c2b8af9987b571c98bc to your computer and use it in GitHub Desktop.
Banana or Not?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Banapple</a>
</div>
</nav>
<div class="center-align" style="font-size: 30px;">
Points: <span id="points">0</span>
</div>
<div class="center-align">
<button id="btn-banana" class="btn yellow darken-1">Banana</button>
<button id="btn-not" class="btn">Not</button>
<br />
<div>
<img src="" style="width: 50rem; height: auto" />
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
var bananas = [
'https://cdn1.medicalnewstoday.com/content/images/articles/271157-bananas.jpg',
'https://c-6rtwjumjzx7877x24nrlx2euzwhmx2ehtr.g00.livescience.com/g00/3_c-6bbb.qnajx78hnjshj.htr_/c-6RTWJUMJZX77x24myyux78x3ax2fx2fnrl.uzwhm.htrx2fwhx2f855c755x2ffMW5hItaQ8i8id0x78fCEqh7SuEB0oEX0og75afB6mE7AeQ7paRIFbQeF7SX3cSIpag8OuE7qzDBbaDrKzDB0mhd0vhLhx3dx3fn65h.rfwpx3dnrflj_$/$/$/$',
'https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg'
];
var fruit = [
'https://image.jimcdn.com/app/cms/image/transf/dimension=168x1024:format=png/path/s3418b375bcc09e2b/image/ice37d55a25fc540b/version/1519999469/image.png',
'https://image.jimcdn.com/app/cms/image/transf/dimension=165x1024:format=jpg/path/s3418b375bcc09e2b/image/iacd3821a99027527/version/1488366929/image.jpg',
'https://image.jimcdn.com/app/cms/image/transf/dimension=164x1024:format=jpg/path/s3418b375bcc09e2b/image/i215b50c3b068bfd4/version/1456774553/image.jpg'
];
$(() =>{
/**
* Shuffles array in place. ES6 version
* @param {Array} a items An array containing the items.
*/
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
var correct = null;
var points = 0;
var $img = $('img');
var $points = $('#points');
var changeImage = () => {
bananas = shuffle(bananas);
fruit = shuffle(fruit);
var whichOne = Math.random();
var url = whichOne < 0.5 ? bananas[0] : fruit[0];
correct = whichOne < 0.5 ? 'banana' : 'not';
console.log(correct, points);
$img.attr('src', url);
$points.text(points);
};
changeImage();
$('#btn-banana').click(function(e) {
console.log('82', correct, points);
if(correct === 'banana') { points++; } else {points = 0; }
changeImage();
});
$('#btn-not').click(function (e) {
if(correct === 'not') { points++; } else {points = 0; }
changeImage();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment