User:Zuhui/SI26/Storybook/Code to work

drawing html/css structure

the main prompter / the words inside

html

 <p id="sentence">
   <span class="do">do</span>
   <span class="tigers">tigers</span>
   <span class="melt">melt</span>
   <span class="like">like</span>
   <span class="butter">butter</span>
   <span class="in">in</span>
   <span class="the">the</span>
   <span class="forest">forest</span>
   <span class="?">?</span>
 </p>

css

#sentence {
    position: fixed;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    z-index: 999999999;
    text-align: center;
    font-size: 29px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color:rgb(0, 0, 0);
    white-space: nowrap;
}

stage

html

<div id="stage">
//all the children divs that goes onto the stage//
</div>

css

#stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: -99999;
}

what goes onto the stage

html
using both data-* selector and class to target better in css and javascript

<div data-space="forest" class="forest"> //or, data-object="forest" for the occasion when forest becomes an object//
  <div data-object="celestial" class="celestial"></div>
  <div data-object="tigers" class="tigers"></div>
  <div data-object="butter" class="butter"></div>
  <div data-effect="melt" class="melt"></div>
</div>

css data-*selector

[data-space="forest"] {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: -99998;
    background-color: green;
}
[data-object="forest"] {
    width: 300px;
    height: 300px;
    margin: auto;
    /*margin-top: 50%;*/
    background-color: green;
}
[data-object="celestial"]{

}

[data-object="tiger"]{

}

[data-object="butter"]{

}

[data-effect="melt"]{

}

hide

css .hide[data-*] for javascript to target

.hide[data-space]{
  background-color: transparent;
  background-image: none;
}
.hide[data-object]{
  display:none;
}
.hide[data-effect]{

}

javascript part 1

first part of javascript should allow the words in the sentence to remove and restore themselves in correspondence to the shifting browser width.

1. I need two repositories(variables) to store the words, one repository that is shown on the screen, and the other repository to store the removed words from the screen

↳ store all span element in a variable (I'm using span under p tag only for the words).

document.querySelectorAll()

const words = document.querySelectorAll("span");

↳ apparently, "The querySelectorAll() method returns a static NodeList." it may look like an array but it's not an array, can't use array methods if I keep it like this.

Although NodeList is not an Array, it is possible to iterate over it with forEach(). It can also be converted to a real Array using Array.from().

nodelist mdn

array mdn
array w3c
array methods w3c

const words = Array.from(document.querySelectorAll("span"));

2. make another variable to store the (randomly)removed words.

↳ so that I can bring them back(randomly) whenever the screen size increases.

let removedWords = [];

3. make javascript aware of the browser screen size changes, so the words respond accodringly.

↳ the words should disappear when the screen size decreases and reappear when it increases.

↳ look up window.innerWidth, I'm only going to decrease and increase the width.

↳ need a variable to save the innerWidth property

↳ look up "resize" function in window.addEventListner()

↳ need both prevWidth and currWidth variables for javascript to calculate screen size difference(widthChange).

↳ also look up Math.- methods. need to calculate the width difference.

↳ to math method to function, I need the innerWidth(prevWidth, currWidth) output into text.

window.innerWidth
(checkout Demo code on the page, super nice example with "resize"eventlistener)
"innerWidth returns the interior width of the window in pixels (that is, the width of the window's layout viewport)."
element.clientWidth, (interesting)

window.addEventListener()
(look for more syntax examples especially the ones using true/fase or if/else)
"resize" example
mdn onresize (much simpler)

mdn textContent
w3c textContent
Math.*
Math.absolute
("The math. abs() method accepts a single integer data type parameter
and returns the number's absolute value, or positive value, without using the negative sign.")

three ways to resize event

window.onresize = (peekaBoo) => {

};

/////////////////////or//////////////////////

window.addEventListener("resize", () => {

})

/////////////////////or//////////////////////

window.addEventListener("resize", peekaBoo);

function peekaBoo () {

}

4. make two different functions, one for removing random words as the screen size decreases, and the other for bringing back random words as the screen size increases. it has to work with resize window.eventListener.

↳ when removing words, cap the minimal amount of word to at least 1, so the screen doesn't remove all the words.

pop() w3c
push() w3c
Math.random() w3c

function removeRandomWord () {
    if (words.length > 1) {
        let remove = words.pop();
        removedWords.push(remove);
    }
}
function bringbackRandomWord () {
        let bringBack = removedWords.pop();
        words.push(bringBack);
}

↳ before even thinking about random math functions, this doesn't work.

↳ actually, it was working but it missed return value;. without return, it doesn't save anything. that's why I couldn't see the removed words on the console.

fixed version with math.random

function removeRandomWord () {
    if (words.length > 1) {
        let pickRandom = Math.floor(Math.random() * words.length);
        let remove = words.pop(pickRandom);
        removedWords.push(remove);
        return remove;
    }
}
function bringbackRandomWord () {
        let pickRandom = Math.floor(Math.random() * removedWords.length);
        let bringBack = removedWords.pop(pickRandom);
        words.push(bringBack);
        return bringBack;
}

↳ now works on console well. but the math.random doesn't work, either it doesn't effect the html/css. i can see the words are being removed and brought back on the console but the span elements on html are not moving at all.

↳ math.random didn't work because pop() and push() already has rules in term of ordering values in array.
→ 'add to list javascript array manipulation'
"splice() allows you to add or remove items from any position."

splice mdn

function removeRandomWord () {
    if (words.length > 1) {
        let pickRandom = Math.floor(Math.random() * words.length);
        let remove = words.splice(pickRandom,1);
        removedWords.push(remove);
        return remove;
    }
}
function bringbackRandomWord () {
        let pickRandom = Math.floor(Math.random() * removedWords.length);
        let bringBack = removedWords.splice(pickRandom,1);
        words.push(bringBack);
        return bringBack;
}

↳ random method works with splice!!! now need to figure out how to remove the html/css element as well

resource and reference

Javascript

• Classlist-add,remove,replace,toggle
• Math.random()
• pop()
• push()

Targeting

• html data-* attribute
• css selectors
• css pseudo classes
• css pseudo elements