Started Styling of options Block

Added styling for options block. Realised in order to float select and input next to each other each needed its own DIV. Still need to redo plate available area.

css/appstyling-v2.css

@@ -253,6 +253,63 @@ label {
     transform: translate(-50%, -100%);
 }
 
+.b-options{
+	background-color: #8C8E90;
+	position: relative;
+	height: auto;
+}
+
+.b-options__inputcontainer{
+	width: 100%;
+	color: #FCFCFC;
+	font-family: Roboto;
+	font-size: 10px;
+	font-weight: 500;
+	line-height: 14px;
+	letter-spacing: 1.5px;
+	height: auto;
+	overflow: visible;
+	text-align: center;
+	padding-top: 16px;
+}
+
+.b-options__optionsinput{
+	display: inline-block;
+    text-align: center;
+}
+
+.b-options__inputcontainer label{
+	text-align: left;
+}
+
+.input-bar{
+	height: 33px;
+    width: 130px;
+    border-radius: 4px;
+    background-color: #D8D8D8;
+    color: #48484A;
+    font-family: "Zilla Slab";
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 500;
+    letter-spacing: 0.75px;
+    line-height: 20px;
+    margin-right: 5px;
+}
+.input-percentage{
+	height: 38px;
+    width: 130px;
+    border-radius: 4px;
+    background-color: #D8D8D8;
+    color: #48484A;
+    font-family: "Zilla Slab";
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 500;
+    letter-spacing: 0.75px;
+    line-height: 20px;
+    margin-right: 0px;
+}
 /*
 .b-container {
 

css/main.css

@@ -235,7 +235,7 @@ textarea,
 select {
   height: 38px;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
+  /*background-color: #fff;*/
   border: 1px solid #D1D1D1;
   border-radius: 4px;
   box-shadow: none;
@@ -277,7 +277,7 @@ fieldset {
   border-width: 0; }
 input[type="checkbox"],
 input[type="radio"] {
-  display: inline; }
+  display: inline-block; }
 label > .label-body {
   display: inline-block;
   margin-left: .5rem;

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

@@ -2,6 +2,8 @@
 
     function startcalc() {
 
+        jQuery(".input-weightsneeded").val(null);
+
         //calls inputs to start calculation
         var weighttolift = jQuery(".input-weight").val();
         var percentage = jQuery(".input-percentage").val();

whatareyouliftingapp-V5.html

@@ -79,8 +79,8 @@
                 <div class="b-calulatorinputs__infoentry">
                     <div class="b-calulatorinputs__inputcontainer">
                         <div class="b-calulatorinputs__weightinput">
-                        	<label for="Weight">WEIGHT</label>
+                        	<label for="Weight">WEIGHT (LBS)</label>
-                        	<input type="text" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
+                        	<input type="number" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
                         	<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
                         </div>
                     	<a href="#options">
@@ -93,10 +93,15 @@
             </div>
     		<!-- Options Section -->
 
-    		<a name="options"></a><div class="b-options">
+    		<a name="options"></a>
-    			<p class="b-options__overline">BAR WEIGHT</p>
+            <div class="b-options">
-    			<input type="text" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar"> LBS
+                <div class="b-options__inputcontainer">
-    			<p>PERCENT OF WEIGHT</p>
+                    <div class="b-options__optionsinput">
+            			<label for="Bar">BAR WEIGHT (LBS)</label>
+            			<input type="text" class="b-options__input input-element input-bar" name="Bar" value="45" id="Bar">
+                    </div>
+                    <div class="b-options__optionsinput">
+            			<label for="Percentage">PERCENT OF WEIGHT</label>
             			<select name="Percentage" class="b-options__percent input-element input-percentage" id="Percentage">
                             <option value="1" selected="">100% </option>
                             <option value="0.95">95% </option>
@@ -119,6 +124,7 @@
                             <option value="0.10">10% </option>
                             <option value="0.05">5% </option>         
                         </select>
+                    </div>
         			<p class="b-options__subheading subheading">Plates Available</p>
                 	<ul class="b-options__input">
                 		<li>45 LBS
@@ -128,31 +134,32 @@
                 		</li>
                 		<li>35 LBS
                 			<ul>
-            				<input type="number" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="2" id="avail35">
+                				<input type="number" data-weight="35" name="A35" class="input-element input-weightsavailable input-available35" min="0" step="1" value="4" id="avail35">
                 			</ul>
                 		</li>
                 		<li>25 LBS
                 			<ul>
-            				<input type="number" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="2" id="avail25">
+                				<input type="number" data-weight="25" name="A25" class="input-element input-weightsavailable input-available25" min="0" step="1" value="4" id="avail25">
                 			</ul>
                 		</li>
                 		<li>10 LBS
                 			<ul>
-            				<input type="number" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="2" id="avail10">
+                				<input type="number" data-weight="10" name="A10" class="input-element input-weightsavailable input-available10" min="0" step="1" value="4" id="avail10">
                 			</ul>
                 		</li>
                 		<li>5 LBS
                 			<ul>
-            				<input type="number" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="2" id="avail5">
+                				<input type="number" data-weight="5" name="A5" class="input-element input-weightsavailable input-available5" min="0" step="1" value="4" id="avail5">
                 			</ul>
                 		</li>
                 		<li>2.5 LBS
                 			<ul>
-            				<input type="number" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="2" id="avail2">
+                				<input type="number" data-weight="2.5" name="A2half" class="input-element input-weightsavailable input-available2" min="0" step="1" value="4" id="avail2">
                 			</ul>
                 		</li>
                 	</ul>
                 </div>
+    		</div>
 
     		<!-- Back to top Button -->