+
+
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
new file mode 100644
index 0000000..18b0216
--- /dev/null
+++ b/public/index.js
@@ -0,0 +1,95 @@
+function main(){
+ const canvas = document.getElementById('drawingCanvas');
+ const choice = document.getElementById('coloringPage');
+ const color = document.getElementById('brushColor');
+ const clear = document.getElementById('clear');
+ const line = document.getElementById('lineWidth');
+ const context = canvas.getContext('2d');
+ const eraser = document.getElementById('eraser');
+
+ const offsetX = canvas.offsetLeft;
+ const offsetY = canvas.offsetTop;
+
+ var lineWidth = 5;
+ var isDrawing = false;
+ var eraserOn = false;
+ var lastColor;
+ var drawX, drawY;
+
+ choice.addEventListener('change', e => {
+ const selected = coloringPage.value;
+ var pic = new Image();
+ switch(selected){
+ case 'Cat':
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ pic.src = '../svgs/cat.svg';
+ context.drawImage(pic, 0, 0, canvas.width, canvas.height);
+ break;
+ case 'Space':
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ pic.src = '../svgs/space.svg';
+ context.drawImage(pic, 0, 0, canvas.width, canvas.height);
+ break;
+ case 'Sunflower':
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ pic.src = '../svgs/sunflowers.svg';
+ context.drawImage(pic, 0, 0, canvas.width, canvas.height);
+ break;
+ case 'Blank':
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ break;
+ }
+ })
+
+ eraser.addEventListener('change', e => {
+ eraserOn = !eraserOn;
+ if(eraserOn){
+ lastColor = context.strokeStyle;
+ context.strokeStyle = '#FFFFFF';
+ }else{
+ context.strokeStyle = lastColor;
+ }
+ })
+ color.addEventListener('change', e => {
+ if(eraserOn){
+ lastColor = e.target.value;
+ }else{
+ context.strokeStyle = e.target.value;
+ }
+ })
+
+ clear.addEventListener('click', e => {
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ })
+
+ line.addEventListener('change', e => {
+ lineWidth = e.target.value;
+ })
+
+ canvas.addEventListener('mousedown', e => {
+ isDrawing = true;
+ drawX = e.clientX - offsetX;
+ drawY = e.clientY - offsetY;
+ console.log(drawX + "," + drawY)
+ })
+
+ const draw = (e) => {
+ if(!isDrawing) {
+ return;
+ }
+
+ context.lineWidth = lineWidth;
+ context.lineCap = 'round';
+
+ context.lineTo(e.clientX - offsetX, e.clientY - offsetY);
+ context.stroke();
+ }
+
+ canvas.addEventListener('mousemove', draw);
+
+ canvas.addEventListener('mouseup', e => {
+ isDrawing = false;
+ context.stroke();
+ context.beginPath();
+ })
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..b1ac999
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,104 @@
+canvas{
+ border-style: solid;
+ border-width: 5px;
+ border-color: black;
+ background-color: white;
+ display: flex;
+}
+body{
+ background-color: rgb(125, 139, 168);
+ display: flex;
+ flex-direction: column;
+}
+h1{
+ text-align: center;
+ margin-top: 10px;
+ font-size: 70px;
+
+}
+#choices{
+ display: flex;
+ flex-direction: column;
+ margin: 50px;
+ padding-top: 100px;
+}
+#linewidth{
+ position: relative;
+}
+label{
+ padding-top: 20px;
+}
+#clear{
+ margin-top: 20px;
+}
+.fullscreen{
+ display: flex;
+ flex-direction: row;
+}
+
+
+
+ /* ALL THE SLIDER CODE RETRIEVED FROM W3 SCHOOLS*/
+ /* The switch - the box around the slider */
+ .switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+ padding-top: 0px;
+ }
+
+ /* Hide default HTML checkbox */
+ .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ /* The slider */
+ .eslider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ .eslider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ input:checked + .eslider {
+ background-color: #2196F3;
+ }
+
+ input:focus + .eslider {
+ box-shadow: 0 0 1px #2196F3;
+ }
+
+ input:checked + .eslider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+
+ /* Rounded sliders */
+ .eslider.round {
+ border-radius: 34px;
+ }
+
+ .eslider.round:before {
+ border-radius: 50%;
+ }
\ No newline at end of file
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..f0ff8e0
--- /dev/null
+++ b/server.js
@@ -0,0 +1,27 @@
+const express = require('express'),
+ app = express(),
+ http = require('http'),
+ server = http.createServer(app);
+
+app.use( express.urlencoded({ extended:true }) );
+app.use(express.static(__dirname));
+
+app.use((req, res, next) => {
+ console.log('Time: ', Date.now());
+ next();
+});
+
+app.get('/', (req, res) => {
+ console.log('get main')
+ res.sendFile(__dirname+'/public/index.html')
+})
+
+app.get('/style.css', function(req, res) {
+ res.sendFile(__dirname + "/public/style.css");
+});
+
+app.get('/index.js', function(req, res) {
+ res.sendFile(__dirname + "/public/index.js");
+});
+
+app.listen(process.env.PORT || 3000, () => console.log('Example app is listening on port 3000.'));
diff --git a/svgs/cat.svg b/svgs/cat.svg
new file mode 100644
index 0000000..3b2f4b7
--- /dev/null
+++ b/svgs/cat.svg
@@ -0,0 +1,664 @@
+
+
+
+