Submitted
Alex Kim
@alex-kim-dev
All solutions
Submitted
Submitted
Submitted
Github Jobs API (React)
- HTML
- CSS
- JS
Submitted
Social proof section
- HTML
- CSS
Submitted
- Is it a good approach to pack a number of variables into an object and pass it as a prop to some component in order to reduce the number of props to pass?
<Component data={data} /> // or <Component prop1={val1} prop2={val2} ... />
- Should every component have a snapshot test? I used
react-test-renderer
and noticed that it renders all nested components too. So if I test, for example, a subscribe form and a whole page with it, the form gets rendered in both of these tests.
Submitted
Submitted
Submitted
Submitted
I want to add fade out & fade in effect on
.subscribeForm_feedback
element when it's text is changed. To do this i can:- add a class to hide the element
- change the text
- remove the class to show the element So steps 2 and 3 should be delayed until the element fades out. I did just that in one of the challenges (code). The question is, is there a way to achieve the same effect without hardcoding the delay value in js?
Submitted
Intro component using BEM
- HTML
- CSS
- JS
How is my approach to handling form validation looking? code on Github
Submitted
Submitted
There's a couple of slightly different buttons in this challenge. What's the best approach for organizing these small differences in css?
My solution is to make a class
button
for the white one, and a modifierbutton-accent
for the pink one. (i use bem with camelCase & single dash/hiphen) Both include different styling for various screen sizes. But the pink button is slightly different in some cases: a bit wider or has smaller text while keeping the same height. I reflected these changes in additional contextual classes:hero_button
&cta_button
.Submitted
Fylo landing page
- HTML
- CSS
Submitted
Fylo data storage component
- HTML
- CSS
-
I'm not sure what's the best approach to making a custom meter element. My
.meter
element consists of visual markup -.bar
& two.label
s, and visually hidden htmlmeter
element - for assitive technology. -
I change the white badge position from bottom on mobile to top on bigger screens using css grid, but it introduces an issue with visual order not following DOM order. How can i avoid it?
Submitted
Submitted
Submitted
Submitted
I found a way how to change prices without JS on clicking the toggle - but it requires using pseudo-elements for the prices, so assistive technology can't read them + you can't select the prices, and this all is not great for accessibility. I wonder is there a better solution?
Submitted
Rock Paper Scissors Lizard Spock
- HTML
- CSS
- JS
UPDATE: the issue is fixed!
Initial message:
Currently the solution is not working properly on FEM preview because the access to the local storage is restricted. Not sure how to go around this.
Visit this direct link to the solution to check out how it works.
Submitted
Animated testimonials slider
- HTML
- CSS
- JS