JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<h1>Font Simulator</h1>
<div class="font-simulator">
  
  <div class="slider-group">
    <div class="group">
      <div class="item">
        <input type="text" value="가나다 1234 abcd @#$%">
      </div>
    </div>
    <div class="group size">
      <p>Font Size <span class="num">12</span></p>
      <div class="item">
        <input type="range" value="5" min="1" max="10" class="range" step>
      </div>
    </div>
    <div class="group letter">
      <p>Letter Spacing <span class="num">0</span></p>
      <div class="item">
        <input type="range" value="0" min="0" max="10" class="range">
      </div>
    </div>
    <div class="group line">
      <p>Line Spacing <span class="num">1</span></p>
      <div class="item">
        <input type="range" value="1.2" min="1.0" max="2.0" class="range" step="0.1">
      </div>
    </div>
  </div>
  
  <div class="simulator-modul">
    <ul>
      <li class="default" id="result">
        <span class="tit">Default</span>
        <p>
        가나다 1234 abcd @#$%
        </p>
      </li>
      <li class="simulator letter-spacing">
        <span class="tit">Preview(letter-spacing)</span>
        <p>
        가나다 1234 abcd @#$%
        </p>
      </li>
      <li class="default">
        <span class="tit">Default</span>
        <p>
        가나다 1234 abcd @#$% <br>
        가나다 1234 abcd @#$% <br>
        가나다 1234 abcd @#$% <br>
        </p>
      </li>
      <li class="simulator line-spacing">
        <span class="tit">Preview(line-height)</span>
        <p>
        가나다 1234 abcd @#$% <br>
        가나다 1234 abcd @#$% <br>
        가나다 1234 abcd @#$% <br>
        </p>
      </li>
    </ul>
  </div>
</div>

CSS

body {
  font-family: Verdana, sans-serif;
}
.font-simulator {
  margin: 10px;
}
h1 {
  font-size: 16px;
  color: #fff;
  padding: 10px;
  background-color: #3700B3;
}
.slider-group {
  padding: 10px;
  border: 3px solid #eee;
}
.group {
  margin: 5px 0 10px;
}
.group input {
  width: 100%;
  height: 30px;
  font-size: 14px;
}

.simulator-modul li {
  margin: 10px 0;
}
.simulator-modul li .tit {
  display: block;
}
.simulator-modul li p {
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: #000;
}

.range {
  width: 100%;
  -webkit-appearance: none;
  vertical-align: middle;
  outline: none;
  border: none;
  padding: 0;
  background: none;
}

.range::-webkit-slider-runnable-track {
  background-color: #d7dbdd;
  height: 6px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  border-radius: 100%;
  background-color: #606670;
  height: 18px;
  width: 18px;
  margin-top: -7px;
}

JavaScript

var elem = document.querySelector('.size input');
var letter_elem = document.querySelector('.letter input');
var line_elem = document.querySelector('.line input');

function init(){
	var target = $('.simulator-modul li p');
  var target2 = $('.simulator-modul li.letter-spacing p');
  var target3 = $('.simulator-modul li.line-spacing p');
  elem2 = Number(elem.value);
  letter_elem2 = Number(letter_elem.value);
  line_elem2 = Number(line_elem.value);
  target.css({
  	'font-size': 11 + elem2 + 'px'
  })
  target2.css({
    'letter-spacing': letter_elem2 + 'px'
  });
  target3.css({
    'line-height': line_elem2
  });
  
}

init();

var rangeValue = function(){
	
  var newValue = Number(elem.value);
  var target = $('.simulator-modul li p');
  var size_num = $('.size .num');
  target.css({
  	'font-size': 11 + newValue + 'px'
  });
  size_num.html(11 + newValue);
}

var letterValue = function(){
	
  //var newValue = elem.value;
  var letter = letter_elem.value;
  var target = $('.simulator-modul li.letter-spacing p');
  var letter_num = $('.letter .num');
  target.css({
    'letter-spacing': letter + 'px'
  });
  letter_num.html(letter);
}

var lineValue = function(){
	
  //var newValue = elem.value;
  var line = line_elem.value;
  var target = $('.simulator-modul li.line-spacing p');
  var line_num = $('.line .num');
  target.css({
    'line-height': line
  });
  line_num.html(line);
}

elem.addEventListener("input", rangeValue);
letter_elem.addEventListener("input", letterValue);
line_elem.addEventListener("input", lineValue);