» CS 347: Lab 8 – Slideshow Continued

CS 347: Lab 8 – Slideshow Continued

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

Welcome to lab. This is a continuation of lab 7. We will retain your groups from last time and complete the slideshow exercise.

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. Use position to achieve this.
Before the presentation has begun, each slide but the first rests to the right of the browser window. Use transform to achieve this.
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.querySelectorAll.
Track the index of the current slide using a global variable. Declare it with something like let i = ....
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 allow the user to 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.

Reference Implementation

slides.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Slides</title>
  <link rel="stylesheet" href="slides.css">
  <script defer src="slides.js"></script>
</head>
<body>



  <div class="slide">
    <h1>The Good</h1>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Qui ad dolor cumque perferendis.</li>
      <li>Doloremque enim ea quia? Consequuntur!</li>
      <li>Eligendi error odit quibusdam voluptates!</li>
    </ul>
  </div>

  <div class="slide" style="background-color: rebeccapurple;">
    <h1>The Bad</h1>
    <ul>
      <li>Lorem ipsum dolor sit amet consectetur.</li>
      <li>Sapiente iste corporis ut sed ex!</li>
      <li>Quaerat explicabo sapiente officiis eaque vitae.</li>
    </ul>
  </div>

  <div class="slide" style="background-color: violet;">
    <h1>The Ugly</h1>
    <ul>
      <li>Lorem ipsum dolor sit.</li>
      <li>Ab ad dicta quos.</li>
      <li>Numquam error voluptatem rem?</li>
      <li>Iure suscipit atque magnam!</li>
      <li>Quidem quas consequatur fuga?</li>
    </ul>
  </div>
  
  <div id="controls">
    <div id="left" class="arrow">&#x2B95;</div>
    <div id="right" class="arrow">&#x2B95;</div>
  </div>

</body>
</html>

slides.css

body {
  margin: 0;
  font-size: 4em;
  font-family: sans-serif;
}

.slide {
  background-color: cadetblue;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 30px;
  transition: transform 2s ease-in-out;
  box-sizing: border-box;
}

.slide:not(:first-child) {
  transform: translateX(100%);
}

.slide.current {
  transform: unset;
}

.slide.past {
  transform: translateX(-100%);
}

#left {
  transform: rotate(180deg);
}

.arrow {
  color: lightslategray;
  transition: color 0.2s linear;
  cursor: pointer;
  user-select: none;
}

.arrow:hover {
  color: black;
}

#controls {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  margin: 0 20px 10px 0;
}

slides.js

const slides = document.querySelectorAll('.slide');
let i = 0;

function forward() {
  if (i < slides.length - 1) {
    slides[i].classList.remove('current');
    slides[i].classList.add('past');
    i += 1;
    slides[i].classList.add('current');
  }
}

function backward() {
  if (i > 0) {
    slides[i].classList.remove('current');
    i -= 1;
    slides[i].classList.remove('past');
    slides[i].classList.add('current');
  }
}

document.getElementById('left').addEventListener('click', backward);
document.getElementById('right').addEventListener('click', forward);