This challenge took longer than usual, but I had a lot of fun making it! I got the chance to learn Redux and integrate it with Typescript and styled-components. I experimented with animations and micro-interactions in this challenge, and you'll see them here and there.
Here's the feature list:
Create, edit, and delete todos
Toggle todo status and filter by status
Toggle between light and dark theme
Create multi-line todos on desktop using Shift+Enter
Clear all completed todos
Retains selected theme and todo list
Installable as a progressive web app
Do check out the app and let me know what you think!
Coming back to Frontend Mentor after a long gap! I hope this streak continues.
I built this app with Svelte and Typescript bundled with Vite. I prefer Vite over Rollup due to some problems I have faced with Rollup in the past. I used Svelte's neat transition features to add an on load animation to the dashboard. I also used SortableJS to add draggable functionality to the dashboard cards—it's a great little library that does the job right. The number counting-up animations were made with CountUpJS. I tested my utility functions using Jest to get some practice with TDD as well.
This challenge was relatively quite easy to complete, although I did face some minor setbacks when making the styles responsive. It was a great refresher on CSS Grid and Flexbox.
Please check out my solution and leave your comments below! 👇
Another project with React! This calculator was quite fun to make and I constantly ran into so many issues with each step. Fixed them all, though! 😁
This project was my first foray into CSS-in-JS and component-scoped styles. I originally started off with emotion since I read somewhere that it was more efficient than styled-components. However, as I developed the calculator, I found out that emotion re-renders components completely when dynamic props used in styling change. This was a problem as I couldn't incorporate CSS transitions when, for example, the background-color of a certain element changed, as the element was completely re-rendered.
After some research, I discovered that styled-components separates component classes into static and dynamic classes. When dynamic props change, only the dynamic class of a certain component changes instead of it being re-rendered. This naturally allowed for CSS transitions, and styled-components was thus a winner for me!
While developing the calculator, I started off with an approach that stored the calculator display state as a numerical value. However, this meant that I would have to define what the press of each key would entail for the display state, separately. This also meant that displaying values such as "0.04" and "3." would become impossible since the decimal point was removed when converting to a Number.
I, therefore, decided to store the display state as a String (for example, "12 + 0.3 / 2") and then let Javascript's eval function handle the calculation. I have read that the eval function can be dangerous to use, however. Do you guys have any other suggestions or replacements?
Any feedback on the app is highly appreciated, thanks! ✌
This is an e-commerce website built with React and Sass. It was my second project with React and I gotta say, I'm hook-ed! 😆
You could say I have fallen in love with the React mindset—think of every problem as a collection of smaller problems and crack each one of them individually. When all the individual pieces of your app come together and coalesce into what you were trying to accomplish, a heavy sigh of relief escapes the mouth and a major part of the next few hours is spent just clicking buttons, tabbing through the experience, and getting delighted at every micro-interaction, even though you have seen it an umpteen times before.
Yet, there is always more to explore and I look forward to tinkering with all the possibilities that have opened up to me as a React developer now.
My first step will probably be to dive into CSS-in-JS, or styled-components and Emotion, to be more exact.
After that, I will hopefully explore the mysterious world that is server-side. I know that there is Next.js and Gatsby for doing all that stuff but I am still kinda unaware of how everything works. Welp, that's what I plan to learn!
Once I master the art of animation (or at least become somewhat proficient at it), I will enter the 3-dimensional realm and make some cool stuff with ThreeJS.
Do you think there is anything else I could learn? Do let me know! And of course, feedback on the solution will be highly appreciated!
P.S.: On to working on all the HTML and accessibility issues!!! God help me
Hello everybody! 👋
It's been quite a while since I completed a challenge. I was taking a course on ReactJS and here I am with a React creation! Feels good to be back 😁
This was my first project with React and I am really intrigued by the power of this library/framework. The usage of components has helped me a lot in simplifying my workflow, and the fact that all form data is stored in the state makes calculations from the data a breeze. I also love how components can be reused and I have tried my best to make ones that can be reused properly.
App structure
Calculator - Base component; stores form input data in state
CalculatorForm - Stateless; renders a form which collects data and passes it to <Calculator>
Input - Stateless; renders a label, an input element, and conditional error message
Selector - Renders a list of <Option>s and a <CustomOption>
Option x 5 - Stateless; renders a radio button styled to look like a normal button
CustomOption - Stateless; renders an input element
Input
CalculatorOutput - Renders the calculation results and a button to reset the form
Output x 2 - Stateless; renders a label and a calculated figure
Features
Form input values are stored in the base <Calculator> component. This is updated every time an input is changed. All inputs are controlled by React.
On change, the <Calculator> component calculates figures for tip amount/person and total/person and passes these to the <CalculatorOutput> component.
The <Selector> component includes a text input along with the radio buttons. When this input is focused on, state.isEditing changes to true and the radio buttons are prevented from being selected as the user types in the percentage.
When the same input is blurred, if the user types in a value already present among the radio options, the respective radio button is selected and the text input is cleared.
If the user enters a negative number in any of the two <Input> components, an error message appears in red.
NaN and Infinity errors are handled, and default to output values of $0.00.
The app is responsive even to the narrowest of screens. (260px, to be specific)
I made this project using class-based components, and I want to do my next one with functional components and hooks, so I aim to learn more about those next up.
Please do go through my submission and find any unhandled errors, or leave your reviews on the code/design! 😁✌
P.S.: There seem to be a few HTML issues with my solution. Will fix them soon!
Another great challenge! However, I did not find this one to be as intriguing as the others I've done—perhaps I prefer developing singular components instead of full pages 😬
But I'm determined to do more, if only to overcome this prejudice 🤣
Most of the stuff in this challenge was something I have now gotten used to, but the collapsible navbar was slightly tricky. I was able to successfully make it, however! 😁
Please do go through my solution and leave some feedback!
I was thinking of completing some challenges with React (something I've never done yet) so that I could learn and practice it, can you guys link a few challenges which may require 'the React mindset'? Would really appreciate it!
Just completed the Social Media Dashboard with Theme Switcher challenge! My solution includes:
Responsive layouts for mobile, tablet, and desktop.
Theme-switching functionality built using CSS Custom Properties
Local storage access to store preferred theme
Reorderable drag-and-drop cards using Sortable.js to customize the dashboard!
I had a lot of fun learning about the local storage and Sortable. They are pretty intuitive and useful. I wish to learn more about such Javascript libraries in the future, so do recommend some if you know 'em!
Please check out my solution and let me know your thoughts! Constructive feedback highly appreciated. 😁
I used a Firefox extension, 'Pixel Perfect Pro', to get the website to match the design. It's a pretty great tool that I recently discovered.
This was a simple challenge, and good for practice as well. I added a neat little 3d hover effect to the card using Javascript (props to Apple Pie Giraffe for inspiration)
I tried my best to match the design in this challenge. Used some semantic markup for the elements as well. Do check out my approach to switch the billing from monthly to annually in the app.js file.
I also designed a new responsive attribution footer for myself which I have put in this solution, and will be adding to all my future solutions, so I would like some thoughts on that as well!
First time trying out custom validation with Javascript and Sass. Please check it out and leave some feedback.
Also, does Github Pages not allow forms? Because I get a 405 Not Allowed page when I submit the form. Is there any way to just be taken back to the form instead of it being submitted somewhere?
This was such a great challenge, used Grid for the first time, and I gotta say I'm pretty amazed by its possibilities. I added a tablet size in this challenge too, on top of the mobile and desktop sizes that were given.
I wanna know if there is a way in Grid for cells in following rows, to flow up into the previous row, if there is empty space above, essentially breaking out from its own row. It's a weird question, I know, was just wondering if this is possible.
Please do check out my submission and leave some feedback below!
How did you tackle the problem of transitioning the FAQ answers' heights when they expand from 0 to auto?
I kept height constant at auto, and instead transitioned the max-height from 0 to a hard-coded value, in this case, 4em.
How did you guys tackle the problem of moving the profile image up and making it overlap with the background pattern? I used transform: translateY() but it seems very finicky.
Is there any better solution, using perhaps different markup, or maybe a better CSS layout?
