-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Parth Shah
authored and
Parth Shah
committed
Jul 22, 2024
1 parent
7cae9d1
commit e8c6aa9
Showing
7 changed files
with
204 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
# **Schulteit Hard!** | ||
|
||
--- | ||
|
||
<br> | ||
|
||
## **Description 📃** | ||
- The trick though you're going to try to stay focused on the center dot that i just added to the grid | ||
|
||
## **How to play? 🕹️** | ||
-a 5x5 Schulte table would have 25 numbers arranged in a random order in a 5x5 grid. The goal of the exercise is to scan the table horizontally and vertically to find all the numbers in order as quickly as possible. The Schulte table is designed to improve focus, speed, and mental agility. | ||
|
||
<br> | ||
|
||
## **Screenshots 📸** | ||
|
||
<br> | ||
|
||
![PLAY](image.png) | ||
|
||
<br> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
body{ | ||
background: rgb(0, 0, 0); | ||
background: radial-gradient(circle, rgba(0, 0, 0, 0.866) 0%, rgba(0, 0, 0, 0.944) 100%); | ||
} | ||
|
||
.grid{ | ||
display: flex; | ||
flex-wrap: wrap; | ||
margin: auto; | ||
background-color: aqua; | ||
width: 300px; | ||
height: 300px; | ||
} | ||
|
||
.button{ | ||
margin-bottom: 70px; | ||
} | ||
|
||
footer { | ||
color: #fff; | ||
position: fixed; | ||
bottom: 0px; | ||
width: 100%; | ||
height: 50px; | ||
font-family: 'Noto Sans JP', sans-serif; | ||
} | ||
|
||
footer a { | ||
text-decoration: none; | ||
color: inherit; | ||
font-family: inherit; | ||
} | ||
|
||
footer a:hover { | ||
text-decoration: none; | ||
color: #000; | ||
font-family: inherit; | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<title>SCHULTE TABLE</title> | ||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> | ||
<link rel="stylesheet" href="css/main.css"> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> | ||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> | ||
<link rel="shortcut icon" href="images/brain.ico" type="image/x-icon"> | ||
</head> | ||
|
||
<body> | ||
<div class="alert alert-success mt-2 ml-3 col-4 position-fixed ml-auto" role="alert" hidden></div> | ||
<div class="container"> | ||
<h1 class="text-center text-white m-4">SCHULTE TABLE</h1> | ||
<div class="row justify-content-center mb-2"> | ||
<div class="col-4 text-center row"> | ||
<div class="col-6"> | ||
<h5 id="attemp" class="text-info font-weight-bold">Attemps: 0</h5> | ||
</div> | ||
<div class="col-6"> | ||
<h5 id="time" class="text-info font-weight-bold">Time: 0</h5> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="row mb-2 justify-content-center"> | ||
<div class="col-3"> | ||
<select id="mySelect" class="custom-select" onchange="selectItem()"> | ||
<option selected value="3">3x3</option> | ||
<option value="4">4x4</option> | ||
<option value="5">5x5</option> | ||
<option value="6">6x6</option> | ||
<option value="7">7x7</option> | ||
<option value="8">8x8</option> | ||
<option value="9">9x9</option> | ||
<option value="10">10x10</option> | ||
</select> | ||
</div> | ||
</div> | ||
<div class="grid mb-3"></div> | ||
<div class="row justify-content-center button"> | ||
<button class="btn btn-primary btn-block col-4" onclick="resetValues()">Reset</button> | ||
</div> | ||
</div> | ||
<footer class="bg-primary text-center p-3"> Copyright © <label id="year"></label> | Designed by <a href="https://github.com/FabianCristancho" target="_blank">Fabian Cristancho</a></footer> | ||
<script src="js/script.js"></script> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
var numbers = [1,2,3,4,5,6,7,8,9]; | ||
var current = 0; | ||
var attemp = 0; | ||
var time = 0; | ||
var dimension = 9; | ||
numbers = numbers.sort(()=>Math.random()-0.5); | ||
|
||
function drawTable(length, prop){ | ||
const grid = document.querySelector('.grid'); | ||
grid.innerHTML = ""; | ||
for (let i = 0; i < length; i++) { | ||
let cell = document.createElement('div'); | ||
cell.setAttribute('id', numbers[i]); | ||
cell.style.backgroundColor = "#1abc9c"; | ||
cell.style.width = prop +"px"; | ||
cell.style.height = prop +"px"; | ||
cell.style.border = "1px solid #16a085"; | ||
cell.style.cursor = "pointer"; | ||
cell.style.textAlign = "center"; | ||
cell.style.display = "table-cell"; | ||
cell.style.verticalAlign = "middle"; | ||
cell.addEventListener('click', selected); | ||
|
||
let label = document.createElement("h1"); | ||
label.innerHTML = numbers[i]; | ||
label.style.margin = "0px"; | ||
label.style.position = "relative"; | ||
label.style.top = "50%"; | ||
label.style.transform = "translateY(-50%)"; | ||
|
||
cell.appendChild(label); | ||
grid.appendChild(cell); | ||
} | ||
} | ||
|
||
function selected(){ | ||
const id = this.getAttribute('id'); | ||
attemp++; | ||
document.querySelector("#attemp").innerHTML = "Attemps: " +attemp; | ||
if(parseInt(id) == current+1){ | ||
current++; | ||
if(current == dimension){ | ||
document.querySelector('.alert').hidden = false; | ||
document.querySelector('.alert').innerHTML = "CONGRATULATIONS!!! YOU WIN IN " +attemp +" ATTEMPS AND " +time +" SECONDS"; | ||
setTimeout(()=>{ | ||
document.querySelector('.alert').hidden = true; | ||
location.reload(); | ||
}, 5000); | ||
} | ||
flashColor(this, "#4cd137"); | ||
}else{ | ||
flashColor(this, "#e74c3c"); | ||
} | ||
} | ||
|
||
function flashColor(element, color){ | ||
element.style.backgroundColor = color; | ||
setTimeout(() => { | ||
element.style.backgroundColor = "#1abc9c"; | ||
}, 100); | ||
} | ||
|
||
function selectItem(){ | ||
let option = document.getElementById('mySelect').value; | ||
dimension = option*option; | ||
numbers = []; | ||
for (let i = 0; i < dimension; i++) { | ||
numbers[i] = i+1; | ||
} | ||
numbers = numbers.sort(()=>Math.random()-0.5); | ||
|
||
let prop = (dimension>36)?80:100; | ||
document.querySelector('.grid').style.width = "" +(option*prop) +"px"; | ||
document.querySelector('.grid').style.height = "" +(option*prop) +"px"; | ||
drawTable(dimension, prop); | ||
resetValues(); | ||
} | ||
|
||
function resetValues(){ | ||
time = 0; | ||
attemp = 0; | ||
current = 0; | ||
document.querySelector("#attemp").innerHTML = "Attemps: 0"; | ||
document.querySelector('#time').innerHTML = "Time: 0s"; | ||
} | ||
|
||
setInterval(()=>{ | ||
document.querySelector('#time').innerHTML = "Time: " +time +"s"; | ||
time++; | ||
}, 1000); | ||
|
||
drawTable(9, 100); | ||
document.getElementById('year').innerHTML = new Date().getFullYear(); |