Article Preview Component: jQuery/JS & Extra Challenges
Design comparison
Solution retrospective
Dear Fellow-coders:
This was an interesting challenge for me for a couple of reasons. First, the layout was not too difficult, at least until I had to construct the social icon "bubble." If there was an .svg for this somewhere, I certainly did not find it. I ended up using the Figma illustration for my model. The second reason I found this interesting was that it gave me time to work more with the JavaScript and jQuery. Consequently, I decided to add on some personal challenges just for practice. In addition to the FM challenges, there were my personal goals:
- Have the date of the post update so it always displays the current date.
- Create hover effects for the share button and the individual links plus the social media channels
- Have the share "bubble" animate/transition in and out at a controlled rate
- Have the share "bubble" disappear when the share button is clicked a second time (especially helpful at the media query @375px).
Probably my biggest challenge was trying to put hover effects on the "share arrow" plus the <div> it sits in (after making it a circular button) so they both changed to opposite colors at the same time. While I could get them to do it separately with CSS, I had to resort to JavaScript/jQuery to get them to do it at the same time. If someone has a way to do this with CSS alone, I would be so appreciative if you would share it with me.
Anyway, if you get a chance to take a look at my solution, I'd sure love any constructive feedback - positive or negative. If you peruse my README file on the repository, you'll see some of my areas of concern and focus. Otherwise, I could use feedback on what you think of:
- The way I organized my CSS
- The structure and organization of my HTML (sometimes I should practice more restraint on creating containers, lol!)
- A shorter method of getting the current date formatted as DD-MMM-YYYY either using jQuery or JavaScript
Thank you ahead of time for taking a look at my solution. I am always so appreciative for any comments you could offer. I learn so much through this process.
Best wishes, All!
Jeff
Community feedback
- @jhellardPosted over 1 year ago
Hey Jeff! The solution looks great, I like the drop-down (or drop-up? 😂) menu a lot.
The CSS is very well structured, I will say the selector approach used is not one I see often. I gravitate towards the Block, Element, Modifier (BEM) approach myself, It's a more concise way of writing class names that I believe makes it easier to maintain in the long run, especially using something like Sass for nested selectors. Native CSS nesting is a thing now but it still very early, I'd take a look at THIS video for more information.
HTML structure looks good, great use of semantic tags. There are a few containers that aren't necessary but nothing excessive.
If you are not opposed to importing libraries, there is a great one called Moment.js that I often use for getting dates formatted, it is super simple to work with.
As for the CSS hover question, you could change the 'fill' on the SVG to 'currentColor' and when you modify the 'color' in CSS it will change accordingly. You could then use a custom CSS class to modify the div and the svg on hover to the desired colors. Here's an ARTICLE more about this. I'd be happy to throw a CodePen together for you to demonstrate this if you'd like, I know it can be a bit confusing.
Keep up the great work! Happy coding!
Marked as helpful1@jguleserianPosted over 1 year ago@jhellard Hey, Joshua,
Wow! Thank you for the awesome feedback. The video link you gave me was inspirational - I always wondered why nesting was not possible because it would make things so much easier. Well, and now here it is! I'm definitely going to try that on the next project.
I think I'll also try the BEM approach as well. It still feels weird when
<p>elements or<img>elements are so far removed from their containers. It's so much more logical to put everything right next to the container itself. The only issue that has stopped me is if I am formatting something globally, for example an<h1>or a<p>or something like that; though, I guess, anything universal could always go in the<body>. Is that how you do it?I also didn't realize you could set the fill color in the HTML as "currentColor." That's a neat trick. Then if I "join them" with a common CSS class, the hover effect would basically toggle everything in the
<div>instead of each one separately (which is what I got at first). I'll check out the article in the link you gave me.Once again, I am so appreciative of your help and direction - they were so valuable. I'm definitely going to give them all a try. Thank you for taking the time to look at my solution.
Sincerely,
Jeff
1@jhellardPosted over 1 year ago@jguleserian I'm not quite sure I fully understand what you mean in that second paragraph, could you elaborate? I assume you mean the HTML structure, having elements not nested in containers?
0@jguleserianPosted over 1 year ago@jhellard I think my second paragraph was confusing because I thought I understood what you were talking about with BEM. I assumed that it was merely a way of organizing the order of the CSS. However, now that I am diving into the article and doing some research, I realize that it is a system of nomenclature that is treated systematically to improve readability, even when looking only at the HTML.
So, please disregard that confusing paragraph while I swallow my piece of humble pie and use this as an opportunity to grow and accelerate forward. BEM methodology really opens up a whole new horizon to explore. Again, I really appreciate you pointing it out to me. I have already started another project, but I'm thinking of going back and trying to incorporate the new nomenclature as a way of learning it.
Thank you again for your help. I've looked at your comments on other novice coders in FM. It looks like you have some valuable experience and mastery over a lot of things. I hope to meet up again in the future and glean more of your wisdom. Thank you for investing in the lives of those on here trying to improve and make a difference!
Jeff
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord