JSFiddle - React, Tailwind, and code Playground

by karolinka

HTML

<body>
    <header></header>

    <div class="wrap">
        <input id="letters" value="" />
        <label for="letters">Type a combination of commands!</label>
        <button type="button" onclick="mover(letters)">Done</button>
        <div class="grid">

            <svg id="circle" width="50" height="50">
                <circle cx="25" cy="25" r="25" />
            </svg>



        </div>

    </div>

    <footer></footer>

</body>

CSS

.grid{
	width: 500px;
	height: 500px;
	background: rgb(250, 250, 228);
	border:  grey 5px;
	border-style: dashed;
	
	margin: auto;
}

JavaScript

var rover={cx:0,
           cy:0,
           justification: j
};

var j= Math.floor(Math.random()*justificationArray.length);

var justificationArray = ['N','S','E','W'];


var directions=document.getElementById("letters").value;

function mover(directions){

for (i=0;i<=directions.length;i++){

switch(directions) {
    case "f":
        rover.cy+=1;
        console.log("forward");
        break;
    case "b":
        rover.cy-=1;
         console.log("backward");
        break;
    case "l":
        rover.cx-=1;
        console.log("left");
        break;
    case "right":
        rover.cx+=1;
        console.log("backward");
        break;
    default:
        console.log("Stagnation");
}

}


}