Day 39: HTML of WorkoutPost

Intro

Finally getting some time to work on the workout post again. I have built out a really basic format for the workout post front page. This is going to include a chart that shows the user everything that they have done so far. Plus it will have an area where they will be able to put in the current exercise that they are working on. In the future, I would love to improve this with CSS and just give it an overall better feel.

HTML

The first thing I wanted to accomplish when building out the HTML is changing the form that was already there with a box to add the current exercise information to the chart. I did that by just changing the box to a div instead of a form. With that done I just added a button instead of an input submit so that I could access the information without submitting it to the PHP script that I have.

                
                    
      
    <div class='add-box'>
    <h3>Add An Exercise</h3>
    <label for='Team' class='label | padding-form'>Exercise</label><br>
    <input type='text' name='Exercise' value='' class='text-box | padding-form'><br><br>
    <label for='Team' class='label | padding-form'>Reps</label><br>
    <input type='number' name='Rep' value='' min='1' max='15' class='text-box | padding-form'><br><br>
    <label for='Team' class='label | padding-form'>Weight</label><br>
    <input type='number' name='Weight' value='' min='0' max='1000' class='text-box | padding-form'><br><br>
    <button type='button' name='button' id='add-button'>Add</button>

</div>

            
      
                
            

Now after the user presses the add button the information will move to the form that is the chart. My plan for that is going to have each input box in the workout box have a number and a delimiter. This will be done so that I will be able to use a loop to go through all the data that gets imputed to the PHP script. Knowing this I started to split up everything into rows and divs. The easier I can access everything the better.

                
                    
      
    <form class='work-form' action='index.html' method='post'>
       <label for='Team' class='label | padding-form'>Date</label><br>
       <input type='date' name='W_date' value='' class='text-box | padding-form'><br><br>


     <div class='workout-row'>
       <div class='workout-name-box | in-box'>
         <p class='Exercise-header'><b>Chest Press</b></p>
       </div>
       <div class='set-box  | in-box'>
         <label for='rep-1'>Reps: </label>
         <input class='form-text' type='text' name='rep1' value='10' disabled><br>
         <label for='weight-1'>Weight: </label>
         <input class='form-text' type='text' name='weight2' value='135' disabled>
       </div>
       <div class='set-box  | in-box'>
         <label for='rep-2'>Reps: </label>
         <input class='form-text' type='text' name='rep1' value='10' disabled><br>
         <label for='weight-2'>Weight: </label>
         <input class='form-text' type='text' name='weight2' value='135' disabled>
       </div>
       <div class='set-box  | in-box'>
         <label for='rep-3'>Reps: </label>
         <input class='form-text' type='text' name='rep1' value='10' disabled><br>
         <label for='weight-3'>Weight: </label>
         <input class='form-text' type='text' name='weight2' value='135' disabled>
       </div>
       <div class='set-box  | in-box'>
         <label for='rep-4'>Reps: </label>
         <input class='form-text' type='text' name='rep1' value='10' disabled><br>
         <label for='weight-4'>Weight: </label>
         <input class='form-text' type='text' name='weight2' value='135' disabled>
       </div>
       <div class='set-box  | in-box'>
         <label for='rep-5'>Reps: </label>
         <input class='form-text' type='text' name='rep1' value='10' disabled><br>
         <label for='weight-5'>Weight: </label>
         <input class='form-text' type='text' name='weight2' value='135' disabled>
       </div>
       <div class='total-vol'>
         <p class='vol-text'>Total Vol</p>
         <p class='vol-text'>1,300</p>
       </div>
     </div>
     <br>
     <input type='submit' name='' value='Submit Workout'>
   </form>
   </div>

            
      
                
            

Now after the user presses the add button the information will move to the form that is the chart. My plan for that is going to have each input box in the workout box have a number and a delimiter. This will be done so that I will be able to use a loop to go through all the data that gets imputed to the PHP script. Knowing this I started to split up everything into rows and divs. The easier I can access everything the better.