Pixel art maker

it works but when i click run code it says im wrong in 4 things and im confusing

the html code

    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <h1>Lab: Pixel Art Maker</h1>
        <h2>Choose Grid Size</h2>
        <form id="sizePicker">
        <!--Grid Height:-->
        <input type="number" id="input_height" name="height" min="1" placeholder="Enter height">
        <!--Grid Width:-->
        <input type="number" id="input_width" name="width" min="1" placeholder="Enter width">

        <input type="submit" class="submit" value="Create">


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

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

    <p> *Double-click to reset cell color </p>

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

the css code

body {
    text-align: center;
    background-color: darkslategrey;

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

h2 {
    margin: 1em 0 0.25em;

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

td {
    border: 1px solid black;

table {
    border-collapse: collapse;
    margin: 0 auto;
    background-color: #ffffff;

tr {
    height: 20px;

td {
    width: 20px;


    width: 6em;

    box-shadow: 1px 1px 5px white;

    width: 8vw;
    box-shadow: 2px 2px 15px black;

    width: 8vw;
    box-shadow: 2px 2px 15px black;

.submit {
    transition: all 0.25s ease;
    color: white;
    background-color: black;
    transition: all 0.25s ease;
    box-shadow: 2px 2px 15px black;


    transition: all 0.25s ease;
    color: black;
    background-color: white;
    transition: all 0.25s ease;

    cursor: pointer;

    color: darkgrey;
    font-size: 12px;

the js code

function makeGrid() {
    //Get table
    var table = $('#pixel_canvas');
    //Get number of rows
    var rows = $('#input_height').val();
    //Get number of columns
    var columns = $('#input_width').val();


    //For loops to generate rows
    for (var i = 0; i < rows; i++) {
        var byHeight = $('<tr></tr>');

        for (var j = 0; j < columns; j++) {
            //Append cells to rows

    //Pick the color and define it for the cell
    table.on('click', 'td', function () {
        var pickColor = $('#colorPicker').val();
        $(this).css('background-color', pickColor);

    //Reset color from the cell on double-click (to white)
    table.on('dblclick', 'td', function () {
        $(this).css('background-color', '#ffffff')

    //Click the Create button to create a grid
$("input[type='submit']").click(function (e) {

Hello there,

There is a difference between input_height and inputHeight…similar for the other issues.

Hope this helps