London | 25-ITP-May | Houssam Lahlah | Sprint 3 | Slide show #751
Conversation
- Changed console.log to use address.houseNumber instead of address[0] - Ensures correct display of house number in output
- Replaced invalid for...of loop on object with Object.values() - Ensures all property values of author are logged without errors
- Replaced object string output with ingredients joined by newline - Ensures each ingredient is printed on its own line as intended
…and fix it from the original main branch
…w controls - Changed button IDs in HTML to 'auto-forward', 'auto-backward', and 'stop' - Updated slideshow.js to use the new button IDs - Fixed test errors caused by mismatched element IDs in automatic slideshow feature
…w controls - Changed button IDs in HTML to 'auto-forward', 'auto-backward', and 'stop' - Updated slideshow.js to use the new button IDs - Fixed test errors caused by mismatched element IDs in automatic slideshow feature
- Uses that delay in milliseconds when auto-forward or auto-backward is activated. - Disables/enables delay input along with auto buttons for a clean UX.
HoussamLh
added
the
Needs Review
sambabib
added
Review in progress
| <title>Title here</title> | ||
| <script defer src="slideshow.js"></script> | ||
| <title>Image carousel</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> |
There was a problem hiding this comment.
I ran your demo and I can see the buttons move up and down the page when the image changes to the next slide. if you had to improve the UX of this app, what would you change?
There was a problem hiding this comment.
Thanks for the feedback! I would improve the UX by keeping the navigation buttons fixed in a consistent position, so they don’t shift when the image changes. I’d also add smoother transition effects between slides and ensure the carousel is responsive for different screen sizes.
There was a problem hiding this comment.
this is an interesting approach but I am sure there is a better way to do this. Have you tried separating the image and control buttons on the page. Perhaps having different containers for them?
| } | ||
|
|
||
| forwardBtn.addEventListener("click", () => { |
There was a problem hiding this comment.
Thank you! I appreciate the feedback.
I’ll keep refining the UX to make the carousel smoother and more consistent.
| @@ -12,4 +12,4 @@ const address = { | |||
| postcode: "XYZ 123", | |||
| }; | |||
|
|
|||
| console.log(`My house number is ${address[0]}`); | |||
| console.log(`My house number is ${address[0]}`); | |||
There was a problem hiding this comment.
did you check your console to see the result of this console.log? You appear to be using a property reserved for arrays on an object. My log shows me "My house number is undefined" which is not the expected behaviour.
| @@ -12,4 +12,4 @@ const recipe = { | |||
|
|
|||
| console.log(`${recipe.title} serves ${recipe.serves} | |||
| ingredients: | |||
Self checklist
## Changelist
What I did:
Built a JavaScript-powered image slideshow.
Implemented manual navigation using Next and Previous buttons.
Added automatic slideshow functionality that cycles through images at a set interval.
Ensured the slideshow loops correctly when reaching the start or end.
Used setInterval and clearInterval to manage timing and prevent conflicts.
## Questions
Do you think the code handles both manual and automatic slideshow smoothly?
Is the interval management clear and easy to maintain?
Any improvements for better accessibility or responsiveness?