All solutions

You can find MY ANIMATION TUTORIAL HERE

🔥 Another challenge with my own custom design on top the original fem design.

• Landing Page Animation done in gsap.
• Changing Words Animation done in vanilla JS.
• Error Animations done in framer-motion (due to exit animations)
• Input Field Animations done in vanilla CSS.

For optimum animation experience, recommended viewing dimensions: 1440x800

• I've built the form using react-hook-form for functions and yup for validation.
• Modal component built by using Dialog component by headlessui
• The placeholder text for terms of services generated by ChatGPT (who would have written all that text anw :) )

It is also responsive for mobile.

And finally with this submission, i've officially completed all newbie challenges 🔥

You can find MY ANIMATION TUTORIAL HERE

🔥 I've implemented my own custom design on top the original fem design and used GSAP to animate all elements in a timeline sequence. For optimum animation experience, recommended viewing dimensions: 1440x800. On desktop, after a while background image fades into a new one infinitely.

It is also responsive for mobile. There might be some slight issues for tablet still.

This time I've also added a little email validation using REGEX.

[PS. If you have set prefers-reduced-motion to true - it wont animate]

🔥 Here is my 30th Challenge! This was fun and tricky! 🔥

• Built in React and made use of Context API for state management.
• App is fully responsive for all devices.
• As usual the data JSON is being hosted online on npoint.io so i fetch using axios. Sometimes the server is overloaded, you might need to refresh couple times.

I've added some more features to the challenge:

• You can switch between logged in users by clicking avatars top-right. So you can create comments, replies from perspective of different users.
• I've developed a VOTE system (was the trickiest part for me), so multiple users can vote, change their votes and when switched users, the vote scores and the users vote are persisted between user switches. (Votes are stored as an object)
• Added some cute loader animation on initial load.
• You can toggle Dark/Light modes.

This is still a work-in-progress, next i plan to refactor my code using useReducer and tidy up the function, improve accessibility/semantic stuff, localStorage implementation, perhaps a notification system for users when they are being replied to, a function for real/dynamic timestamps.

If anyone interested in how i've built this step by step, i recommend checking MY WORKFLOW

Hope you guys like the final result ♥️

This was pretty fun to build and i'm quite happy with how it turned out. 🧸

This challenge was a nice project to practice state management of the whole app with Context API, storing all the data at the top level and retrieving it from grandchildren without prop drilling. Initial data is rendered dynamically from data.js

Step transitions are smooth with subtle fade-in animations. Clicking on plans or add-ons also produce some little ripple effect 🔥

Note: This was built some while ago, so with my current knowledge, i'm aware that the code needs some changes regarding best practices and some more improvements in terms of semantic HTML etc. Also the form validation is basic. (not checking for @ etc., type number for phone etc.)

Desktop, Tablet, Mobile layout using CSS Grid (grid-template-rows/grid - grid-template-columns) and dynamically rendering data from data.js. I've added a working mobile menu and the Image Carousel can slide in both directions.

Note: This was built some while ago, so with my current knowledge, i'm aware that the code needs some changes regarding best practices, such as avoiding using fixed heights (height: 100vh) and some more improvements in terms of semantic HTML etc.

Was a fun challenge, was coded from some time ago, so i'm fully aware that HTML could be improved more.

I have not included the localStorage and update functionalities this time.

To add item, instead of pressing enter, one needs to click on the circle in the input field.

Anw. Hope you guys like the result🐣

#throwback

Had fun building the toggle and adding stretch effect on mouse down. 🐱

A challenge i did while ago, but i've added now some animations on top.

The height of expense bars are dynamically calculated. The bar with highest value is also calculated dynamically and displayed in blue.

Hope you guys like the final result! 🐱

It starts with a loader animation, once you get to Thank You page, you can click on Thank you again to go back and forth between two pages/states.

A challenge i've done while ago, so i'vent changed the old code, (e.g. conversion from px to rem etc) but i've just added some animations today.

A challenge i've done a while ago. trickiest part was the updating the list based on multiple category criteria. I've solved this with the help of a simple built-in JS function/method called every()

I'm displaying the data dynamically, but the JSON file is hosted locally. To retrieve this data, i used a helper library called: json-loader and the imported data as a default export like so:

import data from './assets/static-job-listings-master/data.json'

Finally added some mini animation effect for the updating list items, using a CSS only animation library called AOS.

Hope you guys like the solution! ✌️🐱

I had a very different animation vision for this challenge, but it turned out too complex so i just settled down for a very basic animation in the end. Maybe i update it later on sometime. Hope you guys like the final result :)

Here is my solution. This time i've converted all px values into em for accessibility. Added some mini animations on top. Hope you guys like the solution.

Here is my solution to parfume card challenge, which i did a while ago. Hope you guys like it!

A challenge i've done a while ago. Hope you guys like it.

In this challenge, i've tried to build it as dynamic as possible. JSON Data is hosted online for free, which includes links to image assets that are hosted on Cloudinary CDN Platform. In my app, i'm fetching the data using axios library. Finally, i've added some little animation using framer-motion. Hope you guys like my solution! :)

I've added a little animation on load :) Hope you guys like the solution.

Built in react. Hope you guys like the submission.

In this project, i've used Axios Library to fetch data from the API endpoint. For fun, i've also added fetching data from random cat gif api that is displayed below advices, to make it more interesting. Hope you guys like it.

I've used AOS animation library for this one, it is pretty easy to use as you just add data to html elements. Feeding data dynamically to the elements to be rendered on the screen. Was a fun project.

I've spent more than a half day on this newbie challenge :D Because i've added up quite a bit on the given challenge to practice some more stuff, so i've built this component by using React, uploaded image assets to cloudinary CDN network, uploaded JSON Data to npoint.io to host my data and fetch it using axios library. I've used Framer-Motion to animate the whole thing. I've learned how i can export/import motion.div props from an external JS file and use/manipulate them by destructuring. Pretty happy with the result :)

This was a nice challenge to practice grid-template-areas and grid-template-columns. Five different breakpoints changing grid-template-areas to ensure layout never breaks out.

Here is my solution to FAQ Component. I did pass the questions data dynamically. I've also added JS logic to make other open sections to collapse when a new one is opened. Feedbacks are welcomed!

Here is my attempt at QR Code Card using React and plain vanilla CSS. I gave the QR img a fixed width of 285px, as it looks like from the design its enough for both mobile and desktop devices without any media query or so. All feedback is welcome ofc :)