Revision as of 17:36, 17 February 2025

Html structure

<body>
    <p id="sentence">
        <span class="word_do">do</span>
        <span class="word_tigers">tigers</span>
        <span class="word_melt">melt</span>
        <span class="word_like">like</span>
        <span class="word_butter">butter</span>
        <span class="word_in">in</span>
        <span class="word_the">the</span>
        <span class="word_forest">forest</span>
        <span class="word_questionmark">?</span>
    </p> 

    <div id="stage">
        <div class="do"></div>
        <div class="tigers object"></div>
        <div class="melt object"></div>
        <div class="like"></div>
        <div class="butter object"></div>
        <div class="in"></div>
        <div class="the"></div>
        <div class="forest object"></div>
        <div class="questionmark"></div>
    </div>
   
    <script src="java1.js"></script>
</body>

now all the divs are also siblings, so they will listen to same command that controls the spans(words)

Javascript

previous version

basic variables

let sentence = document.getElementById("sentence")//this is added from the first version, in the first version, I didn’t define "sentence", so there was no way to know where to put the words back from removedWords in "bringBack"function.
let words = Array.from(document.querySelectorAll("#sentence span"));
let removedWords = [];

randomly removing, bringing words back function

function removeRandomWord () {
    if (words.length > 1) {
        let pickRandom = Math.floor(Math.random() * words.length);
        let remove = words.splice(pickRandom,1)[0]; //had to add "[0]" to pull the word out of the array and turn it into node. switching between nodelists and arrays requires extra steps
        removedWords.push(remove);
        remove.remove(); //.remove() method removes the element from the DOM.
    }
}

function bringbackRandomWord () {
    if (removedWords.length > 0) {
        let pickRandom = Math.floor(Math.random() * removedWords.length);
        let bringBack = removedWords.splice(pickRandom,1)[0];
        words.push(bringBack);
        sentence.innerHTML = sentence.innerHTML + " "; //try to add space between the spans but this doesn't work at the moment.
        sentence.appendChild(bringBack); //opposite of remove() is appendChild()
    }
}

↳ how do I add a space (" ") after each word that is brought back?

sentence.innerHTML += " ";

↳ this works only the first time shrinking the browser, but when i try again, it stops working. then at some point, it starts adding more words. as if the words are duplicating itself

innerHTML vs innerText vs textContent
array join() w3c
array join() mdn

two innerWidth variables and "resize" eventlistener

let prevWidth = window.innerWidth;

first defined prevWidth as innerWidth outside of the eventlistener

window.addEventListener("resize", () => {
    let currWidth = window.innerWidth;
    let widthChange = Math.abs(prevWidth - currWidth);
    console.log(widthChange)

    if (currWidth < prevWidth && widthChange > 100) {
        removeRandomWord();
        prevWidth = currWidth;
    }
    else if (prevWidth < currWidth && widthChange > 100) {
        bringbackRandomWord();
        prevWidth = currWidth;
    }
     //instead of updating prevWidth at the very end of the function, update it inside each if statement
     //previous version was updating currWidth to prevWidth, i thought i was saving the currWidth to prevWidth but it works other way around.
});

@@ Line 67: / Line 67: @@
 }
 </syntaxhighlight>
+: ↳ how do I add a space (" ") after each word that is brought back?
+<syntaxhighlight lang="javascript">
+sentence.innerHTML += " ";
+</syntaxhighlight>
+: ↳ this works only the first time shrinking the browser, but when i try again, it stops working. then at some point, it starts adding more words. as if the words are duplicating itself
 <div style="float:right; text-align:right;">
 [https://www.freecodecamp.org/news/innerhtml-vs-innertext-vs-textcontent/ innerHTML vs innerText vs textContent]<br>
@@ Line 72: / Line 77: @@
 [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join#separator array join() mdn]<br>
 </div>
-: ↳ how do I add a space (" ") after each word that is brought back?
-<br>
 <br>
 <br>