Plate visuals now get added on calculation.

Plate visuals now get added each time you calculate a weight. Still need to have the plates be animated. Instead of putting in a string it needs to append and add the weights each time. Make a function to append and then animate each weight.

css/appstyling-v2.css

@@ -130,6 +130,7 @@ p.subheading {
 
 .b-platevisual__plates{
 	position: absolute;
+	display: inline-flex;
 
 }
 
@@ -137,6 +138,7 @@ p.subheading {
 	top: 50%;
 	transform: translate(-100%, -50%);
 	left: 21%;
+    flex-direction: row-reverse; 
 
 }
 
@@ -146,6 +148,12 @@ p.subheading {
 	left: 79%;
 }
 
+.b-platevisual__plate{
+	position: relative;
+	margin: 0px 1px;
+	vertical-align: middle;
+}
+
 .b-calulatorinputs {
 	height: 40vh;
 	width: auto;

images/2halflbs-Plate.svg

@@ -1 +1 @@
-<svg height="32" viewBox="0 0 8 32" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="32" rx="4" width="8"/><text fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 8 0)"><tspan x="1" y="20">2</tspan> <tspan x="2.491699" y="23">.</tspan> <tspan x="11.175781" y="33.561523"/><tspan x="11.175781" y="36.561523"/> <tspan x="1" y="32">5</tspan></text></g></svg>
+<svg height="32" viewBox="0 0 8 32" width="8" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 8 0)"><rect fill="#48484a" fill-rule="nonzero" height="32" rx="4" width="8"/><g fill="#fcfcfc" font-family="Roboto-Regular, Roboto" font-size="10" transform="matrix(-1 0 0 1 7 4)"><text><tspan x="0" y="9">2</tspan></text><text><tspan x="1.491699" y="12">.</tspan></text><text><tspan x="0" y="21">5</tspan></text></g></g></svg>

js/Weight Calculation Script-Edited-Jquery-V4.js

@@ -1,3 +1,4 @@
+// jQuery( document ).ready(function() {
 // calculation function starts here
 
     function startcalc() {
@@ -40,8 +41,12 @@
 
     }
 
+        // var plateloader = jQuery(".b-platevisual__plates").html('<img src="images/45lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--45">');
+        // console.log(plateloader);
+
 //plate calulation function
     function platecalculator ( plateWeights, platesAvailable, target, finalWeight) {
+        var weighthtml = "";
         //iterates though the plates availble.
         for (var i = 0; i < platesAvailable.length; i++) {
             //checks if the plate is less than or equal to the weight of plates needed
@@ -59,6 +64,7 @@
                 //Adds plates required
                 if (weightToAdd > 0) {
                     jQuery(".input-weightsneeded").eq(i).val(weightToAdd);
+                      //instead of putting in a string and updating all at once. append the weights each time. Make function and append and then animate. Replace this block.
                 }
 
                 //sets the offset
@@ -69,11 +75,13 @@
 
             }
         }
+        //replaces html for plates required to bar.
+        jQuery(".b-platevisual__plates").html(weighthtml);
     }
 
-//Smooth Scrolling
+  //Smooth Scrolling
 
-$(document).ready(function(){
+  $(document).ready(function(){
     // Add smooth scrolling to all links
     $("a").on('click', function(event) {
 
@@ -96,4 +104,5 @@ $(document).ready(function(){
         });
       } // End if
     });
-});
+  });
+// });

whatareyouliftingapp-V5.html

@@ -41,8 +41,20 @@
                     <div class="b-platevisual__weight">
                         <img src="images/BarBell.svg" class="b-platevisual__barbell">
                         <div class="b-platevisual__plates b-platevisual__plates--left">
+<!--                             <img src="images/45lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--45">
+                            <img src="images/35lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--35">
+                            <img src="images/25lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--25">
+                            <img src="images/10lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--10">
+                            <img src="images/5lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--5">
+                            <img src="images/2halflbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--2half"> -->
                         </div>
                         <div class="b-platevisual__plates b-platevisual__plates--right">
+<!--                             <img src="images/45lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--45">
+                            <img src="images/35lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--35">
+                            <img src="images/25lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--25">
+                            <img src="images/10lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--10">
+                            <img src="images/5lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--5">
+                            <img src="images/2halflbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--2half"> -->
                         </div>
                     </div>
                     <p class="subheading">Offset: <span class="input-difference">0</span> LBS</p>