zwei files
This commit is contained in:
170
test_moneyUtils.html
Normal file
170
test_moneyUtils.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user