UI

by yshrkn

HTML

<div class="component">Radius: 0 <input type="range" min="0" max="100" value="50" id="radiusChanger"> 100</div>
<div class="component">Color: <input type="color" value="#000000" id="colorChanger"></div>
<div id="ball"></div>

CSS

.component { display: flex; }

#ball {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: black;
  transform: translate(-50%, -50%);
}

JavaScript

/**
 * #ballの半径(radius)とカラー(color)をUIでリアルタイムに変更できるようにしてください。
 */
 
var radiusChanger = document.getElementById('radiusChanger');
var colorChanger = document.getElementById('colorChanger');
var ball = document.getElementById('ball');

//イベント登録
radiusChanger.addEventListener('mousemove', function() {
	changeStyle(ball, "borderRadius", this.value);
});
radiusChanger.addEventListener('mouseup', function() {
	changeStyle(ball, "borderRadius", this.value);
});
colorChanger.addEventListener('change', function() {
	changeStyle(ball, "backgroundColor", this.value);
});

//CSS切り替え
function changeStyle(elm, prop, value) {
  switch (prop) {
  	case "borderRadius":
    	elm.style.borderRadius = value + "px";
      break;
  	case "backgroundColor":
    	elm.style.backgroundColor = value;
      break;
  }
}