<h1>10,000 - 10,000,000 사이의 숫자를 입력해보세요.</h1>

<div class='box'>
  <h2>for (let i = 0; i < 입력값; i++)</h2>
  <h3>수행시간: 0.00 S</h3>
</div>

  <input type="number" class="input" min="10000" value="10000" max="10000000" onInput="rangeChk()">

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  outline: none;
  box-sizing: border-box;  
  font-family: Pretendard;
}

h1 {
  font-size: 1.4rem;
}

h2 {
  font-weight: normal;
}

input {
  width: 400px;
  height: 50px;
  padding-left: 1rem;
  font-size: 1.2rem;
  border-radius: 1rem;
  border: 2px solid #777;
  background: #f8f9fd;
}

button {
  height: 50px;
  background: #217af4;
  color: #fff;
  border: none;
}

.box {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

h3 {
  color: #217af4;
  margin-left: 3rem;
}

const chkTime = (max) => {
  const start = new Date();
  
  let j = 0;
  
  for (let i = 0; i < max; i++) {
    j += i + i;
  }
  
  const end = new Date(); 
  
  document.querySelector("h2").outerHTML = `<h2>for (let i = 0; i < ${max}; i++)</h2>`;
  
  document.querySelector("h3").innerHTML = `수행시간: ${(end - start) / 1000} S`;
}

const rangeChk = () => {
  const value = document.querySelector(".input").value;
  
  const max = value < 10000 ? 10000 : (10000000 < value ? 10000000 : value);
  
  chkTime(max);
  
  document.querySelector(".input").value = max;
}