Madhouse Pages (MapleStory)

Use this to keep track of what you need to do.

by MegaScience

HTML

<div id="pageList">
  <label><input id="checkbox1" type="checkbox" /> <span>1 - Vending Machine - 10 Coins</span></label>
  <label><input id="checkbox2" type="checkbox" /> <span>2 - Drops from Test Tube</span></label>
  <label><input id="checkbox3" type="checkbox" /> <span>3 - Drops from Orderly</span></label>
  <label><input id="checkbox4" type="checkbox" /> <span>4 - Drops from Passcode Safe</span></label>
  <label><input id="checkbox5" type="checkbox" /> <span>5 - Obtained when reaching the Escape Room</span></label>
  <label><input id="checkbox6" type="checkbox" /> <span>6 - Drops from Green Box</span></label>
  <label><input id="checkbox7" type="checkbox" /> <span>7 - Drops from Test Tube</span></label>
  <label><input id="checkbox8" type="checkbox" /> <span>8 - Drops from Dial Safe</span></label>
  <label><input id="checkbox9" type="checkbox" /> <span>9 - Drops from Trash Can/Bin</span></label>
  <label><input id="checkbox10" type="checkbox" /> <span>10 - Drops from Electrical Panel</span></label>
  <label><input id="checkbox11" type="checkbox" /> <span>11 - Drops from Giant Plant (Hallway)</span></label>
  <label><input id="checkbox12" type="checkbox" /> <span>12 - Drops from Test Tube</span></label>
  <label><input id="checkbox13" type="checkbox" /> <span>13 - Drops from Giant Vent Spider (Vent)</span></label>
  <label><input id="checkbox14" type="checkbox" /> <span>14 - Medicine Bottle/Pill Bottles can give (Do last)</span></label>
  <label><input id="checkbox15" type="checkbox" /> <span>15 - Drops from Body Model</span></label>
  <label><input id="checkbox16" type="checkbox" /> <span>16 - Drops from Test Tube</span></label>
  <label><input id="checkbox17" type="checkbox" /> <span>17 - Drops from Nurse/Red Box</span></label>
  <label><input id="checkbox18" type="checkbox" /> <span>18 - Drops from Medical Cart</span></label>
  <label><input id="checkbox19" type="checkbox" /> <span>19 - Drops from Red Box</span></label>
  <label><input id="checkbox20"...

CSS

body {
  counter-reset: pagesFound;
}

div#pageList {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid black;
  border-radius: 15px;
  background: #D9D9D9; /* display: table; */
  float: right;
  margin: 0 auto;
  padding: 10px;
}

div#pageList label {
  display: block;
}

div#pageList label input + span {
  color: red;
}

div#pageList label input:checked + span {
  color: green;
  counter-increment: pagesFound;
}

div#found {
  text-align: center;
  padding-top: 3px;
}

span#count::before {
  content: counter(pagesFound);
}

JavaScript

const keepTrack = {
  itemName: 'MadhouseCB',
  checkboxes: document.querySelectorAll('div#pageList input[type="checkbox"][id]'),
  storage: {},
  init: function() {
		const f = this.saveCB.bind(this)
    for (const cb of this.checkboxes) cb.addEventListener('input', f)
    this.loadCB()
  },
  loadCB: function() {
    const data = window.localStorage.getItem(this.itemName)
    if (data !== null) {
      this.storage = JSON.parse(data)
      for (const cb of this.checkboxes) cb.checked = this.storage[cb.id]
    }
  },
  saveCB: function() {
    for (const cb of this.checkboxes) this.storage[cb.id] = cb.checked
    window.localStorage.setItem(this.itemName, JSON.stringify(this.storage))
  }
}

keepTrack.init()