[GitHub Pages](https://malaxor.github.io/cow-grazer/)

[Repo](https://github.com/Malaxor/cow-grazer)

I'm trying to move a cow (10px per move) up (North), down (South), left (West) and right (East) in a field. After I've collected an array of cardinal directions, I setting the cow's style.left and style.up and rotating it based on the directions in the array.

How do I first make the cow rotate in the direction before moving in it, then turing in another direction before moving in it? Right now, let's say there are 3 North directions in the array: the cow will move the whole 30px instead of the 10px per move. If there are East and South directions, the cow won't rotate East and move 10px East, then rotate South and move 10px South. It's important that the cow receive an array of directions before rotating and moving.

```
const cow = {
   directions: ['North', 'East'],
   addDirection(direction) {
      this.directions.push(direction);
   }
};

let num = 0; // will increment or decrement by 90 or 180
let key = null; // keep track of keys to determine how much to increment or decrement
cow.directions.forEach(direction => {
   switch(direction) {
      case 'North':
         if(!key) {
            cowEl.style.transform = 'rotate(0deg)';
         }
         else if(key === 'East') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'West') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'South') {
            num -= 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // North
         // setTimeout(() => cowEl.style.top = parseInt(cowEl.style.top) - moveBy + 'px', 1000);
         cowEl.style.top = parseInt(cowEl.style.top) - moveBy + 'px';
      break;

      case 'East':
         if(!key || key === 'North') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'South') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'West') {
            num -= 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // East
         // setTimeout(() => cowEl.style.left = parseInt(cowEl.style.left) + moveBy + 'px', 2000);
         cowEl.style.left = parseInt(cowEl.style.left) + moveBy + 'px';
      break;

      case 'South':
         if(!key || key === 'North') {
            num += 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'East') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }   
         else if(key === 'West') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // South
         cowEl.style.top = parseInt(cowEl.style.top) + moveBy + 'px';
      break;

      case 'West':
         if(!key || key === 'North') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'South') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'East') {
            num += 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // West
         cowEl.style.left = parseInt(cowEl.style.left) - moveBy + 'px';
      break;
   }   
});

```