Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- let containerAllSquareDivs = document.querySelector(".container-all-square-divs");// Select the container
- let userInput; // Squares number choice
- // Bouton Reset
- document.querySelector("#squares-number-button").addEventListener("click", resetGrid)
- // Game beginning : Create a 16 squares grid
- createSquaresGrid(16);
- // Create squares grid
- function createSquaresGrid(userInput) {
- // Fix the grid's columns and rows number inside containerAllSquareDivs
- containerAllSquareDivs.style.setProperty("grid-template-columns", "repeat(" + userInput + ", auto)");
- containerAllSquareDivs.style.setProperty("grid-template-row", "repeat(" + userInput + ", auto)");
- // Create new squares and append them to the container
- for (let i = 0; i < userInput * userInput; i++) {
- let newSquareDiv = document.createElement("div");
- newSquareDiv.classList.add("new-square-divs")
- containerAllSquareDivs.appendChild(newSquareDiv);
- }
- // Select all created divs (array)
- let allSquareDivs = document.querySelectorAll(".new-square-divs");
- // "Greyshade effect" for all created divs
- for (let i = 0; i < userInput * userInput; i++) {
- let opacity = 0.1;
- allSquareDivs[i].addEventListener("mouseenter", function(){
- allSquareDivs[i].style.backgroundColor = "black";
- allSquareDivs[i].style.opacity = opacity;
- if (opacity < 1) {
- opacity += 0.1
- }
- }
- )
- }
- // "Random colors effect" for all created divs when Random Colors Button clicked
- document.querySelector("#random-colors-button").addEventListener("click", function() {
- for (let i = 0; i < userInput * userInput; i++) {
- allSquareDivs[i].style.backgroundColor = "white";
- allSquareDivs[i].style.opacity = "1";
- allSquareDivs[i].addEventListener("mouseenter", function () {
- var letters = '0123456789ABCDEF';
- var color = '#';
- for (var i = 0; i < 6; i++) {
- color += letters[Math.floor(Math.random() * 16)];
- }
- this.style.backgroundColor = color;
- });let containerAllSquareDivs = document.querySelector(".container-all-square-divs");// Select the container
- let userInput; // Squares number choice
- // Bouton Reset
- document.querySelector("#squares-number-button").addEventListener("click", resetGrid)
- // Game beginning : Create a 16 squares grid
- createSquaresGrid(16);
- // Create squares grid
- function createSquaresGrid(userInput) {
- // Fix the grid's columns and rows number inside containerAllSquareDivs
- containerAllSquareDivs.style.setProperty("grid-template-columns", "repeat(" + userInput + ", auto)");
- containerAllSquareDivs.style.setProperty("grid-template-row", "repeat(" + userInput + ", auto)");
- // Create new squares and append them to the container
- for (let i = 0; i < userInput * userInput; i++) {
- let newSquareDiv = document.createElement("div");
- newSquareDiv.classList.add("new-square-divs")
- containerAllSquareDivs.appendChild(newSquareDiv);
- }
- // Select all created divs (array)
- let allSquareDivs = document.querySelectorAll(".new-square-divs");
- // "Greyshade effect" for all created divs
- for (let i = 0; i < userInput * userInput; i++) {
- let opacity = 0.1;
- allSquareDivs[i].addEventListener("mouseenter", function(){
- allSquareDivs[i].style.backgroundColor = "black";
- allSquareDivs[i].style.opacity = opacity;
- if (opacity < 1) {
- opacity += 0.1
- }
- }
- )
- }
- // "Random colors effect" for all created divs when Random Colors Button clicked
- document.querySelector("#random-colors-button").addEventListener("click", function() {
- for (let i = 0; i < userInput * userInput; i++) {
- allSquareDivs[i].style.backgroundColor = "white";
- allSquareDivs[i].style.opacity = "1";
- allSquareDivs[i].addEventListener("mouseenter", function () {
- var letters = '0123456789ABCDEF';
- var color = '#';
- for (var i = 0; i < 6; i++) {
- color += letters[Math.floor(Math.random() * 16)];
- }
- this.style.backgroundColor = color;
- });
- };
- })
- // Clear the grid from all colors
- let clearButton = document.querySelector("#clear-button")
- clearButton.addEventListener("click", function() {
- for (let i = 0; i < userInput * userInput; i++) {
- allSquareDivs[i].style.backgroundColor = "";
- allSquareDivs[i].style.opacity = "1";
- }
- }
- )
- }
- /*
- // Fix a random color code (HEX)
- function getRandomColor() {
- var letters = '0123456789ABCDEF';
- var color = '#';
- for (var i = 0; i < 6; i++) {
- color += letters[Math.floor(Math.random() * 16)];
- }
- this.style.backgroundColor = color;
- }
- */
- // Reset the grid when Reset Button clicked
- document.querySelector("#reset-button").addEventListener("click", function() {
- resetGrid()
- createSquaresGrid(16)
- })
- // Reset the grid
- function resetGrid () {
- let containerAllSquareDivs = document.querySelector(".container-all-square-divs"); // Pourquoi ne pas pouvoir accéder à containerAllSquareDivs(1) et avoir à le redéfinir dans la fonction?
- // Remove all created divs inside the container
- while (containerAllSquareDivs.hasChildNodes()) {
- containerAllSquareDivs.removeChild(containerAllSquareDivs.lastChild);
- }
- //let userInput = prompt("Combien de carrés ?")
- let userInput = 5;
- createSquaresGrid(userInput)
- }
- };
- })
- // Clear the grid from all colors
- let clearButton = document.querySelector("#clear-button")
- clearButton.addEventListener("click", function() {
- for (let i = 0; i < userInput * userInput; i++) {
- allSquareDivs[i].style.backgroundColor = "";
- allSquareDivs[i].style.opacity = "1";
- }
- }
- )
- }
- /*
- // Fix a random color code (HEX)
- function getRandomColor() {
- var letters = '0123456789ABCDEF';
- var color = '#';
- for (var i = 0; i < 6; i++) {
- color += letters[Math.floor(Math.random() * 16)];
- }
- this.style.backgroundColor = color;
- }
- */
- // Reset the grid when Reset Button clicked
- document.querySelector("#reset-button").addEventListener("click", function() {
- resetGrid()
- createSquaresGrid(16)
- })
- // Reset the grid
- function resetGrid () {
- let containerAllSquareDivs = document.querySelector(".container-all-square-divs"); // Pourquoi ne pas pouvoir accéder à containerAllSquareDivs(1) et avoir à le redéfinir dans la fonction?
- // Remove all created divs inside the container
- while (containerAllSquareDivs.hasChildNodes()) {
- containerAllSquareDivs.removeChild(containerAllSquareDivs.lastChild);
- }
- //let userInput = prompt("Combien de carrés ?")
- let userInput = 5;
- createSquaresGrid(userInput)
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement