we have a number and a split number and we want to split the number 'split number' of times and all splitted div should take(or add up to) 100% width i.e the splitted divs should be on single row.Also we need to this dynamically.Please help me out on this.

var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);

function myfunc() {
  number = parseInt(document.querySelector("#number").value);
  split = parseInt(document.querySelector("#split").value);
  var displayDiv = document.getElementById("disp");
  displayDiv.innerHTML = "";
  if (split > number) {
    generateErrorMessage(
      "Please enter number of splits less than number itself!"
    );
  } else if (number > 100 || number < 1) {
    generateErrorMessage(
      "Please enter number greater than 0 and less than 101"
    );
  } else if (split == 0) {
    generateErrorMessage("Split can't be done null");
  } else {
    let n = split;
    for (var i = 0; i < split; i  ) {
      if (number % n == 0) {
        var divWidth = number / n;
      } else {
        var divWidth = Math.floor(number / n)   1;
      }

      let tag = document.createElement("div");
      tag.className = "fill";

      var randomcolor = getRandomColor();
      tag.style.backgroundColor = randomcolor;
      tag.style.width = divWidth   "%";
      tag.textContent = divWidth;
      displayDiv.appendChild(tag);
      number = number - divWidth;
      n = n - 1;
    }
  }
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function generateErrorMessage(msg) {
  errdiv = document.querySelector(".err-div");
  errpara = document.createElement("p");
  errpara.textContent = msg;
  errdiv.appendChild(errpara);
  errdiv.classList.add("err-msgs");
  console.log(errdiv);
  setTimeout(() => {
    errdiv.innerHTML = "";
    errdiv.classList.remove("err-msgs");
  }, 5000);
}

.container {
    background-color: white;
    padding-top: 10px;
}

body {
    background-color: lightblue;
}

.num {
    margin-bottom: 10px;
}

button {
    margin-left: 10px;
}

.disp {
    background-color: whitesmoke;

}

.fill {
    display: inline-block;
    background-color: aqua;
    /* border: 2px solid black; */
    height: 100px;
    text-align: center;
    color: white;
    font-size: 50px;
    /* padding: 10px; */

}

.err-msgs {

    padding: 20px;
    background-color: pink;
}

 <div >
      <!-- <p>Sorry there was an error</p> -->
        <div ></div>  
        <div >
          <label for="number" >Enter a Number</label>
          <input type="number"  id="number" />
        </div>
        <div >
          <label for="split" 
            >Enter number of times you want to split</label
          >
          <input type="number"  id="split" />
        </div>

        <button  >Split</button>
      

      <div id="disp"></div>
  </div>

Also same value div should take same amount of width.

CodePudding user response：

You need to add flex to the parent.

#disp {
    background-color: whitesmoke;
    display: flex;
    width:100%;
    flex-direction: row;
}

and on the children you can use the css

.fill {
    display: flex;
    flex-grow: 1;
}

var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);

function myfunc() {
  number = parseInt(document.querySelector("#number").value);
  split = parseInt(document.querySelector("#split").value);
  var displayDiv = document.getElementById("disp");
  displayDiv.innerHTML = "";
  if (split > number) {
    generateErrorMessage(
      "Please enter number of splits less than number itself!"
    );
  } else if (number > 100 || number < 1) {
    generateErrorMessage(
      "Please enter number greater than 0 and less than 101"
    );
  } else if (split == 0) {
    generateErrorMessage("Split can't be done null");
  } else {
    let n = split;
    for (var i = 0; i < split; i  ) {
      if (number % n == 0) {
        var divWidth = number / n;
      } else {
        var divWidth = Math.floor(number / n)   1;
      }

      let tag = document.createElement("div");
      tag.className = "fill";

      var randomcolor = getRandomColor();
      tag.style.backgroundColor = randomcolor;
      // tag.style.width = divWidth   "%";
      tag.textContent = divWidth;
      displayDiv.appendChild(tag);
      number = number - divWidth;
      n = n - 1;
    }
  }
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function generateErrorMessage(msg) {
  errdiv = document.querySelector(".err-div");
  errpara = document.createElement("p");
  errpara.textContent = msg;
  errdiv.appendChild(errpara);
  errdiv.classList.add("err-msgs");
  console.log(errdiv);
  setTimeout(() => {
    errdiv.innerHTML = "";
    errdiv.classList.remove("err-msgs");
  }, 5000);
}

.container {
    background-color: white;
    padding-top: 10px;
}

body {
    background-color: lightblue;
}

.num {
    margin-bottom: 10px;
}

button {
    margin-left: 10px;
}

#disp {
    background-color: whitesmoke;
    display: flex;
    width:100%;
    flex-direction: row;
}

.fill {
    display: flex;
    flex-grow: 1;
    background-color: aqua;
    /* border: 2px solid black; */
    height: 100px;
    text-align: center;
    color: white;
    font-size: 50px;
    /* padding: 10px; */

}

.err-msgs {

    padding: 20px;
    background-color: pink;
}

<div >
      <!-- <p>Sorry there was an error</p> -->
        <div ></div>  
        <div >
          <label for="number" >Enter a Number</label>
          <input type="number"  id="number" />
        </div>
        <div >
          <label for="split" 
            >Enter number of times you want to split</label
          >
          <input type="number"  id="split" />
        </div>

        <button  >Split</button>
      

      <div id="disp"></div>
  </div>

CodePudding user response：

instead of giving them percentage values male the parent component a flex and give child component flex:1 then it will automatically adjust width and be responsive too.