Hi Guys, I tried using help from youtube, Shoutout to https://www.youtube.com/watch?v=YfQhEORL8Yg @Irvine-- If you check my solution please comment I have few doubts to clarify from you. It was not a difficult challenge but being a beginner to JS it was complete out of box task for me. All the suggestions are welcome and please help with good resources to learn JS.
Hi Sarthak,
One thing I would recommend is breaking each individual notification into sections. For example, the first notification could be like this:
<div class="flex">
<div class="avatar">
<img />
</div>
<div class="content">
<p><span>Mark Webber</span> reacted to your recent post <span>My first tournament</span> today!</p>
<p>1m ago</p>
</div>
</div>
So, breaking this down:
div has display: flex; (symbolized by the class), which causes the nested div tags to form a row by default.div tags is still laid out as normal, within the space allocated to them by flexbox.p tags stack on top of each other as they are block level elements. This means that no matter how much content is in the first p tag that gives notification information, the timestamp in the second p tag will always be below it.This setup allows you to break the flexbox div into sections horizontally and then put what content you want inside those sections so that the sections are self-contained (i.e. the notification info won't flow under the avatar when screen size changes) and block level align uniformly (i.e. the two p tags line up along the left edge at all times).
That was a bit of a long-winded explanation so if you need any clarification please feel free to ask. Also feel free to look at my solution since I used the same sort of approach I explained above.
Cheers, Mike
Good practice with some page arrangement and input validations. Wouldn't exactly put this into production but felt I covered a fair amount of bad-input error handling. Would like to implement some logic that would make the credit-card number input box space appropriately. Suggestions welcomed!
What I did for handling spacing of the credit card number was add an event listener for 'input' where I removed spaces from the current input value and added spaces back in at appropriate locations. Since the 'input' event fires on deletion (single or multiple) and copy-paste it also formats appropriately at those times. Please feel free to check out my submission if you'd like to check it out - I think it worked pretty well. I've added comments for clarity, but if you decide to check it out and have questions please feel free to ask.
Cheers, Mike
I feel like I had to write a TON of code for this one. Looking for any feed back to simplify it, in all forms (HTML, CSS and Javascript).
Also looking for feedback on how people go about building out the main site and then mobile site. I feel like I have to totally rewrite everything to structure the mobile version.
As far as CSS goes, I would recommend approaching the styling from a mobile-first perspective. This can simplify the layout as oftentimes the styling for the mobile version overlaps with the default styling in the browser (i.e. stacking content in a single column). I think this will help with your feeling of having to rewrite everything to structure the mobile version.
I think it would also be helpful to create a single error class since each error class has the exact same styling. You could give each error a class of error and instead assign them ids for ease of selection in JS. If you're looking to get rid of the form text shifting when an error occurs you could replace display: none; with visibility: hidden; as this will reserve space for the content but make it invisible until changed to visibility: visible;.
Cheers, Mike
I am unsure about how I have structured my divs and the corresponding structure of my SASS style sheet. It feels cluttered and overly complex somehow but I am unsure of protocols to follow in order to keep it tidy and concise.
Hi Graham,
The structure of the HTML looks fine to me, though it may be worth considering using section tags in place of the outermost div tags. Instead of using two separate inputs for MM and YY I would advise using the fieldset as it is made for grouping inputs together.
I found moving to a mobile-first approach helped me structure my styling more effectively. The reasoning is that if you approach the layout from a mobile-first perspective you will often be able to keep much of the default styling (i.e. content stacking to form a column) and then simply adjusting from there for wider screens. This may help you tidy up your styling and make it feel less complex.
Cheers, Mike
