Insert divs using js

app.js

@@ -0,0 +1,64 @@
+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'){
+        btn.textContent='Remove from favorites'
+    } else {
+        btn.textContent='Add to favorites'
+    }
+}
+
+function listenerContainer(e) {
+    const target = e.target;
+    const btnClassList = target.classList;
+
+    if (btnClassList.contains('button--primary')) {
+        e.preventDefault();
+        changeText(target);
+        const grandParent = target.parentNode.parentNode;
+        const starsDiv = grandParent.querySelector('.three-stars');
+        starsDiv.classList.toggle('hide-stars');
+    }
+}
+
+allCoursesContainer.addEventListener('click',evt=>listenerContainer(evt))

index.html

@@ -8,7 +8,7 @@
   <meta name="csrf-token"
     content="5xky7z6n+z+8cswGLeL76UnGPNGKtOQ00jm+IK66f9FQPQkP/NhCZxXf+XGWHYU66G2UAHlj+sZFD+6c4oVD9g==">
 
-  <title>Udacity - Free Online Classes &amp; Nanodegrees</title>
+  <title>MS1 - Udacity - Free Online Classes &amp; Nanodegrees</title>
 
 
 
@@ -754,6 +754,7 @@ <h6 class="mb-1 slate inline">— Jennifer, Graduate</h6>
               <div class="card--nanodegree__title">
                 <h4>Learn ARKit</h4>
               </div>
+
               <div class="card--nanodegree__affiliates">
                 <ul>
                   <li><img alt="Unity" class="card--nanodegree__affiliates--image"
@@ -1039,7 +1040,7 @@ <h4 class="mb-half green">Free Courses</h4>
           <h1 class="white">Contact Us</h1>
           <p class="large white">If you have a question, we have an answer. If you need something, we'll help you.
             Contact us anytime.</p>
-          <a id="ga-c176c3" class="button--primary center" data-analytics-name="CTA Clicked"
+          <a id="ga-c176c3" class="test button--primary center" data-analytics-name="CTA Clicked"
             data-analytics-category="Generic CTA" data-analytics-label="Generic CTA - Contact Us Now"
             data-analytics-type="CTA"
             data-analytics-payload="{&quot;cta_type&quot;:&quot;button&quot;,&quot;cta_destination&quot;:&quot;Contact Page&quot;,&quot;cta_location&quot;:&quot;Homepage&quot;,&quot;cta_message&quot;:&quot;Contact Us Now&quot;}"

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%);

onlySection.html

