User:Zuhui/SI26/Storybook/Code to work 2: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
Line 146: Line 146:
<br>
<br>
===synchronizing spans and divs===
===synchronizing spans and divs===
added basic variables and queryselectorall for the divs
added basic variables for the divs
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
let sentence = document.getElementById("sentence");
let sentence = document.getElementById("sentence");
Line 164: Line 164:
function removeRandom () {
function removeRandom () {
     if (words.length > 1) {
     if (words.length > 1) {
         let pickRandom = Math.floor(Math.random() * words.length );
         let pickRandom = Math.floor(Math.random() * words.length);
         let removing = words.splice(pickRandom,1)[0];
         let removingWords = words.splice(pickRandom,1)[0];
         removedWords.push(removing);
         removedWords.push(removingWords);
         removing.remove(); //.remove() method removes the element from the DOM.
         removingWords.remove();
 
        var spaceRemoving = removing.classList[0].replace("word_","");
        let matchingDiv = document.querySelector("#space div." + spaceRemoving);
          
          
 
        var findSameName = removingWords.classList[0].replace("word_","");
        let matchingDiv = document.querySelector("#space div." + findSameName);
         removedDivs.push(matchingDiv);
         removedDivs.push(matchingDiv);
         matchingDiv.remove();
         matchingDiv.remove();
Line 181: Line 181:
[https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList DOMTokenList mdn]<br>
[https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList DOMTokenList mdn]<br>
[https://dev.to/lensco825/how-the-domtokenlist-api-works-3lef How the DOMTokenList API works dev]<br>
[https://dev.to/lensco825/how-the-domtokenlist-api-works-3lef How the DOMTokenList API works dev]<br>
[https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList replace() mdn]<br>  
[https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList classList.replace() mdn]<br>  
</div>
</div>
<br>
<br>
<br>
<br>
<br>
'''code explained:'''<br><br>
just like how <code>Array.from()</code> converts a NodeList to an array, which allowing the use of array methods,<code>classList</code> provides DOMToeknList, which allows the use of tokenlist methods.<br>
<syntaxhighlight lang="javascript">
var findSameName = removingWords.classList[0].replace("word_","");
</syntaxhighlight>
: ↳ <code>element.classList[0]</code> takes the first class name out from the DOMTokenList, and then use the <code>classList.replace()</code> method to modify the name.
<br>
<br>
<syntaxhighlight lang="javascript">
let matchingDiv = document.querySelector("#space div." + findSameName);
</syntaxhighlight>
<br>
<br>
<br>
<br>
'''now adding under function removeRandom ()'''<br>
<syntaxhighlight lang="javascript">
function bringBackRandom () {
    if (removedWords.length > 0) {
        let pickRandom = Math.floor(Math.random() * removedWords.length);
        let bringBackWord = removedWords.splice(pickRandom, 1)[0];
        words.push(bringBackWord);
        sentence.appendChild(bringBackWord);
        sentence.appendChild(document.createTextNode(" "));
        var findSameName = bringBackWord.classList[0].replace("word_","");
        let matchingDiv = removedDivs.findIndex(div => div.classList.contains(findSameName));
        let bringBackDiv = removedDivs.splice(matchingDiv, 1)[0];
        figures.push(bringBackDiv);
        space.appendChild(bringBackDiv);
    }
}
</syntaxhighlight>
<div style="float:right; text-align:right;">
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find find() mdn]<br>
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex findIndex() mdn]<br>
[https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains classList.contains() mdn]<br>
[https://developer.mozilla.org/en-US/docs/Glossary/Callback_function callbacks'=>' mdn]<br>
[https://velog.io/@tmddls91/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98 콜백함수 설명]<br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Line 188: Line 238:
<br>
<br>
'''code explained:'''
'''code explained:'''
<syntaxhighlight lang="javascript">
let matchingDiv = removedDivs.findIndex(div => div.classList.contains(findSameName));
</syntaxhighlight>
<br>
<br>
↓ now take the word out from the removedDivs array and assign it to bringBackDiv
<syntaxhighlight lang="javascript">
let bringBackDiv = removedDivs.splice(matchingDiv, 1)[0];
</syntaxhighlight>


=CSS=
=CSS=

Revision as of 13:26, 8 March 2025

Html structure


previous version 

<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





  • I think appendChild() should be a way to go. Just like how I brought the spans back with that method. But using it with properties like innerHTML, innerText, textContent, doesn’t work.
↳ throwing spaghetties on the wall approach using those 3 properties around the line did work at some point in terms of adding spaces in between my spans, but the browser rendered all my spans as [object HTMLSpanElement]. technically doesn’t work, but it’s something.
↳ so [object HTMLSpanElement] means it broke the structure of my spans and turned them into raw text within sentence.innerHTML
↳ this means the original span elements are no longer treated as elements, but instead they got converted into plain text.
↳ my spans are DOM node/elements, they should not be rendered as raw text. I need to use DOM methods again for appendchild() instead of DOM properties to control the elements directly with js.







sentence.appendChild(document.createTextNode(" "));

it works.



two innerWidth variables and "resize" eventlistener

let prevWidth = window.innerWidth;

first define 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.
});




break

Undefined butter.png



synchronizing spans and divs

added basic variables for the divs 

let sentence = document.getElementById("sentence");
let space = document.getElementById("space");

let words = Array.from(document.querySelectorAll("#sentence span"));
let figures = Array.from(document.querySelectorAll("#space div"));

let removedWords = [];
let removedDivs = [];



now adding under function removeRandom ()
with Joseph's help, 

function removeRandom () {
    if (words.length > 1) {
        let pickRandom = Math.floor(Math.random() * words.length);
        let removingWords = words.splice(pickRandom,1)[0];
        removedWords.push(removingWords);
        removingWords.remove();
        
   
        var findSameName = removingWords.classList[0].replace("word_","");
        let matchingDiv = document.querySelector("#space div." + findSameName);
        removedDivs.push(matchingDiv);
        matchingDiv.remove();
    }
}






code explained:

just like how Array.from() converts a NodeList to an array, which allowing the use of array methods,classList provides DOMToeknList, which allows the use of tokenlist methods.

var findSameName = removingWords.classList[0].replace("word_","");
↳ element.classList[0] takes the first class name out from the DOMTokenList, and then use the classList.replace() method to modify the name.



let matchingDiv = document.querySelector("#space div." + findSameName);





now adding under function removeRandom ()

function bringBackRandom () {
    if (removedWords.length > 0) {
        let pickRandom = Math.floor(Math.random() * removedWords.length);
        let bringBackWord = removedWords.splice(pickRandom, 1)[0];
        words.push(bringBackWord);
        sentence.appendChild(bringBackWord); 
        sentence.appendChild(document.createTextNode(" "));


        var findSameName = bringBackWord.classList[0].replace("word_","");
        let matchingDiv = removedDivs.findIndex(div => div.classList.contains(findSameName));
        let bringBackDiv = removedDivs.splice(matchingDiv, 1)[0];
        figures.push(bringBackDiv);
        space.appendChild(bringBackDiv);
    }
}








code explained: 

let matchingDiv = removedDivs.findIndex(div => div.classList.contains(findSameName));



↓ now take the word out from the removedDivs array and assign it to bringBackDiv 

let bringBackDiv = removedDivs.splice(matchingDiv, 1)[0];

CSS



Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Zuhui/SI26/Storybook/Code_to_work_2&oldid=290375"