ARTICLE PREVIEW COMPONENT using Flexbox and Vanilla JavaScript

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @lmaoken 👋🏻

  I took a look at your JS as you asked, and here are some suggestions:

  • First, it would be really great if you declared variables for all the selections, so you don't have to write document.querySelector('') each time. For example:

  const btn = document.querySelector('.btn__share');
  

  of course you should use more descriptive names, this was just a demonstration.

  • Next, I suggest creating classes in CSS and give all the styling that should be applied to the button or whatever you're toggling and then in JS just add and remove those classes or even better use toggle method. You can check out my **solution to see how to do it. When, you give styles with .style it adds inline styling, and then it's pretty much stuck in your HTML, unless you refresh the page, so it would be a lot better to implement those styles in CSS then play with the classes in JS.
  • Lastly, you should add `aria-expanded="false" in HTML, and then according to the state of the pop-up change to true, I also have that implemented in my solution.

  I hope this was helpful 👨🏻‍💻 other than that, you did a superb job, I knew you got this and this is just the begging. You've got a lot to do and to practice, but you'll get there, trust me. Cheers 👾

  Marked as helpful

  1

  ---

  

  Ken•935

  @kenreibmanPosted about 3 years ago

  @kens-visuals Thank you! You explained this so well. I really appreciate you taking time out of your day to drop some valuable knowledge.

  Great work on your recent projects!

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @lmaoken you're welcome, as always glad to be helpful 😇

  Thank you, I really appreciate it 👌🏻

  0