Coder Tests

HTML
<div id="frame"> <div id="entry"> <h1> Values </h1> <table> <col width="50%" /> <col width="20%" /> <col width="30%" /> <thead> <th>Label</th> <th>Value</th> <th>Color</th> </thead> <tbody> <tr> <td><input type="text" id="label_1" /></td> <td><input type="number" min="0" id="value_1" /></td> <td><input type="text" id="label_1"/></td> </tr> <tr> <td><input type="text" id="label_2" /></td> <td><input type="number" min="0" id="value_2" /></td> <td><input type="text" id="label_2"/></td> </tr> <tr> <td><input type="text" id="label_3" /></td> <td><input type="number" min="0" id="value_3" /></td> <td><input type="text" id="label_3"/></td> </tr> <tr> <td><input type="text" id="label_4" /></td> <td><input type="number" min="0" id="value_4" /></td> <td><input type="text" id="label_4"/></td> </tr> <tr> <td colspan="2">Radius</td> <td><input type="number" min="0" id="radius" /></td> </tr> </tbody> </table> </div> <div id="display"> <h2> Chart </h2> <div id="origin"> <svg width="174px" height="200px" viewBox="0 0 174 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="Hexagon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <polygon id="hex" fill="#FF0000" points="87 0 173.60254 50 173.60254 150 87 200 0.397459622 150 0.397459622 50"></polygon> </g> </svg> </div> <h2> Example: </h2> <svg width="253px" height="250px" viewBox="0 0 253 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard"> <image id="Bitmap" x="0" y="0" width="253" height="250" xlink:href="data:image/png;base64,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"></image> </g> </g> </svg> </div> </div>
CSS
body { height: 100%; padding: 0; } #entry { width: 100%; padding: 1rem; flex-basis: 50vh; align-items: stretch; flex: 0; height: 100%; } #entry table input { width: 100%; } #entry section { flex-grow: 1; overflow-y: scroll; } h1 { font-family: Helvetica, Arial, sans-serif; font-size: 1rem; margin: 0; padding: 0; text-align: center; } #display { position: relative; width: 100%; background-color: white; flex: 1; } #frame { display: flex; flex-direction: column; align-content: stretch; background-color: grey; } #origin { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-content: center; align-items: center; overflow: show; }
JAVASCRIPT
/** * using https://www.redblobgames.com/grids/hexagons/ * display a radial graph with circular pips centered in the "display" div * with a radius set by the user whose cells reflect the values input in the grid above. * bonus points: filter out empty rows (rows with zero or blank as value). */
Expand for more options Login