`; const submitBtn = html``; const widget = htl.html`

🙌🏻 Energy & Engagement Logger

(note: you may log/change energy and engagement level for an activity)

${activitySelect} ${energyLevel} ${engageLevel} ${output} ${submitBtn}`; widget.value = { get activity() { return activitySelect.value; }, get energy() { return energyLevel.value; }, get engagement() { return engageLevel.value; }, }; function updateOutput() { output.innerHTML = ` Output:

Activity: ${widget.value.activity || "—"}
Engergy Level: ${widget.value.energy || "—"}
Engagement Level: ${widget.value.engagement || "—"}

`; } updateOutput(); // initial display function submit(database) { const activity = widget.value.activity; const energy = widget.value.energy; const engagement = widget.value.engagement; const newRecord = database.map(item => { if (item.activity === activity) { return { ...item, energyLevel: energy, engagementLevel: engagement }; } else { return item; } }); dbHtml.update(newRecord); activitySelect.value = database[0].activity; energyLevel.value = 0; engageLevel.value = 0; widget.value.activity = database[0].activity; widget.value.energy = 0; widget.value.engagement = 0; } submitBtn.addEventListener("click", () => submit(database)); [activitySelect, energyLevel, engageLevel].forEach(component => component.addEventListener("input", () => { widget.value = { activity: activitySelect.value, energy: energyLevel.value, engagement: engageLevel.value, }; updateOutput(); widget.dispatchEvent(new Event("input", { bubbles: true })); }) ); return widget; }