B5 Review

[jshreyans]

Completed B5

[LakshSingla]

• While the right image is sliding in, a horizontal scroll bar appears. I think adding overflow-x : hidden to the body would prevent that.
• For right and left images you have checked them in a separate loop. Although it is fine when you have 2 different ways of making the image appear, but it would be very difficult to manage when you would have many different ways of making the image appear ( say slideLeft, slideRight, scaleUp, scaleDown, bounce, etc... ). It would be a lot better if you can somehow find a way of making it so that it can be done in only 1 loop and one could attach more transition classes as per their need. ( For example, if I can define @keyframes bounce { ... } transition and attach to all those elements with .bounce as their class and make that transition happen in the same loop, i.e. it is easily extensible ). HINT: You can try creating an array of objects as [ { elem: (HTMLElement), transitionClass: slideIn}, { elem: (HTMLElement), transitionClass: slideIn}, { elem: (HTMLElement), transitionClass: slideOut}, ....] for each element to be transitioned and then iterate over it. To create such an array you may need to use some array methods. (This is just a hint, you can do anyways you want to but make sure it is easily extendable) Apart from that, Nice Job

[jshreyans]

Thanks a lot! I've corrected the scrollbar problem and I'll definitely work on the second point too.