From 44fa664179e11bca8ca6531ee59eba03264100ab Mon Sep 17 00:00:00 2001 From: Marcelo Silveira Date: Tue, 16 Jul 2024 10:59:04 -0300 Subject: [PATCH 1/8] quase original --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 10bbe1b..ed2a472 100644 --- a/index.html +++ b/index.html @@ -1039,7 +1039,7 @@

Free Courses

Contact Us

If you have a question, we have an answer. If you need something, we'll help you. Contact us anytime.

- Date: Wed, 17 Jul 2024 10:43:30 -0300 Subject: [PATCH 2/8] add initial divs to buttons and stars --- index.html | 38 +++++- new-styles.css | 17 +++ onlySection.html | 119 ++++++++++++++++++ ...ca1080b0066549a3a0899954bbdab5f9f8ad81.css | 8 +- 4 files changed, 177 insertions(+), 5 deletions(-) create mode 100644 onlySection.html diff --git a/index.html b/index.html index ed2a472..204daa7 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - Udacity - Free Online Classes & Nanodegrees + MS1 - Udacity - Free Online Classes & Nanodegrees @@ -754,6 +754,12 @@
— Jennifer, Graduate

Learn ARKit

+
+ +
+
+
🌟 🌟 🌟
+
@@ -802,6 +814,12 @@

Intro to Self-Driving Cars

Data Foundations

+
+ +
+
+
🌟 🌟 🌟
+
@@ -879,6 +909,12 @@

React

Intro to Programming

