The process of altering a grid in HTML and adding color to a single square

I am facing a challenge that I can't seem to overcome. I need to create a game using HTML, CSS, and JS. The concept involves a grid where upon entering a number into a text box, a picture of a cartoon character is displayed in a square which turns green. Clicking a button then moves the character to another square on the grid, again turning it green. This process continues until the end of the game, requiring the grid (map) to change accordingly. Despite my best efforts in searching for solutions, I have come up empty-handed. Can anyone offer me some guidance? Your help would be greatly appreciated. Wishing you a wonderful day! Below is the script for the grid along with the accompanying HTML representation.

.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left:15px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 45px 45px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container" id="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ... (additional grid items)
</div>

javascripthtmlcsscss-grid

Answer №1

I have decoded your query by demonstrating how to capture an input and link the number to the corresponding cell.

document.querySelector('.numinput-btn').addEventListener('click', e => {
  let num = document.querySelector('.numinput').value
  // reset the grid and set the on state for the provided number
  document.querySelectorAll('.grid-item').forEach((el, index) => {
    if (index == num - 1) el.classList.add('onstate');
    else el.classList.remove('onstate');
  })
})
.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left: 15px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 45px 45px;
  font-size: 30px;
  text-align: center;
}

.onstate {
  background: green;
}
<div align='center'>
  <input type='number' class='numinput' /> <button class='numinput-btn'>find</button>
</div>
<hr>
<div class="grid-container" id="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ... <!-- Additional grid items removed for brevity -->
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Answer №2

Your explanation may need further details as I am not entirely clear on your objective here. Where specifically is your input located, and how does it interact with the grid?

If you are looking to modify a specific cell within the grid, you can attach a click event listener to the entire grid and then check if the clicked target is a cell.

const handleCellClick = (e) => {
  if (e.target.classList.contains('grid-item')) {
    e.target.classList.toggle('grid-item-active');
  }
}

document.querySelector('.grid-container')
  .addEventListener('click', handleCellClick);
.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left:15px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px 15px;
  font-size: 10px;
  text-align: center;
}
.grid-item-active {
  background: #0F0;
}
<div class="grid-container" id="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting jQuery JavaScript to work on Wordpress and feeling lost about how to implement no-conflict mode syntax

Trying to implement the code from this Codepen http://codepen.io/eternalminerals/pen/qdGvMo on my WordPress website at I understand that since WordPress is in no-conflict mode, I need to change $ to jQuery. I have made this adjustment and ensured that the ...

javascriptjqueryhtmlcsswordpress

Converting Coordinated Universal Time (UTC) to local Unix time: A step

I am currently working on a React application that includes a survey component. When a user decides to skip the survey, I want it to reappear after a certain amount of time has passed (measured in days or hours). The rejected time is provided in UTC format ...

javascriptreactjs

Code snippet for fetching JavaScript file using Angular's caching mechanism

Currently in my project, I am utilizing $.getScript to dynamically load specific sections of code. Here's a snippet of how it looks: var mainJs = "/main.js"; $.getScript( mainJs ) .then(function () { console.log("main.js loaded"); }); ...

javascriptjqueryangularjscachingangular-cache

Using AJAX in jQuery to toggle the visibility of rows in a table with the each

Currently, I am working on an MVC 5 application where I am attempting to utilize a script to toggle the visibility of buttons in each row based on data retrieved from a database using Ajax. function setButtons() { $('#MyList > tbody > ...

javascriptjqueryajaxasp.net-mvc-4

How can we align the top edge of a div to the center of a circle within a separate div in a responsive manner?

I want to create 2 stacked divs: the first div contains a circular image, and the second div contains text. I want the second div to always cover half of the circle, with its upper edge positioned at the center point of the circle. This is my code: .cov ...

javascripthtmlcssbootstrap-4

I am trying to understand why my React component's render function is being called twice - first without any data and then again with data, resulting in a

I am facing an issue with my TreeNav component, where the data is fetched from an API call. I have set up the reducer, action, and promise correctly, but when I try to map over the data in the component render function, I get an error saying "Uncaught Type ...

javascriptreactjsreduxreact-redux

Adding an existing element to the DOM using Javascript/jQuery

I am facing an issue in my DOM where I have an element with two children, a div block and a button. My goal is to add a new copy of the same div block to the parentNode whenever the button is clicked. Currently, I am using the following code in the button ...

javascriptjqueryhtmldom

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Looking to extract data from an HTML page, a simplified example is provided below. Upon running the code, I anticipate the output to be [ "foo", "baz", "quux", ] but instead encounter an error message stating "TypeError: anch ...

javascripthtmljquerycheerio

Navigating through directories (including nested ones) containing images in React Native; what's the best way to approach this

I am currently attempting to organize groups of images. Within the directory ./assets, there are several folders structured as follows: ./assets ├── 1x3 │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg └── 3x3 ├── 1. ...

javascriptreactjsreact-native

How to retrieve the content/value from a textfield and checkbox using HTML

I'm encountering an issue with my HTML code where I am unable to extract data from the HTML file to TS. My goal is to store all the information and send it to my database. Here is a snippet of the HTML: <h3>Part 1 : General Information</h3 ...

javascripthtmlangularjsionic-frameworkionic3

Navigating variable columns and rows in a static column table

Here is a preview of how my table will appear: <table> <thead> <tr> <th>Name</th> <th>Week 1</th> <th>Week 2</th> <th>Week 3</th> </tr> < ...

javascriptangularjsbreeze

Avoiding the separation of hyphenated words when they overflow on a new line

My code is designed to limit text to two lines and show an ellipsis if there is more content. However, I am facing an issue with hyphenated words like "breath-taking" not being treated as one word. Instead, they are often cut off at the end of the second l ...

htmlcssoverflowcss-hyphens

Rendering an element in React Router Dom based on specific conditions

Starting a new project with the latest version of react-router-dom and following their recommendation to use createBrowserRouter. The goal is to display a different header based on the path parameters. Currently, I have set up an optional path parameter: ...

javascriptreactjsreact-routerreact-router-dom

Custom stylesheet for individual users?

On my website, users can pick a template for their webpage. After selecting a template, I would like them to have the ability to customize certain styles like the font color. Is there a way to achieve this? I was thinking about saving the user's cus ...

htmlcssasp-classic

What is the process for verifying that a checkbox is unchecked through the use of Ajax and PHP?

I am working with a checkbox element in my form. Here is the code: <input type="checkbox" value="yes" id="checkBox"> This checkbox is part of my form, and I am sending the form data to a PHP file using Ajax: var check = $('#checkBox').v ...

phpjqueryhtmlajax

What is the best method for extracting one specific data point from a database table?

Currently, I am faced with a challenge in fetching data from one database table to another. Despite successfully utilizing SQL's JOIN feature for this task, I still struggle with isolating a single result from the database and showcasing it on the res ...

phphtmlsql

Using a template literal as a prop is causing rendering issues

I have a functional component const CustomParagraph = forwardRef((ref: any) => { return ( <div> <p dangerouslySetInnerHTML={{ __html: props.text }}></p> </div> ); }); Whenever I use this component, I am unable ...

javascriptreactjstemplate-strings

A new value was replaced when assigning a JSON value inside a loop

Is there a way to generate a structure similar to this? { "drink": { "2": { "name": "coke", "type": "drink" }, "3": { "name": "coke", "type": "drink" } }, "food": ...

javascriptjqueryjson

Adjustments made to the size of the h1 font

I am perplexed by the fact that these two h1 tags have different font sizes, even though they have identical properties and declarations. From what little knowledge I have, it seems like it may be related to inheritance; considering one h1 tag is nested an ...

csstypography

Angular - remove elements from an array within a directive when encountering a source error

If an image does not exist, I need to remove the item and push the next one inside ng-repeat. Currently, I am using a custom directive called "noImage". myApp.directive("noImage", function() { return { link: function(scope, element, attrs) { ...

javascriptangularjs