nycJSorg/angular-presentation

<slide-deck slideShortcuts slidesRouting slides-tracking>
  <div *slide id="start">
    <p>
      <b>Stack</b> is a data structure, serving as a collection. Here's a stack
      of fruit:
    </p>

    <slides-simple-stack value="🍏🍏🍏🍏🍏🍓"></slides-simple-stack>

    <p>All operations are possible only with the last element of the stack.</p>
  </div>

  <div *slide id="pop">
    <p>First operation is called <b>pop</b>, it removes the last element.</p>
    <slides-stack-game [level]="levels.pop"></slides-stack-game>
  </div>

  <div *slide id="push">
    <p>
      The other operation is <b>push</b>. It adds an element on top of the
      stack.
    </p>
    <slides-stack-game [level]="levels.push"></slides-stack-game>
  </div>

  <div *slide id="peek">
    <p>
      Some implementations also have a <b>peek</b> operation. It tells you what
      top element on the stack is. You can try it below:
    </p>
    <slides-simple-stack value="🍏🍋"></slides-simple-stack>
    <div class="button-wrapper">
      <slides-stack-function-button
        (click)="itIsALemon = true"
        [func]="{ name: 'peek' }"
      ></slides-stack-function-button>
    </div>
    <div *ngIf="itIsALemon">Congrats! It is a 🍋</div>
  </div>

  <div *slide id="practice">
    <p>Let's practice!</p>
    <p>
      Use the commands you know already to get a stack of:
      <slides-simple-stack value="🍓🍋"></slides-simple-stack>
    </p>
    <slides-stack-game [level]="levels.together"></slides-stack-game>
  </div>

  <div *slide id="test">
    <slides-stack-test></slides-stack-test>
  </div>

  <div *slide id="congrats">
    <h2>Congrats! Now you are a stack expert!</h2>
    <p>
      But why are stacks important? And how can I use them in a language like
      asm
    </p>
  </div>

  <div *slide id="stack-machines">
    <p>Let's learn stack machine.</p>
    <p>
      This is one of the fundamental principles used in JVM Java Byte Code,
      WebAssembly byte code
    </p>
  </div>

  <div *slide id="instructions">
    <p>
      Stack machine offers various intructions that can pop and then push
      multiple element on the stack
    </p>
    <p>
      For example (🌲🍏)=>🍍 takes two elements from the stack (Pine and Apple)
      and pushes a 🍍 back
    </p>
  </div>

  <div *slide id="lemonade">
    <p>Now use the instructions below to prepare a lemonade drink:</p>
    <slides-stack-game [level]="levels.lemonade"></slides-stack-game>
  </div>

  <div *slide id="lol">
    <p>Produce a dog</p>
    <slides-stack-game [level]="levels.level1"></slides-stack-game>
  </div>

  <div *slide id="list">
    <slides-stack-game></slides-stack-game>
  </div>
</slide-deck>