JS Pixel Art Maker

What Will I Build?

You'll build a single-page web app that allows users to draw pixel art on a customizable canvas! Check out this example: see image.

You'll be given starter code, including HTML and CSS, to build the application. You'll write JavaScript code that lets the user create a grid of squares representing their design, and apply colors to those squares to create a digital masterpiece!

Your users should be able to:

• Dynamically set the size of the table as an _N_ by _M_ grid.
• Choose a color.
• Click a cell in the grid to fill that cell with the chosen color.

Your primary task is to implement the makeGrid() function, that dynamically creates a grid that the user can interact with.

What Skills Do I Need?

In this project, you'll use your front-end programming skills including:

• Defining variables with const and let
• Accessing the DOM using methods of the document object
• Declaring functions and attaching them to DOM objects as event listeners
• Writing nested loops and using loop variables

Get the Starter Code

If you'd like to start from scratch without any files, feel free to do so! You learn the most by developing on your own! But, it can be a bit challenging having to start from scratch, so we do provide a starter project to use.

You can download the starter code through either:

• The Pixel Art Maker repository on GitHub
• This zipped folder

The starter code includes all required HTML input fields, as well as some basic styling. A skeleton of the makeGrid() function is provided as well.

Development Strategy

Before writing any code, try loading up index.html from the starter project to see how things look! Notice that the design.js file is implemented in the tag in the index.html file. Your goal is to build out the design.js file to achieve all the interactive elements on the page!

Now, open up design.js. As you start writing your code, keep these three tasks in mind:

1.Define your variables by selecting the DOM elements that the user will interact with. This is where your JavaScript variables can come into play! For instance, the submit button, the table, and the color picker need to be accessed. The value of the color selected needs to be stored as well, since the clicked cell in the table needs to be set to the selected color.

2.Add event listeners to the relevant DOM elements, so that user input can be color values and table sizes can be dynamically set by the user.

3.Set the size of the cross stitch canvas as an _N_ by _M_ grid with the makeGrid() function. Use your knowledge of JavaScript loops to dynamically clear and create the table based on user input. Each cell should have an event listener that sets the background color of the cell to the selected color.

Now test it! When you're done, you should be able to create a canvas of any size, choose a color using the color picker, and click on the canvas's table cells to set their color.

index.html

< !DOCTYPE html>
< html>
< head>
< title>Pixel Art Maker!< /title>
< link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
< link rel="stylesheet" href="styles.css">
< /head>
< body>
< h1>Pixel Art Maker< /h1>

< h2>Choose Grid Size< /h2>
< form id="sizePicker">
Grid Height:
< input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
< input type="number" id="inputWidth" name="width" min="1" value="1">
< input type="submit">
< /form>

< h2>Pick A Color< /h2>
< input type="color" id="colorPicker">

< h2>Design Canvas< /h2>
< table id="pixelCanvas">< /table>

< script src="designs.js">< /script>
< /body>
< /html>

style.css

body {
text-align: center;
}

h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}

h2 {
margin: 1em 0 0.25em;
}

h2:first-of-type {
margin-top: 0.5em;
}

table,
tr,
td {
border: 1px solid black;
}

table {
border-collapse: collapse;
margin: 0 auto;
}

tr {
height: 20px;
}

td {
width: 20px;
}

input[type=number] {
width: 6em;
}

design.js

// Select color input
// Select size input

// When size is submitted by the user, call makeGrid()

function makeGrid() {

// Your code goes here!

}