Day 40 Workout JS

Intro

The HTML is all done on the page and I can finally start working on the Javascript that is going to be setting up the page. There are only a few things that I'm going to need to do. I have to set up a way to handle the button, I have to send the data to the chart and get the HTML properly setup

Javascript

Since I'm using JavaScript it's really easy to set up the button all I need to do is target the correct ID. this gives me the access I'm looking for. Then I can grab the rest of the information from the inputs by targeting their names. This sets up all the data I need to pass to the chart.

adding the last reps

                
                    
      
$('#add-button').click(function(){
  let exercise = $('select[name=Exercise]').val();
  let rep = $('input[name=Rep]').val();
  let weight = $('input[name=Weight]').val();
})

Now handling the chart is a little different I need to create a function and two variables. I will have one function that looks at an array and finds out if the exercise has been used already within the app. It will return a negative one if it hasn't been used and it will return it's spot in the array if it has been used before. Now with that in mind I can look through the spot the exercise has been used to see if there are any workout boxes left to input the info into. Finally I can add in any info that hasn't been imputed yet if the exercise hasn't been used by inputting the html for a whole new row.

adding the new box

                
                    
      
  $('#add-button').click(function(){
  let exercise = $('select[name=Exercise]').val();
  let rep = $('input[name=Rep]').val();
  let weight = $('input[name=Weight]').val();
  let exerciseNumber = lookForExercise(exerciseArr, exercise);
  let workoutBoxes = exerciseArr.length*5

  if (exerciseNumber > -1) {
    let x = (exerciseNumber)*5
    for (var i = 1; i < 6; i++) {
      if ($('input[name=rep-'+(x+i)+']').val() == '') {
        $('input[name=rep-'+(x+i)+']').val(rep)
        $('input[name=weight-'+(x+i)+']').val(weight)
        let vol = parseInt($('#vol-'+exerciseNumber).text()) + (rep*weight);
        $('#vol-'+exerciseNumber).text(vol)
        break
      }
    }
  }else{
    exerciseArr.push(exercise)
    $('#workout-end').prepend(`
      <div class='workout-row'>
        <div class='workout-name-box | in-box'>
          <p class='Exercise-header'><b>`+ exercise +`</b></p>
        </div>
        <div class='set-box  | in-box'>
          <label for='rep-`+ (workoutBoxes+1) +`'>Reps: </label>
          <input class='form-text' type='text' name='rep-`+ (workoutBoxes+1) +`' value='`+ rep +`' disabled><br>
          <label for='weight-`+ (workoutBoxes+1) +`'>Weight: </label>
          <input class='form-text' type='text' name='weight-`+ (workoutBoxes+1) +`' value='`+ weight +`' disabled>
        </div>
        <div class='set-box  | in-box'>
          <label for='rep-`+ (workoutBoxes+2) +`'>Reps: </label>
          <input class='form-text' type='text' name='rep-`+ (workoutBoxes+2) +`' value='' disabled><br>
          <label for='weight-`+ (workoutBoxes+2) +`'>Weight: </label>
          <input class='form-text' type='text' name='weight-`+ (workoutBoxes+2) +`' value='' disabled>
        </div>
        <div class='set-box  | in-box'>
          <label for='rep-`+ (workoutBoxes+3) +`'>Reps: </label>
          <input class='form-text' type='text' name='rep-`+ (workoutBoxes+3) +`' value='' disabled><br>
          <label for='weight-`+ (workoutBoxes+3) +`'>Weight: </label>
          <input class='form-text' type='text' name='weight-`+ (workoutBoxes+3) +`' value='' disabled>
        </div>
        <div class='set-box  | in-box'>
          <label for='rep-`+ (workoutBoxes+4) +`'>Reps: </label>
          <input class='form-text' type='text' name='rep-`+ (workoutBoxes+4) +`' value='' disabled><br>
          <label for='weight-`+ (workoutBoxes+4) +`'>Weight: </label>
          <input class='form-text' type='text' name='weight-`+ (workoutBoxes+4) +`' value='' disabled>
        </div>
        <div class='set-box  | in-box'>
          <label for='rep-`+ (workoutBoxes+5) +`'>Reps: </label>
          <input class='form-text' type='text' name='rep-`+ (workoutBoxes+5) +`' value='' disabled><br>
          <label for='weight-`+ (workoutBoxes+5) +`'>Weight: </label>
          <input class='form-text' type='text' name='weight-`+ (workoutBoxes+5) +`' value='' disabled>
        </div>
        <div class='total-vol'>
          <p class='vol-text'>Total Vol</p>
          <p class='vol-text' id='vol-`+(exerciseArr.length-1)+`'>`+(rep*weight)+`</p>
        </div>
      </div>
      `)
  }
})