implementaòàao jQuery da pèagina produto

Author: Wagner3UB

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

css/style.css

@@ -29,6 +29,9 @@ h1,h2,h3,h4,h5,h6, blockquote, figcaption {
   line-height: 1.17em;
   padding: 8px 0;
 }
+.mobile_only{
+  display: none;
+}
 .clear{
   clear: both;
 }
@@ -399,10 +402,10 @@ main.product article.container{
   margin-top: 130px;
 }
 main.product figure, .add-to-cart{
-  width: 49%;
+  width: 48.75%;
 }
 main.product figure{
-  margin-right: 2%;
+  margin-right: 2.5%;
 }
 
 main.product figure img{
@@ -411,7 +414,7 @@ main.product figure img{
 main.product figure img:hover{
   filter: saturate(200%) contrast(110%);;
 }
-.add-to-cart h2, .add-to-cart h3{
+.add-to-cart h2, .add-to-cart h3, h2.mobile_only{
   font-size: 26px;
   line-height: 57.6px;
   letter-spacing: -.9px;
@@ -452,6 +455,17 @@ main.product figure h3{
   height: 30px;
   border: 1px solid var(--green);
 }
+.left-column .counter p:first-child, .left-column .counter p:last-child{
+  color: var(--green);
+  cursor: pointer;
+}
+p.alert-negative, p.alert-out{
+  display:none;
+  font-size: 12px;
+  color: #d00;
+  line-height: 14px;
+  margin-top: 5px;
+}
 .right-column{
   width: 350px;
   float: left;
@@ -461,9 +475,12 @@ main.product figure h3{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  border: 1px solid var(--green);
   border-radius: 4px;
   padding: 20px 10px 20px 20px ;
+  border: 1px solid rgb(161, 161, 161, 0);
+}
+.right-column div.active{
+  border: 1px solid rgb(161, 161, 161);
 }
 .right-column div p, .right-column div p a{
   font: 400 14px/15.6px "Helvetica", Arial, sans-serif;
@@ -520,6 +537,9 @@ main.product figure h3{
 
 
 @media screen and (max-width: 376px){
+  .mobile_only {
+    display: block;
+  }
   /* HEADER SECTION */
   .container{
     margin: 0 15px;
@@ -738,4 +758,33 @@ main.product figure h3{
     flex-wrap: wrap;
     justify-content: center;
   }
+
+
+  /* PÁGINA PRODUTO*/
+  .add-to-cart h2{
+    display: none;
+  }
+  main.product article.container{
+    flex-flow: column;
+  }
+  main.product figure, .add-to-cart{
+    width: 100%;
+  }
+  main.product figcaption, main.product figure h3{
+    display: none;
+  }
+  .left-column {
+    width: 100%;
+    display: flex;
+  }
+  .left-column h3{
+    width: 50%;
+  }
+  .add-to-cart button{
+    width: 100%;
+    margin-top: 67px;
+    margin-left: unset;
+    font-size: 20px;
+    line-height: 23px;
+  }
 }

js/script.js

@@ -6,4 +6,42 @@ $(function(){
     $(".m-hide").removeClass("m-hide");
     $(".see_more").addClass("active");
   });
-});
+
+  //Counter
+  let quantity = $(".counter p:nth-of-type(2)");
+  
+  $(".counter p:first-child").on("click", function(){
+    if(quantity.text() > 0){
+      let contagem = parseInt(quantity.text());
+      quantity.text(contagem - 1);
+      $("p.alert-out").css("display","none")
+      $(".left-column .counter").css("border", "1px solid var(--green)");
+      $(".counter p:nth-of-type(2)").css("color", "var(--black)");
+    } else if (quantity.text() == 0){
+      $("p.alert-negative").css("display","block");
+      $(".left-column .counter").css("border", "1px solid #d00");
+      $(".counter p:nth-of-type(2)").css("color", "#d00");
+    };
+  });
+  $(".counter p:last-child").on("click", function(){
+    if(quantity.text() < 10){ 
+      let contagem = parseInt(quantity.text());
+      quantity.text(contagem + 1);
+      $("p.alert-negative").css("display","none");
+      $(".left-column .counter").css("border", "1px solid var(--green)");
+      $(".counter p:nth-of-type(2)").css("color", "var(--black)");
+    } else if (quantity.text() == 10){
+      $("p.alert-out").css("display","block")
+      $(".left-column .counter").css("border", "1px solid #d00");
+      $(".counter p:nth-of-type(2)").css("color", "#d00");
+    };
+  });
+  //END COUNTER
+
+  //outline select purchese area
+
+  $(".right-column div").on("click", function(){
+    $(".right-column div").removeClass("active");
+    $(this).addClass("active");
+  });
+});

product_1.html

@@ -37,6 +37,7 @@ <h1><a href="/"><img src="img/logo.png" alt="Brand Logo"></a></h1>
 
   <main class="product">
     <article class="container">
+      <h2 class="mobile_only">Spiced Mint Candleaf®</h2>
       <figure>
         <img src="img/candle_product.png" alt="Spiced Mint Candleaf® foto expositiva">
         <figcaption>All hand-made with natural soy wax, Candleaf is made for your pleasure moments</figcaption>
@@ -50,17 +51,19 @@ <h3>$ 9.99</h3>
             <h4>Quantity</h4>
             <div class="counter">
               <p>-</p>
-              <p>0</p>
+              <p>1</p>
               <p>+</p>
             </div>
           </div>
+          <p class="alert-negative">Attention:<br>Quantity can't be negative!'</p>
+          <p class="alert-out">No more items can be added.</p>
         </div>
         <div class="right-column">
           <div>
             <input type="radio" name="radio" id="one" >
             <label for="one">One time purchase</label>
           </div>
-          <div>
+          <div class="active">
             <input type="radio" name="radio" id="always" checked>
             <label for="always">Subscribe and delivery every</label>
             <select>
@@ -82,6 +85,8 @@ <h4>Quantity</h4>
               <span>Weight:</span> 400g </p>
         </div>
       </article>
+      <p class="mobile_only">All hand-made with natural soy wax, Candleaf is made for your pleasure moments</p>
+      <h3 class="mobile_only">🚚 FREE SHIPPING</h3>
     </article>
 
   </main>