Most efficient way to solve an adjacent element problem in vanilla js + html?

Most efficient way to solve an adjacent element problem in vanilla js + html?

This is the problem:

This is the problem:

Create a 10x10 grid using html, vanilla javascript, and css.

When a square on that grid is clicked, change the background color of the adjacent squares (the one on top, to the left, etc) to yellow.

I was able to solve this problem, but I don't think it's efficient - My html is only one line:

<table id="grid"></table>

And I used javascript to manually populate the table with a bunch of cells/squares. I gave each cell an two attributes data-row and data-col to store where the cell is located. Then on click I'm doing something like this:

  var row = this.getAttribute('data-row');
  var col = this.getAttribute('data-col');

...

//if not on the top most row, retrieve square above if(row>0){ let sel = "td[data-row='"+(row-1)+"'][data-col='"+col+"']"; let elem = document.querySelector(sel); elem.classList.toggle('yellow'); }

...

//3 more if blocks like the one above to find the bottom, left and right squares

Is there a more efficient or concise way of doing this? Thank you for your responses in advance! It's appreciated :)

javascript html html5

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

HTML JavaScript - Add Javascript File to HTML

Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc

How to do basic Animations with HTML5 Canvas Element and JavaScript API

In this Canvas crash course, you'll learn how to do basic animations with HTML5 Canvas Element and JavaScript API. We will look at the HTML5 Canvas element and JavaScript API to draw shapes, paths and do some basic animation. <canvas> is an HTML element that allows a user to create graphics using JavaScript. To start a canvas project, we will need an HTML file and a Javascript file. Using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag.