I am trying to build a pixel marker webpage for a project. It is almost completed. I am facing a couple of problems:
Unable to fill in the color, when a
<td>
tag is clicked.The
wells
that contain the color options and the input value to the grid, over flow the vertical line when I resize the browser. I need the width tag here because I want it to fill 100% of the column size it is located in. I had to use a hard coded value here because if I use 100% as the width value, the wells fill the entire width of the window when the browser is resized.
PLease refer to the output here: https://codepen.io/gauravthantry/pen/LdbxZg.
Note:- I just got a notification saying that this question is a duplicate of Difference between .on('click') vs .click()
The question asked in the above post is the answer to my question.
Below is my code:
$(document).ready(function() {
$("#grid-input").click(function() {
$(".drawing-area").empty();
var rows = $("#row").val();
var cols = $("#col").val();
if (rows > 0 && cols > 0) {
if (rows < 8 || cols < 8) {
for (var i = 1; i <= rows; i++) {
var rowClassName = 'row' + i;
var tr = $('<tr>').addClass(rowClassName);
tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created
for (var j = 1; j <= cols; j++) {
var colClassName = 'col' + j;
$('<td width="30px" height="30px" style="border: 1px solid #000; "></a></td>').addClass(colClassName).appendTo(tr);
}
$('.drawing-area').append('</tr>');
}
$('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');
} else if ((rows >= 8 && rows <= 20) && (cols >= 8 && cols <= 50)) {
for (var i = 1; i <= rows; i++) {
var rowClassName = 'row' + i;
var tr = $('<tr>').addClass(rowClassName);
tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created
for (var j = 1; j <= cols; j++) {
var colClassName = 'col' + j;
$('<td width="20px" height="20px" style="border: 1px solid #000; text-align: center;"></a></td>').addClass(colClassName).appendTo(tr);
}
}
$('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');
} else if (rows > 20 || cols > 50) {
alert('Bamm!!! Your input will flood the browser\'s belly');
}
} else {
alert("You haven't provided the grid size!");
}
});
$('td').click(function() {
var color = $("input[name='color']:checked").val();
concole.log(color);
if (color === 'blue') {
if ($(this).hasClass('colorFill-Blue'))
$(this).removeClass('colorFill-Blue');
else
$(this).addClass('colorFill-Blue');
} else if (color === 'green') {
if ($(this).hasClass('colorFill-Green'))
$(this).removeClass('colorFill-Green');
else
$(this).addClass('colorFill-Green');
alert("green is selected");
} else {
if ($(this).hasClass('colorFill-Yellow'))
$(this).removeClass('colorFill-Yellow');
else
$(this).addClass('colorFill-Yellow');
}
});
});
.page-position{
background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
width:100%;
height: 100%;
}
.content-position{
background-color: rgba(255,255,255,0.6);
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 2%;
height: 600px;
width: 96%;
position: absolute;
}
.heading{
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding-top: 10px;
}
.fa1{
color: blue;
}
.fa2{
color: yellow;
}
.fa3{
color: green;
}
.vertical-line{
border-left: 1px solid white;
height: 478px;
margin-left: 30px;
}
.color-option-container{
width: 300px;
background-color: rgba(255,255,255,0.4);
}
.grid-size-container{
background-color: rgba(255,255,255,0.4);
width: 300px;
}
.text-line{
border: none;
border-bottom: 1px solid;
width: 30%;
margin-bottom: 10px;
background: transparent;
}
.rows{
float: left;
}
.cols{
float: center;
margin-left: 20px;
}
.drawing-area{
text-align: center;
visibility: hidden;
}
.btn-size{
text-align: center;
width: 60px;
}
.colorFill-Blue{
background-color: blue;
}
.colorFill-Green{
background-color: green;
}
.colorFill-Yellow{
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>PIXEL ART MAKER</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/app.js"></script>
</head>
<body class="page-position">
<!-- Content starts here -->
<section class="content-position container-fluid">
<section class="heading">
<h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
</section>
<hr>
<section>
<section class="row-fluid">
<section class="col-md-3">
<section class="well well-lg color-option-container">
<form class="color-select">
<input type="radio" name="color" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i> BLUE
<br>
<input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> YELLOW
<br>
<input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> GREEN
</form>
</section>
<br>
<section class="well well-lg grid-size-container">
<input type="text" class="text-line rows" id="row" placeholder="Rows">
<input type="text" class="text-line cols" id="col" placeholder="Cols">
<br/>
<button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>
</section>
</section>
<section class="col-md-1 vertical-line"></section>
<section class="col-md-7">
<table class="drawing-area">
</table>
</section>
</section>
</section>
</section>
</body>
</html>
this
keyword.