INFORMATION & CODE

Pattern Generator Display

What the Code Does

The code creates an interactive random pattern generator. The HTML provides a container with 20 empty <div> elements and a Generate button. The empty <div> elements act as individual boxes in a 4-column grid. When the JavaScript runs, each box is given a randomly selected shape and colour, creating a different pattern each time the generator function is called.

How the Code works

The CSS controls the layout and appearance. .pattern-container creates a black grid with four columns, spacing, padding, rounded corners, and a shadow. The different .quad-circle and .triangle classes use clip-path to turn the boxes into quarter-circles or triangles, while .circle creates a complete circle using border-radius: 50%. The #btn styles the Generate button, making it full-width, clickable, and visually consistent with the pattern.

The JavaScript first selects the Generate button and all 20 boxes. The shapes array contains the possible shapes, while the colors array contains the four possible colours. The generatePattern() function loops through every box, removes any existing shape class, randomly chooses one shape and one colour using Math.random(), and then applies them to the box.

How to Use the Code

To use the code, save the HTML in an .html file, place the CSS in styles.css, and place the JavaScript in scripts.js in the same project folder. Open the HTML file in a browser. The pattern will be generated when generatePattern() is called. You can then click Generate to create a new random combination of shapes and colours. Each click produces a different pattern because the shape and colour for every box are selected randomly.