From 1782cea6af90140db073377f4103f4a73f9a0683 Mon Sep 17 00:00:00 2001 From: Orson Xu Date: Sun, 12 Feb 2023 22:34:39 -0600 Subject: [PATCH 1/4] Update format typos --- dom.Rmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dom.Rmd b/dom.Rmd index 80b2ad1..afc42f0 100644 --- a/dom.Rmd +++ b/dom.Rmd @@ -141,7 +141,7 @@ let isThick = document.querySelector('svg rect') These methods will let you interact with attributes that are _not_ defined by the HTML spec, such as `data-` attribute. However, they _don't_ work with certain element attributes (such as the `value` attribute of an `` element). Other elements may have their own special DOM properties: see the [DOM Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) for a list of [HTML interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#HTML_interfaces). -#### Changing Element CSS +#### Changing Element CSS {-} It is possible to modify the **CSS classes** (and even inline styling) of an element. But rather than using the `class` property like with other attributes, you instead access the **`className`** property. On modern browsers (IE 10 or later), this property supports methods `.add()` and `.remove()` for adding and removing classes from the list: ```js From 4af284cc1319688ea5423c0dca73232fa7618bac Mon Sep 17 00:00:00 2001 From: Orson Xu Date: Sun, 12 Feb 2023 22:39:02 -0600 Subject: [PATCH 2/4] Fix typo from className to classList --- dom.Rmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dom.Rmd b/dom.Rmd index afc42f0..7d0ce4a 100644 --- a/dom.Rmd +++ b/dom.Rmd @@ -142,7 +142,7 @@ let isThick = document.querySelector('svg rect') These methods will let you interact with attributes that are _not_ defined by the HTML spec, such as `data-` attribute. However, they _don't_ work with certain element attributes (such as the `value` attribute of an `` element). Other elements may have their own special DOM properties: see the [DOM Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) for a list of [HTML interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#HTML_interfaces). #### Changing Element CSS {-} -It is possible to modify the **CSS classes** (and even inline styling) of an element. But rather than using the `class` property like with other attributes, you instead access the **`className`** property. On modern browsers (IE 10 or later), this property supports methods `.add()` and `.remove()` for adding and removing classes from the list: +It is possible to modify the **CSS classes** (and even inline styling) of an element. But rather than using the `class` property like with other attributes, you instead access the **`classList`** property. On modern browsers (IE 10 or later), this property supports methods `.add()` and `.remove()` for adding and removing classes from the list: ```js //access list of classes From 7feabe1718fd675687570c13861fb9c86cf609c1 Mon Sep 17 00:00:00 2001 From: Orson Xu Date: Sun, 12 Feb 2023 22:44:10 -0600 Subject: [PATCH 3/4] Fix typos --- dom.Rmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dom.Rmd b/dom.Rmd index 7d0ce4a..5dfe9a5 100644 --- a/dom.Rmd +++ b/dom.Rmd @@ -218,7 +218,7 @@ console.log(secondSection); //
SVG content doesn't support `parentElement`, but does support `parentNode`. -You can also call methods to create and add new HTML DOM elements to the tree. The `document.createElement()` function is used to create a new HTML element. However this element is _not_ created a part of the tree (after all, you haven't specified where it would put into the page)! Thus you need to also use a method such as `appendChild` to add that new element as a child of another element: +You can also call methods to create and add new HTML DOM elements to the tree. The `document.createElement()` function is used to create a new HTML element. However this element is _not_ created as a part of the tree (after all, you haven't specified where it would put into the page)! Thus you need to also use a method such as `appendChild` to add that new element as a child of another element: ```js //create a new

(not yet in the tree) From d5a47085b2ab73ab54678534b0216b6ac945a29f Mon Sep 17 00:00:00 2001 From: Orson Xu Date: Sat, 18 Feb 2023 10:38:22 -0600 Subject: [PATCH 4/4] Fix a bug in the example code --- react-interactive.Rmd | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react-interactive.Rmd b/react-interactive.Rmd index b1499ed..37ed653 100644 --- a/react-interactive.Rmd +++ b/react-interactive.Rmd @@ -1,5 +1,5 @@ # Interactive React -This chapter discussed how websites built using the React library can be made interactive, with Components that render different content in response to user actions. Specifically, it details how to idiomatically handle _events_, store dynamic information in a Component's _state_ using _hooks_, as well as perform some specific common interactions (such as using forms and downloading data). +This chapter discussed how websites built using the React library can be made interactive, with Components that render different content in response to user actions. Specifically, it details how to idiomatically handle _events_, store dynamic information in a Component's _state_ using _hooks_, as well as perform some specific common interactions (such as using forms and downloading data) ## Handling Events in React @@ -314,7 +314,7 @@ function VotingApp(props) { ); } -function CandidateButton() { +function CandidateButton(props) { const handleClick = () => { //On click, execute the given callback function (passing in own name) props.callback(props.color)