diff --git a/JavaScript/project-Etch-a-Sketch/app.js b/JavaScript/project-Etch-a-Sketch/app.js
new file mode 100644
index 0000000..ddda41f
--- /dev/null
+++ b/JavaScript/project-Etch-a-Sketch/app.js
@@ -0,0 +1,44 @@
+const container = document.querySelector("#container");
+let rows = document.getElementsByClassName("gridRow");
+let cell = document.getElementsByClassName("cell");
+const btnClear = document.querySelector("#btnClear");
+
+function makeRows(rowsSize) {
+ for (let r = 0; r < rowsSize; r++) {
+ const row = document.createElement("div");
+ container.appendChild(row).className = "gridRow";
+ }
+}
+
+function makeColumns(columnsSize) {
+ for (let k = 0; k < rows.length; k++) {
+ for (let c = 0; c < columnsSize; c++) {
+ let newCell = document.createElement("div");
+ rows[c].appendChild(newCell).className = "cell";
+ }
+ }
+}
+
+//Creates a default grid sized 16x16
+function defaultGrid() {
+ makeRows(16);
+ makeColumns(16);
+}
+
+defaultGrid();
+
+Array.from(cell).forEach((item) => {
+ item.addEventListener("mouseover", function () {
+ item.style.backgroundColor = "red";
+ });
+});
+
+function clear() {
+ Array.from(cell).forEach((item) => {
+ item.style.backgroundColor = "white";
+ });
+}
+
+btnClear.addEventListener("click", () => {
+ clear();
+});
diff --git a/JavaScript/project-Etch-a-Sketch/index.html b/JavaScript/project-Etch-a-Sketch/index.html
new file mode 100644
index 0000000..16f5988
--- /dev/null
+++ b/JavaScript/project-Etch-a-Sketch/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Etch-a-Sketch
+
+
+
+
+
+
+
+
diff --git a/JavaScript/project-Etch-a-Sketch/style.css b/JavaScript/project-Etch-a-Sketch/style.css
new file mode 100644
index 0000000..725f861
--- /dev/null
+++ b/JavaScript/project-Etch-a-Sketch/style.css
@@ -0,0 +1,7 @@
+.cell {
+ border: 1px solid gray;
+ min-width: 20px;
+ min-height: 20px;
+ display: inline-block;
+ margin-right: 2px;
+}