IntermediateWeb4-5 hours+150 XPMentor reviewed

Neumorphic Alarm Clock UI

Build a modern Neumorphic Alarm Clock UI based on the provided design. The interface should include a clock display, alarm list, toggle switches, and an add button. Focus on creating the neumorphism effect using soft shadows, depth, and smooth UI elements in both light and dark modes. Use HTML for structure, CSS for neumorphic styling, and JavaScript for interactions such as toggling alarms and adding new alarms dynamically.

neumorphism
ui-design
alarm
html
css
javascript
dark-mode
toggle
responsive

This challenge doesn't include downloadable assets

Recreate the design from the Figma file using your own images, icons and resources where needed. You are not required to use the exact same images, copy or placeholder data.

You are expected to

Use your own images, icons and resources when needed
Recreate the design based on the provided Figma file
Respect the brand identity, colours, logo and key visuals
Keep the UI structure, layout flow and key sections consistent

Reviewers focus on

0

Completed

—

Average AI review

New here? Read the Tahaddiyat guide to learn the expected structure and submission flow.

Brand colours

Logo usage

Layout structure

Spacing & alignment

UI architecture

Required functionality

Minor differences in content, images or data are fine, but the overall visual identity and design direction should stay clearly consistent with the challenge.

Build the full alarm clock UI based on the provided design
Use semantic HTML5 structure
Style the UI using neumorphism design principles
Implement soft shadows and depth effects using CSS
Create a clock display section (static or real-time using JS optional)
Build an alarms list with multiple alarm items
Display time and optional day information for each alarm
Add toggle switches to enable or disable alarms
Allow toggles to be interactive using JavaScript
Create an "Add Alarm" floating button
Allow users to add a new alarm dynamically (optional but bonus)
Implement both light and dark UI versions (optional bonus)
Add hover and active states for UI elements
Make the layout responsive for mobile devices
Keep code clean and organized

Submission

Submit your solution

Share your work for mentor review and showcase your structure, polish and implementation quality.

1 joined

Log in to submit

You need an account to submit your solution and receive mentor feedback.

Log in to submit

Community Discussions

Questions & Answers

Be the first to ask a question about this challenge.

Loading discussions...