---
# System prepended metadata

title: Render Shapes
tags: [Practice Assessment]

---

# Render Shapes

Overview: Create a program that accepts some user input and renders a shape. The idea is that the user will type in circle, square, or rectangle into a form field and when they hit "Enter" the appropriate shape will render to the center of the screen. 

- use HTML & CSS for the UI. See design below for details. 
- use javascript and render functions to create fucntionality for the page. 
- The form must clear when the user hits "Enter"
- All shapes must be centered on the page horizontally and veritcally
- The shapes must render as indivduals. They cannot exist on the page at the same time. 

![Screenshot 2024-03-31 at 9.12.40 AM](https://hackmd.io/_uploads/rkHUZJw10.png)

Alternate:  Create a program that utilizes some call to action and render shapes. The idea is that the user will click a button a circles, squares, or rectangles will render to the center of the screen. See designs below. 

Bonus: add another call to action the will remove the shapes and render an empty container. 

![Screenshot 2024-04-07 at 3.18.47 PM](https://hackmd.io/_uploads/B1y7Q_xgC.png)

![Screenshot 2024-04-07 at 3.18.59 PM](https://hackmd.io/_uploads/HJQX7OxxR.png)

![Screenshot 2024-04-07 at 3.19.08 PM](https://hackmd.io/_uploads/r1O7QOel0.png)

