From 2a738a44544d9f218c8538cfa77cdd325e1efe0b Mon Sep 17 00:00:00 2001 From: Bogdan Mihai Nicolae Date: Sun, 21 May 2023 13:30:51 +0000 Subject: [PATCH 1/3] Added Sematic HTML to "About Me" DOM exercise --- javascript/exercises/dom.html | 30 +++++++++++-------- .../exercises/dom_manipulation_advanced.html | 30 +++++++++++-------- 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/javascript/exercises/dom.html b/javascript/exercises/dom.html index f65fe614..582fdde7 100644 --- a/javascript/exercises/dom.html +++ b/javascript/exercises/dom.html @@ -49,11 +49,14 @@

About Me

<body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> </body> </html> @@ -61,7 +64,7 @@

About Me

  • Add a script tag to the bottom.
  • Change the body style so it has a font-family of "Arial, sans-serif".
  • Replace each of the spans (nickname, favorites, hometown) with your own information. -
  • Iterate through each li and change the class to "listitem". Add a style +
  • Iterate through each dl and change the class to "listitem". Add a style tag that sets a rule for "listitem" to make the color red.
  • Create a new img element and set its src attribute to a picture of you. Append that element to the page. @@ -83,18 +86,21 @@

    About Me

    <body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> <script> document.body.style.fontFamily = 'Arial, sans-serif'; document.getElementById('nickname').innerHTML = 'Pamela Fox'; document.getElementById('favorites').innerHTML = '27'; document.getElementById('hometown').innerHTML = 'Pasadena, CA'; - var items = document.getElementsByTagName('li'); + var items = document.getElementsByTagName('dt'); for (var i = 0; i < items.length; i++) { items[i].className = 'listitem'; } diff --git a/jsweb/exercises/dom_manipulation_advanced.html b/jsweb/exercises/dom_manipulation_advanced.html index a9dd0800..a8a1bfc7 100644 --- a/jsweb/exercises/dom_manipulation_advanced.html +++ b/jsweb/exercises/dom_manipulation_advanced.html @@ -125,11 +125,14 @@

    About Me

    <body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> </body> </html> @@ -137,7 +140,7 @@

    About Me

  • Add a script tag to the bottom of the HTML body.
  • (In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
  • (In the JavaScript) Replace each of the spans (nickname, favorites, hometown) with your own information.
    • -
  • Iterate through each li and change the class to "list-item".
    • +
  • Iterate through each dt and change the class to "list-item".
  • (In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
  • Create a new img element and set its src attribute to a picture of you. Append that element to the page.
    • @@ -159,18 +162,21 @@

    About Me

    <body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> <script> document.body.style.fontFamily = 'Arial, sans-serif'; document.getElementById('nickname').textContent = 'Princess Bubblegum'; document.getElementById('favorites').textContent = 'science, music, my candy subjects'; document.getElementById('hometown').textContent = 'Candy Kingdom'; - var items = document.getElementsByTagName('li'); + var items = document.getElementsByTagName('dt'); for (var i = 0; i < items.length; i++) { items[i].className = 'list-item'; } From 0b928c1eb9aa8487f3929864fc03aea6711d6b47 Mon Sep 17 00:00:00 2001 From: Bogdan Mihai Nicolae Date: Sun, 21 May 2023 13:35:12 +0000 Subject: [PATCH 2/3] Replaced innerHTML with textContent DOM exercises --- javascript/exercises/dom.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/javascript/exercises/dom.html b/javascript/exercises/dom.html index 582fdde7..c546707c 100644 --- a/javascript/exercises/dom.html +++ b/javascript/exercises/dom.html @@ -31,7 +31,7 @@

    The Logo Hijack

    img.width = 400; img.src = 'http://www.logostage.com/logos/yahoo.GIF'; var button = document.getElementById('gbqfba'); -button.innerHTML = 'Yahoooo!'; +button.textContent = 'Yahoooo!';

    About Me

    @@ -97,9 +97,9 @@

    About Me

    <script> document.body.style.fontFamily = 'Arial, sans-serif'; - document.getElementById('nickname').innerHTML = 'Pamela Fox'; - document.getElementById('favorites').innerHTML = '27'; - document.getElementById('hometown').innerHTML = 'Pasadena, CA'; + document.getElementById('nickname').textContent = 'Pamela Fox'; + document.getElementById('favorites').textContent = '27'; + document.getElementById('hometown').textContent = 'Pasadena, CA'; var items = document.getElementsByTagName('dt'); for (var i = 0; i < items.length; i++) { items[i].className = 'listitem'; From 7bac3566d454bf86d16439735aa88e65a2f1ff85 Mon Sep 17 00:00:00 2001 From: Bogdan Mihai Nicolae Date: Sun, 21 May 2023 13:38:48 +0000 Subject: [PATCH 3/3] Fix typo DOM exercises --- javascript/exercises/dom.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/exercises/dom.html b/javascript/exercises/dom.html index c546707c..ce3f44e9 100644 --- a/javascript/exercises/dom.html +++ b/javascript/exercises/dom.html @@ -64,7 +64,7 @@

    About Me

  • Add a script tag to the bottom.
  • Change the body style so it has a font-family of "Arial, sans-serif".
  • Replace each of the spans (nickname, favorites, hometown) with your own information. -
  • Iterate through each dl and change the class to "listitem". Add a style +
  • Iterate through each dt and change the class to "listitem". Add a style tag that sets a rule for "listitem" to make the color red.
  • Create a new img element and set its src attribute to a picture of you. Append that element to the page.