<div class="container">
  <div>
    <h2>Our "Box"</h2>
    <span id="inline-example">This text will be on the same line as our box when you set Display Type to "inline" or "inline-block"</span>
    <div id="box">Some Content</div>
    <hr>
    
    

    <h2>Current values</h2>
    <button onclick="resetAll()">Reset All</button>
    <ul>
        <li>Content Width: 
        <select onchange="onChange(event)" name="width-sel">
          <option value="auto">auto (default)</option>
          <option value="400px">400px</option>
        </select>
      </li>
        <li>Content Height: 
        <select onchange="onChange(event)" name="height-sel">
          <option value="auto">auto (default)</option>
          <option value="200px">200px</option>
        </select>
      </li>
            </li>
     <li>Line Height: 
        <select onchange="onChange(event)" name="line-sel">
          <option value="auto">normal (default)</option>
          <option value="50px">50px</option>
        </select>
      </li>
      <li>Padding: 
        <select onchange="onChange(event)" name="padding-sel">
          <option value="0px">0px</option>
          <option value="20px">20px</option>
        </select>
      </li>
      <li>Border: 
        <select onchange="onChange(event)" name="border-sel">
          <option value="1px solid black">1px solid black</option>
          <option value="none">none (default)</option>
        </select>
      </li>
      <li>Margin: 
        <select onchange="onChange(event)" name="margin-sel">
          <option value="0px">0px</option>
          <option value="10px">10px</option>
        </select>
      </li>
      <li>Box Type: 
        <select onchange="onChange(event)" name="type-sel">
          <option value="content-box">content-box (default for all elements)</option>
          <option value="border-box">border-box</option>
        </select>
      </li>
      <li>Display Type: 
        <select onchange="onChange(event)" name="display-sel">
          <option value="block">block (default for a `p` element)</option>
          <option value="inline">inline</option>
          <option value="inline-block">inline-block</option>
          <option value="none">none</option>
        </select>
      </li>
    </ul>

  </div>

<h2>Box Model Calculation</h2>
    <div id="content-explanation">
      <p>The current box type is set to <strong>content-box</strong>, which means:</p>
      <ul>
        <li>Margin does not affect the box size, just the spacing around the box</li>
        <li>Total height = height + top padding + bottom padding + top border + bottom border</li>
        <li>Total width = width + left padding + right padding + left border + right border</li>
      </ul>
    </div>
    <div id="border-explanation">
      <p>The current box type is set to <strong>border-box</strong>, which means:</p>
      <ul>
        <li>Margin does not affect the box size, just the spacing around the box</li>
        <li>Total height = height</li>
        <li>Total width = width</li>
      </ul>
    </div>
 
</div>

#box {
  background-color: orange;
  border: 1px solid black;
}

#border-explanation {
  display: none;
}

hr {
  margin-top: 40px;
}

#inline-example {
  background-color: lightgreen;
  border: 1px solid black;
}

const el = document.querySelector('#box');

function onChange(e) {
  const selectId = e.target.name;
  switch (selectId) {
    case 'padding-sel':
      el.style.padding = e.target.value;
      break;
    case 'width-sel':
      el.style.width = e.target.value;
      break;
    case 'height-sel':
      el.style.height = e.target.value;
      break;
    case 'border-sel':
      el.style.border = e.target.value;
      break;
    case 'margin-sel':
      el.style.margin = e.target.value;
      break;
    case 'type-sel':
      const cb = document.querySelector('#content-explanation');
      const bb = document.querySelector('#border-explanation');
      if (e.target.value === 'content-box') {
        cb.style.display = 'block';
        bb.style.display = 'none';
      } else {
        cb.style.display = 'none';
        bb.style.display = 'block';
      }
      el.style.boxSizing = e.target.value;
      break;
    case 'display-sel':
      el.style.display = e.target.value;
      break;
    case 'line-sel':
      el.style.lineHeight = e.target.value;
      break;
  }
}

function resetAll() {
  const selectEls = document.querySelectorAll('select');
  selectEls.forEach(s => {
    s.selectedIndex = 0;
  });
  
  el.style.width = 'auto';
  el.style.height = 'auto';
  el.style.lineHeight = 'normal';
  el.style.padding = '0px';
  el.style.border = '1px solid black';
  el.style.margin = '0px';
  el.style.boxType = 'content-box';
  el.style.display = 'block';
}