https://codepen.io/FuriousJK/full/YMoNgZ
My first javascript project is almost ready and needs some help to complete it. I am facing trouble to implement the following two things in my project,
1] I want to make the transition of my background and quote box smooth. Any idea how do I do that? I tried messing with transition property but didn’t work.
2] When I click on the tweet button, it doesn’t show the text in the new window.
I made a fork of your pen and played around a bit.
I think there are a few issues, but to smooth the animation of the quote box coming in and out, I moved your transition to the quotes in your CSS.
Second I added a setTimeout for 1s around where you change what is being displayed and adding the slide class back. This meant after 1s of the old quote sliding out the new one slid in. I tried different values here but 1s seemed to work best.
You’re also calling the same endpoint with fetch multiple times so I think you could just do a setup function rather than your initial random quote function. You could then add the random quote function to the “.then” where you got the data back.
You can then set the href of you tweet link inside the random quote function. Your current code was setting this on the button and not the link. Think it should just be a link anyways. I don’t think the eventListener here is needed though.
You might also try to preload the images so the changing of images is slightly less jarring if the person doesn’t already have the images in their cache.
my fork
Unfortunately your also not including the test suite https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
The transform will cause you to fail the final test that checks that the quote box is centered, unfortunately.
Hope this helps you
Thanks a lot for a detailed explanation! It really helped a lot. Code optimization seems really neat now. Also thanks for introducing the preloading images to me. I was actually thinking of doing something about images to improve the performance and you showed it me 