Wish List

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

by Kanatantsin

HTML

<div id="listPage">

  <h1>Мой список желаний</h1>

  <div id="formArea">
    <lable>Чего я хочу:
      <input type="text" id="iWant" />
    </lable>
    <button type="button" id="addIt">Добавить!</button>
    <br /><br />
    <button typt="button" id="printable">Вывести список</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

//create an event listener for the print button, with a handler function called printView


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

//create an event listener for the add button, with a handler function called addTheThing

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

// create a blank array named myList

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

function addTheThing() {
  let theThing = document.getElementById("iWant");
  addToTheList(theThing);
  resetInput(theThing);
}

/* create a variable, myListArea, which references the element with the id of 'wishList'

/* function addTheThing gets the value of the text field and then passes it to a function called addToTheList. It then runs a function called resetInput


*/
//function addToTheList, which takes one parameter, 
//called thingToAdd, pushes it into the myList array, and then 
//adds it to myListArea


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



// function resetInput, which resets the value of the
//input field to blank ("")
function resetInput(inputToReset) {
  inputToReset.value = "";
}

//function printView, which outputs a nicely formatted 
//view of the list 
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>";
    window.print();
  }
}