const newButton = document.getElementById("new");
const list = document.getElementById("accountsList");
// To persist the added accounts we'll add them to
let accounts = JSON.parse(localStorage.getItem("accounts"));
// Ensure accounts is an array (e.g. on load when accounts
if (!Array.isArray(accounts)) accounts = [];
// We'll come back to this below
const switchAccount = () => {};
.getElementById("default")
.childNodes[0].addEventListener("click", switchAccount);
const createID = () => "_" + Math.random().toString(36).substr(2, 9);
// This creates new <li> elements and adds
// the click event handler
const createElement = (account) => {
const li = document.createElement("li");
li.classList.add("profile");
const button = document.createElement("button");
button.addEventListener("click", switchAccount);
button.innerHTML = account.name;
const addAccountsToDom = () => {
// We only want to add accounts that aren't already
// in the dom. So we'll filter accounts by ids in
document.querySelectorAll("#accountsList > li")
const accountsToAdd = accounts.filter(({ id }) => !ids.includes(id));
// We'll add new <li>s as elements before new button
accountsToAdd.forEach((account) => {
list.insertBefore(createElement(account), newButton);
// Create new accounts when new button pressed
newButton.addEventListener("click", () => {
localStorage.setItem("accounts", JSON.stringify(accounts));