JavaScript - Calculations(Pizza Party)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• jQuery (Library)
• Safari(Web browser)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 3(Calculations)、8(Pizza Party)を取り組んでみる。

8(Pizza Party)

コード(Emacs)

<label for="people0">
  How many people? 
  <input id="people0" type="number" min="1" step="1" value="8">
</label>
<br>
<label for="pizza0">
  How many pizza do you have?
  <input id="pizza0" type="number" min="1" step="1" value="2">
</label>
<br>
<label for="slices0">
  How many slices per pizza?
  <input id="slices0" type="number" min="1" step="1" value="8">
</label>
<br>
<br>
<span class="people0"></span> people with <span class="pizza0"></span>
<br>
Each person gets <span id="pieces0"></span> of pizza.
<br>
There are <span id="leftover0"></span> pieces.
<br>
<br>
<br>
<label for="people1">
  How many people? 
  <input id="people1" type="number" min="1" step="1" value="8">
</label>
<br>
<label for="pieces1">
  How many pices each person wants ?
  <input id="pieces1" type="number" min="1" step="1" value="2">
</label>
<br>
<label for="slices1">
  How many slices per pizza?
  <input id="slices1" type="number" min="1" step="1" value="8">
</label>
<br>
<br>
Need <span id="pizza1"></span> full pizzas.

<script src="sample8.js"></script>

var input_people = document.querySelector('#people0'),
    input_pizza = document.querySelector('#pizza0'),
    input_slices = document.querySelector('#slices0'),
    inputs = [input_people, input_pizza, input_slices],
    class_people = document.querySelectorAll('.people0'),
    class_pizza = document.querySelectorAll('.pizza0'),
    span_pieces = document.querySelector('#pieces0'),
    span_leftover = document.querySelector('#leftover0'),

    input_people1 = document.querySelector('#people1'),
    input_pieces1 = document.querySelector('#pieces1'),
    input_slices1 = document.querySelector('#slices1'),
    inputs1 = [input_people1, input_pieces1, input_slices1],
    span_pizza1 = document.querySelector('#pizza1'),
    
    display,
    display1,
    calc,
    calc1,
    i,
    max;    

display = function () {
    var people = parseInt(input_people.value, 10),
        pizza = parseInt(input_pizza.value, 10),
        slices = parseInt(input_slices.value, 10),
        pieces_per_person_and_leftover = calc(people, pizza, slices),
        i,
        max;        

    for (i = 0, max = class_people.length; i < max; i += 1) {
        class_people[i].innerText = people;
    }
    for (i = 0, max = class_pizza.length; i < max; i += 1) {
        class_pizza[i].innerText = pizza;
    }
    span_pieces.innerText = pieces_per_person_and_leftover[0];
    span_leftover.innerText = pieces_per_person_and_leftover[1];
};

calc = function (people, pizza, slices) {
    var pieces = pizza * slices,
        pieces_per_person = Math.floor(pieces  / people),
        leftover = pieces % people;

    return [pieces_per_person, leftover];
};

display();

for (i = 0, max = inputs.length; i < max; i += 1) {
    inputs[i].onchange = display;
    inputs[i].onkeyup = display;
}

display1 = function () {
    var people = parseInt(input_people1.value, 10),
        pieces = parseInt(input_pieces1.value, 10),
        slices_per_pizza = parseInt(input_slices1.value, 10),
        pizzas = calc1(people, pieces, slices_per_pizza);

    span_pizza1.innerText = pizzas;
};
calc1 = function (people, pieces, slices_per_pizza) {
    var slices = people * pieces;

    return Math.ceil(slices / slices_per_pizza);
};

display1();

for (i = 0, max = inputs1.length; i < max; i += 1) {
    inputs1[i].onchange = display1;
    inputs1[i].onkeyup = display1;
}

How many people?
How many pizza do you have?
How many slices per pizza?

people with
Each person gets of pizza.
There are pieces.


How many people?
How many pices each person wants ?
How many slices per pizza?

Need full pizzas.