diff --git a/src/index.html b/src/index.html
index 0c458c7..43e0b49 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,10 +5,12 @@
Pixel Editor
+
+
+
-
Pixel Editor
diff --git a/src/index.js b/src/index.js
index 22dee20..4af9388 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,21 +1,22 @@
// Step 1: HTML Structure Initialization
const app = document.getElementById("app");
app.innerHTML = `
-Pixel Editor
+PIXEL PALETTE
`;
// Step 2: State Management
const state = {
- backgroundColor: "#555",
- column: 5,
- row: 5,
+ backgroundColor: "white",
+ color: "#ff0000",
+ column: 10,
+ row: 10,
};
// Step 3: Utility Functions
const resetState = () => {
- state.backgroundColor = "#555";
- state.column = 5;
- state.row = 5;
+ state.backgroundColor = "white";
+ state.column = 10;
+ state.row = 10;
}
const inputChangeHandler = (key, value) => {
@@ -29,7 +30,7 @@ const createContainerDiv = (containerId) => {
return container;
};
-const createLabeledInput = (labelText, inputId, inputType = "text") => {
+const createLabeledInput = (labelText, inputId, inputType = "text", inputValue) => {
const container = document.createElement("div");
const label = document.createElement("label");
const input = document.createElement("input");
@@ -38,7 +39,8 @@ const createLabeledInput = (labelText, inputId, inputType = "text") => {
label.innerHTML = labelText;
input.id = inputId;
input.type = inputType;
- container.id = 'labeledInputContainer'
+ input.value = inputValue;
+ container.classList = 'labeledInputContainer'
container.appendChild(label);
container.appendChild(input);
@@ -56,7 +58,7 @@ const createGrid = () => {
const pixel = document.createElement("div");
pixel.classList.add("pixel");
pixel.style.backgroundColor = state.backgroundColor;
- pixel.addEventListener("click", (e) => {
+ pixel.addEventListener("mousedown", (e) => {
const selectedColor = inputColor.value;
e.target.style.backgroundColor = selectedColor;
});
@@ -72,20 +74,21 @@ const createLayout = () => {
app.appendChild(appContainer);
appContainer.appendChild(operationContainer);
- operationContainer.appendChild(btnContainer);
appContainer.appendChild(pixelContainer);
const {container: inputColorContainer, input: inputColor} = createLabeledInput(
- "Color: ",
+ "Color ",
"inputColor",
- "color"
+ "color",
+ "#ff0000"
);
- const { container: inputRowContainer, input: inputRow } = createLabeledInput("Row: ", "inputRow", "number");
+ const { container: inputRowContainer, input: inputRow } = createLabeledInput("Row ", "inputRow", "number", 10);
const { container: inputColumnContainer, input: inputColumn } = createLabeledInput(
- "Column: ",
+ "Column ",
"inputColumn",
- "number"
+ "number",
+ 10
);
const resetBtn = document.createElement("button");
@@ -101,6 +104,7 @@ const createLayout = () => {
inputSizeContainer.appendChild(inputRowContainer);
inputContainer.appendChild(inputSizeContainer);
btnContainer.appendChild(resetBtn);
+ operationContainer.appendChild(btnContainer);
createGrid();
@@ -124,6 +128,6 @@ resetBtn.addEventListener("click", () => {
resetState();
inputRow.value = state.row;
inputColumn.value = state.column;
- inputColor.value = state.backgroundColor;
+ inputColor.value = state.color;
createGrid();
});
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 90936ae..c49e6f1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,35 +1,89 @@
body {
- font-family: sans-serif;
+ font-family: "Pixelify Sans", sans-serif;
+ color: white;
+ font-size: 32px;
+ margin: 0;
}
+
+header {
+ position: fixed;
+ width: 100%;
+ font-size: 64px;
+ background-color: #6B6B6B;
+ text-align: center;
+ box-shadow: 0 3px 3px #333;
+}
#appContainer {
display: flex;
flex-direction: row;
- height: 500px;
+ height: 800px;
+ }
+
+ #operationContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 40%;
+ background-color: #6B6B6B;
+ padding-top: 20%;
}
+
#inputContainer {
display: flex;
flex-direction: column;
- margin-bottom: 50px;
+ margin: 0 0 80px 0;
+ padding: 0;
}
- #operationContainer {
- width: 200px;
+ #inputColor {
+ padding:0;
+ border: none;
+ background: none;
+ height: 36px;
}
-
- #pixelContainer {
+
+ #inputColumn, #inputRow{
+ font-family: "Pixelify Sans", sans-serif;
+ font-size: 24px;
+ width: 40px;
+ color: #6B6B6B;
+ }
+
+ .labeledInputContainer {
display: grid;
- margin-left: 100px;
- gap: 10px;
+ grid-template-columns: 100px auto;
+ align-items: center;
+ gap: 30px;
+ margin-bottom: 20px;
}
-
- #inputRow,
- #inputColumn {
- width: 30px;
+
+ #resetBtn {
+ font-family: "Pixelify Sans", sans-serif;
+ font-size: 16px;
+ padding: 10px 20px;
+ background-color: white;
+ border: none;
+ border-radius: 10px;
+ color: #6B6B6B;
}
-
- .pixel {
- background-color: #555;
+
+ #resetBtn:hover{
+ font-family: "Pixelify Sans", sans-serif;
+ font-size: 16px;
+ padding: 10px 20px;
+ background-color: #ddd;
+ border: none;
+ border-radius: 10px;
+ color: #6B6B6B;
}
-
\ No newline at end of file
+
+ #pixelContainer {
+ display: grid;
+ gap: 2px;
+ width: 60%;
+ background-color: #444;
+ padding-top: 15%;
+ justify-content: center;
+ }
\ No newline at end of file