madeline-s
3/30/2017 - 2:32 PM

Font Resizer (ADA)

Font Resizer (ADA)

var $resized_elements = $(".content");
$resized_elements.each(function() {
  var $this = $(this);
  $this.data(".reset-font", $this.css("font-size"));
});
$(".increase-font").click(function() {
  change_font_size(1);
});
$(".decrease-font").click(function() {
  change_font_size(-1);
});
$(".reset-font").click(function() {
  $resized_elements.each(function() {
    var $this = $(this);
    $this.css("font-size", $this.data(".reset-font"));
    var size = $($this).css("font-size");
    $(".current-font-size").html(size);
    // TODO: Duplication from lines 28-29
  });
});

function change_font_size(direction) {
  $resized_elements.each(function() {
    var $this = $(this);
    $this.css("font-size", parseInt($this.css("font-size")) + direction);
    var size = $($this).css("font-size");
    $(".current-font-size").html(size);
  });
}
<main id="app">
  <div class="container">
    <!-- TODO: Change from anchors to buttons -->
    <section class="resize-bar">
      <button class="increase-font">A+</button>
      <button class="decrease-font">A-</button>
      <button class="reset-font">Reset</button>
    </section>
    <section class="content">
      <h1> Text resizer </h1>
      <p> Hello. I am a paragraph at <span class="current-font-size">16px</span></p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non odio orci. Vivamus commodo aliquam nunc quis porta. Mauris ut ex tincidunt ipsum fermentum sodales at vel mi. Nullam non rutrum sem, pharetra eleifend urna. Sed gravida rutrum
        metus, non varius massa aliquet at. Duis dapibus accumsan lacus id cursus.</p>
  </div>
  </div>
</main>
.resize-bar {
  display: block;
  float: right;
}