Skip to content

Instantly share code, notes, and snippets.

@kelindar
Created July 14, 2017 10:01
Show Gist options
  • Save kelindar/5b51631b86b5d22f2ddf5ccb6256304f to your computer and use it in GitHub Desktop.
Save kelindar/5b51631b86b5d22f2ddf5ccb6256304f to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<body>
<style>
body {
padding: 50px;
}
#bar-container {
margin-top: 10px;
}
.bar {
background-color: cornsilk;
border: 1px solid red;
display: block;
height: 30px;
width: 100%;
}
</style>
<input id="bar-widths-input"/>
<div id="bar-container">
<div class="bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// Render a horizontal percentage-based bar chart that displays
// multiple bars side-by-side in a single row, based on the sizes
// given in the input array.
// Input format is a comma-separated list of numbers.
// For example, entering `1,2,1` will render three bars, with the
// middle bar having twice the width of the other bars.
// The bar chart will be re-rendered as the values in the input updates.
// Feel free to make changes to the given markup and CSS.
// Write your code here.
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment