I am a newbie. I am trying to make a pixel art maker. I cannot figure out where I am going wrong at. It lets me choose the size and pick the color but when I hit enter to make the grid, it doesn't do anything. It just goes back to the original settings with 1 filled in and the color black. Any help would be appreciated.
let colorPicker = document.getElementById("colorPicker").value;
let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWidth").value;
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");
sizePicker.addEventListener('sumbit', function(event) {
event.preventDefault()
let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWidth").value;
makeGrid(height, width);
});
function makeGrid(height, width); {
let height = document.getElementById("inputHeight");
let width = document.getElementById("inputWidth");
table.innerHTML = null;
for (let i = 0; i < height; i++) {
let row = table.insertRow(i);
for (let j = 0; j < width; j++) {
let cell = row.insertCell(j);
cell.addEventListener("click", function(event) {
cell.style.backgroundColor = colorPicker.value;
});
cell.addEventListener("dblclick", function(event) {
cell.style.backgroundColor = "";
});
}
}
}
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;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<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>
You have unnecessary errors. I fixed all of them in the snippet below.
Almost errors come from typo, redundant get values, passing wrong type parameters, and getting elements wrong moment.
Notable here is how you set empty backgroundColor. You should use transparent or inherit instead of "". Check this answer.
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");
sizePicker.addEventListener('submit', function (event) {
event.preventDefault();
let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWidth").value;
makeGrid(height, width);
});
function makeGrid(height, width) {
table.innerHTML = null;
for (let i = 0; i < height; i++) {
let row = table.insertRow(i);
for (let j = 0; j < width; j++) {
let cell = row.insertCell(j);
cell.addEventListener("click", function (event) {
let colorPicker = document.getElementById("colorPicker").value;
cell.style.backgroundColor = colorPicker;
});
cell.addEventListener("dblclick", function (event) {
cell.style.backgroundColor = "inherit";
});
}
}
}
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;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<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>
Keep learning and sharpen your skill.
Let's not focus on the typos on your code and just focus on the main issues.
The main issue you encounter is Uncaught SyntaxError: Identifier 'height' has already been declared error so let's investigate where it came from and why:
if we look closer we see that you have a lot of variables named the same in different place, you have height as a global variable and also you declared a variable with the same name, height, in the form submit listener.
This is not the source of the error thanks to the let keyword used to declare the height variable which declares a block-scoped local variable (source MDN). So with that being said, the issue is not coming from using the same name in various places. Let's dig deeper.
In the makeGrid function, you expect two variable that you called then height and width, it seems we're close! In that same function, we can say that the first line, let height = document.getElementById("inputHeight"), is the cause of Uncaught SyntaxError: Identifier 'height' has already been declared error but why ?
As a first look you may say "I didn't declare another variable with the same name and my height variable is local!" but wait, it seems we forgot that the function makeGrid expects a variable called height and that's the source of the error! height is declared on the function arguments and you trying to create a new variable that have the same name when let height = document.getElementById("inputHeight"); is executed.
The above explanation is true for the variable width so we should fix them both. The easiest solution is to choose different names but I'd rather refactor your code a bit and make some improvements so you get the most of my answer
Here's a live demo which contains a wealth of important comments that should help you along:
/** as a rule of thumb, always try to minimize calls to DOM related methods so in our case we cache the elements that we know that we will use them many time. This will improve our code memeory consumption */
const colorPicker = document.getElementById("colorPicker"),
table = document.getElementById("pixelCanvas"),
sizePicker = document.getElementById("sizePicker"),
height = document.getElementById("inputHeight"),
width = document.getElementById("inputWidth"),
/** the function "makeGrid" was refactored (a bit) and now it doesn't need the "height" nor the "width" as it'll get those values on its own thanks to the cached variables height and width */
makeGrid = () => {
/** this function will use height and width variable to get their realtime values whenever the submit button is clicked. See the below loops declaration */
table.innerHTML = '';
for (let i = 0; i < height.value; i++) {
const row = table.insertRow(i);
for (let j = 0; j < width.value; j++) {
const cell = row.insertCell(j);
/** nothing fancy here just used an arrow function (one liner) */
cell.addEventListener("click", () => cell.style.backgroundColor = colorPicker.value);
cell.addEventListener("dblclick", () => cell.style.backgroundColor = "transparent"); /** or any other color you want */
}
}
}
/** listen for submit events and then draw the grid by calling "makeGrid" */
sizePicker.addEventListener('submit', e => e.preventDefault() || makeGrid());
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;
}
<!-- no changes made on the HTML nor the CSS part just skip to the JavaScript part -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<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>
The above demo is definitely not the only possible fix/solution. Also, I tried to keep things simple and understandable. Many possible improvements can be applied to the above demo like using Event Delegation instead of many listener on the table cells.
Learn more about let keyword on MDN.
Learn more about const keyword on MDN.
Related
My javascript code won't work one bit and I honestly have no idea why. I'm still very new to javascript so if someone can point out where I'm going wrong, I'll very much appreciate it! It's supposed to be a pixel art maker where you can make a table based on user input and color each separate cell.
Edit: Sorry, I should have made myself clearer. For example: entering 5 in 'Grid Height' and 5 in 'Grid Width' then clicking the "Submit" button should produce a 5 x 5 table/grid below 'Design Canvas'. But when I do that, the numbers just resets to 1 and no grid is displayed. Basically, nothing happens. I know I might be missing a lot of code, but no errors are displayed in DevTools. For the color, choosing a color from 'Pick A Color' and then clicking on a cell should only fill that cell. Clicking 'Submit' again should reset the table.
var table = document.getElementById("pixelCanvas");
var height = document.getElementById("inputHeight").value;
var width = document.getElementById("inputWidth").value;
var color = document.getElementById("colorPicker");
var submit = document.getElementById("submit");
var size = document.getElementById("sizePicker");
submit.addEventListener("click", makeGrid);
function makeGrid(height, width) {
height,
width.preventDefault();
table.innerHTML = "";
for (let x = 0; x < height; x++) {
var tr = table.insertRow(x);
for (let y = 0; y < width; y++) {
var td = tr.insertCell(y);
table.appendChild(tr);
td.addEventListener("click", fillCell);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function fillCell(event) {
event.preventDefault();
event.style.backgroundColor = color.value;
}
body {
text-align: center;
background-color: white;
color: plum;
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 2px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
color: black;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<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" id="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
When you click on a cell, there is no need to prevent default. You will need to access the event target first, before accessing the style property.
Also, add the submit event to the form, rather than to the button. You can access form elements off of the form, so that you do not need to store so many globals.
const
form = document.getElementById("sizePicker"),
table = document.getElementById("pixelCanvas"),
color = document.getElementById("colorPicker");
form.addEventListener("submit", makeGrid);
function makeGrid(e) {
const
form = e.target,
width = form.elements.inputWidth.value,
height = form.elements.inputHeight.value;
table.innerHTML = "";
for (let x = 0; x < height; x++) {
var tr = table.insertRow(x);
for (let y = 0; y < width; y++) {
var td = tr.insertCell(y);
table.appendChild(tr);
td.addEventListener("click", fillCell);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function fillCell(e) {
e.target.style.backgroundColor = color.value;
}
body {
text-align: center;
background-color: white;
color: plum;
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 2px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
color: black;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker" onsubmit="return false;">
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" id="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
They key issue is that you were assigning the value of the inputs to the variables immediately instead of allowing the function to get the values.
Coerce the strings from the values to Numbers, and use those in your loops.
Remove the <form> element completely and change the <input type="submit" /> to a button with a type="button" attribute.
In fillCell use event.target to access the element that was clicked on.
var table = document.getElementById("pixelCanvas");
var height = document.getElementById("inputHeight");
var width = document.getElementById("inputWidth");
var color = document.getElementById("colorPicker");
var submit = document.getElementById("submit");
var size = document.getElementById("sizePicker");
submit.addEventListener("click", makeGrid);
function makeGrid() {
table.innerHTML = "";
for (let x = 0; x < Number(height.value); x++) {
var tr = table.insertRow(x);
for (let y = 0; y < Number(width.value); y++) {
var td = tr.insertCell(y);
table.appendChild(tr);
td.addEventListener("click", fillCell);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function fillCell(event) {
event.target.style.backgroundColor = color.value;
}
body{text-align:center;background-color:#fff;color:plum;font-family:Roboto,sans-serif}h1{font-family:Roboto,sans-serif;font-size:70px;margin:.2em}h2{margin:1em 0 .25em}h2:first-of-type{margin-top:.5em}table,td,tr{border:2px solid #000}table{border-collapse:collapse;margin:0 auto;color:#000}tr{height:20px}td{width:20px}input[type=number]{width:6em}
<h2>Choose Grid Size</h2>
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">
<button type="button" id="submit">Submit</button>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
I'm working on a school project (the last one in my introduction to programming course). The html and css have been given. We need to allow the user to create a grid and then color boxes to make pixel art.
I've run into two issues.
My table isn't clearing when the user hits submit to create a new table, and
I can't get color into my grids.
I'd really appreciate any help that can be given.
// Select color input
let inputColor = document.getElementById ("colorPicker");
// Select size input
let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");
// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
event.preventDefault();
makeGrid()
});
// When size is submitted by the user, call makeGrid()
function makeGrid() {
const height = iHeight.value;
const width = iWidth.value;
for (var w = 0; w < width; w++){
const row = table.insertRow();
for (var h = 0; h < height; h++){
const cell = row.insertCell();
}
}
let cPicker = document.getElementsByClassName("cell");
cPicker.addEventListener("click", function (event) {
event.preventDefault();
cell.style.backgroundColor = inputColor;
document.appendChild("cell");
table.innerHTML = grid;
});
}
The rest of the code is here:
https://github.com/shearda/pixelartmaker/
By your words, I am assuming that you want that
When you Click on Submit it should reset the existing table.
When You change the color and click on any cell that cell be filled with selected color only.
I made little changes to js and html file,
Html file change: replace table with div of same id,
JS change you were attaching event listener incorrectly,
/* you didn't attach any class to your cell so you will get null in this,
and getByClassName returns list of elements so you need to iterate over the list to attach event
*/
let cPicker = document.getElementsByClassName("cell");
cPicker.addEventListener("click", function (event) {
event.preventDefault();
cell.style.backgroundColor = inputColor;
document.appendChild("cell");
table.innerHTML = grid;
});
Give this a try
// Select color input
let inputColor = document.getElementById("colorPicker");
// Select size input
let tableCanvas = document.getElementById("pixelCanvas");
let iHeight = document.getElementById("inputHeight");
let iWidth = document.getElementById("inputWidth");
// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function (event) {
event.preventDefault();
makeGrid()
});
// When size is submitted by the user, call makeGrid()
function makeGrid() {
let table = document.createElement('table')
const height = iHeight.value;
const width = iWidth.value;
for (let w = 0; w < width; w++) {
const row = table.insertRow();
for (let h = 0; h < height; h++) {
const cell = row.insertCell();
cell.addEventListener("click",event=>{
event.preventDefault();
event.target.style.backgroundColor = inputColor.value
})
}
}
let children = tableCanvas.childNodes? tableCanvas.childNodes:[]
if(children && children.length===1){
tableCanvas.replaceChild(table,children[0])
}else{
tableCanvas.append(table)
}
}
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;
}
<!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>
<div id="pixelCanvas"></div>
<script src="designs.js"></script>
</body>
</html>
Fortunately, I was able to solve your problem.
If you need more explanation, leave a comment below this answer so I can explain...
let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
event.preventDefault();
makeGrid()
});
function makeGrid() {
table.innerHTML = '';
const height = iHeight.value;
const width = iWidth.value;
let inputColor = document.getElementById("colorPicker").value;
for (var w = 0; w < width; w++){
const row = table.insertRow();
for (var h = 0; h < height; h++){
row.insertCell().style.backgroundColor = inputColor;
}
}
}
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;
}
<!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>
There is a need to update css to dynamic value and I am not sure what's the best approach to it.
<div id="app" style="zoom: 0.XX;">
...
</div>
The zoom level will trigger based on window resize and the app will zoom according. I loaded this app into cordova and have it run within iPAD, then I realize the font-size needs to be adjusted to the same as zoom level using "-webkit-text-size-adjust" in order for it to not break the design layout.
My challenge is to set the css dynamically like this:
#app * {
-webkit-text-size-adjust : nn%
}
Where nn is the zoom X 100 + '%'
I have tried:
1) Set the style on the app div, but this doesn't help to apply to inner elements
<div id="app" style="zoom: 0.XX; -webkit-text-size-adjust: XX%">
2) Use javascript to set to all inner nodes, but not only I think this is less efficient, but it won't get trigger if my window doesn't resize, that means if I navigate to other pages, this logic won't get called.
REF: https://stackoverflow.com/questions/25305719/change-css-for-all-elements-from-js
let textSizeAdjust = function(zoom) {
let i,
tags = document.getElementById("app").getElementsByTagName("*"),
total = tags.length;
for ( i = 0; i < total; i++ ) {
tags[i].style.webkitTextSizeAdjust = (zoom * 100) + '%';
}
}
3) I tried using javascript, and most likely they are technically incorrect because querySelector return null.
document.querySelector('#app *').style.webkitTextSizeAdjust = zoom *100 + '%';
document.querySelector('#app').querySelector('*').style.webkitTextSizeAdjust = zoom * 100 + "%";
Ultimate, I believe I need to dynamically create the css, for the browser to apply this setting to the DOM:
#app * {
-webkit-text-size-adjust: nn
}
Please let me know if this is the right, or how to use javascript to create the above css and change the value dynamically?
CSS Variables
Requirements
HTML
Each form control that has numerical data should have:
value={a default, don't leave it blank}
class='num'
data-unit={unit of measurement or a single space}
The select/option tag should have the selected attribute
CSS
CSS Variable Signature: propertyName: var(--propertyValue)
// Declare CSS Variables at the top of a stylesheet
:root {
--mx0: 50px;
--my0: 50px;
--rz0: 1.0;
--zm0: 1.0;
--sp0: 360deg;
}
JavaScript
There's step by step details commented in the JavaScript Demo. Here's the most important statement in the code:
CSSStyleDeclaration CSS Variable
🢃 🢃
`ele.style.setProperty(`--${node.id}`,
${node.valueAsNumber}${node.dataset.unit})
🢁 🢁
HTMLInputElement DataSet API
Demo 1
// Reference form#UI
var ui = document.forms.UI;
// Register form#UI to change event
ui.addEventListener('change', setCSS);
// Callback passes Event Object
function setCSS(e) {
// Collect all form controls of form#UI into a NodeList
var fx = ui.elements;
// Reference select#pk0
var pk0 = fx.pk0;
// Get select#pk0 value
var pick = pk0.options[pk0.selectedIndex].value
// if the changed element has class .num...
if (e.target.className === 'num') {
// Reference Event Target
var tgt = e.target;
// Then reference is by its #id
var node = document.getElementById(tgt.id);
// DOM Object to reference either html, square, or circle
var ele;
/* Determine which tag to test on: html (affects everything),
|| #sQ<uare> and #ciR<cle> shapes.
*/
switch (pick) {
case "rT":
ele = document.documentElement;
break;
case "sQ":
ele = document.getElementById('sQ');
break;
case "cR":
ele = document.getElementById('cR');
break;
default:
break;
}
/* Sets a target element's Transform:
|| translateXY, scale, and rotate
*/
ele.style.setProperty(`--${node.id}`, `${node.valueAsNumber}${node.dataset.unit}`);
}
}
/* Declare CSS Variables on the :root selector at the top of sheet
All CSSVar must be prefixed with 2 dashes: --
*/
:root {
--mx0: 50px;
--my0: 50px;
--rz0: 1.0;
--sp0: 360deg;
}
.set {
border: 3px ridge grey;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
padding: 5px;
}
/* The var() function's signature is:
propertyName: var(--propertyValue)
*/
#sQ {
position: relative;
background: rgba(0, 100, 200, 0.3);
width: 50px;
height: 50px;
transform: translateX(var(--mx0)) translateY(var(--my0)) scale(var(--rz0)) rotate(var(--sp0));
border: 3px ridge grey;
z-index: 1;
transition: all 1s ease;
}
#cR {
position: relative;
background: rgba(200, 100, 0, 0.3);
width: 50px;
height: 50px;
transform: translateX(var(--mx0)) translateY(var(--my0)) scale(var(--rz0)) rotate(var(--sp0));
border: 3px ridge grey;
border-radius: 50%;
transition: all 1s ease;
}
#sQ::before {
content: '\1f504';
text-align: center;
font-size: 2.25rem;
transform: translate(1px, -8px)
}
#cR::after {
content: '\1f3b1';
text-align: center;
font-size: 2.25rem;
}
input,
select {
display: inline-block;
width: 6ch;
font: inherit;
text-align: right;
line-height: 1.1;
padding: 1px 2px;
}
select {
width: 9ch
}
.extension {
overflow-y: scroll;
overflow-x: auto;
min-height: 90vh;
}
/* For debugging on Stack Snippets */
/*.as-console-wrapper {
width: 25%;
margin-left: 75%;
min-height: 85vh;
}*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style></style>
</head>
<body>
<!--
HTML Requirements
Each form control that has numerical data should have:
1. value={a default, don't leave it blank}
2. class='num'
3. data-unit={unit of measurement or a single space}
4. The select/option tag should have the selected attribute
-->
<form id='UI'>
<section class='set'>
<label>X: </label>
<input id='mx0' class='num' type='number' min='-350' max='350' value='50' step='10' data-unit='px'>
<label>Y: </label>
<input id='my0' class='num' type='number' min='-350' max='350' value='50' step='10' data-unit='px'>
<label>Size: </label>
<input id='rz0' class='num' type='number' min='0' max='5' value='1' step='0.1' data-unit=' '>
<label>Spin: </label>
<input id='sp0' class='num' type='number' min='0' max='1440' value='360' step='180' data-unit='deg'>
<label>Pick: </label>
<select id='pk0' class='num'>
<option value='rT' selected>Root</option>
<option value='sQ'>Square</option>
<option value='cR'>Circle</option>
</select>
</section>
</form>
<section class='set extension'>
<div id='sQ' class='test shape' width="50" height="50"></div>
<div id='cR' class='test shape' width="50" height="50"></div>
</section>
</body>
</html>
Update
This update is specifically for OP, so this may be of help or not for other users.
Deno 2
:root {
--opc: 0;
--zoom: 1;
}
.fc {
display: inline-block;
width: 18ch;
margin:0 0 10px 0
}
#app * {
opacity: var(--opc);
transform: scale(var(--zoom));
}
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<form id='app' action='https://httpbin.org/post' method='post' target='view'>
<fieldset class='sec'>
<legend>App of Mystery</legend>
<input id='A0' name='A0' class='fc' type='text' placeholder='User Name'>
<input id='A1' name='A1' class='fc' type='password' placeholder='Password'>
<input type='submit'>
<input type='reset'>
<input id='zBtn' type='button' value='Zoom'>
<iframe name='view' frameborder='1' width='100%'></iframe>
</fieldset>
</form>
<script>
var node = document.querySelector('#app *');
var zBtn = document.getElementById('zBtn');
var flag = false;
document.addEventListener('DOMContentLoaded', function(e) {
node.style.setProperty("--opc", "0.5");
});
document.addEventListener('click', function(e) {
node.style.setProperty("--opc", "1");
});
zBtn.addEventListener('click', function(e) {
if (flag) {
flag = false;
node.style.setProperty("--zoom", "1");
} else {
flag = true;
node.style.setProperty("--zoom", "1.25");
}
});
</script>
</body>
</html>
I don't have much knowledge about -webkit-text-size-adjust
However, this should work for creating a dynamic stylesheet and inserting it:
I have added code to dynamically update it as well
const form = document.getElementById('colorChooser');
form.addEventListener('submit', (e) => {
e.preventDefault();
color = document.getElementById('colorInput').value;
const style = document.getElementById('colorStyle');
style.innerHTML = `#app * {
background-color: ${color};
}`;
});
const style = document.createElement('style');
style.id = 'colorStyle';
style.type = 'text/css';
style.innerHTML = `#app * {
background-color: red;
}`;
document.head.appendChild(style);
#app {
margin-bottom: 10px;
}
#inner {
width: 50px;
height: 50px;
background-color: black;
}
<div id="app">
<div id="inner"></div>
</div>
<form id="colorChooser">
<input id="colorInput" type="text" placeholder="red" />
<input type="submit" value="Update color"/>
</form>
I am Trying to create a pixel art app.
I managed to create a table dynamically according to user's input.
When I click a specific cell, it does not get the color assigned to it by the click event - event.target.bgcolor = "#ff0000";
However,looking at the debugger, it shows that event.target.bgcolor does get the color,
What needs to be changed?
For testing purposes I assigned "#ff0000".
var rows; //why when define as const --> get error
var columns;
var selectedColor = '#000000';
var colorPicker;
var grid;
colorPicker = document.querySelector('.colorPicker');
/*EventLstener for Color Selection */
colorPicker.addEventListener('change', function(event) {
selectedColor = event.target.value;
console.log(selectedColor);
})
/************************
Create the grid function
************************/
function makeGrid() {
resetGrid()
rows = document.querySelector('.inputRow').value;
console.log(rows);
columns = document.querySelector('.inputCol').value;
console.log(columns);
grid = document.querySelector('.grid');
for (let x = 1; x <= rows; x++) {
let newTR = document.createElement("tr");
newTR.className = "tr"; //assign class
grid.appendChild(newTR);
for (let y = 1; y <= columns; y++) {
let newTD = document.createElement("td");
newTD.className = "td"; //assign class
newTR.appendChild(newTD);
newTD.addEventListener('click', function(event) {
console.log("cell clicked")
// event.target.style.backgroundcolor = "#ff0000";
event.target.bgcolor = "#ff0000";
})
}
}
}
/**************************
Set the color of a grid cell
***************************/
/**********************************
Define a function to reset the grid
***********************************/
function resetGrid() {
//using jQuery to reset the grid
$('tr').remove();
$('td').remove();
document.querySelector('.colorPicker').value = "#000000";
}
makeGrid();
resetGrid()
body {
/* margin: 0; */
/* padding: 0; */
text-align: center;
}
h1 {
font-family: "Comic Sans MS";
font-size: 2.8rem;
font-weight: 4rem;
margin-top: 1rem;
margin-bottom: 0.2rem;
color: slateblue;
}
td,
tr {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
/* border: 3px solid red; */
}
tr {
height: 20px;
}
td {
width: 20px;
}
.inputRow,
.inputCol {
width: 60px;
margin-right: 15px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel Art Maker</title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootsrap Latest compiled and minified CSS -->
<!-- To ensure proper rendering and touch zooming-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Your Grid Size</h2>
<form class=g ridInput>
Set Grid Rows
<input type="number" class="inputRow" name="rows" id="#inputRow" value="0" min="1"> Set Grid Columns
<input type="number" class="inputCol" name="columns" id="#inputCol" value="0" min="1">
<button type="button" class="submitData" onclick="makeGrid()">Click to Generate Grid</button>
<button type="button" class="resetGrid" onclick="resetGrid()">Click to Reset Grid</button>
</form>
<h3>Pick A Color</h3>
<!-- Set the color picker -->
<input type="color" class="colorPicker">
<h2>Design Canvas</h2>
<table class="grid" id="#mytable"></table>
<script src="myscripts.js"></script>
</body>
</html>
The code you've commented out is very close, however it should be backgroundColor (note the capital C).
event.target.style.backgroundColor = "#ff0000";
I'm voting to close this as a "simple typographical error".
This Code is supposed to create a table and transform it into a canvas, so that when I click a cell it changes it color to the color picker the input is taken from the text boxes and color picker and executed when submit is pressed
I want to create a table with a certain height and width.
The Problem is that I don't know how to store the values of the input boxes
to create the table.
the second problem is I want to store the color from the color picker too to change the cells color to it when I click them.Photo of the page running.
Note: I am only allowed to solve this with JQuery.
// Select color input
// Select size input
// When size is submitted by the user, call makeGrid()
var Make=$('#pixel_canvas');
var td=$('td');
var rows=$('#input_width').val();
var cols=$('#input_height').val();
td.css("padding","700px");
function change() {
$('td').click( function() {
$(this).css("background-color","red");
});
}
Make.append(makeGrid());
function makeGrid() {
var table='';
for (var i = 0; i < rows; i++) {
table+='<tr>';
for (var j = 0; j < cols; j++) {
table+='<td onclick="change()"></td>';
}
table+='</tr>';
}
return table;
};
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;
}
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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" value="1">
Grid Width:
<input type="number" id="input_width" 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="pixel_canvas"></table>
<script src="designs.js"></script>
</body>
</html>
To create HTML table dynamically, You need to add the number of rows in a loop. You need for that to form the string that will be added in your html.
A common way to do that is to start your string with "<table>". Then you will add to this string the number of rows (generally using a loop) and then you will add after the loop "</table>" to end your string.
But in your example, the table tag exists already in your html, so it is not necessary to start or close our string with the table tag. We will append the string describing our rows directly to the selector $(#pixel_canvas)
Then if you want to create listeners on the td tag of your table, you can use delegation event. This way, you will add a single listener for the whole table. Basically, instead of table+='<td onclick="change()"></td>';, you can do this: $('#pixel_canvas').on('click', 'td', function(e){})
let color;
//make the Grid of pixel art
function makeGrid() {
const table = $('#pixel_canvas');
table.find('tr').remove(); // will delete existing table if there is
const size = {
height: $('#input_height').val(),
width: $('#input_width').val()
}
//Construct the table
for (let i = 0; i < size.height; i++) {
let row = '<tr>';
let cell = '';
for(let j = 0; j < size.width; j++){
cell += '<td></td>';
}
row += cell;
row += '</tr>';
table.append(row);
}
}
// When size is submitted by the user, call makeGrid()
$('#sizePicker').on('submit', function(e){
e.preventDefault();
makeGrid()
})
//change cell color
$('#pixel_canvas').on('click', 'td', function(e){
if($(e.target).css('background-color') !== color){
//if color cell different from the selected color with color picker
color = $('#colorPicker').val();
$(e.target).css('background-color', color);
color = $(e.target).css('background-color'); // get the color value in RGB notation
}else{
$(e.target).css('background-color', 'inherit');
}
})
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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" value="1">
Grid Width:
<input type="number" id="input_width" 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="pixel_canvas"></table>
<script src="designs.js"></script>
</body>
</html>