Help with Javascript, HTML, CSS.

Instructions:

I made a 9x9 grid of text input boxs and was wanting the color of the box to change to green if that is the box the user is in. I already made a way to change the text box to green when you click on a given box but you might notice that when you use tab, the green doesn't follow you to the next box. I would like the green to only be in the box the user is in which is why I made the green go away from the previous box when you click on a new box.

I am looking for help on two things:

1. Make it so when you use tab to go to the next input box, that new input box turns green.

2. If it is possible(not sure if it is), allow the user to use the arrow keys to move around the boxs while also keeping the same idea with whatever box the user is in, is green.

I'd like the style of the project to stay the same(the text boxs) but feel free to change any of the code to make it work. If you do change or add code, please leave a note explaining what you did. Thanks for your help!

chegg.js

let singleCell = []; window.onclick = e => { singleCell.push(e.target.id); console.log(singleCell); if(singleCell[singleCell.length-1].length==2||singleCell[singleCell.length-1].length==3){ document.getElementById(e.target.id).style.backgroundColor = '#b5ffb9'; } if(singleCell[singleCell.length-2].length==2||singleCell[singleCell.length-2].length==3){ document.getElementById(singleCell[singleCell.length-2]).style.backgroundColor = 'white'; } return singleCell; }

chegg.html

chegg.css

body { margin: 0; padding: 0; font-family: 'Arial' , serif; text-align: center; background: #7395AE; }

input[type=text] { border: 1px dotted #000; height: 7vmin; width: 7vmin; font-size: 20px; font-weight: 600; text-align: center }

.top { border-top: 2px solid #000!important }

.bottom { border-bottom: 2px solid #000!important }

.left { border-left: 2px solid #000!important }

.right { border-right: 2px solid #000!important } .nav{ background-color: #B1A296; color: #ffffff; font-size: 40px; list-style: none; text-align: center; margin:0; padding: 25px 0 25px 0; }