épée demo

calc.raku

use Epee;

sub Calculator {
    #éffect "document.title = 'Calculator'"; NYI

    (div :élan(:width<350px>:height<530px>
               :border<solid darkgray>:border-radius<7px>),
     (DisplayWindow '0'), 
     (CalculatorButtons))
}

sub DisplayWindow(Str $text) {
    (div :élan(:height<20px>:padding<5px>:font-size<20px>), $text)
}

sub CalculatorButtons {
    (div :élan(:width<350px>:height<500px>
                :display<grid>:grid-template-rows<repeat(5, 1fr)>),
         (Row <AC +/- % ÷>),
         (Row <7 8 9 ×>),
         (Row <4 5 6 –>),
         (Row <1 2 3 +>),
         (Row <0 . =>))
}

sub Row(@buttons) {
    my $n = 1;
    (div :élan(:display<grid>:grid-template-columns<repeat(12, 1fr)>),
         @buttons.map: {
            (button :élan(:border<solid lightgray>:border-radius<12px>
                          :margin<0.5px>:font-size<20px>
                          :grid-column("$n / {$n += (12 / +@buttons)}")),
                    ~$^text )})
}

say Calculator.render;