I had been wanting to learn more about HTML, CSS, and JavaScript for a while, so I figured I should do a series of mini-projects that could hopefully help me in familiarizing myself with these three.
I recreated Twitter's 'Who to follow' card using HTML and CSS (and some JavaScript), and I used theming for the first time!
Would love to hear your thoughts on this. Any improvement on the code I could implement?
If you found this cool or useful, consider buying me a coffee.
Top comments (9)
I like it.
Looks neat and even modern Light/dark theme support.
Here some advices for your JS code:
Take a look at the classList property.
It’s a cleaner way to work with class dynamic/toggling since it handles classes “array-like” and also offer methods like
toggle.Additionally you might not wanna use
innerHTMLto change only the text as it might cause unwanted behaviour. Use innerText instead.Oooh! Thank you so much! I knew there was a toggle somewhere but I wasn't sure, I should've Google'd it.
Code should be updated now. Thank you for your help! 😁
Still using className in the body variable
It is a cute UI you have implemented.
And if you try to abstract the generation of name and username with the follow button in javascript function so you can add many users quickly without touch again your html may be an array. And the adding of @ can be done with javascript instead of CSS.
And if you add a simple animation when color changing on follow button ?.
But you UI impressed me, very cute. 😎
Thank you! But it's Twitter's UI, not mine hehe :)
I'm not sure what you mean by abstracting the generation of name and username. Could you explain further?
Really nice, I like it!
You might wanna check out using BEM naming for your CSS classes.
Ah yes, I have looked into the BEM structure for CSS before. I really should put that into practice, my naming habit dies hard. Thank you! :)
Wow looks good.. ☺️
Thank you! ♥