JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Parabeln zeichnen</title>
    </head>
    
    <body>
        
        <header>
            <span>shape: <input type="text" id="shape" name="shape" /></span>
            <span>offset-x: <input type="text" id="offset_x" name="offset_x" /></span>
            <span>offset-y: <input type="text" id="offset_y" name="offset_y" /></span>
            <span>acc: <input type="text" id="acc" name="acc" /></span>
            <span>pixel: <input type="text" id="pixel" name="pixel" /></span>
            <span>parabola</span>
        </header>
        
        <section>
            <span>by Rick D.</span>
            <canvas>(your browser doesn't support canvas)</canvas>
        </section>
        
    </body>
</html>

CSS

@charset 'UTF-8' ;

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
    font: inherit ;
}

::selection {
    background: #ffb7b7 ;
}

::-moz-selection {
    background: #ffb7b7 ;
}

html,
body {
    width: 100% ;
    height: 100% ;
    font-family: 'Agency FB' ;
}

body > header,
body > section {
    position: absolute ;
    overflow: hidden ;
    left: 50px ;
    right: 50px ;
}

body > header {
    padding: 10px 20px 0 20px ;
    top: 50px ;
    min-width: 740px ;
    height: 50px ;
    font-size: 1.3em ;
    background-color: lightblue ;
}

    body > header > span > input {
        width: 50px ; 
        text-align: right ;
        border-bottom: 1px dotted black ;
        background-color: lightblue ;
    }

    body > header > span > input:hover,
    body > header > span > input:focus {
        background-color: #BFE1EB ;
    }

    body > header > span:not(:last-child):after {
        content: '//' ;
        padding-right: 10px ;
        color: white ;
    }

    body > header > span:last-child {
        float: right ;
        text-transform: uppercase ;
    }

    body > header > span:last-child:before {
        content: '»' ;
    }

    body > header > span:last-child:after {
        content: '«' ;
    }

body > section {
    padding: 5px ;
    top: 100px ;
    bottom: 50px ;
    min-width: 770px ;
    background-color: #eaeaea ;
}
    
    body > section > span {
        position: absolute ;
        opacity: 0.5 ;
        padding: 10px ;
        bottom: 10px ;
        left: 10px ;
        font-size: 1.3em ;
        background-color: white ;
        
        -webkit-transition: opacity .5s ;
           -moz-transition: opacity .5s ;
             -o-transition: opacity .5s ;
                transition: opacity .5s ;
    }

    body > section > span:hover {
        opacity: 1 ;
    }

JavaScript

// GLOBALS
var section = null ;
var canvas = null ;
var status = null ;
var ctx = null ;
var values = [
    -0.007,     /* shape */
    350,        /* offset-x */
    400,        /* offset-y */
    9,          /* accuracy */
    5           /* pixel */
] ;


// PAINT
function paint( ) {
    // Werte aktualisieren
    updatevalues( ) ;
    
    // Zeichenfläche leeren
    ctx.clearRect( 0, 0, canvas[0].width, canvas[0].height ) ;
    
    // Farbe setzen
    ctx.fillStyle = 'lightblue' ;
    
    // Parabel zeichnen
    for( var x=-(canvas[0].width); x<=canvas[0].width; x+=values[3] ) {
        var y = values[0] * Math.pow( x, 2 ) ;
        ctx.fillRect( x + values[1], y + values[2], values[4], values[4] ) ;
    }
}


// VALUES
function updatevalues( ) {
    // Werte übertragen
    var i = 0 ;
    $('body > header > span > input').each( function( ) {
        values[i++] = parseFloat( $(this).val( ) ) ;
    } ) ;
    
    // Werte validieren
    if( values[3] < 0.01 ) {
        if( confirm( "Eine Genauigkeit von < 0.01 kann die Performance stark beeinträchtigen!\nSoll die Genauigkeit auf 0.01 zurückgesetzt werden?" ) ) {
            values[3] = 0.01 ;
            $('#acc').val( values[3] ) ;
        }
    }
}


// INIT
function init( ) {
    // HTML-Elemente selektieren
    section = $('body > section') ;
    canvas = $('body > section > canvas') ;
    status  = $('body > section > span') ;
    
    // Eingabefelder füllen
    var i = 0 ;
    $('body > header > span > input').each( function( )  {
        $(this).val( values[i++] ) ;
    } ) ;
    
    // Events anbinden
    $('header > span > input').change( function( ) { paint( ) ; } ) ;

    // Zeichenkontext vorbereiten
    ctx = canvas[0].getContext('2d');
}


// LAYOUT
function layout( ) {
    // Zeichenfläche anpassen
    canvas[0].width = section.width( ) ;
    canvas[0].height = section.height( ) ;
}


// ! DOCUMENT READY
$(document).ready( function( ) {
    // Los geht's..
    init( ) ;
    layout( ) ;
   ...