My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with, and here is where I currently stand.
<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>
This setup is not functioning as intended, and I am feeling lost about what steps to take next... I would greatly appreciate any assistance you can offer.