Skip to content

Conversation

@Grajales-K
Copy link

Learners, PR Template

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

Changelist

I’ve learned to manipulate the DOM by creating and appending elements like buttons and divs. I implemented a random quote generator, handled events to display new quotes and control auto-quotes, and added background sound functionality with the Audio mp3, enriching the user experience. 🔊

Questions

Ask any questions you have for your reviewer.

@Grajales-K Grajales-K added 🏕 Priority Mandatory This work is expected 📅 JS3 Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. 📅 Sprint 3 Assigned during Sprint 3 of this module labels Jan 19, 2025
@Grajales-K Grajales-K requested a review from mrvicthor January 19, 2025 11:31
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I loaded the app using Live Server on my computer, I see these errors in the browser's JS console:

image

The URL of the page (as shown in my browser) is http://127.0.0.1:5500/index.html.

Can you fix these two bugs?

@cjyuan cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jan 19, 2025
@cjyuan
Copy link
Contributor

cjyuan commented Jan 19, 2025

Chrome browser also shows this error:
Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

This is also the first time I am aware of it. Just thought you might be interested to know.
You do not have to fix it. If you want to fix the issue, you can do it after you have completed this PR first.

@Grajales-K
Copy link
Author

Chrome browser also shows this error: Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

This is also the first time I am aware of it. Just thought you might be interested to know. You do not have to fix it. If you want to fix the issue, you can do it after you have completed this PR first.

Thank you for the article @cjyuan I saw yesterday that the audio needs to have a displayed button where to mute or replay. Read more thank you for sharing this. I have to look into it.

@Grajales-K
Copy link
Author

When I loaded the app using Live Server on my computer, I see these errors in the browser's JS console:

image

The URL of the page (as shown in my browser) is http://127.0.0.1:5500/index.html.

Can you fix these two bugs?

Thank you, @cjyuan. I removed the script in the HTML to fix the error. I moved the media to the assets folder relative to the root directory. I can not see the error with the image on my side. Thank you for your quick response.

@Grajales-K
Copy link
Author

Grajales-K commented Jan 19, 2025

Chrome browser also shows this error: Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
This is also the first time I am aware of it. Just thought you might be interested to know. You do not have to fix it. If you want to fix the issue, you can do it after you have completed this PR first.

Thank you for the article @cjyuan I saw yesterday that the audio needs to have a displayed button where to mute or replay. Read more thank you for sharing this. I have to look into it.

@Grajales-K
Copy link
Author

Screenshot 2025-01-19 at 16 08 19

@Grajales-K Grajales-K requested a review from cjyuan January 19, 2025 16:13
@Grajales-K Grajales-K added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 19, 2025
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just suggested a way to fix the image URL problem. Feel free to mark this PR as completed anytime.

@@ -1 +1,75 @@
/** Write your CSS in here **/
body {
background-image: url("/Sprint-3/quote-generator/stars.webp");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using an absolute path, it is better to use a path "relative to style.css".

@Grajales-K Grajales-K added the Complete Volunteer to add when work is complete and all review comments have been addressed. label Jan 19, 2025
@cjyuan cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed. 🏕 Priority Mandatory This work is expected Reviewed Volunteer to add when completing a review with trainee action still to take. 📅 Sprint 3 Assigned during Sprint 3 of this module

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants