arkenidar.com/web/editor.html : spunti per lezioni, su questo editor come "lavagna"

editor.lessons.html

<!-- https://arkenidar.com/web/editor.html -->
<!-- ------------------------------------------ -->

<!-- ------------------------------------------ -->
per andare
a capo
<br>
si usa &lt;br>
<!-- ------------------------------------------ -->
stili di testo: <em>parola1</em> <strong>parola2</strong>
<!-- ------------------------------------------ -->
immagine <img width="100px" src="https://avatars.githubusercontent.com/u/500825">
<!-- ------------------------------------------ -->
link <a href="//arkenidar.com">cliccando qui cambia pagina</a>
<!-- ------------------------------------------ -->
<script> /* esempio di script */ alert("testo di messaggio alert")</script>
<!-- ------------------------------------------ -->


<!-- ------------------------------------------ -->

<!-- show/hide contents. 
(starts hidden or shown then alternates ) -->

<div>
<button
onclick=' menu_div.style.display = ( 
( menu_div.style.display == "none" ) ?
 "initial" : "none"
 ) '
>menu</button>
</div>

<div id="menu_div" style="display: initial;">
<br>
text begins <br>
.... .... .... .... <br>
.... .... .... .... <br>
.... .... .... .... <br>
.... .... .... .... <br>
text end
</div>

<!-- --------------contatore------------------- -->

<button id=num onclick="this.textContent++">0</button>
<style>
#num{ width: 50px; height: 50px; font-size: 40px; }
</style>

<!-- ---------------somma---------------------- -->

<!-- interfaccia grafica in HTML -->
<input type="number" id="x" placeholder="numero x">
<input type="number" id="y" placeholder="numero y">
<div>il risultato è: <span id="risultato">0</span></div>
<!-- logica software in JavaScript -->
<script>
x.oninput=calc; y.oninput=calc
x.value=0; y.value=0
function calc(){ risultato.textContent = parseFloat(x.value) + parseFloat(y.value) }
calc()
</script>

<!-- ------------------percentuale------------- -->

<p>
inputs:
<input type="number" id="numero" placeholder="numero in input">

<input type="number" id="percentuale" placeholder="percentuale">
</p>

<p>
percentuale applicata:
<span id="risultato"></span>
</p>

<script>
numero.oninput = applica
percentuale.oninput = applica
function applica() {
risultato.textContent=numero.value*percentuale.value/100
}
</script>

<!-- ------------------numeri circolari anche negativi------------- -->

<input type="range" min="-20" max="20" oninput="set_number(this.value)" >

<p>number: <span id="number_out"></span></p>
<p>modulo 5 (from 0 to 4): <span id="modulo_out"></span></p>
<p>note: this modulo operation is always non-negative in result</p>

<script>
set_number(0)

function set_number(value){
  number_out.textContent = value
  modulo_out.textContent = modulo(value,5)
}

// note: this modulo operation is always non-negative in result
function modulo(a,b){
    return ((a % b) + b) % b
}
</script>