jQuery not working on my browser(chrome) for my pixel art project
Please help. I did a project on pixel art marker, but it is not working on my browser. jQuery is not running on my browser (chrome). the following error message is always returned in the console: Uncaught ReferenceError: $ is not defined
at designs.js:1
below is the html and javascript code.
<!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">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h1>Lab: 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="inputWeight" 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>
JAVASCRIPT
$(document).ready(function(){
// Select color input
const size = $('#sizePicker'); // Select size input
const height = $('#inputHeight').val();
const width = $('#inputWeight').val();
const table = $('table');
// When size is submitted by the user, call makeGrid()
size.submit( function makegrid(event) {
for (var i = 1; i <= height; i++) {
table.append("<tr></tr>");
for (var j = 1; j <= width; j++) {
table.children('tr').append("<td></td>");
}
}event.preventDefault()
// Your code goes here!
});
table.children('td').on('click', function(){
var color = $('#colorPicker').val();
$(this).css('background-color', color);
});
});