ZuoTi.Pro
Question

I have to make a pixel art maker using javascript. HTML and CSS were already provided....

I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color.

This is my code: (ONLY JS IS SUPPOSED TO BE FIXED).

JS:

// Select color input
// Select size input
const colorPicker = document.getElementsById('colorPicker');
const rowNum = document.getElementsById('inputHeight');
const cellNum = document.getElementById('inputWidth');
const pixelCanvas = document.getElementById('pixelCanvas');
const form = document.getElementById('sizePicker');

// When size is submitted by the user, call makeGrid()
form.addEventListner('submit', function(e) {
pixelCanvas.innerHTML = '';
e.preventDefault();
makeGrid();
})


pixelCanvas.addEventListner('click', function(e) {
if(e.target.nodeName === 'TD'){
e.target.style.backgroundColor = colorPicker.value;
}
});
function makeGrid() {

for(let i = 0; i < rowNum.value; i++){
const row = pixelCanvas.insertRow(0);
for (let j = 0; j < cellNum.value; j++) {
row.insertCell(0);
}
}

}

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>

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;
}

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Hey, there were some typo error in the Javascript code. I have updated the code and mentioned in the code where and what the errors were. If you have anu problem, feel free to comment.

Program Screenshot:

// Select color input // Select size input = // instead of document.getElementById(colorPicker) // document.getElementsById

Sample Output:

PIXEL ARTMA KER Choose Grid Size Grid Width: 50 Grid Height: 50 < > Submit Query Pick A Color Design Canvas

Program code to copy:

// instead of document.getElementById('colorPicker')
// document.getElementsById('colorPicker') was used
const colorPicker = document.getElementById('colorPicker');
// instead of document.getElementById('inputHeight');
// document.getElementsById('inputHeight'); was used
const rowNum = document.getElementById('inputHeight');
const cellNum = document.getElementById('inputWidth');
const pixelCanvas = document.getElementById('pixelCanvas');
const form = document.getElementById('sizePicker');

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

//instead of form.addEventListener
// form.addEventListner was used
form.addEventListener('submit', function (e) {
    pixelCanvas.innerHTML = '';
    e.preventDefault();
    makeGrid();
})

//instead of pixelCanvas.addEventListener
// pixelCanvas.addEventListner was used
pixelCanvas.addEventListener('click', function (e) {
    if (e.target.nodeName === 'TD') {
        e.target.style.backgroundColor = colorPicker.value;
    }
});

function makeGrid() {
    for (let i = 0; i < rowNum.value; i++) {
        const row = pixelCanvas.insertRow(0);
        for (let j = 0; j < cellNum.value; j++) {
            row.insertCell(0);
        }
    }

}

0 0
Add a comment
Know the answer?
Add Answer to:
I have to make a pixel art maker using javascript. HTML and CSS were already provided....
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

  • Trying to understand java script.. The code provided prints out a game board of cells that...

    Trying to understand java script.. The code provided prints out a game board of cells that are 10 x 10.   I currnetly have it printed out so that it will print out pink squares. how can i create a click even on any of the pink squares that when they are clicked it will turn the square black...   then any square that is black when it is clicked it will change back to the color pink html/js code and css...

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT