Увеличение изображение до max а потом до min

[Vardges]

Добрый день. Учу JS, учитель дал задание.
Существует картинка 200px на 200px(далее min), она увеличивется на 50px при каждом нажатии и так до 500px на 500px(далее max),как только размер картинки достигнет до max она уменьшает на 50px при каждом нажатии до min,и так далее. Вот html код.

<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>

Мучаюсь 3 дня не могу решить. Помогите решить и желательно объясняя каждый шаг.

[Dilettante_Pro]

<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>
<script>
var elem = document.querySelector('img'),
      sign = 1,
      stepSize = 50,
      minSize = 200,
      maxSize = 500,
      curSize;
elem.onclick = function() {
   curSize = elem.width + stepSize * sign;
   elem.width = curSize;
   elem.height = curSize;
   if(curSize == minSize || curSize == maxSize) sign = -sign;
}
</script>

Комментарии нужны?

[Vardges]

<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>
<script>
var elem = document.querySelector('img'),
      sign = 1,
      stepSize = 50,
      minSize = 200,
      maxSize = 500,
      curSize;
elem.onclick = function() {
   curSize = elem.width + stepSize * sign;
   elem.width = curSize;
   elem.height = curSize;
   if(curSize == minSize || curSize == maxSize) sign = -sign;
}
</script>

Да был бы благодарен т.к. все команды мне не знакомы. Главное понять какая часть за что отвечает а остальное сам прогуглю

[Dilettante_Pro]

Vardges,

все команды мне не знакомы

Все-все не знакомы? Или не все знакомы?
Что конкретно непонятно?

[Vardges]

if(curSize == minSize || curSize == maxSize) sign = -sign;

вот эта часть, разве если "curSize == minSize" не должно быть sing=+sing
а если "curSize == maxSize" sign=-sign?

[Dilettante_Pro]

Vardges,
Если последний вычисленный размер равен минимуму или максимуму, то sign меняет знак.
1 превращается в -1, -1 превращается в 1.

[Vardges]

<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>
<script>
var elem = document.querySelector('img'),
      sign = 1,
      stepSize = 50,
      minSize = 200,
      maxSize = 500,
      curSize;
elem.onclick = function() {
   curSize = elem.width + stepSize * sign;
   elem.width = curSize;
   elem.height = curSize;
   if(curSize == minSize || curSize == maxSize) sign = -sign;
}
</script>

Да был бы благодарен т.к. все команды мне не знакомы. Главное понять какая часть за что отвечает а остальное сам прогуглю

значит во 2ом случии работает принцип --=+?

[Dilettante_Pro]

значит во 2ом случии работает принцип --=+?

Естественно. Обыкновенная арифметика.

[Vardges]

Спасибо огромное,вы сильно помогли мне.