171 lines
4.9 KiB
HTML
171 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Test moneyUtils</title>
|
|
<style>
|
|
body{
|
|
font-family:Segoe UI,
|
|
Roboto,
|
|
Arial,
|
|
sans-serif;padding:20px;
|
|
background:#f6f8fb
|
|
}
|
|
.card{
|
|
background:white;
|
|
padding:16px;
|
|
border-radius:8px;
|
|
max-width:760px;
|
|
margin:12px auto;
|
|
box-shadow:0 6px 18px rgba(0,0,0,.06)
|
|
}
|
|
label{
|
|
display:block;
|
|
margin-top:8px;
|
|
font-weight:600
|
|
}
|
|
input[type=text], input[type=number]{
|
|
width:100%;
|
|
padding:8px;
|
|
margin-top:6px;
|
|
border:1px solid #ddd;
|
|
border-radius:4px
|
|
}
|
|
button{
|
|
margin-top:8px;
|
|
padding:8px 12px;
|
|
background:#1f6feb;
|
|
color:white;
|
|
border:none;
|
|
border-radius:4px;
|
|
cursor:pointer
|
|
}
|
|
pre{
|
|
background:#f3f4f6;
|
|
padding:12px;
|
|
border-radius:6px;
|
|
overflow:auto
|
|
}
|
|
.row{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:12px
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="card">
|
|
<h2>Test für moneyUtils</h2>
|
|
<p>Diese Seite lädt erlaubt interaktives Testen der Funktionen.</p>
|
|
|
|
<label for="inputText">Eingabe (Text)</label>
|
|
<input id="inputText" type="text" placeholder="z. B. 'USD 12,50' oder ' 3,45 € '" />
|
|
|
|
<div class="row">
|
|
<div>
|
|
<button id="btnLese">leseGeldBetrag</button>
|
|
<div><strong>Ergebnis:</strong></div>
|
|
<pre id="outLese">-</pre>
|
|
</div>
|
|
|
|
<div>
|
|
<button id="btnLeseEuro">leseGeldbetragInEuro</button>
|
|
<div><strong>Ergebnis:</strong></div>
|
|
<pre id="outLeseEuro">-</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<button id="btnEntferne">entferneZiffernUndSonderzeichen</button>
|
|
<div><strong>Ergebnis:</strong></div>
|
|
<pre id="outEntferne">-</pre>
|
|
</div>
|
|
<div>
|
|
<button id="btnIstDollar">istDollar</button>
|
|
<div><strong>Ergebnis:</strong></div>
|
|
<pre id="outIstDollar">-</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<button id="btnIstEuro">istEuro</button>
|
|
<div><strong>Ergebnis:</strong></div>
|
|
<pre id="outIstEuro">-</pre>
|
|
</div>
|
|
<div>
|
|
<label for="numDollar">Zahl (für dollarZuEuro)</label>
|
|
<input id="numDollar" type="text" placeholder="z. B. 10 oder 12,5" />
|
|
<button id="btnDollarZuEuro">dollarZuEuro</button>
|
|
<div><strong>Ergebnis:</strong></div>
|
|
<pre id="outDollarZuEuro">-</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<h3>Beispiele</h3>
|
|
<p>Klicken Sie einen Beispiel-Button, um das Eingabefeld zu füllen:</p>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
|
<button class="example">USD 12,50</button>
|
|
<button class="example">12.50</button>
|
|
<button class="example"> 3,45 € </button>
|
|
<button class="example">doLLAr 100</button>
|
|
<button class="example">500</button>
|
|
<button class="example">EUR 7,99</button>
|
|
<button class="example">abc123+-,. def</button>
|
|
</div>
|
|
|
|
<p style="margin-top:12px;font-size:0.9rem;color:#444">Hinweis: Diese Tests nutzen die in Ihrem Projekt vorhandene <code>moneyUtils.js</code>. Öffnen Sie diese Seite lokal (z. B. http://localhost:8000/test_moneyUtils.html) im gleichen Verzeichnis.</p>
|
|
</main>
|
|
|
|
<script src="moneyUtils.js"></script>
|
|
<script>
|
|
function $(id){ return document.getElementById(id); }
|
|
|
|
$('btnLese').addEventListener('click', ()=>{
|
|
const v = $('inputText').value;
|
|
const r = window.moneyUtils.leseGeldBetrag(v);
|
|
$('outLese').textContent = String(r);
|
|
});
|
|
|
|
$('btnLeseEuro').addEventListener('click', ()=>{
|
|
const v = $('inputText').value;
|
|
const r = window.moneyUtils.leseGeldbetragInEuro(v);
|
|
$('outLeseEuro').textContent = String(r);
|
|
});
|
|
|
|
$('btnEntferne').addEventListener('click', ()=>{
|
|
const v = $('inputText').value;
|
|
const r = window.moneyUtils.entferneZiffernUndSonderzeichen(v);
|
|
$('outEntferne').textContent = String(r);
|
|
});
|
|
|
|
$('btnIstDollar').addEventListener('click', ()=>{
|
|
const v = $('inputText').value;
|
|
const r = window.moneyUtils.istDollar(v);
|
|
$('outIstDollar').textContent = String(r);
|
|
});
|
|
|
|
$('btnIstEuro').addEventListener('click', ()=>{
|
|
const v = $('inputText').value;
|
|
const r = window.moneyUtils.istEuro(v);
|
|
$('outIstEuro').textContent = String(r);
|
|
});
|
|
|
|
$('btnDollarZuEuro').addEventListener('click', ()=>{
|
|
const v = $('numDollar').value;
|
|
const parsed = window.moneyUtils.leseGeldBetrag(v);
|
|
const r = window.moneyUtils.dollarZuEuro(parsed);
|
|
$('outDollarZuEuro').textContent = String(r);
|
|
});
|
|
|
|
|
|
Array.from(document.querySelectorAll('.example')).forEach(btn => {
|
|
btn.addEventListener('click', ()=>{ $('inputText').value = btn.textContent; });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|