JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<form>
    <p>Simple Graphing Calculator</p>
    <input type="text" />
</form>
<br /><br />
<div class="graphingCanvas">
    <div class="toolbar">
        <ul>
            <li>+</li>
            <li>-</li>
        </ul>
    </div>
</div>

CSS

.graphingCanvas {
    width:400px;
    height:400px;
    border:1px solid gray;
    background-color:#FEFFEE;    
    position:absolute;
}
.graphingCanvas .toolbar {
    position:absolute;
    right:0;
    top:0;
    
    padding:3px;
    background-color:#EEF3FF;
    border:1px solid #C7D8FF;
    opacity:0.7;
}
.graphingCanvas .toolbar ul li {
    list-style:none;
    display:inline;
}
.graphingCanvas .cartesianXY {
    background-color:#CECECE;
    position:absolute;
}

JavaScript

$(document).ready(function(){
    
    function drawRulers() {
        var canvasWidth  = 0;
        var canvasHeight = 0;
        
        $('.graphingCanvas').each(function(index){
            canvasWidth = $(this).width();
            canvasHeight = $(this).height();
            
            $(".graphingCanvas").append('<div class="cartesianXY" style="top:'+(canvasWidth/2)+'px;height:1px; width:100%;"></div>');
        });        
    }
    
    drawRulers();
});