Built with blockbuilder.org
forked from molliemarie's block: BarChartHTML_Starter
license: mit |
Built with blockbuilder.org
forked from molliemarie's block: BarChartHTML_Starter
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>First Bar Chart Using HTML!</title> | |
<style> | |
svg { | |
border: 1px solid #f0f; | |
} | |
rect { | |
fill: purple | |
} | |
/* 5) Set `rect` elements to have a "fill" of "purple" or whatever color you choose */ | |
</style> | |
</head> | |
<body> | |
<div> | |
<p>My Bar Chart!</p> | |
<svg width=300 height=400> | |
<rect x=0 y=10 width=100 height=20></rect> //step 4 | |
<rect x=0 y=40 width=200 height=20></rect> | |
<rect x=0 y=70 width=300 height=20></rect> | |
</svg> | |
</div> | |
<!-- 1) Make a container `<div>` in which you'll render your content --> | |
<!-- 2) Create a `<p>` element in which you write "My Bar Chart" --> | |
<!-- 3) Make a container `<svg>` element in which you'll place your rectangles --> | |
<!-- Set your svg's `width` to 300, and `height` to `400` --> | |
<!-- 4) Put 3 `<rect>` inside of your `<svg>`, | |
setting the properties for each one: --> | |
<!-- | |
- `x`: How far to move the rectangle in the `x` direction (right). Should be `0` for all rectangles. | |
- `y`: How for to move the rect in the `y` direction (down from the top). Should be `10`, `40`, `70` | |
- `width`: How far to draw the rectangle to the right. Should be `100`, `200`, `300` | |
- `height`: The vertical height of each rectangle. Should be `20` for all rectangles | |
--> | |
</body> | |
</html> |