Testing String List Bullet CSS

by MegaScience

HTML

<div id="controls">
  <form id="hatedForm">
    <input id="hatedIndividual" type="text" placeholder="Name someone you hate..." value="Example">
    <button id="submitHated">Submit</button>
  </form>
  <button id="randomizeHated">Randomize List</button>
  <p>Click a list entry to remove it.</p>
</div>
<div id="hateArea">
  <h3>People I hate:</h3>

  <ul id="hateList">
    <li>Steve</li>
    <li>Tom</li>
    <li>Sally</li>
    <li>Bob</li>
    <li>Bill</li>
    <li>Conor</li>
    <li>Larry</li>
    <li>Rob</li>
  </ul>
</div>

CSS

#hateArea {
  float: right;
  padding: 15px;
  border: 1px solid black;
  box-sizing: border-box;
}

#hateArea h3 {
  margin: 0;
  border-bottom: 2px solid black;
}

#controls {
  float: left;
}

#hatedIndividual {
  width: 200px;
}

#randomizeHated {
  width: 100%;
}

ul {
  padding-left: 60px;
}

li {
  list-style-type: 'Bitch: ';
}

li:nth-child(odd) {
  list-style-type: 'Whore: ';
}

li:nth-child(3n-1) {
  list-style-type: 'Ass: ';
}

li:first-child {
  list-style-type: 'Dick: ';
}

li:last-child {
  list-style-type: 'Prick: ';
}

JavaScript

const elements = {
    hateList: document.getElementById('hateList'),
    hatedIndividual: document.getElementById('hatedIndividual'),
    //submitHated: document.getElementById('submitHated'),
    hatedForm: document.getElementById('hatedForm'),
    randomizedHate: document.getElementById('randomizeHated')
}

// Credit: https://stackoverflow.com/a/2450976
const shuffleArray = function (arr) {
    //console.log(arr.map(e => e.textContent))
    let cIndex = arr.length, rIndex
    // While there remain elements to shuffle.
    while (cIndex != 0) {
        // Pick a remaining element.
        rIndex = Math.floor(Math.random() * cIndex)
        cIndex--
        // And swap it with the current element.
        [arr[cIndex], arr[rIndex]] = [arr[rIndex], arr[cIndex]]
    }
    //console.log(arr.map(e => e.textContent))
    return arr
}

const randomizeHatedList = () => elements.hateList.append(...shuffleArray(Array.from(elements.hateList.querySelectorAll('li'))))

const clickRemove = e => e.currentTarget.remove()

const submitFunc = function (e) {
    e.preventDefault()
    const name = elements.hatedIndividual.value
    if (!name.length) return false
    const li = document.createElement('li')
    li.textContent = name
    li.addEventListener('click', clickRemove)
    elements.hateList.insertBefore(li, elements.hateList.children[Math.floor(Math.random() * (elements.hateList.children.length + 1)) | 0])
    return false
}

const init = function () {
    elements.randomizedHate.addEventListener('click', randomizeHatedList)
    elements.hatedForm.addEventListener('submit', submitFunc)
    for (const li of elements.hateList.querySelectorAll('li')) li.addEventListener('click', clickRemove)
}

init()

/*var hateList = document.getElementById('hateList');
for (var i = 0; i < hateList.children.length; i++) {
  hateList.children[i].onclick = function(e) {
    this.remove()
  };
}

document.getElementById("randomizeHated").onclick = function() {
  var hateList =...