Программа для равномерно разделить пиццу


Я написал программу, чтобы равномерно разделить пиццу. И я пытался стилизовать его в качестве консоли. Буду благодарен за советы по улучшению моего кода.

Вот пример изображения программы после ввода пользователем значений: sample image of output

$(function(){
 $('.secondQuestion').hide();
 $('#peopleInput').focus();
   
 //Three functions for outputting the result
 const firstOutput = function(a, b){
  if(b>1){
   $('#firstStr').text(a + " people with " + b + " pizzas")
  } else {
   $('#firstStr').text(a + " people with " + b + " pizza")
  }
 } 
 const piece = (a, b) => Math.floor((b * 8) / a);
 const secondOutput = function(a){
  if(a > 1){
   $('#secondStr').text("Each person gets " + a + " pieces of pizza")
  } else {
   $('#secondStr').text("Each person gets " + a + " piece of pizza")
  }
 } 
 const leftover = (a, b) => (b * 8) % a; 
 const thirdOutput = function(a){
  if(a > 1){
   $('#thirdStr').text("There are " + a + " leftover pieces")
  } else {
   $('#thirdStr').text("There is " + a + " leftover pieces")
  }
 }

 //Action after pressing the enter key on the first line
 $('#peopleInput').bind("enterKey", function(e){
  $('.secondQuestion').show();
  $('#pizzaInput').focus();
 });
 $('#peopleInput').keyup(function(e){
  if(e.keyCode == 13){$(this).trigger("enterKey")}
 });

 //Action after pressing the enter key on the second line
 $('#pizzaInput').bind("enterKey", function(e){
  $('#peopleInput').focus();
  const people = $('#peopleInput').val();
  const pizza = $('#pizzaInput').val();
  firstOutput(people, pizza);
  setTimeout(function(){secondOutput(piece(people, pizza)); }, 300);
  setTimeout(function(){thirdOutput(leftover(people, pizza)); }, 600);
 });
 $('#pizzaInput').keyup(function(e){
  if(e.keyCode == 13){$(this).trigger("enterKey")}
 });
});
body{
 background: #000;
 color: #fff;
 font-family: 'Inconsolata', monospace;
}

h2{
 font-weight: normal;
}

.output{
 margin-top: 10px;
}

p{
 margin: 0 0 5px 0;
}
input {
 border: none;
    background-color: #000;
    width: 50px;
    color: #fff;
    padding-left: 5px;
    margin-bottom: 5px;
}
input:focus{
 outline-color: #000;
}

main{
 position: absolute;
    left: 200px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
 <h2>Pizza Party ></h2>
</header>
<main>
 <div class="firstQuestion">
  <label>How many people?</label>
  <input type="number" class="form-control" id="peopleInput" value="" name="" min="0" oninput="validity.valid||(value='');">
 </div>
 <div class="secondQuestion">
  <label >How many pizzas do you have?</label>
  <input type="number" class="form-control" id="pizzaInput" value="" name="" min="0" oninput="validity.valid||(value='');">
 </div>
 <div class="output">
  <p id="firstStr"></p>
  <p id="secondStr"></p>
  <p id="thirdStr"></p>
 </div>
</main> 
</body>



Комментарии
1 ответ

Отзывы

Мне нравится стиль, хронометраж событий, и как число входных блесны скрыты. Это действительно выглядит как консольное приложение! Плюс, пицца-моя любимая еда!*

Предложения

Кэш ссылок дом

Как уже было сказано в ответах на другие вопросы (например, пенсионный калькулятор), любой DOM-элемент поиска, которые случаются несколько раз должна быть снижена до одного поиска, который хранится в переменной (или константы, используя const). Так что в ваш код, было бы разумно кэш $('#peopleInput');, $('#pizzaInput')и т. д...

$(function(){
$('.secondQuestion').hide();
const peopleInput = $('#peopleInput');
peopleInput.focus();
const pizzaInput = $('#pizzaInput');

Не повторяйся

Этот принцип приходит играть здесь со следующими блоками:


$('#peopleInput').keyup(function(e){
if(e.keyCode == 13){$(this).trigger("enterKey")}
});

и


$('#pizzaInput').keyup(function(e){
if(e.keyCode == 13){$(this).trigger("enterKey")}
});

Они могут быть объединены в один CSS-селектор:

$('#peopleInput, #pizzaInput').keyup(function(e){
if(e.keyCode == 13){$(this).trigger("enterKey")}
});

Поскольку это единственные входные элементы на странице, он может быть упрощен до просто $('input'), но это может не быть хорошая привычка, особенно если вы идете на большие приложения.

Именования

Некоторые имена вводят в заблуждение. Например: piece на самом деле функция, которая возвращает количество штук, что-то вроде pieceDivision или getNumerOfPieces будет более уместным.

Шаблоны

Как я уже упоминал в моем ответе на ваш вопрос про пенсионный калькулятор, с помощью шаблонов можно привести код, который задает текст, который должен быть упрощен...

Измененный Код

С выше рекомендации, то код может быть изменен, чтобы быть более похожим на этот:



$(function() {
$('.secondQuestion').hide();
const peopleInput = $('#peopleInput');
peopleInput.focus(); //$('#peopleInput').focus();
const pizzaInput = $('#pizzaInput');

//Three functions for outputting the result
const firstOutput = function(a, b) {
if (b > 1) {
$('#firstStr').text(a + " people with " + b + " pizzas")
} else {
$('#firstStr').text(a + " people with " + b + " pizza")
}
}
const getNumberOfPiecesPerPerson = (a, b) => Math.floor((b * 8) / a);
const secondOutput = function(a) {
if (a > 1) {
$('#secondStr').text("Each person gets " + a + " pieces of pizza")
} else {
$('#secondStr').text("Each person gets " + a + " piece of pizza")
}
}
const getNumberOfLeftoverPieces = (a, b) => (b * 8) % a;
const thirdOutput = function(a) {
if (a > 1) {
$('#thirdStr').text("There are " + a + " leftover pieces")
} else {
$('#thirdStr').text("There is " + a + " leftover pieces")
}
}

//Action after pressing the enter key on the first line
peopleInput.bind("enterKey", function(e) {
$('.secondQuestion').show();
pizzaInput.focus();
});
//combine $('#peopleInput') and $('#pizzaInput') - could also be $('#peopleInput, #pizzaInput')
$('input').keyup(function(e) {
if (e.keyCode == 13) {
$(this).trigger("enterKey")
}
});

//Action after pressing the enter key on the second line
pizzaInput.bind("enterKey", function(e) {
peopleInput.focus();
const numPeople = peopleInput.val();
const numPizzas = pizzaInput.val();
firstOutput(numPeople, numPizzas);
setTimeout(function() {
secondOutput(getNumberOfPiecesPerPerson(numPeople, numPizzas));
}, 300);
setTimeout(function() {
thirdOutput(getNumberOfLeftoverPieces(numPeople, numPizzas));
}, 600);
});
});


body {
background: #000;
color: #fff;
font-family: 'Inconsolata', monospace;
}

h2 {
font-weight: normal;
}

.output {
margin-top: 10px;
}

p {
margin: 0 0 5px 0;
}

input {
border: none;
background-color: #000;
width: 50px;
color: #fff;
padding-left: 5px;
margin-bottom: 5px;
}

input:focus {
outline-color: #000;
}

main {
position: absolute;
left: 200px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}


<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<header>
<h2>Pizza Party ></h2>
</header>
<main>
<div class="firstQuestion">
<label>How many people?</label>
<input type="number" class="form-control" id="peopleInput" value="" name="" min="0" oninput="validity.valid||(value='');">
</div>
<div class="secondQuestion">
<label>How many pizzas do you have?</label>
<input type="number" class="form-control" id="pizzaInput" value="" name="" min="0" oninput="validity.valid||(value='');">
</div>
<div class="output">
<p id="firstStr"></p>
<p id="secondStr"></p>
<p id="thirdStr"></p>
</div>
</main>
</body>



*это не означает, что код стоит дороже, но по крайней мере интересно!

1
ответ дан 8 марта 2018 в 08:03 Источник Поделиться