» CS 347: Lab 7 – Slideshow

CS 347: Lab 7 – Slideshow

September 17, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in a handful of exercises, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Task

Recreate the following page using an internal stylesheet:

The page is a slideshow, a primitive replacement of Powerpoint. Slides are advanced using the arrows at the bottom right. Follow these guidelines in your solution:

Do not use Flexbox anywhere.
Each slide is a div positioned to fill the viewport.
Before the presentation has begun, each slide but the first rests to the right of the browser window.
When a slide is currently being shown, it has the class current. Slides with this class have no offset.
When a slide has been advanced past, it has the class past. Slides with this class rest to the left of the browser window.
Dynamically add and remove classes using an element’s classList.
Retrieve the list of slides in JavaScript using document.querySelector.
Use ⮕ for a right arrow. There is no corresponding left arrow. But maybe there’s a way to turn a right arrow into a left arrow?
When the right arrow is clicked, the slides advance forward. When the left arrow is clicked, the slides retreat backward. Do not advance beyond the last slide or retreat beyond the first slide.
Smoothly highlight the hovered arrow.

Screen sharer, when your group is done or when time is up, submit your group’s solution on Crowdsource.

Peer Review

After you have finished and submitted the exercise, transition into your first peer review for project 1. The following things should happen:

One individual volunteers to be a notetaker, summarizing each individual’s situation in 3-5 sentences.
A different individual volunteers to be a timer. This person ensures that everyone has a full 5 minutes to share before the end of class.
Each group member shares for 5 minutes on their progress. In this first meeting, topics should include a description of the client, the client’s needs, and sketches of the planned user interface. Each member also shares to-do items for next week. Identify the most intimidating tasks.
Peers critique each other’s work. Constructively shape and challenge each other as you would if you were going to be employed by the same company for your entire careers.
The notetaker submits the group’s notes on a direct message in Slack. Address the direct message to all group members and your instructor. Your instructor will read this report to stay informed and to grant credit for this week’s review.

Reference Implementation

…