Pixel art maker

1

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

Sans titr
Sans titr1366×768 118 KB

the html code

<html>
  <head>
    <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>
  </head>
<body>
      <h1>Lab: Pixel Art Maker</h1>
      
        <hr>
        <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">


    </form>

    <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>
</body>
</html>

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

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

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

tr {
    height: 20px;
}

td {
    width: 20px;

}

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

#colorPicker:hover{
    box-shadow: 1px 1px 5px white;
}

#input_height{
    width: 8vw;
    box-shadow: 2px 2px 15px black;
}

#input_width{
    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;

}

.submit:hover{
    transition: all 0.25s ease;
    color: black;
    background-color: white;
    transition: all 0.25s ease;
}

#pixel_canvas,
#colorPicker:hover{
    cursor: pointer;
}

p{
    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();

    table.children().remove();

    //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
            $('<td></td>').appendTo(byHeight);
        }
        table.append(byHeight);
    }

    //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) {
    e.preventDefault();
    makeGrid();
});
2

Hello there,

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

Hope this helps

3