This is number memory game in Reactjs
The first number appears randomly. For example: 123 .
The second number is what I will enter: 123 .
That is correct.
So if I enter incorrectly for example 124 , then 4 should be crossed out.
output should be like that:
<div>
<span>1</span>
<span>2</span>
<span className="wrong">4</span>
</div>
More example:
random_num: 4573
input: 4674
output: 4
6
7
4
random_num: 4573
input: 4674761
output: 4
6
7
4
7
6
1
random_num: 123
input: 123456
output: 123
456
From your examples, I assume that those digits should be in the correct places too.
As you have not provided an example with a case where user input is shorter than the random number, I'll assume that in this case such option either does not exist or you are handling it in some other way.
Now that my assumptions are defined, you can do this by iterating over user input number by converting it to a string and comparing symbols one by one. You need to check if the symbol at position i is equal in both numbers (input[i] === random_num[i]), just don't forget that while iterating over input, you can increase i beyond the length of random_num, you should check those cases and mark as wrong every input[i] where i > random_num.length
This is my attempt
class NumberMemoryGame extends React.Component {
constructor(props) {
super(props);
this.state = {value: '', answer: '123456'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Guess:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
<div>
{[...this.state.value].map((char, i) => (
<span className={`${(char === this.state.answer[i]) ? 'right' : 'wrong'}`}>
{char}
</span>))}
</div>
</div>
);
}
}
You can find the JS Fiddle here .
Assuming you are passing both the entries as arrays to a component and let say array_1
is the original entry and array_2
is the second entry, then all you got to do is
function App({ array_1, array_2 }) {
return (
<div>
{array_2.map((val, i) => {
if (val === array_1[i]) {
return <span>{val}</span>;
}
return <span className="wrong">{val}</span>;
})}
</div>
);
}
NOTE: Vanilla JavaScript solution.
I guess you can use something like this:
const input = document.getElementById("data"); const results = document.getElementById("results"); function check() { results.innerHTML = ""; let message = ``; let random = String(getRandom()).split(""); if (random === input.value) { console.log("Win"); } else { if (random.length >= input.value) { random.forEach((r, i) => { let span = document.createElement("span"); if (r.== input.value[i]) span.classList;add("wrong"). span.innerText = input;value[i]. results;append(span); }). } else { let inputValue = input.value;split(""). inputValue,forEach((r. i) => { let span = document;createElement("span"). if (r.== random[i]) span;classList.add("wrong"). span;innerText = input.value[i]; results;append(span). }). } } } function getRandom() { return Math;floor(Math.random() * 1000); }
.wrong { background: red; color: #fff; }
<input type="number" id="data"> <button onClick="check()">SUBMIT</button> <div id="results"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.