uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load static %}

{% block interactive_html %}
  <div class="d-flex justify-content-center" id="interactive-awful-calculator">
    <!-- Good Calculator -->
    <div class="col col-12 col-md-5 calculator" id="calculator-good">
      <!-- Row 1 -->
      <div class="d-flex">
          <div id="good-calculator-output" class="calculator-input"></div>
          <button type="button" class="btn btn-lg btn-primary">C</button>
      </div>

      <!-- Row 2 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg btn-primary">7</button>
          <button type="button" class="btn btn-lg btn-primary">8</button>
          <button type="button" class="btn btn-lg btn-primary">9</button>
          <button type="button" class="btn btn-lg btn-primary">&divide;</button>
      </div>

      <!-- Row 3 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg btn-primary">4</button>
          <button type="button" class="btn btn-lg btn-primary">5</button>
          <button type="button" class="btn btn-lg btn-primary">6</button>
          <button type="button" class="btn btn-lg btn-primary">&times;</button>
      </div>

      <!-- Row 4 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg btn-primary">1</button>
          <button type="button" class="btn btn-lg btn-primary">2</button>
          <button type="button" class="btn btn-lg btn-primary">3</button>
          <button type="button" class="btn btn-lg btn-primary">+</button>
      </div>

      <!-- Row 5 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg btn-primary">.</button>
          <button type="button" class="btn btn-lg btn-primary">0</button>
          <button type="button" class="btn btn-lg btn-primary">=</button>
          <button type="button" class="btn btn-lg btn-primary">-</button>
      </div>
    </div>

    <!-- Awful Calculator -->
    <div class="col col-12 col-md-5 calculator" id="calculator-awful">
      <!-- Row 1 -->
      <div class="d-flex">
          <div id="awful-calculator-output" class="calculator-input"></div>
          <button type="button" class="btn btn-lg">-</button>
      </div>

      <!-- Row 2 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg">7</button>
          <button type="button" class="btn btn-lg">8</button>
          <button type="button" class="btn btn-lg">9</button>
          <button type="button" class="btn btn-lg">&divide;</button>
      </div>

      <!-- Row 3 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg">4</button>
          <button type="button" class="btn btn-lg">5</button>
          <button type="button" class="btn btn-lg">6</button>
          <button type="button" class="btn btn-lg">&times;</button>
      </div>

      <!-- Row 4 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg">1</button>
          <button type="button" class="btn btn-lg">2</button>
          <button type="button" class="btn btn-lg">3</button>
          <button type="button" class="btn btn-lg">+</button>
      </div>

      <!-- Row 5 -->
      <div class="d-flex">
          <button type="button" class="btn btn-lg">.</button>
          <button type="button" class="btn btn-lg">0</button>
          <button type="button" class="btn btn-lg">=</button>
          <button type="button" class="btn btn-lg">C</button>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

{% block interactive_css %}
  <link rel="stylesheet" href="{% static 'interactives/awful-calculator/css/awful-calculator.css' %}">
{% endblock interactive_css %}

{% block interactive_js %}
  <script type="text/javascript" src="{% static 'interactives/awful-calculator/js/awful-calculator.js' %}"></script>
{% endblock interactive_js %}