CSS clamp() function

index.html

<div class="parent">
  <div class="line"></div>
  <p>Viewport Width: <span class="viewport"></span></p>
  <div class="line"></div>
</div>

<p>
  <code class="value"
    >width: clamp(<span class="max">250px</span>, <span class="pref">50%</span>,
    <span class="min">400px</span>);</code
  >
</p>

<div class="rectangle">
  <p>Box Width: <span class="box"></span></p>
</div>

script.js

const updateValues = () => {
    let pageWidth = window.innerWidth;
    let rectWidth = document.querySelector('.rectangle').clientWidth;

    document.querySelector('.viewport').innerText = pageWidth + 'px';
    document.querySelector('.box').innerText = rectWidth + 'px';

    checkWidth(rectWidth);
}

const checkWidth = (rectWidth) => {
    const maxVal = parseInt(document.querySelector('.max').innerText, 10);
    const minVal = parseInt(document.querySelector('.min').innerText, 10);

    if (rectWidth === maxVal) {
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.max').classList.add('highlight');
    } else if (rectWidth === minVal) {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.pref').classList.remove('highlight');
        document.querySelector('.min').classList.add('highlight');
    } else {
        document.querySelector('.max').classList.remove('highlight');
        document.querySelector('.min').classList.remove('highlight');
        document.querySelector('.pref').classList.add('highlight');
    }
}

updateValues();
window.onresize = updateValues;

style.css

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  font-size: 20px;
  background-color: rgb(184, 206, 226);
  display: grid;
  place-content: center;
  text-align: center;
}

.value {
  border-radius: 0px;
  padding: 0.5em 0.25em;
}

.rectangle {
  background-color: rgb(171, 208, 222);
  height: 180px;
  width: clamp(250px, 50%, 400px);
  display: grid;
  place-content: center;
  justify-self: center;
  border: 2px solid rgb(85, 85, 233);
}

.box {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.viewport {
  background: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
  font-family: "Gill Sans Extrabold", sans-serif;
  padding: 0.1em 0.25em;
}

.highlight {
  background-color: rgb(222, 121, 87);
  border-bottom: 3px dashed blue;
}

.parent {
  font-size: 20px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background-color: blue;
}

.parent p {
  background: white;
  border: 2px solid blue;
  padding: 1rem;
}