Javascript - Is there a way I can write my js code in fewer lines to make it cleaner?

Ayodeji
November 6, 2023
321 views
0 votes
2 Answers

I’m trying to create a border radius reviewer where the border radius of the four sides of a rectangle changes, based on the values entered into the four text boxes linked to each edge. This is my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border-radius previewer</title>
  <style>
    body,
    .outer-square {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .inner-square {
      border: 1px solid #000;
      width: 400px;
      height: 200px;
      background-color: rgb(255, 255, 255);
    }
    
    .outer-square {
      border: 1px solid #000000;
      width: 500px;
      height: 300px;
      background-color: rgb(211, 200, 200);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-top: 100px;
    }
    
    input {
      width: 10px;
    }
    
    p {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div class="outer-square" id="outer-square">
    <div class="inner-square" id="inner-square">
      <p id="top-left-output"></p>
      <p id="top-right-output"></p>
      <p id="bottom-left-output"></p>
      <p id="bottom-right-output"></p>
    </div>
  </div>
  <input type="text" id="top-left-border-radius" value="0">
  <input type="text" id="top-right-border-radius" value="0">
  <input type="text" id="bottom-left-border-radius" value="0">
  <input type="text" id="bottom-right-border-radius" value="0">
  <script>
    const innerSquare = document.getElementById('inner-square')
    const outerSquare = document.getElementById('outer-square')

    //Inputs
    const topLeftInput = document.getElementById('top-left-border-radius')
    const topRightInput = document.getElementById('top-right-border-radius')
    const bottomLeftInput = document.getElementById('bottom-left-border-radius')
    const bottomRightInput = document.getElementById('bottom-right-border-radius')

    //This section contains declaration of output
    const top_left_output = document.getElementById('top-left-output')
    const top_right_output = document.getElementById('top-right-output')
    const bottom_left_output = document.getElementById('bottom-left-output')
    const bottom_right_output = document.getElementById('bottom-right-output')


    //Adding event listeners
    topLeftInput.addEventListener('input', function(e) {
      top_left_output.textContent = `border-top-left-radius: ${topLeftInput.value}px;`
      outerSquare.style.borderTopLeftRadius = `${topLeftInput.value}px`
    })

    topRightInput.addEventListener('input', function(e) {
      top_right_output.textContent = `border-top-right-radius: ${topRightInput.value}px;`
      outerSquare.style.borderTopRightRadius = `${topRightInput.value}px`
    })

    bottomLeftInput.addEventListener('input', function(e) {
      bottom_left_output.textContent = `border-bottom-left-radius: ${bottomLeftInput.value}px;`
      outerSquare.style.borderBottomLeftRadius = `${bottomLeftInput.value}px`
    })

    bottomRightInput.addEventListener('input', function(e) {
      bottom_right_output.textContent = `border-bottom-right-radius: ${bottomRightInput.value}px;`
      outerSquare.style.borderBottomRightRadius = `${bottomRightInput.value}px`
    })
  </script>
</body>

</html>

This code roughly does what I want. But I believe I should be able to do this in fewer lines of code. I was able to come up with this. However I was not able to add the texts within the div with the data attribute "output".

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border-radius previewer</title>
  <style>
    body,
    .outer-square {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .inner-square {
      border: 1px solid #000;
      width: 400px;
      height: 200px;
      background-color: rgb(255, 255, 255);
    }
    
    .outer-square {
      border: 1px solid #000000;
      width: 500px;
      height: 300px;
      background-color: rgb(211, 200, 200);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-top: 100px;
    }
    
    input {
      width: 10px;
    }
    
    div {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <input type="text" data-border-radius="top-left-border-radius" value="0">
  <input type="text" data-border-radius="top-right-border-radius" value="0">
  <input type="text" data-border-radius="bottom-left-border-radius" value="0">
  <input type="text" data-border-radius="bottom-right-border-radius" value="0">

  <div class="outer-square" data-outer-square>
    <div class="inner-square" data-inner-square>
      <div data-output="top-left-border-radius"></div>
      <div data-output="top-right-border-radius"></div>
      <div data-output="bottom-left-border-radius"></div>
      <div data-output="bottom-right-border-radius"></div>
    </div>
  </div>

  <script>
    const innerSquare = document.querySelector("[data-inner-square]")
    const outerSquare = document.querySelector("[data-outer-square]")
    const inputs = document.querySelectorAll("[data-border-radius]")
    const outputs = document.querySelectorAll("[data-output]")

    inputs.forEach(input => {
      input.addEventListener('input', (e) => {
        const borderRadius = input.dataset.borderRadius

        if (borderRadius == 'top-left-border-radius') {
          outerSquare.style.borderTopLeftRadius = `${input.value}px`
        } else if (borderRadius == 'top-right-border-radius') {
          outerSquare.style.borderTopRightRadius = `${input.value}px`
        } else if (borderRadius == 'bottom-right-border-radius') {
          outerSquare.style.borderBottomRightRadius = `${input.value}px`
        } else outerSquare.style.borderBottomLeftRadius = `${input.value}px`
      })
    })
  </script>
</body>

</html>

Any help will be appreciated.

Answers

To make code cleanly name every variables, attributes more seriously.

-html

 <div class="inner-square" data-inner-square>
  <div id="borderTopLeftRadiusOutput"></div>
  <div id="borderTopRightRadiusOutput"></div>
  <div id="borderBottomLeftRadiusOutput"></div>
  <div id="borderBottomRightRadiusOutput"></div>
</div>
...
<input type="text" data-border-radius="borderTopLeftRadius" value="0">
<input type="text" data-border-radius="borderTopRightRadius" value="0">
<input type="text" data-border-radius="borderBottomLeftRadius" value="0">
<input type="text" data-border-radius="borderBottomRightRadius" value="0">

-javascript

inputs.forEach((input) => 
  input.addEventListener("input", (e) => {
    const field = input.dataset.borderRadius;
    document.getElementById(`${field}Output`).textContent =
      `${field}: ${input.value}px;`;
    outerSquare.style[field] = `${input.value}px`;
  })
);

I only changed id from each input and output div.

I think my answer’ll help you.

you may use a css variable :

const
  myForm      = document.querySelector('#my-form')
, outerSquare = document.querySelector('#outer-square')
, retour =
    { tl : document.querySelector('#border-top-left-radius')
    , tr : document.querySelector('#border-top-right-radius')
    , bl : document.querySelector('#border-bottom-left-radius')
    , br : document.querySelector('#border-bottom-right-radius')
    } 
  ;
myForm.reset();
myForm.onsubmit = e => e.preventDefault();
myForm.oninput = ({target:inRange}) =>
  {
  inRange.nextSibling.textContent  = inRange.value;
  retour[inRange.name].textContent = inRange.value;
  outerSquare.style.setProperty('--bradius',  `${myForm.tl.value}px ${myForm.tr.value}px ${myForm.bl.value}px ${myForm.br.value}px `);
  }

#outer-square {
  display        : table-cell;
  vertical-align : middle;
  text-align     : center;
  --bradius      : 0px 0px 0px 0px;
  border         : 1px solid black;
  width          : 500px;
  height         : 300px;
  background     : #d3c8c8;  
  margin         : 20px;
  border-radius  : var(--bradius);  
  }
#inner-square {
  display    : inline-block;
  width      : 60%;  
  padding    : 10px;
  border     : 1px solid black;
  background :whitesmoke;
  text-align : left;
  }
#inner-square > p::before {
  content : attr(id) ': '
  }
#inner-square > p::after {
  content : 'px'
  }
label {
  display: block;
  height: 2em;
  }
label * {
  vertical-align: middle; 
  }
label > span:first-of-type { 
  display    : inline-block; 
  width      : 9em; 
  text-align : right; 
  }

<div id="outer-square">
  <div id="inner-square">
    <p id="border-top-left-radius">0</p>
    <p id="border-top-right-radius">0</p>
    <p id="border-bottom-left-radius">0</p>
    <p id="border-bottom-right-radius">0</p>
  </div>
</div>

<form id="my-form">
  <label><span>top-left :    </span> <input type="range" name="tl" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>top-right :   </span> <input type="range" name="tr" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>botom-left :  </span> <input type="range" name="bl" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>botom-right : </span> <input type="range" name="br" min="0" max="100" value="0"><span>0</span> </label>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Is there a way I can write my js code in fewer lines to make it cleaner?

Answers