0

I'm building a simple workout builder where you can add exercises from a list on the left into a separate div on the right. Click the exercise you want on the left, and we add it to the right. Click it on the right, and it gets moved back over to the left. I can get it working, but I'm not doing it in a very elegant or interesting way. I'm just assigning each exercise its own ID. Is there a way to do it "better"?

HTML HERE:

<body>
        <div id="list-of-exercises-container">
            <ol id="list-of-exercises">
                <li class="exercise" id="power-clean">Power Clean</li>
                <li class="exercise" id="back-squat">Back Squat</li>
                <li class="exercise" id="bench-press">Bench Press</li>
                <li class="exercise" id="box-jump">Box Jump</li>
            </ol>
        </div>
        <div id="exercise-builder">
            <ul>
            </ul>
        </div>
        
        <script src="script.js" async defer></script>
    </body>

JAVASCRIPT HERE:

let exerciseBuilder = document.getElementById("exercise-builder");
let powerClean = document.getElementById("power-clean");
let backSquat = document.getElementById("back-squat");
let benchPress = document.getElementById("bench-press");
let boxJump = document.getElementById("box-jump");
let exerciseList = document.getElementById("list-of-exercises")
let haveClickedPowerClean = 0;
let haveClickedBackSquat = 0;
let haveClickedBenchPress = 0;
let haveClickedBoxJump = 0;



powerClean.addEventListener("click", function (){
    if(haveClickedPowerClean == 0){
        exerciseBuilder.insertBefore(powerClean, exerciseBuilder.firstChild);
        haveClickedPowerClean = 1;
    }
    else if(haveClickedPowerClean == 1){
        exerciseList.insertBefore(powerClean, exerciseList.firstChild);
        haveClickedPowerClean = 0;
    }
})

backSquat.addEventListener("click", function (){
    if(haveClickedBackSquat == 0){
        exerciseBuilder.insertBefore(backSquat, exerciseBuilder.firstChild);
        haveClickedBackSquat = 1;
    }
    else if(haveClickedBackSquat == 1){
        exerciseList.insertBefore(backSquat, exerciseList.firstChild);
        haveClickedBackSquat = 0;
        }
})

benchPress.addEventListener("click", function (){
    if(haveClickedBenchPress == 0){
        exerciseBuilder.insertBefore(benchPress, exerciseBuilder.firstChild);
        haveClickedBenchPress = 1;
    }
    else if(haveClickedBenchPress == 1){
        exerciseList.insertBefore(benchPress, exerciseList.firstChild);
        haveClickedBenchPress = 0;
        }
})

boxJump.addEventListener("click", function (){
    if(haveClickedBoxJump == 0){
        exerciseBuilder.insertBefore(boxJump, exerciseBuilder.firstChild);
        haveClickedBoxJump = 1;
    }
    else if(haveClickedBoxJump == 1){
        exerciseList.insertBefore(boxJump, exerciseList.firstChild);
        haveClickedBoxJump = 0;
        }
})

As you can see, the javascript isn't particularly beautiful. It's just a bunch of different IDs that I'm moving between two divs. I could keep going, but wanted to ask if there was a better solution to this.

Thanks in advance!

BrandonLearnsToCode
  • 11
  • 2

0 Answers0