It’s my first time posting – hello everyone!
I’m making an app that’s going to help me memorize geographical data.
I have a map with markers on it, when I click on any of these markers a popup appears in which I have an input. I’m comparing the input value with input dataset to see if my answer was correct or not. The thing is, I would also like to change the color of the marker (ImageOverlay) to green as soon as my answer is correct and red if it’s wrong (as soon as any value appears).
The main problem I have is that those markers are mapped from an object which is fetched from firebase, meaning that every single input has to change the color of the corresponding marker and that marker only.
I hope I explained it clearly. Thank you so much in advance!
displayPins that maps data from a firebase doc:
const displayPins = doc.map((d) => {
return (
<ImageOverlay
className="img-overlay"
key={d.id}
bounds={[
[d.latitude - 2, d.longitude - 2],
[d.latitude + 2, d.longitude + 2],
]}
interactive={true}
url={`./${d.shape}`}
>
<Popup>
<input type="text" data-tag={d.name} onChange={valueCompare}></input>
<button
onClick={() => {
console.log(test);
}}
></button>
</Popup>
</ImageOverlay>
);});
Input’s onChange:
const valueCompare = (e) => {
const data = e.target.dataset.tag;
const value = e.target.value;
if (data != value) {
console.log("WRONG");
} else {
console.log("CORRECT");
}};
CSS
.img-overlay {
filter: brightness(0) saturate(100%);
}
.img-overlay-wrong {
filter: invert(10%) sepia(95%) saturate(7496%) hue-rotate(11deg)
brightness(97%) contrast(120%);
}
.img-overlay-correct {
filter: invert(69%) sepia(61%) saturate(4725%) hue-rotate(78deg)
brightness(112%) contrast(128%);
}
