grouping exercises

main.js

@@ -40,6 +40,7 @@ function setExercises() {
     exerciseList.innerHTML = ''
     for (let i = 0; i < exercises[t].length; i++) {
         var li = document.createElement("li");
+        var upDownDiv = document.createElement("div");
         // Up Button
         var upButton = document.createElement("button");
         upButton.textContent = "▲"
@@ -49,7 +50,7 @@ function setExercises() {
             setExercises(exercises[t]);
             localStorage.setItem("exercises", JSON.stringify(exercises));
         };
-        li.appendChild(upButton);
+        upDownDiv.appendChild(upButton);
         // Down Button
         var downButton = document.createElement("button");
         downButton.textContent = "▼"
@@ -59,8 +60,10 @@ function setExercises() {
             setExercises(exercises[t]);
             localStorage.setItem("exercises", JSON.stringify(exercises));
         };
-        li.appendChild(downButton);
-        li.appendChild(document.createTextNode("Exercise "));
+        upDownDiv.appendChild(downButton);
+        li.appendChild(upDownDiv);
+        var exerciseSelectorDiv = document.createElement("div");
+        exerciseSelectorDiv.appendChild(document.createTextNode("Exercise "));
         // Select Exercise Type
         var exType = document.createElement("select");
         exType.onchange = updateExercises;
@@ -68,7 +71,7 @@ function setExercises() {
             exType.add(new Option(exercise.name, exercise.name));
         });
         exType.value = exercises[t][i].exerciseType
-        li.appendChild(exType);
+        exerciseSelectorDiv.appendChild(exType);
         // Select Repetition Type
         var repType = document.createElement("select");
         repetitionTypes.forEach(repetitionType => {
@@ -76,19 +79,24 @@ function setExercises() {
         });
         repType.onchange = updateExercises;
         repType.value = exercises[t][i].repetitionType
-        li.appendChild(repType);
-        li.appendChild(document.createTextNode("Reps done: "));
+        exerciseSelectorDiv.appendChild(repType);
+        li.appendChild(exerciseSelectorDiv);
+        var repDiv = document.createElement("div");
+        repDiv.appendChild(document.createTextNode("Reps done: "));
         var reps = document.createElement("input");
         reps.setAttribute("type", "number");
         reps.value = exercises[t][i].reps;
         reps.onchange = updateExercises;
-        li.appendChild(reps);
-        li.appendChild(document.createTextNode("Weight done: "));
+        repDiv.appendChild(reps);
+        li.appendChild(repDiv);
+        var weightDiv = document.createElement("div");
+        weightDiv.appendChild(document.createTextNode("Weight done: "));
         var weight = document.createElement("input");
         weight.setAttribute("type", "number");
         weight.value = exercises[t][i].weight;
         weight.onchange = updateExercises;
-        li.appendChild(weight);
+        weightDiv.appendChild(weight);
+        li.appendChild(weightDiv);
         // Delete Button
         var deleteButton = document.createElement("button");
         deleteButton.textContent = "Delete"
@@ -193,12 +201,14 @@ setExercises(exercises[t]);
 var body = document.querySelector("body");
 var pre = document.createElement("pre");
 const jsn = JSON.parse(localStorage.getItem("exercises"));
-var s = "";
-for (let [date, value] of Object.entries(jsn).sort().reverse()) {
-    s += date + "\n";
-    for (let exercise of value) {
-        s += "  " + exercise.exerciseType + ": " + exercise.weight + "kg x " + exercise.reps + " of " + exercise.repetitionType + "\n";
+if (jsn != null) {
+    var s = "";
+    for (let [date, value] of Object.entries(jsn).sort().reverse()) {
+        s += date + "\n";
+        for (let exercise of value) {
+            s += "  " + exercise.exerciseType + ": " + exercise.weight + "kg x " + exercise.reps + " of " + exercise.repetitionType + "\n";
+        }
     }
+    pre.textContent = s;
+    body.appendChild(pre);
 }
-pre.textContent = s;
-body.appendChild(pre);

style.css

@@ -1,3 +1,6 @@
 body {
     font-size: larger;
 }
+div {
+    display: inline-block;
+}