-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathCustom Workout Planner
More file actions
67 lines (67 loc) · 2.71 KB
/
Custom Workout Planner
File metadata and controls
67 lines (67 loc) · 2.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!-- Objective: Build a custom workout planner. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Workout Planner</title>
</head>
<body>
<h2>Create Your Workout Plan</h2>
<form id="workoutForm">
<div id="exerciseInputs">
<div class="exerciseInput">
<input type="text" placeholder="Exercise Name" required>
<input type="number" placeholder="Sets" required>
<input type="number" placeholder="Reps" required>
<input type="number" placeholder="Rest (seconds)" required>
</div>
</div>
<button type="button" id="addExerciseBtn">Add Exercise</button>
<button type="submit">Save Workout Plan</button>
</form>
<div id="workoutPlansContainer">
<!-- Saved workout plans will be displayed here -->
</div>
<script>
document.getElementById('addExerciseBtn').addEventListener('click', () => {
const newExerciseInput = document.createElement('div');
newExerciseInput.className = 'exerciseInput';
newExerciseInput.innerHTML = `
<input type="text" placeholder="Exercise Name" required>
<input type="number" placeholder="Sets" required>
<input type="number" placeholder="Reps" required>
<input type="number" placeholder="Rest (seconds)" required>
`;
document.getElementById('exerciseInputs').appendChild(newExerciseInput);
});
let workoutPlans = JSON.parse(localStorage.getItem('workoutPlans')) || [];
document.getElementById('workoutForm').addEventListener('submit', function(e) {
e.preventDefault();
const exercises = Array.from(document.getElementsByClassName('exerciseInput')).map(exerciseDiv => {
return {
name: exerciseDiv.children[0].value,
sets: exerciseDiv.children[1].value,
reps: exerciseDiv.children[2].value,
rest: exerciseDiv.children[3].value
};
});
workoutPlans.push(exercises);
localStorage.setItem('workoutPlans', JSON.stringify(workoutPlans));
displayWorkoutPlans();
this.reset(); // Reset form fields after saving
});
function displayWorkoutPlans() {
const container = document.getElementById('workoutPlansContainer');
container.innerHTML = ''; // Clear existing plans
workoutPlans.forEach((plan, index) => {
const planDiv = document.createElement('div');
plan.forEach(exercise => {
planDiv.innerHTML += `<div>${exercise.name}: ${exercise.sets} sets of ${exercise.reps} reps, rest ${exercise.rest}s</div>`;
});
container.appendChild(planDiv);
});
}
displayWorkoutPlans();
</script>
</body>
</html>