From e987d9b0244ca7b36ee734b1d913280489307dda Mon Sep 17 00:00:00 2001 From: Hongchan Lee Date: Sun, 24 Mar 2024 22:42:40 -0400 Subject: [PATCH] week-09 Done --- week-09/Background Changer/index.html | 41 ++++++++++++++++ week-09/Event01/index.html | 34 ++++++++++++++ week-09/Event01/js/script.js | 9 ++++ week-09/Event02/index.html | 35 ++++++++++++++ week-09/Event02/js/script.js | 38 +++++++++++++++ week-09/Event03/index.html | 42 +++++++++++++++++ week-09/Event03/js/script.js | 9 ++++ week-09/Web Form/index.html | 67 +++++++++++++++++++++++++++ 8 files changed, 275 insertions(+) create mode 100644 week-09/Background Changer/index.html create mode 100644 week-09/Event01/index.html create mode 100644 week-09/Event01/js/script.js create mode 100644 week-09/Event02/index.html create mode 100644 week-09/Event02/js/script.js create mode 100644 week-09/Event03/index.html create mode 100644 week-09/Event03/js/script.js create mode 100644 week-09/Web Form/index.html diff --git a/week-09/Background Changer/index.html b/week-09/Background Changer/index.html new file mode 100644 index 0000000..eb9cd86 --- /dev/null +++ b/week-09/Background Changer/index.html @@ -0,0 +1,41 @@ + + + + + + Background Changer App + + +

Background Changer App

+ + + + \ No newline at end of file diff --git a/week-09/Event01/index.html b/week-09/Event01/index.html new file mode 100644 index 0000000..4de4fb0 --- /dev/null +++ b/week-09/Event01/index.html @@ -0,0 +1,34 @@ + + + + + Events: Task 1 + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/week-09/Event01/js/script.js b/week-09/Event01/js/script.js new file mode 100644 index 0000000..0adf5f5 --- /dev/null +++ b/week-09/Event01/js/script.js @@ -0,0 +1,9 @@ +const btn = document.querySelector('.off'); + +btn.addEventListener('click', function() { + if (btn.textContent === 'Machine is off') { + btn.textContent = 'Machine is on'; + } else { + btn.textContent = 'Machine is off'; + } +}); \ No newline at end of file diff --git a/week-09/Event02/index.html b/week-09/Event02/index.html new file mode 100644 index 0000000..fb8629f --- /dev/null +++ b/week-09/Event02/index.html @@ -0,0 +1,35 @@ + + + + + Events: Task 2 + + + + + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/week-09/Event02/js/script.js b/week-09/Event02/js/script.js new file mode 100644 index 0000000..b374fcd --- /dev/null +++ b/week-09/Event02/js/script.js @@ -0,0 +1,38 @@ +const canvas = document.querySelector('canvas'); +const ctx = canvas.getContext('2d'); + +function drawCircle(x, y, size) { + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.beginPath(); + ctx.fillStyle = 'black'; + ctx.arc(x, y, size, 0, 2 * Math.PI); + ctx.fill(); +} + +let x = 50; +let y = 50; +const size = 30; + +drawCircle(x, y, size); + +document.addEventListener('keydown', function(event) { + const moveAmount = 15; + switch(event.key) { + case 'w': + y -= moveAmount; + break; + case 'a': + x -= moveAmount; + break; + case 's': + y += moveAmount; + break; + case 'd': + x += moveAmount; + break; + } + drawCircle(x, y, size); +}); +// Add your code here diff --git a/week-09/Event03/index.html b/week-09/Event03/index.html new file mode 100644 index 0000000..ddb522a --- /dev/null +++ b/week-09/Event03/index.html @@ -0,0 +1,42 @@ + + + + + Events: Task 3 + + + + + + +
+
+ +
+ + + + +
+ + + + \ No newline at end of file diff --git a/week-09/Event03/js/script.js b/week-09/Event03/js/script.js new file mode 100644 index 0000000..13ee144 --- /dev/null +++ b/week-09/Event03/js/script.js @@ -0,0 +1,9 @@ +const buttonBar = document.querySelector('.button-bar'); + +buttonBar.addEventListener('click', function(event) { + const target = event.target; + if (target.tagName === 'BUTTON') { + const color = target.dataset.color; + buttonBar.style.backgroundColor = color; + } + }); \ No newline at end of file diff --git a/week-09/Web Form/index.html b/week-09/Web Form/index.html new file mode 100644 index 0000000..6b868d6 --- /dev/null +++ b/week-09/Web Form/index.html @@ -0,0 +1,67 @@ + + + + + + Web Form + + + +

Contact Us

+
+
+ + + + + +
+
+ +

Submitted List

+ + + + + \ No newline at end of file