Typing Progress Bar

[Mefisto04]

Describe your change:

• [ ] Add a Project?
• [ ] Fix a bug or typo in an existing Projects?
• [ ] Documentation change?

Checklist:

• [ ] I have read CONTRIBUTING.md.
• [ ] This pull request is all my own work -- I have not plagiarized.
• [ ] I know that pull requests will not be merged if they fail the automated tests.
• [ ] This PR only changes one Project folder. To ease review, please open separate PRs for separate algorithms.
• [ ] All new Project files are placed inside an existing directory.
• [ ] If this pull request resolves one or more open issues then the description above includes the issue number(s) with a closing keyword: "Fixes #ISSUE-NUMBER".
• [ ] My code follows the style guidelines of this project
• [ ] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] My changes generate no new warnings
• [ ] The title of my pull request is a short description of the requested changes.
• [ ] I have made corresponding changes to the documentation
• [ ] My PR needs documentation change

ATTACH SCREEN-SHOTS

Before	After
< Before Image >	< After Image >

[netlify[bot]]

✅ Deploy Preview for frontend-database ready!

Name	Link
🔨 Latest commit	c5ab7a2a481c37a68f3ad4d365c4653d5e711e28
🔍 Latest deploy log	https://app.netlify.com/sites/frontend-database/deploys/652189d0963fb50008f1ce29
😎 Deploy Preview	[https://deploy-preview-24--frontend-database.netlify.app/projects/typing progress bar](https://deploy-preview-24--frontend-database.netlify.app/projects/typing progress bar)
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pr-explainer-bot[bot]]

Pull Request Report

Hey there! I've created a report for your pull request. Let's dive in!

Changes

1. Added a new project "Typing Progress Bar" to the ProjectList.json file.
2. Added a new HTML file index.html for the "Typing Progress Bar" project.
3. Added a new JavaScript file script.js for the "Typing Progress Bar" project.
4. Added a new CSS file styles.css for the "Typing Progress Bar" project.

Suggestions to Improve Code

1. Consider using more descriptive variable names in the script.js file. For example, instead of wordDisplay, you could use typingDisplay to make it clearer.
2. Add comments to explain the purpose and functionality of different sections of code, especially in the script.js file.
3. Use consistent indentation throughout the codebase to improve readability.

Bugs

No bugs found.

Improvements

1. Move the CSS styles from the styles.css file to an external file or use inline styles for better separation of concerns.
2. Consider using a CSS preprocessor like Sass or Less to make the styling code more maintainable and reusable.

Code Refactoring

In the script.js file, the following code snippet can be refactored for better readability:

wordInput.addEventListener('input', function () {
    const inputText = wordInput.value;
    const expectedWord = wordsArray[currentWordIndex];

    if (inputText === expectedWord) {
        currentWordIndex++;
        wordInput.value = '';
        updateProgressBar();

        if (currentWordIndex === wordsArray.length) {
            alert('Congratulations! You typed all the words correctly.');
        } else {
            wordDisplay.textContent = wordsArray[currentWordIndex];
        }
    }
});

Rating

I would rate the code a 7 out of 10 based on the following criteria:

• Readability: The code is generally readable, but some variable names could be improved for better understanding.
• Performance: The code seems to be efficient and doesn't have any noticeable performance issues.
• Security: The code doesn't involve any security-related operations, so there are no specific security concerns.

That's it for the report! Let me know if you need any further assistance. Keep up the good work! 👍