DEV Community

loading...
Cover image for #CodepenChallenge 100 List Items! Emoji List with Skeleton

#CodepenChallenge 100 List Items! Emoji List with Skeleton

takaneichinose profile image Takane Ichinose ・1 min read

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.

Discussion

pic
Editor guide