CODEWITHSUNDEEP
javascripthtmlcssshapes
TonganTechie
TonganTechie

Reputation: 43

How to create circle, square or triangle with JavaScript in HTML?

I'm new to coding and I'm trying to create three different shapes randomly after being clicked- a circle, square and triangle. I've gotten my code to work with randomly creating a circle or square, but the triangle is always inside the square or circle element and never by itself. How do I make it so that a cirle, square, or triangle will appear instead of just a square or circle with a triangle inside?

<div id="shape1"></div>

CSS styling (I've tried to set the triangle as the "base" shape.

#shape1 {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}

main.js

setTimeout(function () {
        if (Math.random()<=0.3){
            document.getElementById("shape1").style.borderRadius="50%";
        }
        else if (Math.random()<=0.6){
            document.getElementById("shape1").style.borderRadius="0";
        }
        else {
            document.getElementById("shape1").style = this.self;
        }

Any help would be greatly appreciated. Best of coding to you.

Upvotes: 4

Views: 7754

Answers (3)

Weafs.py
Weafs.py

Reputation: 22992

You could use svg as well.

Define the shapes in defs tags, use a random shape on a click event.

var shape = document.getElementById('shape');
var shapes = ['circle', 'square', 'triangle'];
shape.addEventListener('click', function() {
  shape.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + shapes[Math.floor(Math.random() * shapes.length)]);
})
<svg width="200" height="200">
  <defs>
    <path id="circle" d="M0,100 a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0" fill="rosybrown" />
    <path id="square" d="M0,0 h200 v200 h-200z" fill="tan" />
    <path id="triangle" d="M100,0 l100,200 h-200z" fill="teal" />
  </defs>
  <use id="shape" xlink:href="#circle" />
</svg>

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You've almost got it. Just apply all the border properties for each shape.

Snippet:

setInterval(function () {
  var shape1= document.getElementById("shape1");
  if (Math.random()<=0.3){
    shape1.style.borderLeft= shape1.style.borderRight= shape1.style.borderBottom= shape1.style.borderTop= '100px solid';
    shape1.style.borderRadius="50%";
  }
  else if (Math.random()<=0.6){
    shape1.style.borderLeft= shape1.style.borderRight= shape1.style.borderBottom= shape1.style.borderTop= '100px solid';
    shape1.style.borderRadius="0";
  }
  else {
    shape1.style.borderLeft= shape1.style.borderRight= '100px solid transparent';
    shape1.style.borderBottom= '200px solid #2f2f2f';
    shape1.style.borderTop= '0';
    shape1.style.borderRadius="0";
  }
},500);
#shape1 {
  width: 0px;
  height: 0px;
  font-size: 0;
  line-height: 0;
}
<div id="shape1"></div>

Upvotes: 0

Alex
Alex

Reputation: 744

You could define three different CSS classes - one class for every shape. Note that classes in style sheets start with a dot "." and are applied to a DOM element by using the class="..." attribute.

Define those four CSS rules in your CSS file:

#shape1 {
    /* common styles for all shapes */
}

.square {
    /* square specific CSS */
}
.circle {
    /* circle specific CSS */
}
.triangle {
    /* triangle specific CSS */
}

What you can do now is simply set the right class on the element:

var shape = document.getElementById("shape1");

if (Math.random()<=0.3){
    shape.className = "square";
}
else if (Math.random()<=0.6){
    shape.className = "circle";
}
else {
    shape.className = "triangle";
}

I hope that's what you wanted to do ;).

Upvotes: 4

Related Questions