The reason why the code at line 47 (i.e., toggleImgVid(e)) is executing twice could be due to multiple event listeners triggering it. Here are possible reasons:

1. Multiple Event Listeners Firing

There are two separate places where toggleImgVid(e) is being called: Inside the keydown event listener for .copy-code elements: js

tabIndexElements.forEach(el => {
    el.addEventListener('keydown', e => {
        let letter = e.key.toLowerCase()
        if (letter == 'enter') {
        toggleImgVid(e) // Call 1
        }
    })
})
                                        

addEventListener('keydown', e => {
    let letter = e.key.toLowerCase()
    if (letter == 'enter') {
toggleImgVid(e) // Call 2
    addTabIndexes(e)
}
})
                                        

2. Event Bubbling

If the keydown event is triggered inside a .copy-code element, it will first fire in the individual element's event listener (inside the tabIndexElements.forEach(...) loop). Then, because keydown events bubble up, it also triggers the global keydown event listener. This results in toggleImgVid(e) executing twice—once from the .copy-code element listener and once from the global listener.

Solution

To prevent duplicate execution, you can stop event propagation inside the .copy-code event listener:

tabIndexElements.forEach(el => {
    el.addEventListener('keydown', e => {
    let letter = e.key.toLowerCase()
    if (letter == 'enter') {
    e.stopPropagation() // Prevent event from reaching the global listener
        toggleImgVid(e)
    }
    })
})
                                        

Alternative Fix: Using a Single Event Listener Instead of attaching an event listener to each .copy-code element, delegate it to the document:

document.addEventListener('keydown', e => {
    let letter = e.key.toLowerCase()
    if (letter == 'enter') {
    if (e.target.classList.contains('copy-code')) {
        e.preventDefault()
        toggleImgVid(e)
        return // Prevent further execution
    }
    toggleImgVid(e)
    addTabIndexes(e)
    }
})

This avoids multiple event listeners and prevents duplicate execution.

✅ Safe Steps to Replace Local Code with Remote main Branch

This will reset your local branch to exactly match GitHub’s main branch.

1. Make sure you're on the main branch:

git checkout main

2. Fetch the latest from the remote:

git fetch origin

3. Hard reset your local branch to match GitHub’s main branch:

git reset --hard origin/main

✅ Steps to overwrite main with your current branch:

1. Make sure all your changes are committed

If you still have unstaged changes:

git add .

git commit -m "Final draft version"

2. Switch to main branch

git checkout main

3. Overwrite main with the draft using git reset --hard

Let’s assume your draft branch is called draft-branch.

                                            git reset --hard draft-branch

is makes your main branch exactly match your draft-branch.

4. Push the updated main to GitHub (force push)

git push origin main --force

⚠️ Warning:This will overwrite the remote main branch on GitHub with your local version — so don’t do this if others are also working on the main branch unless you're sure.