27 lines
904 B
JavaScript
27 lines
904 B
JavaScript
|
class AddCard extends HTMLElement {
|
||
|
|
connectedCallback() {
|
||
|
|
this.innerHTML = `
|
||
|
|
<style>
|
||
|
|
:host{display:block}section{height:100%;box-sizing:border-box}.row{display:flex;gap:8px;align-items:end}.row>*{flex:1}
|
||
|
|
</style>
|
||
|
|
<section>
|
||
|
|
<h3>Add API</h3>
|
||
|
|
<div class="row">
|
||
|
|
<div><label>A</label><input id="a" type="number" value="1"></div>
|
||
|
|
<div><label>B</label><input id="b" type="number" value="2"></div>
|
||
|
|
</div>
|
||
|
|
<button id="add">Add</button>
|
||
|
|
<pre id="out"></pre>
|
||
|
|
</section>`;
|
||
|
|
this.querySelector('#add').addEventListener('click', () => this.addNums());
|
||
|
|
}
|
||
|
|
|
||
|
|
async addNums() {
|
||
|
|
const a = +this.querySelector('#a').value;
|
||
|
|
const b = +this.querySelector('#b').value;
|
||
|
|
this.querySelector('#out').textContent = await window.App.req('POST', '/api/add', {a, b});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('add-card', AddCard);
|