iCodeThis Solutions

• Movie card
• Login card (Fix label showing inside input when the input has text)
• Birthday list
• Toasts (Iteration thoughts: Animations when toast disappear)
• Basics
• 404 Error page
• Christmas promo
• Subscribe (Iteration thoughts: Mix up some more colors, customize inputs)
• Pricing Table (Iteration thoughts: Add bubble as background animation. Watch out if it gets to busy)
• Signup 2
• Project card
• Apps card
• Collections list
• Social Login
• Cart item
• Password field
• Profile header
• Blog Cards 4
• Friend request
• Mobile menu
• Article page
• Steps (WIP)
• Website Comps
• Analytics dashboard (WIP)
• Big Menu 2
• Blog Comps
• boardme sign up (Future iteration adjustments to small screens, change font)
• Charts
• Contraction Timer (Future iteration - Add functionallity to log time and calculations on contractions (https://www.thebump.com/calculators/contraction))
• Dark Theme Comps
• Simple Cards 2
• Timer (WIP)
• Blog Cards 2
• Feedback Form
• Chatbox (WIP)
• Skewed Pricing
• Search Comps 2
• FAQ
• Poll
• Table (Iteration thoughts: Add interactivity)
• Pagination
• Signup Form 1
• Agency Search
• Social Profile 2
• Member Invite
• Edit Account (Future iteration would be adding a success state, validation.)
• Background pattern
• Top Charts (Future iteration would be adding skeleton loading)
• Analytics Chart
• Big Menu (Iteration thoughts: adding icons as in mockup, fix better dropdown on large screen, fixat the back button.)
• Expenses Graph (Iteration thoughts: Readup on accessibility for canvas and maybe use the same data object as chartjs)
• Search UI (Iteration thoughts: Add search, hide filter on smaller screens, add map popup)
• Links Section 2 (Iteration thoughts: improve on the responsive design, small animations, might be too flashy on card hover)
• Domain Landing Page (WIP)
• Repositories List (Iteration thoughts: Add search, clean up code)
• Search Comps (Iteration thoughts: Build a selection of choosing one-way (No need for return), multi-way (Select departure and return) and plan trip (Add multiple departures and returns), think of how the selection of dates is built, at start we are reading Departure Departure for screen-readers, change cursor on trip selection)
• Big Footer (TODO: Add purrson icon)
• Tabbed Ui (Iteration thoughts: Transition animation between tabs)
• Countdown
• Pricing Card
• User Feedback (Iteration thoughts: Something more fun with smilies, Read up on keyboard accessibility, focus on dialog/states)
• Circle Team (WIP, Iteration thoughts: Responsive, No magic numbers, Nicer text when active);
• Billing (Iteration thoughts: Dark theme, add interactivity, Load table with js)
• Webshop Components 2 (Iteration thoughts: Add loading state, add functionally to range and items per page, clean up double code)
• Blog Header (Iteration thoughts: Play around with fonts and spacing, fix blog image)
• Rent A Car (Iteration thoughts: Add some interactivity, add custom datetime picker)
• Sign in Form (Iteration thoughts: Add sign up, forgot password views)
• Coming Soon (Iteration thoughts: Add step by step animation for title, add "tooltip" for links + add animation with scale in, Add of components list(https://pro.chakra-ui.com/components) (animation in x-axel))

Roadmaps

• Jo's Burger

Requirements

• Node.js for running the project and start script.
• Vite for bundling and serving the project.
• Glob for Vite config to dynamically set up paths.
• jsdom for start script to manipulate DOM in starter files.

Work In Progress

• Set up start.js to package.json instead of calling node start.js

Resource

• https://coolors.co/palettes/
• https://colormix.app/palettes
• https://dribbble.com/
• https://uigradients.com/
• https://colorgradient.dev/gradient-generator/
• https://www.svgbackgrounds.com/tools/svg-to-css/
• https://getwaves.io/
• https://animista.net/
• https://picsum.photos/
• https://heroicons.com/
• https://neumorphism.io/

Purrson

• https://github.com/madrobby/purrson-icon

Calculations related to Time

• Note in this we are using 30 days for each months.

• Division by 1000: Converts milliseconds to seconds.
• Division by 60: Converts seconds to minutes, and minutes to hours.
• Division by 24: Converts hours to days.
• Division by 30: Approximates days to months (assuming each month has 30 days).
• Modulo (%): Extracts the remainder after dividing by 60 for seconds/minutes/hours and by 24/30 for days/months, effectively isolating the specific time component.

• 1000: The number of milliseconds in a second.
• 60000: The number of milliseconds in a minute (60 seconds).
• 3600000: The number of milliseconds in an hour (60 minutes).
• 86400000: The number of milliseconds in a day (24 hours).

Author

• Website - jotaprojects
• iCodeThis - iCodeThis