diff --git a/.DS_Store b/.DS_Store
index 2cb0c14..a8d95ce 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/HTMLPaint/HTMLPaint.html b/HTMLPaint/HTMLPaint.html
new file mode 100644
index 0000000..3a3190a
--- /dev/null
+++ b/HTMLPaint/HTMLPaint.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/HTMLPaint/PaintJS.j b/HTMLPaint/PaintJS.j
new file mode 100644
index 0000000..cc87ea6
--- /dev/null
+++ b/HTMLPaint/PaintJS.j
@@ -0,0 +1,176 @@
+var arr_touches = [];
+var canvas;
+var ctx;
+var down = false; //mouse is pressed
+var color = 'black'; //default drawing color
+var width = 5; // drawing width
+
+
+//calling window.onload to make sure the HTML is loaded
+window.onload = function() {
+ canvas = document.getElementById('canvas');
+ ctx = canvas.getContext('2d');
+ ctx.lineWidth = width;
+
+ //handling mouse click and move events
+ canvas.addEventListener('mousemove', handleMove);
+ canvas.addEventListener('mousedown', handleDown);
+ canvas.addEventListener('mouseup', handleUp);
+
+ //handling mobile touch events
+ canvas.addEventListener("touchstart", handleStart, false);
+ canvas.addEventListener("touchend", handleEnd, false);
+ canvas.addEventListener("touchcancel", handleCancel, false);
+ canvas.addEventListener("touchleave", handleEnd, false);
+ canvas.addEventListener("touchmove", handleTouchMove, false);
+};
+function handleMove(e)
+{
+ xPos = e.clientX-canvas.offsetLeft;
+ yPos = e.clientY-canvas.offsetTop;
+ if(down == true)
+ {
+ ctx.lineTo(xPos,yPos); //create a line from old point to new one
+ ctx.strokeStyle = color;
+ ctx.stroke();
+ }
+}
+function handleDown()
+{
+ down = true;
+ ctx.beginPath();
+ ctx.moveTo(xPos, yPos);
+}
+function handleUp()
+{
+ down = false;
+}
+function handleStart(evt)
+{
+ var touches = evt.changedTouches;
+ for(var i = 0; i < touches.length; i++)
+ {
+ if(isValidTouch(touches[i]))
+ {
+ evt.preventDefault();
+ arr_touches.push(copyTouch(touches[i]));
+ ctx.beginPath();
+ ctx.fillStyle = color;
+ ctx.fill();
+ }
+ }
+}
+function handleTouchMove(evt)
+{
+ var touches = evt.changedTouches;
+ var offset = findPos(canvas);
+ for (var i = 0; i < touches.length; i++)
+ {
+ if(isValidTouch(touches[i]))
+ {
+ evt.preventDefault();
+ var idx = ongoingTouchIndexById(touches[i].identifier);
+ if (idx >= 0)
+ {
+ ctx.beginPath();
+ ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
+ ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
+ ctx.strokeStyle = color;
+ ctx.stroke();
+
+ arr_touches.splice(idx, 1, copyTouch(touches[i]));
+ }
+ }
+ }
+}
+function handleEnd(evt)
+{
+ var touches = evt.changedTouches;
+ var offset = findPos(canvas);
+ for (var i = 0; i < touches.length; i++)
+ {
+ if(isValidTouch(touches[i]))
+ {
+ evt.preventDefault();
+ var idx = ongoingTouchIndexById(touches[i].identifier);
+ if (idx >= 0)
+ {
+ ctx.lineWidth = 4;
+ ctx.fillStyle = color;
+ ctx.beginPath();
+ ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
+ ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
+ arr_touches.splice(i, 1);
+ }
+ }
+ }
+}
+function handleCancel(evt)
+{
+ evt.preventDefault();
+ var touches = evt.changedTouches;
+
+ for (var i = 0; i < touches.length; i++) {
+ arr_touches.splice(i, 1);
+ }
+}
+function copyTouch(touch)
+{
+ return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
+}
+function ongoingTouchIndexById(idToFind)
+{
+ for (var i = 0; i < arr_touches.length; i++) {
+ var id = arr_touches[i].identifier;
+ if (id == idToFind) {
+ return i;
+ }
+ }
+ return -1;
+}
+function changeColor(new_color)
+{
+ color = new_color;
+}
+function clearCanvas()
+{
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+function isValidTouch(touch)
+{
+ var curleft = 0, curtop = 0;
+ var offset = 0;
+
+ if (canvas.offsetParent) {
+ do {
+ curleft += canvas.offsetLeft;
+ curtop += canvas.offsetTop;
+ } while (touch == canvas.offsetParent);
+
+ offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
+ }
+
+ if(touch.clientX-offset.x > 0 &&
+ touch.clientX-offset.x < parseFloat(canvas.width) &&
+ touch.clientY-offset.y >0 &&
+ touch.clientY-offset.y < parseFloat(canvas.height)) {
+ return true;
+ }
+ else
+ {
+ return false;
+ }
+}
+function findPos(obj)
+{
+ var curleft = 0, curtop = 0;
+ if (obj.offsetParent)
+ {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+ } while (obj == obj.offsetParent);
+
+ return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
+ }
+}
\ No newline at end of file
diff --git a/HTMLPaint/PaintJS.js b/HTMLPaint/PaintJS.js
new file mode 100644
index 0000000..cc87ea6
--- /dev/null
+++ b/HTMLPaint/PaintJS.js
@@ -0,0 +1,176 @@
+var arr_touches = [];
+var canvas;
+var ctx;
+var down = false; //mouse is pressed
+var color = 'black'; //default drawing color
+var width = 5; // drawing width
+
+
+//calling window.onload to make sure the HTML is loaded
+window.onload = function() {
+ canvas = document.getElementById('canvas');
+ ctx = canvas.getContext('2d');
+ ctx.lineWidth = width;
+
+ //handling mouse click and move events
+ canvas.addEventListener('mousemove', handleMove);
+ canvas.addEventListener('mousedown', handleDown);
+ canvas.addEventListener('mouseup', handleUp);
+
+ //handling mobile touch events
+ canvas.addEventListener("touchstart", handleStart, false);
+ canvas.addEventListener("touchend", handleEnd, false);
+ canvas.addEventListener("touchcancel", handleCancel, false);
+ canvas.addEventListener("touchleave", handleEnd, false);
+ canvas.addEventListener("touchmove", handleTouchMove, false);
+};
+function handleMove(e)
+{
+ xPos = e.clientX-canvas.offsetLeft;
+ yPos = e.clientY-canvas.offsetTop;
+ if(down == true)
+ {
+ ctx.lineTo(xPos,yPos); //create a line from old point to new one
+ ctx.strokeStyle = color;
+ ctx.stroke();
+ }
+}
+function handleDown()
+{
+ down = true;
+ ctx.beginPath();
+ ctx.moveTo(xPos, yPos);
+}
+function handleUp()
+{
+ down = false;
+}
+function handleStart(evt)
+{
+ var touches = evt.changedTouches;
+ for(var i = 0; i < touches.length; i++)
+ {
+ if(isValidTouch(touches[i]))
+ {
+ evt.preventDefault();
+ arr_touches.push(copyTouch(touches[i]));
+ ctx.beginPath();
+ ctx.fillStyle = color;
+ ctx.fill();
+ }
+ }
+}
+function handleTouchMove(evt)
+{
+ var touches = evt.changedTouches;
+ var offset = findPos(canvas);
+ for (var i = 0; i < touches.length; i++)
+ {
+ if(isValidTouch(touches[i]))
+ {
+ evt.preventDefault();
+ var idx = ongoingTouchIndexById(touches[i].identifier);
+ if (idx >= 0)
+ {
+ ctx.beginPath();
+ ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
+ ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
+ ctx.strokeStyle = color;
+ ctx.stroke();
+
+ arr_touches.splice(idx, 1, copyTouch(touches[i]));
+ }
+ }
+ }
+}
+function handleEnd(evt)
+{
+ var touches = evt.changedTouches;
+ var offset = findPos(canvas);
+ for (var i = 0; i < touches.length; i++)
+ {
+ if(isValidTouch(touches[i]))
+ {
+ evt.preventDefault();
+ var idx = ongoingTouchIndexById(touches[i].identifier);
+ if (idx >= 0)
+ {
+ ctx.lineWidth = 4;
+ ctx.fillStyle = color;
+ ctx.beginPath();
+ ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
+ ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
+ arr_touches.splice(i, 1);
+ }
+ }
+ }
+}
+function handleCancel(evt)
+{
+ evt.preventDefault();
+ var touches = evt.changedTouches;
+
+ for (var i = 0; i < touches.length; i++) {
+ arr_touches.splice(i, 1);
+ }
+}
+function copyTouch(touch)
+{
+ return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
+}
+function ongoingTouchIndexById(idToFind)
+{
+ for (var i = 0; i < arr_touches.length; i++) {
+ var id = arr_touches[i].identifier;
+ if (id == idToFind) {
+ return i;
+ }
+ }
+ return -1;
+}
+function changeColor(new_color)
+{
+ color = new_color;
+}
+function clearCanvas()
+{
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+function isValidTouch(touch)
+{
+ var curleft = 0, curtop = 0;
+ var offset = 0;
+
+ if (canvas.offsetParent) {
+ do {
+ curleft += canvas.offsetLeft;
+ curtop += canvas.offsetTop;
+ } while (touch == canvas.offsetParent);
+
+ offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
+ }
+
+ if(touch.clientX-offset.x > 0 &&
+ touch.clientX-offset.x < parseFloat(canvas.width) &&
+ touch.clientY-offset.y >0 &&
+ touch.clientY-offset.y < parseFloat(canvas.height)) {
+ return true;
+ }
+ else
+ {
+ return false;
+ }
+}
+function findPos(obj)
+{
+ var curleft = 0, curtop = 0;
+ if (obj.offsetParent)
+ {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+ } while (obj == obj.offsetParent);
+
+ return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
+ }
+}
\ No newline at end of file
diff --git a/HTMLPaint/style.css b/HTMLPaint/style.css
new file mode 100644
index 0000000..24fa81d
--- /dev/null
+++ b/HTMLPaint/style.css
@@ -0,0 +1,37 @@
+#canvas
+{
+ border: 1px solid black;
+ margin: 10px 0 10px 0;
+ cursor: pointer;
+}
+#colors button
+{
+ width: 40px;
+ height: 40px;
+ border-radius: 100%;
+ margin-top: 0px;
+}
+#black
+{
+ background: black;
+}
+#pink
+{
+ background: pink;
+}
+#red
+{
+ background: red;
+}
+#green
+{
+ background: green;
+}
+#blue
+{
+ background: blue;
+}
+#orange
+{
+ background: orange;
+}
\ No newline at end of file
diff --git a/Memory Game/main.html b/MemoryGame/main.html
similarity index 100%
rename from Memory Game/main.html
rename to MemoryGame/main.html
diff --git a/Memory Game/style.css b/MemoryGame/style.css
similarity index 100%
rename from Memory Game/style.css
rename to MemoryGame/style.css
diff --git a/Word Animations/style.css b/TextAnimations/style.css
similarity index 100%
rename from Word Animations/style.css
rename to TextAnimations/style.css
diff --git a/Word Animations/wordanimate.html b/TextAnimations/wordanimate.html
similarity index 100%
rename from Word Animations/wordanimate.html
rename to TextAnimations/wordanimate.html