<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>editor</title>
<link rel="stylesheet" href="/sitewide.css"><script src="/web/dhtml/color-theme/colors.js"></script>
</head>
<body>
<button onclick="setBgFg('grey', 'yellow')">style 1</button>
<button onclick="setBgFg('black', 'white')">style 2</button>
<hr>
<pre>// <a href="https://github.com/arkenidar/editor">https://github.com/arkenidar/editor</a>
// https://arkenidar.com/web/gh/editor/editor.html
// https://arkenidar.com/web/gh/editor/editor.js
</pre>
<a href="https://gist.github.com/arkenidar/8a06a4dcf238fd3cfe1e81b580927362">lezioni, spunti, per questo
editor-lavagna</a>
<hr>
<div id="page"><!-- your HTML here --></div>
<hr>
<button onclick="syncContent()">sincronizza</button>
<label><input type="checkbox" id="autoSync" checked="">auto-sincronizza</label>
<br>
<button onclick="codeDecorations()">code decorations</button>
<br>
<!-- <textarea id="editor" cols="55" rows="30"></textarea> -->
<pre id="editor" contenteditable="" style="border: 1px black solid; padding: 1em;"></pre>
<style>
.tag-inside {
background-color: black;
color: pink;
}
</style>
<script src="editor.js"></script>
<hr>
<pre>
<textarea cols="55" rows="10">
<!-- --------------contatore------------------- -->
<button id=num onclick="this.textContent++">0</button>
<style>
#num{ min-width: 70px; height: auto; font-size: 60px; }
</style>
</textarea>
<textarea cols="55" rows="10" id="clicks">
<!-- --------------clicks---------------------- -->
<div id="buttons_section">
<button>previous</button> <button>next</button>
</div>
<script>
var buttons = document.querySelectorAll("#buttons_section > button")
for (var button of buttons)
button.onclick = function (event) {
var button = event.target
alert("click received")
alert(button.innerText)
}
</script>
</textarea>
<textarea cols="55" rows="10">
<!-- ---------------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>
</textarea>
<textarea cols="55" rows="10">
<!-- ------------------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>
</textarea>
</pre>
<div><a href="."> go to main page. </a></div>
<script src="/web/show-source.js"></script>
</body>
</html>