start .
me .
HTML Document File : html-section.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>code as text or interpreted ( rendered )</title>
</head>
<body>
<h2>code as text or interpreted ( rendered )</h2>
<h3><a href="https://arkenidar.github.io/editor/editor.html">editor ( tests and play ground ) </a></h3>
<script>var text_mode = false</script>
<hr>
<hr>
<button onclick="button_text_mode_alternate(this)">code as text <===> interpreted ( rendered )</button>
<div class="html">
<b>marked bold</b>
<a href="/">link</a>
</div>
<hr>
<hr>
<button onclick="button_text_mode_alternate(this)">code as text <===> interpreted ( rendered )</button>
<div class="html">
<h3>#learning_material 7 february</h3>
<textarea>
testo di prova
</textarea>
<hr>
<a href="javascript: alert('link con javascript'); "> link con js </a>
<hr>
<button onclick=" alert('mi hai cliccato') "> pulsante cliccabile </button>
<hr>
<form onsubmit=" alert('hai scritto : ' + this.testo.value); return false; ">
<input required id="testo" placeholder="scrivi qui">
<input type="submit">
</form>
</div>
<hr>
<hr>
<button onclick="button_text_mode_alternate(this)">code as text <===> interpreted ( rendered )</button>
<div class="html">
<h3>#learning_material 9 february</h3>
<script>
function alternate_visibility(enclosing_element) {
enclosing_element.style.display =
enclosing_element.style.display == '' ? 'none' : ''
}
</script>
<!-- button click alternates visibility of section1 -->
<button onclick="alternate_visibility(section1)">
open/close section1</button>
<div id="section1" style="display: none;">
some contents here , <br>
initially hidden by : style="display: none;" <br>
button click alternates visibility of section1
</div>
</div>
<hr>
<hr>
<button onclick="button_text_mode_alternate(this)">code as text <===> interpreted ( rendered )</button>
<div class="html">
<ul class="mutableStyle">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<div>
<span>list style type: </span><b id="listStyleType"></b> <br>
<button onclick="nextStyle()">next list style type</button>
</div>
<script>
let styleTypes = ["disc", "circle", "square",
"decimal", "decimal-leading-zero",
"lower-roman", "upper-roman",
"lower-greek",
"lower-latin", "upper-latin",
"armenian", "georgian",
"lower-alpha", "upper-alpha",
"none"]
let styleIndex = -1
nextStyle()
function nextStyle() {
styleIndex = (styleIndex + 1) % styleTypes.length
let styleName = styleTypes[styleIndex]
document.querySelector(".mutableStyle").style.listStyleType = styleName
document.querySelector("#listStyleType").innerText = styleName
}
</script>
</div>
<hr>
<script src="html-section.js"></script>
<hr>
<h2>show source code</h2>
<script src="https://arkenidar.com/web/show-source.js" data-href="html-section.js"></script>
<script src=" https://arkenidar.com/web/show-source.js" data-href="html-section.html"></script>
</body>
</html>