From ff86a7e9b54685dea25703e48b1469914e6644c6 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Mon, 28 Dec 2020 20:36:35 -0500 Subject: [PATCH 01/16] first commit --- js-dom.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 js-dom.html diff --git a/js-dom.html b/js-dom.html new file mode 100644 index 0000000..8eea885 --- /dev/null +++ b/js-dom.html @@ -0,0 +1,18 @@ + + + + + + Document + + +

+

+ + + + + + + + From deaf82d8af84ae4b1cec7c454711489e99672984 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 11:31:39 -0500 Subject: [PATCH 02/16] created js-dom.html, added 2

w id --- js-dom-lab.md | 118 +++++++++++++++++++++++--------------------------- js-dom.html | 18 +++++--- lib/script.js | 5 +++ 3 files changed, 69 insertions(+), 72 deletions(-) diff --git a/js-dom-lab.md b/js-dom-lab.md index 619bc3c..146a933 100644 --- a/js-dom-lab.md +++ b/js-dom-lab.md @@ -1,76 +1,67 @@ ![code differently](https://user-images.githubusercontent.com/54545904/91590200-f82ec600-e928-11ea-9433-eea450388abf.png) - - ## JavaScript and the DOM Lab - - - - ### The Set-Up - - Fork and clone this repository locally and in Visual Studio Code - Push up your changes to the remote repository - - ### Tasks #### Part One -1. Create an HTML file called `js-dom.html` +1. - Create an HTML file called `js-dom.html` - - Must have global HTML document structure + - Must have global HTML document structure -2. Add two `

` elements without content. +2. - Add two `

` elements without content. -3. Give each `

` element an `id` and value +3. - Give each `

` element an `id` and value 4. Stage, commit, and push changes. Let Git be on your team. 5. Create scripts for each exercise: - - Write a script to add "We are coders!" to the `

` element. + - Write a script to add "We are coders!" to the `

` element. + + - Find the _first_ `

` element and change its text to "Developers for life!" + + - Add an image to that e HTML document using DOM methods + + > Stage, commit, and push changes. Let Git be on your team. - - Find the *first* `

` element and change its text to "Developers for life!" + - Write a script to change the color of the text from black to your favorite color - - Add an image to the HTML document using DOM methods + - Add a script to change the font size of the first `

` element to `40px` - > Stage, commit, and push changes. Let Git be on your team. + > Stage, commit, and push changes. Let Git be on your team. - - Write a script to change the color of the text from black to your favorite color + - Add a button to the HTML document - - Add a script to change the font size of the first `

` element to `40px` - - > Stage, commit, and push changes. Let Git be on your team. - - - Add a button to the HTML document - - - Add a script that hides the image when the button is clicked - - > Stage, commit, and push changes. Let Git be on your team. + - Add a script that hides the image when the button is clicked + > Stage, commit, and push changes. Let Git be on your team. #### Part Two -1. Create an HTML file called `about.html` +1. - Create an HTML file called `about.html` - - Must have global HTML document structure + - Must have global HTML document structure 2. Stage, commit, and push changes. Let Git be on your team. 3. Create a simple "About Me" webpage and using JS and the DOM to manipulate elements. -4. Title your webpage *About Me* and add this code +4. Title your webpage _About Me_ and add this code + ```html

``` @@ -84,55 +75,52 @@ 9. Complete the following tasks below using the DOM methods: - - Change the body style so it has a `font-family` of `Arial, sans-serif`. + - Change the body style so it has a `font-family` of `Arial, sans-serif`. - - Replace each of the values with your own information. + - Replace each of the values with your own information. - > Stage, commit, and push changes. Let Git be on your team. + > Stage, commit, and push changes. Let Git be on your team. - - Change the `
  • ` style to a color of your choosing. Cannot be black. + - Change the `
  • ` style to a color of your choosing. Cannot be black. - > Stage, commit, and push changes. Let Git be on your team. + > Stage, commit, and push changes. Let Git be on your team. - - Find a picture and add to the project. + - Find a picture and add to the project. - - Create a new `img` element and set its `src` attribute to a picture of you. Append the image to the web page. + - Create a new `img` element and set its `src` attribute to a picture of you. Append the image to the web page. - > Stage, commit, and push changes. Let Git be on your team. + > Stage, commit, and push changes. Let Git be on your team. #### Part Three -Using the great power of the DOM and its methods, iterate through the elements in the HTML document and create a Table of Contents that will be at the top of the webpage. +Using the great power of the DOM and its methods, iterate through the elements in the HTML document and create a Table of Contents that will be at the top of the webpage. 1. Create a new HTML file and add the code below. ```html -
    -

    Table of Contents

    -
    -
    -
    -

    Fruits

    -

    Red Fruits

    -

    Apple

    -

    Raspberry

    -

    Orange Fruits

    -

    Orange

    -

    Tangerine

    -

    Vegetables

    -

    Vegetables Which Are Actually Fruits

    -

    Tomato

    -

    Eggplant

    -
    +
    +

    Table of Contents

    +
    +
    +
    +

    Fruits

    +

    Red Fruits

    +

    Apple

    +

    Raspberry

    +

    Orange Fruits

    +

    Orange

    +

    Tangerine

    +

    Vegetables

    +

    Vegetables Which Are Actually Fruits

    +

    Tomato

    +

    Eggplant

    +
    ``` + 2. Stage, commit, and push changes. Let Git be on your team. -3. Add a script to the HTML document that iterates through the elements and creates a table of contents. The table of contents should be at the top of the webpage. +3. Add a script to the HTML document that iterates through the elements and creates a table of contents. The table of contents should be at the top of the webpage. 4. Stage, commit, and push changes. Let Git be on your team. - - - - diff --git a/js-dom.html b/js-dom.html index 8eea885..55f75f8 100644 --- a/js-dom.html +++ b/js-dom.html @@ -3,16 +3,20 @@ - Document + + JS DOM Lab -

    -

    - - - + + + +

    + +

    + + + - diff --git a/lib/script.js b/lib/script.js index 51e5df8..1575cae 100644 --- a/lib/script.js +++ b/lib/script.js @@ -40,3 +40,8 @@ var characters = [ contribution: "What did/do I do?" }, ]; +// Set the innerHTML property: HTMLElementObject.innerHTML = text +// Change the HTML content, URL, and target of a link: +// document.getElementById("myAnchor").innerHTML = "W3Schools"; +// + From 521e22b8f237397a8f4425e5d4d9bbbf6a16b885 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 11:59:31 -0500 Subject: [PATCH 03/16] added text, changed text, added image --- js-dom.html | 2 +- myScript_1.js | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 myScript_1.js diff --git a/js-dom.html b/js-dom.html index 55f75f8..63e884b 100644 --- a/js-dom.html +++ b/js-dom.html @@ -15,7 +15,7 @@

    - + diff --git a/myScript_1.js b/myScript_1.js new file mode 100644 index 0000000..7c2206d --- /dev/null +++ b/myScript_1.js @@ -0,0 +1,13 @@ +// Add "We are coders!" to the `

    ` element +document.getElementById("para-1").innerHTML = "We are coders!"; +document.getElementById("para-2").innerHTML = "We are coders!"; + +//Change text in first `

    ` element to "Developers for life!" +document.getElementById("para-1").innerHTML = "Developers for life!"; + +//Add image to HTML document using DOM methods +var img = document.createElement('img'); +img.src = "diversetech.jpeg"; +var body = document.querySelector("body"); +body.appendChild(img); + From 20ec6f006a476e5f4ab6e05a3454254a0fbc6896 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 15:11:56 -0500 Subject: [PATCH 04/16] completes Part One --- js-dom.html | 7 ++++--- myScript_1.js | 52 +++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 44 insertions(+), 15 deletions(-) diff --git a/js-dom.html b/js-dom.html index 63e884b..c7a5aa2 100644 --- a/js-dom.html +++ b/js-dom.html @@ -10,12 +10,13 @@ -

    +

    one

    +

    two

    -

    + - + diff --git a/myScript_1.js b/myScript_1.js index 7c2206d..a7859b7 100644 --- a/myScript_1.js +++ b/myScript_1.js @@ -1,13 +1,41 @@ -// Add "We are coders!" to the `

    ` element -document.getElementById("para-1").innerHTML = "We are coders!"; -document.getElementById("para-2").innerHTML = "We are coders!"; - -//Change text in first `

    ` element to "Developers for life!" -document.getElementById("para-1").innerHTML = "Developers for life!"; - -//Add image to HTML document using DOM methods -var img = document.createElement('img'); -img.src = "diversetech.jpeg"; -var body = document.querySelector("body"); -body.appendChild(img); + +const msgBothPars = "We are coders!"; +const msgFirstPar = "Developers for life!"; + +//Insert text to both paragraphs +let bothPars = document.querySelectorAll(".pars"); + +for (let i = 0; i < bothPars.length; i++) { + const thisPars = bothPars[i]; + thisPars.innerText = msgBothPars; +}; + +//Change text content & font size of first paragraph +let parFirst = document.getElementById("parOne"); +parOne.innerText = msgFirstPar; +parOne.style.fontSize = "40px"; + +//Assign image to variable +let imageHtml = ` +drawing of diverse people in tech +`; + +//Place image in body of HTML +let bodyTag = document.querySelector('body'); +bodyTag.innerHTML += imageHtml; + +//Change text color in body to purple +bodyTag.style.color = "purple"; + +//Create functionality to hide/display image with button +function buttonAction() { + const targetImage = document.querySelector(".divTechImg"); + const curStatus = targetImage.style.visibility; + + if(curStatus == "hidden"){ + targetImage.style.visibility = "visible"; + } else { + targetImage.style.visibility = "hidden"; + } +} From 3835936e47ffcd964ad11ef85fed6d75bb2e1b4f Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 15:16:19 -0500 Subject: [PATCH 05/16] Creates the file 'about.html' --- about.html | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000..d01f779 --- /dev/null +++ b/about.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file From a2cbdccfe8a5094bdb08c94e910b5c954f636bea Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 15:18:24 -0500 Subject: [PATCH 06/16] Titles webpage & adds unordered list w list items --- about.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/about.html b/about.html index d01f779..e8f80d4 100644 --- a/about.html +++ b/about.html @@ -3,9 +3,15 @@ - Document + About Me +

      +
    • Nickname: booboo
      • +
    • Favorites: music, pizza, The Office
      • +
    • Hometown: Wilmington
      • +
    • Random Fact: Black is my favorite color.
      • +
    \ No newline at end of file From 8983e5cc5ad5a79ebe6e358aec1581f9a07f9c7f Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 15:28:58 -0500 Subject: [PATCH 07/16] Nests unordered list in span element, assigns each an id & creates file 'main.js' --- about.html | 13 ++++++++----- main.js | 0 myScript_1.js | 1 + 3 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 main.js diff --git a/about.html b/about.html index e8f80d4..3af11cd 100644 --- a/about.html +++ b/about.html @@ -6,12 +6,15 @@ About Me -
      -
    • Nickname: booboo
      • -
    • Favorites: music, pizza, The Office
      • -
    • Hometown: Wilmington
      • -
    • Random Fact: Black is my favorite color.
      • + + +
        +
      • Nickname: booboo
        • +
      • Favorites: music, pizza, The Office
        • +
      • Hometown: Wilmington
        • +
      • Random Fact: Black is my favorite color.
      +       \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..e69de29 diff --git a/myScript_1.js b/myScript_1.js index a7859b7..eee9817 100644 --- a/myScript_1.js +++ b/myScript_1.js @@ -39,3 +39,4 @@ function buttonAction() { } } + From 9718f0282d27f4177058ef9eae968009e23012af Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 15:33:07 -0500 Subject: [PATCH 08/16] Links 'about.html' & 'main.js' files --- about.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/about.html b/about.html index 3af11cd..0069e9e 100644 --- a/about.html +++ b/about.html @@ -16,5 +16,7 @@
    + + \ No newline at end of file From 8d926a24ddd099654af43828028d973231cbc823 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 18:54:03 -0500 Subject: [PATCH 09/16] Changes body font style & color of all list items --- main.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/main.js b/main.js index e69de29..468b861 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,18 @@ +//Style body element with 'Arial, sans-serif' font family +const bodyTag = document.querySelector('body'); +bodyTag.style.fontFamily = "Arial, sans-serif"; + +//Create variable for list items +const listItems = document.querySelectorAll('li'); + +//Iterate through each list item and change color to purple! +for (let i = 0; i < listItems.length; i++) { + const thisLi = listItems[i]; + thisLi.style.color = "purple"; +} + + + + + + From 07f692ef7402cb0b002b51a9ee5fe70771737656 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 2 Jan 2021 18:56:07 -0500 Subject: [PATCH 10/16] Adds jquery CDN link --- about.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/about.html b/about.html index 0069e9e..d9af5b7 100644 --- a/about.html +++ b/about.html @@ -3,12 +3,12 @@ - About Me + _About Me_ - -