DEV Community

Cover image for #CodepenChallenge 100 List Items! Emoji List with Skeleton
Takane Ichinose
Takane Ichinose

Posted on

1

#CodepenChallenge 100 List Items! Emoji List with Skeleton

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)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️