teaching machines

CS 347: Lab 8 – Slideshow Continued

September 21, 2020 by . 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.


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:

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

Reference Implementation


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

  <div class="slide">
    <h1>The Good</h1>
      <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>

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

  <div class="slide" style="background-color: violet;">
    <h1>The Ugly</h1>
      <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>
  <div id="controls">
    <div id="left" class="arrow">&#x2B95;</div>
    <div id="right" class="arrow">&#x2B95;</div>



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;


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

function forward() {
  if (i < slides.length - 1) {
    i += 1;

function backward() {
  if (i > 0) {
    i -= 1;

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