Mackie Notes

Hyperscript LED Series Resistor Calculator

Published by

Lachlan Mackie

on

You don’t have to write JavaScript to build interactive webpages. Hyperscript gives you the ability to interact with the front end and the back end.

Hyperscript Quick Start

To get started with Hyperscript, copy the installation script Here and place it in your HTML.

To use Hyperscript functions you must add this script

<script type="text/hyperscript" src="/functions._hs"></script>
<script src="https://unpkg.com/hyperscript.org"></script>

Look here for more on how to use Hyperscript in your application.

LED Series Resistor Example

Example Output Image

Example Code

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Quick Start</title>
    <!-- Loads Hyperscript & Hyperscript Functions -->
    <script src="https://unpkg.com/hyperscript.org@0.9.13"></script>
    <script type="text/hyperscript" src="/functions._hs"></script>

    <script type="text/hyperscript">
        def LEDResCalc(Vi, Vf, fi)
            return (Vi - Vf) / (fi / 1000) 
    </script>
    <!-- Put CSS Below in Style -->
    <style>
    </style>
</head>
<!-- Put HTML Below in Style -->
<body>
    <form>
        <label for="VIN">V<sub>IN</sub> (V)</label><br>
        <input type="number" id="VIN" name="VIN" value="5"><br>
        <label for="ForwardI">I<sub>F</sub> (mA)</label><br>
        <input type="number" id="I_F" name="I_F" value="20"><br>
        <label for="ForwardV">V<sub>F</sub> (V)</label><br>
        <input type="number" id="V_F" name="V_F" value="2.1"><br><br>
    </form> 
    <span>Value &Omega;: </span>
    <output></output>
    <br></br>
    <button _="on click  
                call LEDResCalc((#VIN.value as a Number),(#V_F.value as a Number),(#I_F.value as a Number)) then put result as Fixed:2 into the previous <output/>">
        Get Value
    </button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Quick Start</title>
    <!-- Loads Hyperscript & Hyperscript Functions -->
    <script src="https://unpkg.com/hyperscript.org@0.9.13"></script>
    <script type="text/hyperscript" src="/functions._hs"></script>

    <script type="text/hyperscript">
        def LEDResCalc(Vi, Vf, fi)
            return (Vi - Vf) / (fi / 1000) 
    </script>
    <!-- Put CSS Below in Style -->
    <style>
    </style>
</head>
<!-- Put HTML Below in Style -->
<body>
    <form>
        <label for="VIN">V<sub>IN</sub> (V)</label><br>
        <input type="number" id="VIN" name="VIN" value="5"><br>
        <label for="ForwardI">I<sub>F</sub> (mA)</label><br>
        <input type="number" id="I_F" name="I_F" value="20"><br>
        <label for="ForwardV">V<sub>F</sub> (V)</label><br>
        <input type="number" id="V_F" name="V_F" value="2.1"><br><br>
    </form> 
    <span>Value &Omega;: </span>
    <output></output>
    <br></br>
    <button _="on click  
                call LEDResCalc((#VIN.value as a Number),(#V_F.value as a Number),(#I_F.value as a Number)) then put result as Fixed:2 into the next <output/>">
        Get Value
    </button>
</body>
</html>

Leave a comment Cancel reply