{% extends "base.html" %}
{% block title %}Fonts{% endblock %}
{% block content %}
<div class="row flex-grow-1">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <h1 class="text-center">Sample fonts</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <label for="names">Names</label>
        <input class="form-control" id="names" type="text">
        <button class="btn btn-primary active" onclick="testFonts()">Test fonts</button>
        <h1 class="text-center" style="height: 100px;">
          <div id="font1" style="font-family:BFCChristmasCards; word-spacing: 10px;">Sample</div>
        </h1>
        <h1 class="text-center" style="height: 100px;">
          <div id="font2" style="font-family:ChristmasStyle; word-spacing: 10px;">Sample</div>
        </h1>
        <h1 class="text-center" style="height: 100px;">
          <div id="font3" style="font-family:Cointa; word-spacing: 10px;">Sample</div>
        </h1>
        <h1 class="text-center" style="height: 100px;">
          <div id="font4" style="font-family:Gabriola; word-spacing: 10px;">Sample</div>
        </h1>
        <h1 class="text-center" style="height: 100px;">
          <div id="font5" style="font-family:Anastasia; word-spacing: 30px;">Sample</div>
        </h1>
      </div>
    </div>
  </div>
</div>
{% endblock content %}
{% block scripts %}
<script>
  var input = document.getElementById("names");

  input.addEventListener("input", function(event) {
      testFonts();
  });

  function testFonts() {
    var text = document.getElementById("names").value;
    var font1 = document.getElementById("font1");
    var font2 = document.getElementById("font2");
    var font3 = document.getElementById("font3");
    var font4 = document.getElementById("font4");
    var font5 = document.getElementById("font5");

    font1.innerHTML = text;
    font2.innerHTML = text;
    font3.innerHTML = text;
    font4.innerHTML = text;
    font5.innerHTML = text;
  }
</script>
{% endblock scripts %}