From e48567fa307b3ccc0c4871537ccff529b01dd19b Mon Sep 17 00:00:00 2001 From: Jonathan Branan Date: Wed, 23 Oct 2024 11:14:14 -0500 Subject: [PATCH] finished ch 9 --- .DS_Store | Bin 6148 -> 0 bytes .vscode/.DS_Store | Bin 6148 -> 0 bytes 10/index.html | 10 ++++++++++ 10/script.js | 12 ++++++++++++ 8/index.html | 11 +++++++++++ 8/index2.html | 23 +++++++++++++++++++++++ 8/script.js | 16 ++++++++++++++++ 8/script2.js | 26 ++++++++++++++++++++++++++ 8/style2.css | 14 ++++++++++++++ 9/canvas.html | 9 +++++++++ 9/cs.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 11 files changed, 163 insertions(+) delete mode 100644 .DS_Store delete mode 100644 .vscode/.DS_Store create mode 100644 10/index.html create mode 100644 10/script.js create mode 100644 8/index.html create mode 100644 8/index2.html create mode 100644 8/script.js create mode 100644 8/script2.js create mode 100644 8/style2.css create mode 100644 9/canvas.html create mode 100644 9/cs.js diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index fdabad296f5878fc9eb7c74b3dee3a4c26756074..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKOKL(v5Uh?u1UD|ToD&3cgF*BJUO$mb;Ia;begvc`+A)8PQ-8IwG zHIG+|*RKKC@?-Y|EC9^tjyQW5o1eRn?5;9Kr1Op=cG#abZ->|8sQP-sx%YU)3GaCR z$v?d0t=DPFN&zV#1*Cu!kODU<;JueNnU!ajm~>bTA68GcnoumB&ih-G!+N5k6p#X! z3QTgl@czH1|1$qylC+ZoQs7@HVAIuRwd5;RZymjy_u59^(!J)B?#6Xc7@{2$qaAbO f?f4;zvab1>=e=-93_9~cC+cUwb&*MdzgFN2ZvGWr diff --git a/.vscode/.DS_Store b/.vscode/.DS_Store deleted file mode 100644 index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 + + + Tennjs + + + + + + \ No newline at end of file diff --git a/10/script.js b/10/script.js new file mode 100644 index 0000000..19fa594 --- /dev/null +++ b/10/script.js @@ -0,0 +1,12 @@ +let canvas = document.querySelector("#canvas"); +let ctx = canvas.getContext("2d"); +let width = canvas.width; +let height = canvas.height; +const BALL_SIZE = 5; +let ballPosition = {x: 20, y: 30}; +function draw() { +ctx.fillStyle = "black"; ctx.fillRect(0, 0, width, height); + ctx.fillStyle = "white"; + ctx.fillRect(ballPosition.x, ballPosition.y, BALL_SIZE, BALL_SIZE); + } +draw(); \ No newline at end of file diff --git a/8/index.html b/8/index.html new file mode 100644 index 0000000..63f7328 --- /dev/null +++ b/8/index.html @@ -0,0 +1,11 @@ + + + + Event Handlers + + +

Hello World!

+

ow ow ow ow ow

+ + + \ No newline at end of file diff --git a/8/index2.html b/8/index2.html new file mode 100644 index 0000000..2c2c9eb --- /dev/null +++ b/8/index2.html @@ -0,0 +1,23 @@ + + + + Event Handlers + + + +

Hello World!

+
    +
  • The
    • +
  • Dog
    • +
  • Cat
    • +
  • Is
    • +
  • Was
    • +
  • And
    • +
  • Hungry
    • +
  • Green
    • +
+

+
+ + + \ No newline at end of file diff --git a/8/script.js b/8/script.js new file mode 100644 index 0000000..b3dae9f --- /dev/null +++ b/8/script.js @@ -0,0 +1,16 @@ +let heading = document.querySelector("#main-heading"); +heading.addEventListener("click", () => { + console.log("You clicked the heading!"); +}); + +let para = document.querySelector("#para"); +para.addEventListener("click", () => { + console.log("Charlie bit me!"); +}); +document.querySelector("em").addEventListener("click", () =>{ + console.log("You clicked the em element!"); + }); +document.querySelector("body").addEventListener("click", () => { + console.log("You clicked the body element!"); + }); + \ No newline at end of file diff --git a/8/script2.js b/8/script2.js new file mode 100644 index 0000000..473d151 --- /dev/null +++ b/8/script2.js @@ -0,0 +1,26 @@ +let wordList = document.querySelector("#word-list"); +let sentence = document.querySelector("#sentence"); +wordList.addEventListener("click", event => { + let word = event.target.textContent; + sentence.textContent += word; + sentence.textContent += " "; +}); +let box = document.querySelector("#box"); +let currentX = 0 +let currentY = 0 +document.querySelector("html").addEventListener("keydown", e => { + +if (e.repeat === true){ + return + } else if (e.key == "w") { + currentY -= 5; + } else if (e.key == "a") { + currentX -= 5; + } else if (e.key == "s") { + currentY += 5; + } else if (e.key == "d") { + currentX += 5; +} + box.style.left = currentX + "px"; + box.style.top = currentY + "px"; +}); \ No newline at end of file diff --git a/8/style2.css b/8/style2.css new file mode 100644 index 0000000..7b1501e --- /dev/null +++ b/8/style2.css @@ -0,0 +1,14 @@ +li { +cursor: crosshair; +} +li:hover { + text-decoration: underline; +} +#box { + position: fixed; + left: 0px; + top: 0px; + width: 10px; + height: 10px; + background-color: hotpink; +} \ No newline at end of file diff --git a/9/canvas.html b/9/canvas.html new file mode 100644 index 0000000..107ec0a --- /dev/null +++ b/9/canvas.html @@ -0,0 +1,9 @@ + + + + Canvas + + + + + = 300){ + forwards = false; + } + if (x <= 0){ + forwards = true + } +// y += 1; +// x %= width; +// y %= height; +} + +function draw() { + ctx.clearRect(0, 0, width, height); + drawCircle(x, y); +} +setInterval(() => { +update(); +draw(); +}, 1); \ No newline at end of file