+
+ +
+
+
🌟 🌟 🌟
+
diff --git a/new-styles.css b/new-styles.css index e2800b0..3ed9aa5 100644 --- a/new-styles.css +++ b/new-styles.css @@ -7,6 +7,23 @@ background: linear-gradient(160deg, #2015ff, #bdea09 100%); } +.card--nanodegree__favorites { + padding: 0px 32px; +} + +.card--nanodegree__3stars { + padding: 0px 32px; + margin-top: 10px; + height: 15px; +} + +.hide-stars { + display: none; +} + +/* .three-stars{ +} */ + @media screen and (min-width: 30rem) { .page-homepage .new-hero::before { background: linear-gradient(160deg, #2015ff, #bdea09 100%); diff --git a/onlySection.html b/onlySection.html new file mode 100644 index 0000000..b89ab54 --- /dev/null +++ b/onlySection.html @@ -0,0 +1,119 @@ +
+
+ +
+
+ +
+
+ New! +
+
+
+

Learn ARKit

+
+
+
    +
  • Unity
    • +
+
+ +
+
+ + +
+
+ +
+
+ New! +
+
+
+

Intro to Self-Driving Cars

+
+ +
+
+ + +
+
+ +
+
+ New! +
+
+
+

Data Foundations

+
+
+
    +
  • Tableau
    • +
  • Mode
    • +
+
+ +
+
+ + +
+
+ +
+
+
+
+
+

Data Analyst

+
+
+
    +
  • kaggle
    • +
  • Tableau
    • +
  • Mode
    • +
+
+ +
+
+ + +
+
+ +
+
+
+
+
+

React

+
+ +
+
+ + +
+
+ +
+
+
+
+
+

Intro to Programming

+
+ +
+
+ +
+
+ See + all offerings +
+
\ No newline at end of file diff --git a/site-files/application-caf474fc673fa8d860f542b966ca1080b0066549a3a0899954bbdab5f9f8ad81.css b/site-files/application-caf474fc673fa8d860f542b966ca1080b0066549a3a0899954bbdab5f9f8ad81.css index 94eaa89..0dadd68 100644 --- a/site-files/application-caf474fc673fa8d860f542b966ca1080b0066549a3a0899954bbdab5f9f8ad81.css +++ b/site-files/application-caf474fc673fa8d860f542b966ca1080b0066549a3a0899954bbdab5f9f8ad81.css @@ -9466,8 +9466,8 @@ screen and (min-resolution: 2dppx) { } .card--nanodegree__title { - padding: 20px 24px; - height: 5.25rem; + padding: 12px 24px; + height: 4rem; padding-top: 0.75rem; padding-bottom: 0.75rem; position: relative @@ -9482,8 +9482,8 @@ screen and (min-resolution: 2dppx) { @media screen and (min-width: 48rem) { .card--nanodegree__title { - padding: 24px 32px; - height: 8.25rem + padding: 12px 32px; + height: 4rem } } From c3756316a2f77153a6582f62bb3e38ef7c7a24fd Mon Sep 17 00:00:00 2001 From: Marcelo Silveira Date: Wed, 17 Jul 2024 11:20:10 -0300 Subject: [PATCH 3/8] add listener function --- app.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app.js b/app.js index e69de29..80cc084 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,15 @@ +const allCoursesContainer = document.querySelector('#individual-nanodegree-programs'); + +function listenerContainer(e) { + const target = e.target; + const classList = target.classList; + + console.log('clik'); + + if (classList.contains('button--primary')) { + e.preventDefault(); + console.log('button clicked!') + } +} + +allCoursesContainer.addEventListener('click',evt=>listenerContainer(evt)) \ No newline at end of file From 4468be89e6214cf837f9884e22ba8f0c0df26cc2 Mon Sep 17 00:00:00 2001 From: Marcelo Silveira Date: Wed, 17 Jul 2024 11:33:29 -0300 Subject: [PATCH 4/8] btn text change --- app.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index 80cc084..5c80fbf 100644 --- a/app.js +++ b/app.js @@ -1,14 +1,24 @@ const allCoursesContainer = document.querySelector('#individual-nanodegree-programs'); +function changeText(btn) { + const btnText = btn.textContent; + if(btnText==='Add to favorites'){ + btn.textContent='Remove from favorites' + } else { + btn.textContent='Add to favorites' + } +} + function listenerContainer(e) { const target = e.target; const classList = target.classList; - console.log('clik'); + // console.log('clik'); if (classList.contains('button--primary')) { e.preventDefault(); - console.log('button clicked!') + changeText(target) + // console.log('button clicked!') } } From 8539e9cac69b920d7c2a2bba020606aee60eb7f5 Mon Sep 17 00:00:00 2001 From: Marcelo Silveira Date: Wed, 17 Jul 2024 15:02:10 -0300 Subject: [PATCH 5/8] v1.0 --- app.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 5c80fbf..0e236bc 100644 --- a/app.js +++ b/app.js @@ -11,13 +11,17 @@ function changeText(btn) { function listenerContainer(e) { const target = e.target; - const classList = target.classList; + const btnClassList = target.classList; + // console.log('clik'); - if (classList.contains('button--primary')) { + if (btnClassList.contains('button--primary')) { e.preventDefault(); - changeText(target) + changeText(target); + + target.parentNode.nextSibling.nextSibling.firstChild.nextSibling.classList.toggle('hide-stars'); + //target.nextSibling.classList.toggle('hide-stars'); // console.log('button clicked!') } } From 33b7ac6af4560c846996c0f2c0e0720f755bf8b9 Mon Sep 17 00:00:00 2001 From: Marcelo Silveira Date: Wed, 17 Jul 2024 15:19:45 -0300 Subject: [PATCH 6/8] perfect work --- app.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 0e236bc..8cb2462 100644 --- a/app.js +++ b/app.js @@ -13,14 +13,15 @@ function listenerContainer(e) { const target = e.target; const btnClassList = target.classList; - // console.log('clik'); if (btnClassList.contains('button--primary')) { e.preventDefault(); changeText(target); - - target.parentNode.nextSibling.nextSibling.firstChild.nextSibling.classList.toggle('hide-stars'); + const grandParent = target.parentNode.parentNode; + const starsDiv = grandParent.querySelector('.three-stars'); + starsDiv.classList.toggle('hide-stars'); + //target.parentNode.nextSibling.nextSibling.firstChild.nextSibling.classList.toggle('hide-stars'); //target.nextSibling.classList.toggle('hide-stars'); // console.log('button clicked!') } From 88d960c341d0e637dbbcc4c862418e9da6371098 Mon Sep 17 00:00:00 2001 From: Marcelo Silveira Date: Wed, 17 Jul 2024 15:55:27 -0300 Subject: [PATCH 7/8] divs erased --- app.js | 5 ----- index.html | 37 +------------------------------------ onlySection.html | 6 ++++++ 3 files changed, 7 insertions(+), 41 deletions(-) diff --git a/app.js b/app.js index 8cb2462..612f849 100644 --- a/app.js +++ b/app.js @@ -12,8 +12,6 @@ function changeText(btn) { function listenerContainer(e) { const target = e.target; const btnClassList = target.classList; - - // console.log('clik'); if (btnClassList.contains('button--primary')) { e.preventDefault(); @@ -21,9 +19,6 @@ function listenerContainer(e) { const grandParent = target.parentNode.parentNode; const starsDiv = grandParent.querySelector('.three-stars'); starsDiv.classList.toggle('hide-stars'); - //target.parentNode.nextSibling.nextSibling.firstChild.nextSibling.classList.toggle('hide-stars'); - //target.nextSibling.classList.toggle('hide-stars'); - // console.log('button clicked!') } } diff --git a/index.html b/index.html index 204daa7..5a7483d 100644 --- a/index.html +++ b/index.html @@ -754,12 +754,7 @@
— Jennifer, Graduate

Learn ARKit

-
- -
-
-
🌟 🌟 🌟
-
+
  • UnityLearn ARKit

    Intro to Self-Driving Cars

    -
    - -
    -
    -
    🌟 🌟 🌟
    -
@@ -814,12 +803,6 @@

Intro to Self-Driving Cars

Data Foundations

-
- -
-
-
🌟 🌟 🌟
-
  • TableauData Foundations

    Data Analyst

    -
    - -
    -
    -
    🌟 🌟 🌟
    -
    • kaggleData Analyst

      React

      -
      - -
      -
      -
      🌟 🌟 🌟
      -
@@ -909,12 +880,6 @@

React

Intro to Programming

-
- -
-
-
🌟 🌟 🌟
-
diff --git a/onlySection.html b/onlySection.html index b89ab54..70add5e 100644 --- a/onlySection.html +++ b/onlySection.html @@ -12,6 +12,12 @@

Learn ARKit

+
+ +
+
+
🌟 🌟 🌟
+
  • Unity
    • From f416f27d14feb09d7bdde0c4ca5f9f489e10b706 Mon Sep 17 00:00:00 2001 From: Marcelo Silveira Date: Wed, 17 Jul 2024 16:39:37 -0300 Subject: [PATCH 8/8] perfect work --- app.js | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/app.js b/app.js index 612f849..48fde00 100644 --- a/app.js +++ b/app.js @@ -1,5 +1,44 @@ const allCoursesContainer = document.querySelector('#individual-nanodegree-programs'); +function createCardWithButton() { + const cardDiv = document.createElement('div'); + cardDiv.className = 'card--nanodegree__favorites'; + + const button = document.createElement('button'); + button.className = 'button--primary'; + button.textContent = 'Add to favorites'; + + cardDiv.appendChild(button); + + return cardDiv; +} + +function createCardWithStars() { + const cardDiv = document.createElement('div'); + cardDiv.className = 'card--nanodegree__3stars'; + + const starsDiv = document.createElement('div'); + starsDiv.className = 'three-stars hide-stars'; + starsDiv.textContent = '🌟 🌟 🌟'; + + cardDiv.appendChild(starsDiv); + + return cardDiv; +} + +//const document.body.appendChild(cardElement); + +const cardContainers = allCoursesContainer.querySelectorAll('.card__container'); +//console.log(cardContainers[1].querySelector('.card--nanodegree__title')); + +cardContainers.forEach(function(value) { + const cardTitle = value.querySelector('.card--nanodegree__title'); + const cardFavoriteBtn = createCardWithButton(); + cardTitle.insertAdjacentElement('afterend',cardFavoriteBtn); + const cardWithStars = createCardWithStars(); + cardFavoriteBtn.insertAdjacentElement('afterend',cardWithStars); +}) + function changeText(btn) { const btnText = btn.textContent; if(btnText==='Add to favorites'){