Chapter 13 - Wish List - Start

The starting point for the project from Chapter 13 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland

by wchristine

HTML

<div id="listPage">
  <h1>My Wish List</h1>

  <div id="formArea">
    <label>What I Want:
       <input type="text" id="iWant"/>
       
      </label>
    <button type="button" id="addIt">Add It!</button>
    <br>
    <br>
    <button type="button" id="printable">Print Your List</button>
  </div>
  <ul id="wishList"></ul>
</div>

CSS

body {
  font-family: Arial, sans-serif;
}

#listPage.print {
  background-color: #FAF2AD;
  padding: 20px;
  font-family: cursive;
}

#listPage.print ul {
  margin: 10px 0px;
  padding: 0px;
  border-left: 4px double red;
}

#listPage.print li {
  list-style-type: none;
  margin: 0px -20px;
  padding-left: 26px;
  border-bottom: 1px solid blue;
  line-height: 36px;
  font-size: 24px;
  font-family: cursive;
}

JavaScript

var printButton = document.getElementById("printable");
printButton.addEventListener("click", printView);

var addButton = document.getElementById("addIt");
addButton.addEventlistener("click", addTheThing);

var myList = [];
var myListArea = document.getElementById("wishList");




function addTheThing() {
  var theThing = document.getElementById("iWant");

  addToTheList(theThing);
  resetInput(theThing);
}



function addToTheList(thingToAdd) {
  myList.push(thingToAdd.value);
  var newListItem = document.createElement("li");
  newListItem.innerHTML = myList[myList.length - 1];

  myListArea.appendChild(newListItem);
}


function resetInput(inputToReset) {
  inputToReset.value = "";
}


function printView() {
  var listPage = document.getElementById("listPage");
  var formArea = document.getElementById("formArea");

  formArea.style.display = "none";
  listPage.className = "print";
  myListArea.innerHTML = "";
  myList.sort();

  for (var i = 0; i < myList.length; i++) {
    wishList.innerHTML += "<li>" + myList[i] + "</li>";
  }
}