CODEWITHSUNDEEP
javascripthtmlcss
Luca Janss
Luca Janss

Reputation: 81

how to create dynamic squares with HTML and CSS

My goal is to create 3 inputs where you can choose the color of the cube, the size and the amount of cubes. The picture down below is my classmates final work but he wouldn't give me the code. We were given a template to start on and this is what I have so far.

<style>
.square {
  height: 50px;
  width: 50px;
  background-color: var(color1);
}
</style>

<script>
function makeSquare(size, color){

    var div = document.createElement("div");
    div.style.display = "inline-block";
    div.style.height = size+"px";
    div.style.width = size+"px";
    div.style.backgroundColor=color;
    div.style.margin="5px";


    document.body.appendChild(div);
}

function addSquares(){
  if (inputColor == "blue")
    var color1 = '#555';
}

</script>
</head>

<body>
    <p>Number of squares:<input type="text" id="inputNumber"></p>
    <p>Color of squares:<input type="text" id="inputColor"></p>
    <p>Size of squares:<input type="text" id="inputSize"></p>
    <button onclick=addSquares()>Add squares</button>
  <div class="square"></div>

</body>
</html>

as you can maybe guess, this does not work and I have no clue how to do this... I hope you can help me

Upvotes: 1

Views: 690

Answers (2)

Dhara
Dhara

Reputation: 1972

I am showing you a way to correct your code,

  1. I can't see where you have called makeSquare().
  2. In addSquares(), did you get value of inputColor?
  3. you need to get value of each input and pass SIZE, COLOR(if its not fetched and set earlier stage) and NUMBER in makeSquare()
  4. Need to loop NUMBER's time to get block in body. inside that create you square block with COLOR and SIZE.

Upvotes: 0

Rendolph
Rendolph

Reputation: 431

For example have a look at jQuery css() method. There you can add or remove css styling from an element. I will not post a solution for you because this is clearly your homework but research around this topic and you can handle this task easily.

Upvotes: 1

Related Questions