microsoft / Web-Dev-For-Beginners

24 Lessons, 12 Weeks, Get Started as a Web Developer
https://microsoft.github.io/Web-Dev-For-Beginners/
MIT License
83.61k stars 12.36k forks source link

typinggame_solution_index.js #1346

Open shivamdroidoreo opened 1 month ago

shivamdroidoreo commented 1 month ago

Issues found: Child node selection issue: The code is using quoteElement.childNodes[0] and quoteElement.childNodes[wordIndex]. The childNodes property includes all nodes, such as text nodes, which can interfere with the correct selection of elements.

Solution: Use children instead of childNodes, as children only selects element nodes and excludes text nodes.

Handling case when the last word is typed correctly: In the current implementation, after the last word is typed, the code does not reset for a new round or disable further input to prevent errors.

UI elements might not exist: There's no check to ensure that the quoteElement, messageElement, and typedValueElement exist in the DOM before trying to manipulate them. If these elements are missing, it could cause runtime errors.

Unnecessary word space in spans: There's an extra space (" " after each word in the span element generation), which may lead to display issues when highlighting words.

rajneesh-18 commented 1 month ago

Can you provide some screenshots related to the issue.

saikishoreMSK commented 2 weeks ago

Hey @shivamdroidoreo , I’m new to open source and have resolved the issues mentioned, including child node selection, last word handling, UI element existence checks, and removing extra spaces in span elements. Could you please review the changes when you have a moment? Thank you!