Article preview component

Hi everyone! This is my solution of this challenge.

Questions:

• The share button has a share icon from FontAwesome, this is because when it is clicked it changes the background-color to a darker color and it changes its color to a white color and I didn't know how to make this with the svg given.
• I added an animation when the user clicks the share button, it rotates 180 degres. What I wanted it to do is to rotate 360 degres but somehow it wasn't working when I set .share-btn.active to have transform: rotate(360deg). Does anyone know why is this happening?
• The social icons container has a triangle at the bottom of it. The way I did it was with a square shape made by a div rotated 45 degres. Does anyone know other way to make it?
• Is there a difference when the .js document is named as main.js, app.js, scripts.js, etc? I'm currently learning JavaScript so it's a new world for me.

Built With:

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• JavaScript
• Mobile-first workflow
• BEM naming convention

Any feedback on how I can improve and reduce unnecessary code is welcome!