├── main.css ├── README.md ├── index.html └── app.js /main.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | background-color: "white"; 3 | height: 25px; 4 | width: 25px; 5 | min-width: 1em; 6 | } 7 | 8 | #button{ 9 | text-align: center; 10 | } 11 | 12 | #Table{ 13 | margin: 0 auto; 14 | } 15 | 16 | #main{ 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ChimpanzeeTest 2 | 3 | A memory test created with HTML, CSS and JavaScript 4 | 5 | ## Table of contents 6 | 7 | - [General info](#general-info) 8 | - [Technologies](#technologies) 9 | - [Status](#status) 10 | - [Contact](#contact) 11 | 12 | ## General info 13 | 14 | This is a basic test that applied to chimpanzees to see their memory abilities. 15 | 16 | ## Technologies 17 | 18 | Project is created with: 19 | 20 | - Javascript 21 | 22 | ## Status 23 | 24 | Project is finished. 25 | 26 | ## Contact 27 | 28 | Created by [@ozansulukpinar](https://github.com/ozansulukpinar) - feel free to contact me! 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var random; 2 | var randomArray = []; 3 | var index = idValue = 0; 4 | var niveau 1; 5 | 6 | drawTable(); 7 | 8 | function drawTable() { 9 | var elements = document.getElementsByTagName('table'); 10 | var table = elements[0]; 11 | 12 | for (var k = 0; k < 10; k++){ 13 | var tr = document.createElement('tr'); 14 | 15 | for (var l = 0; l < 10; l++){ 16 | var th = document.createElement('th'); 17 | th.className = 'box'; 18 | th.id = idValue; 19 | tr.appendChild(th); 20 | idValue++; 21 | } 22 | 23 | table.appendChild(tr); 24 | } 25 | 26 | $(".box").text(""); 27 | } 28 | 29 | setABox(); 30 | 31 | $("#StartButton").click(function () { 32 | randomArray.forEach(element => { 33 | $('#' + element).css("background-color", "black") 34 | $('#' + element).addClass("number") 35 | $('#' + element).text("") 36 | }); 37 | 38 | $('#main').on('click', '.number', function(){ 39 | var currentID = $(this).attr('id'); 40 | 41 | if (currentID != randomArray[index]) { 42 | alert("Ooops! Try again!"); 43 | location.reload(); 44 | } 45 | else { 46 | $('#' + currentID).css("background-color", "white"); 47 | index++; 48 | } 49 | 50 | if (index == 10) { 51 | alert("Good memory! Congrulations!"); 52 | niveau++; 53 | location.reload(); 54 | } 55 | }); 56 | 57 | $("#StartButton").prop('disabled', true); 58 | }); 59 | 60 | function setABox(){ 61 | for(var i = 1; i <= niveau; i++){ 62 | fillTheBox(i); 63 | } 64 | } 65 | 66 | function fillTheBox(value){ 67 | random = Math.floor(Math.random() * 99); 68 | var isItInArray = randomArray.includes(random); 69 | 70 | if(isItInArray){ 71 | fillTheBox(value); 72 | } 73 | else{ 74 | randomArray.push(random); 75 | $("#" + random).text(value); 76 | } 77 | 78 | if(randomArray.length == 10){ 79 | return; 80 | } 81 | } 82 | --------------------------------------------------------------------------------