2020-08-14 20:08:42 +02:00
|
|
|
const commandAction = document.getElementById("command-action");
|
|
|
|
const rmButton = document.getElementById("remove-command");
|
2020-08-15 11:47:36 +02:00
|
|
|
const more = document.getElementById("more");
|
|
|
|
const dark = document.getElementById("dark");
|
|
|
|
const about = document.getElementById("about");
|
|
|
|
const contact = document.getElementById("contact");
|
2020-08-14 20:08:42 +02:00
|
|
|
|
|
|
|
function lastCommandId() {
|
|
|
|
let list = document.querySelectorAll("div.command h2");
|
|
|
|
return parseInt(list[list.length-1].innerText.replace("Command ", ""));
|
|
|
|
}
|
|
|
|
|
2020-08-15 11:47:36 +02:00
|
|
|
document.getElementById("add-command").addEventListener("click", () => {
|
2020-08-14 20:08:42 +02:00
|
|
|
let id = lastCommandId() + 1;
|
|
|
|
commandAction.insertAdjacentHTML("beforebegin", `<div id="command${id}" class="command">
|
|
|
|
<h2>Command ${id}</h2>
|
|
|
|
<div class="field">
|
|
|
|
<label for="sandwich">Sandwich:</label>
|
2020-08-15 20:17:36 +02:00
|
|
|
<input id="sandwich" type="list" list="sandwich-list" name="sandwich${id}" autocomplete="off" required>
|
2020-08-14 20:08:42 +02:00
|
|
|
</div>
|
|
|
|
<div class="field">
|
|
|
|
<label for="day">Day:</label>
|
2020-08-15 20:17:36 +02:00
|
|
|
<input id="day" type="date" name="date${id}" required>
|
2020-08-14 20:08:42 +02:00
|
|
|
</div>
|
|
|
|
</div>`);
|
|
|
|
document.getElementById("command"+lastCommandId()).scrollIntoView({behavior: "smooth"});
|
|
|
|
rmButton.classList.remove("hide");
|
|
|
|
});
|
|
|
|
|
|
|
|
rmButton.addEventListener("click", () => {
|
|
|
|
let id = lastCommandId();
|
|
|
|
document.getElementById("command"+id).remove();
|
|
|
|
if (id === 2)
|
|
|
|
rmButton.classList.add("hide");
|
|
|
|
});
|
2020-08-15 11:47:36 +02:00
|
|
|
|
|
|
|
more.firstChild.addEventListener("click", () => {
|
|
|
|
dark.classList.remove("hide");
|
|
|
|
about.classList.remove("hide");
|
|
|
|
});
|
|
|
|
|
|
|
|
more.lastChild.addEventListener("click", () => {
|
|
|
|
dark.classList.remove("hide");
|
|
|
|
contact.classList.remove("hide")
|
|
|
|
});
|
|
|
|
|
|
|
|
dark.addEventListener("click", () => {
|
|
|
|
dark.classList.add("hide");
|
|
|
|
if (! about.classList.contains("hide"))
|
|
|
|
about.classList.add("hide");
|
|
|
|
else
|
|
|
|
contact.classList.add("hide");
|
|
|
|
});
|