lukas-h/le-nombre-d-or.html

## le-nombre-d-or.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Le nombre d'or</title>
</head>

<body class="gr-column">
    <div class="gr-long gr-row">
        <div class="gr-short gr-column red">
            <label for="short">Short</label><br>
            <input type="number" id="short">
        </div>
        <div class="gr-long gr-column blue">
            <label for="long">Long</label><br>
            <input type="number" id="long">
        </div>
    </div>
    <div class="gr-short gr-column green">
        <label for="sum">Short + Long</label><br>
        <input type="number" id="sum">
    </div>
    <div id="precision-div">
        <label for="precision">Nachkommastellen:</label><br>
        <input type="number" id="precision" min="0" max="18" step="1">
    </div>

    <style>
        body {
            font-size: 16px;
            font-family: sans-serif;
            color: white;
            margin: 0;
            height: 100vh;
            font-size: 18px;
        }

        input {
            background-color: transparent;
            border: none;
            text-align: center;
            color: white;
            font-size: 2rem;
        }

        .red {
            background: red;
        }

        .green {
            background: green;
        }

        .blue {
            background: blue;
        }

        .gr-column,
        .gr-row {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .gr-short,
        .gr-long {
            flex: 1;
            align-self: stretch;
        }

        @media screen and (min-width: 900px) {
            input{
                font-size: 3rem;
            }
            .gr-row {
                flex-direction: row;
            }

            .gr-long {
                flex: 1.61803399;
            }
        }

        #precision-div {
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
            display: flex;
            flex-direction: row;
        }

        #precision-div input {
            font-size: 1rem;
            width: 2.5rem;
        }
    </style>

    <script>

        const ratio =
            (1 + Math.sqrt(5)) / 2;
        const shortRatio = 1 / ratio;
        window.addEventListener('load', function (_) {
            const shortEl = document.getElementById('short');
            const longEl = document.getElementById('long');
            const sumEl = document.getElementById('sum');
            const precisionEl = document.getElementById('precision');

            let sum, short, long, precision = 3;
            precisionEl.value = precision;
            calcSum({ target: { value: 10 } });
            update();

            function update(t) {
                switch (t) {
                    case 'short':
                        sumEl.value = sum.toFixed(precision);
                        longEl.value = long.toFixed(precision);
                        break;
                    case 'long':
                        sumEl.value = sum.toFixed(precision);
                        shortEl.value = short.toFixed(precision);
                        break;
                    case 'sum':
                        shortEl.value = short.toFixed(precision);
                        longEl.value = long.toFixed(precision);
                        break;
                    default:
                        sumEl.value = sum.toFixed(precision);
                        shortEl.value = short.toFixed(precision);
                        longEl.value = long.toFixed(precision);

                }
            }
            function calcSum(e) {
                sum = Number(e.target.value);
                short = sum * (shortRatio / ratio);
                long = sum - short;
                update('sum');
            }
            function calcShort(e) {
                short = Number(e.target.value);
                long = short * ratio;
                sum = short + long;
                update('short');
            }
            function calcLong(e) {
                long = Number(e.target.value);
                short = long * shortRatio;
                sum = short + long;
                update('long');
            }
            function calcPrecision(e) {
                precision = parseInt(e.target.value);
                update();
            }
            function onEnd() {
                update();
            }

            shortEl.addEventListener('input', calcShort);
            longEl.addEventListener('input', calcLong);
            sumEl.addEventListener('input', calcSum);
            shortEl.addEventListener('change', onEnd);
            longEl.addEventListener('change', onEnd);
            sumEl.addEventListener('change', onEnd);
            precisionEl.addEventListener('input', calcPrecision);
        });

    </script>
</body>

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Le nombre d'or</title>
	</head>

	<body class="gr-column">
	<div class="gr-long gr-row">
	<div class="gr-short gr-column red">
	<label for="short">Short</label><br>
	<input type="number" id="short">
	</div>
	<div class="gr-long gr-column blue">
	<label for="long">Long</label><br>
	<input type="number" id="long">
	</div>
	</div>
	<div class="gr-short gr-column green">
	<label for="sum">Short + Long</label><br>
	<input type="number" id="sum">
	</div>
	<div id="precision-div">
	<label for="precision">Nachkommastellen:</label><br>
	<input type="number" id="precision" min="0" max="18" step="1">
	</div>

	<style>
	body {
	font-size: 16px;
	font-family: sans-serif;
	color: white;
	margin: 0;
	height: 100vh;
	font-size: 18px;
	}

	input {
	background-color: transparent;
	border: none;
	text-align: center;
	color: white;
	font-size: 2rem;
	}

	.red {
	background: red;
	}

	.green {
	background: green;
	}

	.blue {
	background: blue;
	}

	.gr-column,
	.gr-row {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.gr-short,
	.gr-long {
	flex: 1;
	align-self: stretch;
	}

	@media screen and (min-width: 900px) {
	input{
	font-size: 3rem;
	}
	.gr-row {
	flex-direction: row;
	}

	.gr-long {
	flex: 1.61803399;
	}
	}

	#precision-div {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	display: flex;
	flex-direction: row;
	}

	#precision-div input {
	font-size: 1rem;
	width: 2.5rem;
	}
	</style>

	<script>

	const ratio =
	(1 + Math.sqrt(5)) / 2;
	const shortRatio = 1 / ratio;
	window.addEventListener('load', function (_) {
	const shortEl = document.getElementById('short');
	const longEl = document.getElementById('long');
	const sumEl = document.getElementById('sum');
	const precisionEl = document.getElementById('precision');

	let sum, short, long, precision = 3;
	precisionEl.value = precision;
	calcSum({ target: { value: 10 } });
	update();

	function update(t) {
	switch (t) {
	case 'short':
	sumEl.value = sum.toFixed(precision);
	longEl.value = long.toFixed(precision);
	break;
	case 'long':
	sumEl.value = sum.toFixed(precision);
	shortEl.value = short.toFixed(precision);
	break;
	case 'sum':
	shortEl.value = short.toFixed(precision);
	longEl.value = long.toFixed(precision);
	break;
	default:
	sumEl.value = sum.toFixed(precision);
	shortEl.value = short.toFixed(precision);
	longEl.value = long.toFixed(precision);

	}
	}
	function calcSum(e) {
	sum = Number(e.target.value);
	short = sum * (shortRatio / ratio);
	long = sum - short;
	update('sum');
	}
	function calcShort(e) {
	short = Number(e.target.value);
	long = short * ratio;
	sum = short + long;
	update('short');
	}
	function calcLong(e) {
	long = Number(e.target.value);
	short = long * shortRatio;
	sum = short + long;
	update('long');
	}
	function calcPrecision(e) {
	precision = parseInt(e.target.value);
	update();
	}
	function onEnd() {
	update();
	}

	shortEl.addEventListener('input', calcShort);
	longEl.addEventListener('input', calcLong);
	sumEl.addEventListener('input', calcSum);
	shortEl.addEventListener('change', onEnd);
	longEl.addEventListener('change', onEnd);
	sumEl.addEventListener('change', onEnd);
	precisionEl.addEventListener('input', calcPrecision);
	});

	</script>
	</body>

	</html>