Aplikacja - wybrane encje HTML

Encja: &{{nazwa}};

Kod: {{kodh}}

{{encja}}

Aplikacja jest prostym przykładem zastosowania języka modelowania aplikacji AppML (Application Modeling Language). Ważne elementy kodu aplikacji zostały wyróżnione w kodzie HTML i JS.

Do strony dołączony jest skrypt:

<script src='https://www.w3schools.com/appml/2.0.3/appml.js'></script>

Dane (nazwy i kody szesnastkowe encji) są zapisane w pliku encje.js w postaci obiektu JavaScript:

{'encje':[
{'nazwa':'amp','kodh':'x26','encja':'&amp;'},
{'nazwa':'lt','kodh':'x3C','encja':'&lt;'},
{'nazwa':'gt','kodh':'x3E','encja':'&gt;'},
{'nazwa':'apos','kodh':'x27','encja':'&apos;'},
{'nazwa':'alpha','kodh':'x03B1','encja':'&alpha;'},
{'nazwa':'beta','kodh':'x03B2','encja':'&beta;'},
{'nazwa':'gamma','kodh':'x03B3','encja':'&gamma;'},
{'nazwa':'delta','kodh':'x03B4','encja':'&delta;'},
{'nazwa':'larr','kodh':'x2190','encja':'&larr;'},
{'nazwa':'uarr','kodh':'x2191','encja':'&uarr;'},
{'nazwa':'rarr','kodh':'x2192','encja':'&rarr;'},
{'nazwa':'darr','kodh':'x2193','encja':'&darr;'}
]
}

Fragment kodu HTML aplikacji:

<div appml-data='encje.js'>
  <div appml-repeat='encje' style='float:left; margin-bottom: 25px;'>
    <p>Encja: <em>&amp;{{nazwa}};</em></p>
    <p>Kod: {{kodh}}</p> 
    <div class='encja'>{{encja}}</div>
  </div>
</div>

oraz stylu CSS:

.encja {
  width: 150px;
  padding: 25px;
  font-size: 144px;
  text-align: center;
  float: left;
  border: solid 0px black;
  border-radius: 10px;
  margin: 5px;
  background-color: aliceblue;
}
div > p {
  text-align: center;
  font-family: verdana;
}