Rework DOM to better separate elements from events

illicitonion commented 1 month ago

What does this change?

Fixes https://github.com/CodeYourFuture/curriculum/issues/332

This way, we:

Fully handle accessing and setting DOM element properties in one chunk, then introduce events, rather than muddling the two together.
Identify that there are two common actions to do, and talk through identifying and addressing this.
Pull out the "what is the character limit" to be defined by the HTML attribute, rather than duplicated in the script.
Practice breaking down the "remaining characters" problem into sub-problems.
Generally solve things more incrementally.
Explicitly call out "do a clean-up refactoring" at the end.

Also some misc copy edits.

Common Content?

Yes - changes, reorders, and adds blocks to much of JS2.

Org Content?

Data Groups Sprint 3

Checklist

[x] I have read the contributing guidelines
[x] I have checked my spelling and grammar with an automated tool
[x] I have previewed my changes to check the markdown renders as I intend
[x] I have run my code to check it works
[x] My changes follow our Style Guide

netlify[bot] commented 1 month ago

Deploy Preview for cyf-itd ready!

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-itd/deploys/6720f0ad208c570008b8685c
Deploy Preview	https://deploy-preview-1074--cyf-itd.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 92 (🔴 down 8 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: 60 (no change from production) View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for cyf-programming ready!

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-programming/deploys/6720f0ad79253300086bdf2f
Deploy Preview	https://deploy-preview-1074--cyf-programming.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 85 (🔴 down 14 from production) Accessibility: 100 (no change from production) Best Practices: 92 (no change from production) SEO: 90 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for cyf-sdc ready!

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-sdc/deploys/6720f0ad853f5400086f4e66
Deploy Preview	https://deploy-preview-1074--cyf-sdc.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for cyf-curriculum canceled.

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-curriculum/deploys/6720f0adb406d70008555674

netlify[bot] commented 1 month ago

Deploy Preview for cyf-tracks ready!

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-tracks/deploys/6720f0ad3b56780008cacd7f
Deploy Preview	https://deploy-preview-1074--cyf-tracks.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for cyf-launch ready!

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-launch/deploys/6720f0ad6decc00008bceb14
Deploy Preview	https://deploy-preview-1074--cyf-launch.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for cyf-piscine ready!

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-piscine/deploys/6720f0ad3c94ab00085a90cb
Deploy Preview	https://deploy-preview-1074--cyf-piscine.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (🟢 up 4 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: 60 (no change from production) View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for cyf-common ready!

Name	Link
Latest commit	bb57bdce37df9aa7e7cfce725fe81e68875a0165
Latest deploy log	https://app.netlify.com/sites/cyf-common/deploys/6720f0ad18c79c00089a104c
Deploy Preview	https://deploy-preview-1074--cyf-common.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

CodeYourFuture / curriculum