Skip to content

Commit ebffffd

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #975 from iamsnehadas/PixelArtMaker-iamsnehadas
Added Pixel art maker app
2 parents c58bfad + c56f9ba commit ebffffd

File tree

7 files changed

+217
-0
lines changed

7 files changed

+217
-0
lines changed

‎PixelArtMaker/iamsnehadas/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# **Game_Name**
2+
3+
Pixel_Art_Maker
4+
5+
<br>
6+
7+
## **Description 📃**
8+
9+
- This is a mini app, where one can easily create any pixelated art using various colours.
10+
11+
## **Languages **
12+
13+
- HTML5, CSS3 and JS is used in making this application.
14+
15+
16+
## **functionalities 🎮**
17+
18+
- This game features a customisable grid, where the user can choose the number of rows and columns for their art. This customisability helps users to create pixel-arts as per their choice neatly.
19+
- This game also features a color-picker, with the help of which, a user can very easily customise the color to be used in their painting.
20+
- There is also a clear button, which helps the user to create as many pixel-art as wanted in a single go only.
21+
<br>
22+
23+
## **How to play? 🕹️**
24+
25+
- The user has to enter the number of rows and columns that they would require in their art and then click the create-grid button.
26+
- A blank grid appears.
27+
- The user now has to click on the black color-picker box under the grid.
28+
- A color-picker box appears, the user can choose any color from the spectrum.
29+
- On pressing the clear button, th art is removed and the user gets back the original blank screen.
30+
31+
<br>
32+
33+
## **Screenshots 📸**
34+
35+
<br>
36+
37+
![image](Screenshot_initial.png)
38+
![image](Screenshot_final.png)
39+
40+
<br>

‎PixelArtMaker/iamsnehadas/Screenshot_final.png‎

385 KB
Loading

‎PixelArtMaker/iamsnehadas/Screenshot_initial.png‎

361 KB
Loading

‎PixelArtMaker/iamsnehadas/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>PixelArtMaker</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>Pixel Art Maker</h1>
11+
<p><br>
12+
<!-- Create input elements for the user to enter the number of rows and columns -->
13+
<label for="rows">Enter the number of rows as required:</label>
14+
<input type="number" id="rows" min="1" max="15">
15+
<br>
16+
<label for="cols">Enter the number of columns as required:</label>
17+
<input type="number" id="cols" min="1" max="15">
18+
<br>
19+
<br>
20+
<!-- Create a button element with id create-grid to allow the user to create the grid -->
21+
<button id="create-grid">Create Grid</button>
22+
<p>
23+
<!-- Create a table element with id grid to hold the grid of squares -->
24+
<table id="grid">
25+
<!-- The rows and columns will be created here -->
26+
</table>
27+
<br>
28+
Please choose the color according to your choice from the color-picker below: <p>
29+
<!-- Create an input element with type color and id color-picker to allow the user to select a color -->
30+
<input type="color" id="color-picker">
31+
32+
<!-- Create button elements with id clear to allow the user to clear their pixel art -->
33+
<button id="clear">Clear</button>
34+
35+
<!-- Link the JS file to the HTML file -->
36+
<script src="script.js"></script>
37+
38+
</body>
39+
</html>

‎PixelArtMaker/iamsnehadas/script.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Get the grid element
2+
var grid = document.getElementById("grid");
3+
4+
// Get all the squares in the grid
5+
var squares = grid.getElementsByTagName("td");
6+
7+
// Declare a variable to store the current color
8+
var currentColor = "white";
9+
10+
// Get the create-grid button element
11+
var createGrid = document.getElementById("create-grid");
12+
13+
// Add an event listener to the create-grid button
14+
createGrid.addEventListener("click", function() {
15+
// Clear the previous grid
16+
grid.innerHTML = "";
17+
18+
// Get the user's input values for rows and columns
19+
var rows = document.getElementById("rows").value;
20+
var cols = document.getElementById("cols").value;
21+
22+
// Loop through the rows
23+
for (var i = 0; i < rows; i++) {
24+
// Create a new row element
25+
var row = document.createElement("tr");
26+
27+
// Loop through the columns
28+
for (var j = 0; j < cols; j++) {
29+
// Create a new cell element
30+
var cell = document.createElement("td");
31+
32+
// Append the cell to the row
33+
row.appendChild(cell);
34+
}
35+
36+
// Append the row to the grid
37+
grid.appendChild(row);
38+
}
39+
40+
// Update the squares variable to include the new squares
41+
squares = grid.getElementsByTagName("td");
42+
43+
// Loop through all the squares in the grid
44+
for (var k = 0; k < squares.length; k++) {
45+
// Add an event listener to each square
46+
squares[k].addEventListener("click", function() {
47+
// Change the square's background color to the currentColor
48+
this.style.backgroundColor = currentColor;
49+
50+
// Log the square's color for debugging purposes
51+
console.log(this.style.backgroundColor);
52+
});
53+
}
54+
});
55+
56+
// Get the color picker element
57+
var colorPicker = document.getElementById("color-picker");
58+
59+
// Add an event listener to the color picker
60+
colorPicker.addEventListener("change", function() {
61+
// Store the color picker's value in the currentColor variable
62+
currentColor = colorPicker.value;
63+
64+
// Log the currentColor for debugging purposes
65+
console.log(currentColor);
66+
});
67+
// Get the clear button element
68+
var clear = document.getElementById("clear");
69+
70+
// Add an event listener to the clear button
71+
var clear = document.getElementById("clear");
72+
73+
// Add an event listener to the clear button
74+
clear.addEventListener("click", function() {
75+
// Loop through all the squares in the grid
76+
for (var i = 0; i < squares.length; i++) {
77+
// Change the square's background color to white
78+
squares[i].style.backgroundColor = "white";
79+
}
80+
});

‎PixelArtMaker/iamsnehadas/spl.jpg‎

5.96 KB
Loading

‎PixelArtMaker/iamsnehadas/style.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
body{
2+
font-size: x-large;
3+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
4+
display: grid;
5+
place-items: center;
6+
text-align: center;
7+
background-image: url(spl.jpg);
8+
}
9+
table {
10+
border-collapse: collapse;
11+
}
12+
13+
td {
14+
place-content: center;
15+
width: 20px;
16+
height: 20px;
17+
border: 2.5px solid rgb(16, 16, 16);
18+
background-color: white;
19+
}
20+
21+
input[type="number"] {
22+
width:350px;
23+
font-weight: bold;
24+
align-items: center;
25+
border: 2.5px solid rgb(16, 16, 16);
26+
}
27+
28+
input[type="color"] {
29+
width: 50px;
30+
height: 25px;
31+
}
32+
#rows{
33+
border: 2.5px solid rgb(16, 16, 16);
34+
}
35+
#cols{
36+
border: 2.5px solid rgb(16, 16, 16);
37+
}
38+
button {
39+
width: 90px;
40+
height: 35px;
41+
border: 2.5px solid rgb(16, 16, 16);
42+
}
43+
#create-grid{
44+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
45+
font-size: small;
46+
}
47+
#clear{
48+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
49+
font-size: medium;
50+
width: 75px;
51+
height: 40px;
52+
border: 2px solid rgb(8, 5, 18);
53+
}
54+
#color-picker {
55+
width: 75px;
56+
height: 40px;
57+
border: 2.5px solid rgb(8, 5, 18);
58+
}

0 commit comments

Comments
 (0)