Final Web2 Project- Storyboard (Process)



Dying insde.. *thumbs up*

My HTML & CSS plans



For my HTML I added links to head back to my web 2 page, a link to the sketch of the storyboard website and a link to the process page of my storyboard site all in a footer.

In the HTML I added an article with the ID="board" so that in my CSS all of my images can respond to the "board" ID

id="board"

For each img in my HTML, I added a figcaption so that I can add a small description for each board. In this case I wrote down the diaolgue of the charaters.

Example of one of the descriptions

figcaption Storyboarded by Yousef
Story from Always Sunny in Philadelphia but with Mario characters figcaption


In my CSS I used this code to make all the storyboard frames fit equally in size because before they were all unequal.

#board figure img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }

My JS Plan



My goal for this project is to create a slider for the many frames form my storyboard with arrow buttons to click to go farwards or backwards. I need to add a variable to keep track of which slide it is currently on. This starts at 0, which represents the first slide:

let slideIndex = 0;

I am using the `translateX` a CSS property to move the slider horizontally. Here, I am translating it by its width, which makes it to show one slide at a time, in a smooth pace.

Next, I must define event listeners for the previous and next buttons. When someone clicks on one of these buttons, I want to increment or decrement the `goToFirstSlide` variable, and then call the `SlideNext` function to update the position of the slider:

function goToFirstSlide(event) { if (slideIndex > 0 ) { slideIndex--;; } else { slideIndex = 0; } let boardWidth = board.offsetWidth; board.style.transform = `translateX(${-slideIndex * boardWidth}px)`; displaySlideInfo(); }

function slideNext(event) { if (slideIndex < frame.length -1 ) { slideIndex++;; } else { slideIndex = 0; } let boardWidth = board.offsetWidth; board.style.transform = `translateX(${-slideIndex * boardWidth}px)`; displaySlideInfo(); } function displaySlideInfo() { info.innerHTML = `board ${Math.abs(slideIndex) + 1} of ${frame.length}`; }

I am using an `if` statement to check whether it has reached the beginning or end of the slider. If it has reached the end and you decided to click on the last frame, then it will wrap around to the other end to create a loop.



Feedback from classmates

My classmates think my storyboard site looks pretty alright. They seem to enjoy the illustrations and the way each frame flows to the next. Not the most crazy looking webside but hey, i'll take it since I honestly have no idea what I am doing most of the time.