@@ -0,0 +1,125 @@
+<section class="list-nanodegrees" id="individual-nanodegree-programs">
+    <div class="contain contain--none">
+
+      <div class="card__container nd-cards-reveal" data-sr-id="7" style="; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
+        <div class="card card--nanodegree">
+          <a href="https://www.udacity.com/degrees/learn-arkit--nd114" title="Learn ARKit" data-node-key="nd114" data-analytics-name="Nanodegree CTA Clicked" data-analytics-category="Nanodegree CTA" data-analytics-label="Nanodegree CTA - card - nd114 - STANDARD" data-analytics-type="CTA" data-analytics-payload="{ &quot;sku&quot;: &quot;nd114&quot;, &quot;cta_type&quot;: &quot;card&quot;, &quot;cta_destination&quot;: &quot;NDOP&quot;, &quot;cta_location&quot;: &quot;Homepage&quot; }">
+            <div class="card--nanodegree__header nd114">
+              <div class="card--nanodegree__header--overlay">
+                <span class="pill pill--white">New!</span>
+              </div>
+            </div>
+            <div class="card--nanodegree__title">
+              <h4>Learn ARKit</h4>
+            </div>
+            <div class="card--nanodegree__favorites">
+              <button class="button--primary">Add to favorites</button>
+            </div>
+            <div class="card--nanodegree__3stars">
+              <div class="three-stars  hide-stars">🌟 🌟 🌟 </div>
+            </div>
+            <div class="card--nanodegree__affiliates">
+              <ul>
+                <li><img alt="Unity" class="card--nanodegree__affiliates--image" src="./site-files/logo-color-unity-5351e60.svg"></li>
+              </ul>
+            </div>
+          </a>
+        </div>
+      </div>
+
+
+      <div class="card__container nd-cards-reveal" data-sr-id="8" style="; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
+        <div class="card card--nanodegree">
+          <a href="https://www.udacity.com/degrees/intro-to-self-driving-cars--nd113" title="Intro to Self-Driving Cars" data-node-key="nd113" data-analytics-name="Nanodegree CTA Clicked" data-analytics-category="Nanodegree CTA" data-analytics-label="Nanodegree CTA - card - nd113 - STANDARD" data-analytics-type="CTA" data-analytics-payload="{ &quot;sku&quot;: &quot;nd113&quot;, &quot;cta_type&quot;: &quot;card&quot;, &quot;cta_destination&quot;: &quot;NDOP&quot;, &quot;cta_location&quot;: &quot;Homepage&quot; }">
+            <div class="card--nanodegree__header nd113">
+              <div class="card--nanodegree__header--overlay">
+                <span class="pill pill--white">New!</span>
+              </div>
+            </div>
+            <div class="card--nanodegree__title">
+              <h4>Intro to Self-Driving Cars</h4>
+            </div>
+          </a>
+        </div>
+      </div>
+
+
+      <div class="card__container nd-cards-reveal" data-sr-id="9" style="; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
+        <div class="card card--nanodegree">
+          <a href="https://www.udacity.com/degrees/data-foundations-nanodegree--nd100" title="Data Foundations" data-node-key="nd100" data-analytics-name="Nanodegree CTA Clicked" data-analytics-category="Nanodegree CTA" data-analytics-label="Nanodegree CTA - card - nd100 - STANDARD" data-analytics-type="CTA" data-analytics-payload="{ &quot;sku&quot;: &quot;nd100&quot;, &quot;cta_type&quot;: &quot;card&quot;, &quot;cta_destination&quot;: &quot;NDOP&quot;, &quot;cta_location&quot;: &quot;Homepage&quot; }">
+            <div class="card--nanodegree__header nd100">
+              <div class="card--nanodegree__header--overlay">
+                <span class="pill pill--white">New!</span>
+              </div>
+            </div>
+            <div class="card--nanodegree__title">
+              <h4>Data Foundations</h4>
+            </div>
+            <div class="card--nanodegree__affiliates">
+              <ul>
+                <li><img alt="Tableau" class="card--nanodegree__affiliates--image" src="./site-files/logo-color-tableau-cf029ff.svg"></li>
+                <li><img alt="Mode" class="card--nanodegree__affiliates--image" src="./site-files/logo-color-mode-9df2c67.svg"></li>
+              </ul>
+            </div>
+          </a>
+        </div>
+      </div>
+
+
+      <div class="card__container nd-cards-reveal" data-sr-id="10" style="; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
+        <div class="card card--nanodegree">
+          <a href="https://www.udacity.com/degrees/data-analyst-nanodegree--nd002" title="Data Analyst" data-node-key="nd002" data-analytics-name="Nanodegree CTA Clicked" data-analytics-category="Nanodegree CTA" data-analytics-label="Nanodegree CTA - card - nd002 - STANDARD" data-analytics-type="CTA" data-analytics-payload="{ &quot;sku&quot;: &quot;nd002&quot;, &quot;cta_type&quot;: &quot;card&quot;, &quot;cta_destination&quot;: &quot;NDOP&quot;, &quot;cta_location&quot;: &quot;Homepage&quot; }">
+            <div class="card--nanodegree__header nd002">
+              <div class="card--nanodegree__header--overlay">
+              </div>
+            </div>
+            <div class="card--nanodegree__title">
+              <h4>Data Analyst</h4>
+            </div>
+            <div class="card--nanodegree__affiliates">
+              <ul>
+                <li><img alt="kaggle" class="card--nanodegree__affiliates--image" src="./site-files/logo-color-kaggle-dc766e9.svg"></li>
+                <li><img alt="Tableau" class="card--nanodegree__affiliates--image" src="./site-files/logo-color-tableau-cf029ff.svg"></li>
+                <li><img alt="Mode" class="card--nanodegree__affiliates--image" src="./site-files/logo-color-mode-9df2c67.svg"></li>
+              </ul>
+            </div>
+          </a>
+        </div>
+      </div>
+
+
+      <div class="card__container nd-cards-reveal" data-sr-id="11" style="; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
+        <div class="card card--nanodegree">
+          <a href="https://www.udacity.com/degrees/react-nanodegree--nd019" title="React" data-node-key="nd019" data-analytics-name="Nanodegree CTA Clicked" data-analytics-category="Nanodegree CTA" data-analytics-label="Nanodegree CTA - card - nd019 - STANDARD" data-analytics-type="CTA" data-analytics-payload="{ &quot;sku&quot;: &quot;nd019&quot;, &quot;cta_type&quot;: &quot;card&quot;, &quot;cta_destination&quot;: &quot;NDOP&quot;, &quot;cta_location&quot;: &quot;Homepage&quot; }">
+            <div class="card--nanodegree__header nd019">
+              <div class="card--nanodegree__header--overlay">
+              </div>
+            </div>
+            <div class="card--nanodegree__title">
+              <h4>React</h4>
+            </div>
+          </a>
+        </div>
+      </div>
+
+
+      <div class="card__container nd-cards-reveal" data-sr-id="12" style="; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.55s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
+        <div class="card card--nanodegree">
+          <a href="https://www.udacity.com/degrees/intro-to-programming-nanodegree--nd000" title="Intro to Programming" data-node-key="nd000" data-analytics-name="Nanodegree CTA Clicked" data-analytics-category="Nanodegree CTA" data-analytics-label="Nanodegree CTA - card - nd000 - STANDARD" data-analytics-type="CTA" data-analytics-payload="{ &quot;sku&quot;: &quot;nd000&quot;, &quot;cta_type&quot;: &quot;card&quot;, &quot;cta_destination&quot;: &quot;NDOP&quot;, &quot;cta_location&quot;: &quot;Homepage&quot; }">
+            <div class="card--nanodegree__header nd000">
+              <div class="card--nanodegree__header--overlay">
+              </div>
+            </div>
+            <div class="card--nanodegree__title">
+              <h4>Intro to Programming</h4>
+            </div>
+          </a>
+        </div>
+      </div>
+
+    </div>
+    <div class="contain nd-hub-link">
+      <a class="h4 blue" href="https://www.udacity.com/nanodegree" title="See all offerings" data-analytics-name="CTA Clicked" data-analytics-category="Nanodegree CTA" data-analytics-label="Nanodegree CTA - ND Hub" data-analytics-type="CTA" data-analytics-payload="{&quot;cta_type&quot;:&quot;link&quot;, &quot;cta_message&quot;:&quot;See all offerings&quot;, &quot;cta_destination&quot;:&quot;ND Hub&quot;, &quot;cta_location&quot;: &quot;Homepage&quot; }">See
+        all offerings <span class="icon__arrow--white"></span></a>
+    </div>
+  </section>

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
     }
 }