Feedback welcome.
Was a fun one to wrap my head around in the JS side of things. Was fun to get into working with SVG properties on a more fine detailed level.
Press q on keyboard to dramatically reduce timer lengths for testing purposes.
Challenged myself to create the flip without any internet copy pasting.
Will be a fun one to incorporate in other projects. Nice challenge.
Any formatting or logic bugs? I'd love to know.
Thanks!
I am going to continue on with this project working on dynamically generated 'body' content so the header and footer stay in place and the rest generates. I also plan to update the 'locations' page to have better maps instead of just the placeholder images.
Happy to hear any notes / suggestions / formatting-bugs discovered.
Curious if anyone has ever experimented with animating individual parts of a SVG and if so what they found the most success with.
Took a while trying to optimize for mobile.
Comments on bugs or formatting issues welcome. Thanks!
Decided to use Node to sanitize the incoming data. Kept the client side JS very minimal.
Local Storage utilized to save theme.
Any suggestions or comments welcome.
that's a tricky one. Short answer is 100vh is the full device screen -- NOT the browser available window. In leu of trying to go deeper on this feedback form... check out these resources:
https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
Hey MD,
This looks nice. Responsiveness is working well.
I notice that when I search for a domain - it is not giving a location. Just wanted to let you know!
Best,
David
Hi Bluerhythmz,
Looks nice!
When you have a chance to make it responsive using media queries be sure to re-post. Look forward to seeing it.
Best,
David
Hi TP,
You are getting the horizontal scrollbar because your arrow div has a width of 500px and is causing that stretching. You should define a width for that to help with this issue.
One trick to try is if you have a component that you know is it's own entity and all contents must stay inside is to use overflow: hidden on the container for the component. Then anything that overflows will disappear. It's not super helpful for troubleshooting code but has some helpful use cases.
Hope this helps.
David
Nice Job Nicole,
It looks great and the form validation seems to be fully functional.
padding-right on the .text div so that when screens get smaller the text isn't right up against the photo. Keep it up!
David