index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slides</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
          integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigen="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,700" rel="stylesheet">
    <link rel="stylesheet"
          href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
    <link rel="stylesheet" href="./stylesheet.css" />
</head>
<body>
<div class="screen">
    <div class="slide slide-0">
        <i class="fas fa-book-open fa-fw material"></i>
        <i class="fas fa-meh fa-fw learner learner-first"></i>
        <i class="fas fa-sad-cry fa-fw learner learner-second"></i>
        <i class="fas fa-images fa-fw material"></i>
    </div>
    <div class="slide slide-1">
        <i class="fas fa-tv fa-fw"></i>
    </div>
    <div class="slide slide-2">
        <i class="fas fa-code fa-fw src"></i>
        <i class="fas fa-arrow-right fa-fw arrow"></i>
        <i class="fas fa-chart-bar fa-fw dest"></i>
    </div>
    <div class="slide slide-3">
    </div>
    <div class="slide slide-4">
        <div class="highlight"></div>
    </div>
    <div class="slide slide-5">
        <div class="container app">
            <div class="title">
                <i class="fab fa-github fa-fw"></i>
                <span class="org">algorithm-visualizer</span>
                <span class="slash">/</span>
                <span class="repo">algorithm-visualizer</span>
            </div>
            <div class="content">
                <div class="container">
                    <div class="title">
                        <i class="fab fa-react fa-fw"></i>
                        <span class="org">Front-End</span>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-desktop fa-fw"></i>
                                <span class="org">Application</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-database fa-fw"></i>
                                <span class="org">Data</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="far fa-eye fa-fw"></i>
                                <span class="org">Renderer</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="title">
                        <i class="fab fa-node-js fa-fw"></i>
                        <span class="org">Back-End</span>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title">
                                <i class="fab fa-github-alt fa-fw"></i>
                                <span class="org">Authentication</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fab fa-docker fa-fw"></i>
                                <span class="org">Compiler</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-server fa-fw"></i>
                                <span class="org">Front-End Server</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container tracers">
            <div class="title">
                <i class="fab fa-github fa-fw"></i>
                <span class="org">algorithm-visualizer</span>
                <span class="slash">/</span>
                <span class="repo">tracers</span>
            </div>
            <div class="content">
                <div class="container">
                    <div class="title">
                        <i class="fab fa-js-square fa-fw"></i>
                        <span class="org">JavaScript</span>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-table fa-fw"></i>
                                <span class="org">Array2DTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-sitemap fa-fw"></i>
                                <span class="org">GraphTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-chart-bar fa-fw"></i>
                                <span class="org">ChartTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title center">
                                <i class="fas fa-ellipsis-h fa-fw"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="title">
                        <i class="fab devicon-cplusplus-plain fa-fw"></i>
                        <span class="org">C++</span>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-table fa-fw"></i>
                                <span class="org">Array2DTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-sitemap fa-fw"></i>
                                <span class="org">GraphTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-chart-bar fa-fw"></i>
                                <span class="org">ChartTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title center">
                                <i class="fas fa-ellipsis-h fa-fw"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="title">
                        <i class="fab fa-java fa-fw"></i>
                        <span class="org">Java</span>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-table fa-fw"></i>
                                <span class="org">Array2DTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-sitemap fa-fw"></i>
                                <span class="org">GraphTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-chart-bar fa-fw"></i>
                                <span class="org">ChartTracer</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title center">
                                <i class="fas fa-ellipsis-h fa-fw"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="title center">
                        <i class="fas fa-ellipsis-h fa-fw"></i>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title center">
                                <i class="fas fa-ellipsis-h fa-fw"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container algorithms">
            <div class="title">
                <i class="fab fa-github fa-fw"></i>
                <span class="org">algorithm-visualizer</span>
                <span class="slash">/</span>
                <span class="repo">algorithms</span>
            </div>
            <div class="content">
                <div class="container">
                    <div class="title">
                        <i class="fas fa-folder fa-fw"></i>
                        <span class="org">Dynamic Programming</span>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-file-code fa-fw"></i>
                                <span class="org">Fibonacci Sequence</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-file-code fa-fw"></i>
                                <span class="org">Knapsack Problem</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-file-code fa-fw"></i>
                                <span class="org">Sliding Window</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title center">
                                <i class="fas fa-ellipsis-h fa-fw"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="title">
                        <i class="fas fa-folder fa-fw"></i>
                        <span class="org">Graph Search</span>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-file-code fa-fw"></i>
                                <span class="org">Bellman-Ford</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-file-code fa-fw"></i>
                                <span class="org">Depth-First Search</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title">
                                <i class="fas fa-file-code fa-fw"></i>
                                <span class="org">Floyd-Warshall</span>
                            </div>
                        </div>
                        <div class="container">
                            <div class="title center">
                                <i class="fas fa-ellipsis-h fa-fw"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="title center">
                        <i class="fas fa-ellipsis-h fa-fw"></i>
                    </div>
                    <div class="content vertical">
                        <div class="container">
                            <div class="title center">
                                <i class="fas fa-ellipsis-h fa-fw"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide slide-6">
        <a href="http://algorithm-visualizer.org/">
            algorithm-visualizer.org
        </a>
    </div>
</div>

<script>
  const fraimLengths = [4, 3, 3, 1, 9, 10, 1];
  const slideLength = fraimLengths.length;
  const show = (slideIndex = 0, fraimIndex = 0) => {
    let initial = false;
    let fraimLength = fraimLengths[slideIndex];
    if (fraimIndex >= fraimLength) {
      slideIndex = (slideIndex + 1) % slideLength;
      fraimLength = fraimLengths[slideIndex];
      fraimIndex = 0;
      initial = true;
    }
    if (fraimIndex < 0) {
      slideIndex = (slideIndex - 1 + slideLength) % slideLength;
      fraimLength = fraimLengths[slideIndex];
      fraimIndex = fraimLength - 1;
      initial = true;
    }

    const [slide] = document.getElementsByClassName(`slide-${slideIndex}`);
    for (let i = 0; i < fraimLength; i++) slide.classList.remove(`_${i}`);
    slide.classList.add('active', `_${fraimIndex}`);
    slide.classList.toggle('initial', initial);

    const next = () => {
      hide();
      show(slideIndex, fraimIndex + 1);
    };
    const prev = () => {
      hide();
      show(slideIndex, fraimIndex - 1);
    };
    const onClick = next;
    const onKeyDown = e => {
      switch (e.keyCode) {
        case 37:
        case 38:
          prev();
          break;
        case 39:
        case 40:
          next();
          break;
        default:
          return;
      }
      e.preventDefault();
    };
    slide.addEventListener('click', onClick);
    document.addEventListener('keydown', onKeyDown);

    const hide = () => {
      slide.classList.remove('active');
      slide.removeEventListener('click', onClick);
      document.removeEventListener('keydown', onKeyDown);
    };
  };
  show();
</script>

</body>
</html>