This is a list of emojis, made entirely in <ul> and <li> tags.
The "looks" of these icons may vary depends on the system you're using. On my screenshot, I was using Windows 10.
The UI layout is inspired by Windows 10 application management, on the settings. I just changed the color scheme, but the concept is almost the same.
You may click on the list to show the description. The animation is made only by CSS. I am just setting the --height property of HTML style attribute, while I'm using it as a variable, and set the height attribute, and use it as a transition -ing property.
I hacked on the text of the list, by using the content attribute of CSS. Those texts and emojis are just added by the CSS attribute. I did this, to save usage of HTML tags, because I have to keep 100 list elements.
I could not make 100 lists, but I made 100 elements. Though, the other lists will appear (or at least appear) on the skeleton, after loading the data. The method I done is somehow hacking, or cheating.
I didn't use any frameworks, or libraries on the functionality. These all are just in Vanilla JS.
Top comments (0)