You'll be making a nonogram puzzle (Hanjie, Number Grid, Pi-Cross, etc) and allow the user to play the game by filling, unfilling, or clearing tiles of a nonogram puzzle. You do not need to know how these puzzles work to complete the project.
Complete the UI of a nonogram puzzle. Practice DOM manipulation using JavaScript by completing several functions.
We have provided the HTML (project.html
) and CSS (project.css
) that you will need for this project. You will be writing JavaScript code in a file called project.js
and make it possible to play the puzzle.
To complete this project, students should have the following:
- Basic understanding of JS (arrays, objects, functions, if statements, this)
-
Download this project from GitHub.
-
Open the JavaScript file (
project.js
). You will be writing JavaScript code here. -
Open
project.html
on your web browser to understand what you will be adding functionality to.
If a user clicks on any tile, an alert pops up with a message. Complete the function setUpTiles
by:
-
Selecting all tiles in the grid with the class
.box
by usingdocument.querySelectorAll
. Create a reference to all the tiles in a variable namedtiles
.tiles
will hold and array of all the elements with the class.box
. -
Inside the for loop,
-
Create a variable named
tile
and set it to a single element in the tiles array. You can use the variablei
as the index. -
If any tile is clicked on, an alert pops up with the message "You clicked a tile!". Use the
alert
function. You can do this by attaching aclick
addEventListener to the tile. In the response function, use thealert
function.
If a user clicks on any tile, it will turn black and become filled. You can complete this by updating and completing two functions:
-
Complete the function
changeBoxMark
so that a single tile is filled in when a user clicks on it. There is a class,filled
, that handles the styling for you in thecss
file. Add the following line:this.classList.add()
then fill in the parantheses withfilled
class. -
Update the function
setUpTiles
so that thechangeBoxMark
function is called whenever a single tile is clicked on. You should also remove the alert pop up insetUpTiles
function.
If a user clicks on a white tile, it will turn black (or become filled). If a user clicks a black tile, it will turn white (or become unfilled). Modify your changeBoxMark
function so that toggling between unfilled and filled tiles is possible.
-
You will need to implement
if-else
statements in thechangeBoxMark
function to change black tiles to white tiles and vice versa. There is no "unfilled" class for the tiles. You can clear a filled tile by simply removing the.filled
class. -
Set up an
if-else
statement. To check if an element has the classfilled
, use the following line:this.classList.conatins("filled")
-
To remove the
filled
class from an element, usethis.classList.remove("filled")
-
To add the
filled
class from an element, usethis.classList.add("filled")
When the "Clear" button is clicked, the user will be asked to confirm their choice and if the choice is "OK" all filled tiles will be unfilled.
-
Create an if statement confirming if the user wants to clear the puzzle. Add a
confirm
message in the condition so that the user has a second chance to decide if they want to clear their tiles. The message should say "Are you sure you want to clear the puzzle?". The tiles will clear only if the users confirmsOK
. -
Inside the if-statment select every tile and remove the class
.filled
-
Select all tiles in the grid with the class
.box
by usingdocument.querySelectorAll
. Create a reference to all the tiles in a variable namedtiles
.tiles
will hold an array of all the elements with the class.box
. -
Inside the for loop,
-
Remove the
filled
class from each tile in thetiles
array. To remove thefilled
class from an element, useyourArray[i].classList.remove("filled")
-
Inside the
window.onload
function, get a reference to the element with the idclear
. Do this below thesetUpTiles()
function call. -
Then add a click event listener to call the
clearPuzzle()
function.