Latest solutions
Todo application built with Next.js, Redux Toolkit, TailwindCSS
#next#tailwind-css#typescript#redux-toolkitSubmitted over 2 years ago
Latest comments
- @Oldault@SeyBoo
Hi Monkey Man,
Quick note but 250 px is very small and no modern phone will every have such a small screen so don't worry about it.
For the background image, you can add a color to it this way,
background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160);
You just need to slow down the opacity of the colorAnd to change the picture based on the size you have two way
- Using img tag :
// HTML <img src="#" alt="#" class="desktop" /> <img src="#" alt="#" class="mobile" /> // CSS .desktop { display:none; } @media (min-width:1024px) { .mobile { display:none; } .desktop { display:block; } }
- Background Image
//CSS background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160); @media (min-width:1024px) { background: rgb(126, 85, 85, .5) url(url for dekstop); }
- @Icekid35@SeyBoo
Hello ! Bravo for your first react solution ! For best practice you could :
- Create a file for every component that you created so it's easier to read
- The App file is not a component so i shouldn't be in the components folder
- Instead of using
style={{display:show ? "":"none"}}
you should look for conditional rendering (I was doing the same mistake ahah)
https://reactjs.org/docs/conditional-rendering.html
const [showModal, setShowModal] = useState(false); {showModal ? <Modal /> : null } <button onClick={() => setShowModal(!showModal)}>Display modal</button>
Have a nice day :)
Marked as helpful - @bigmac369@SeyBoo
Hello !
Bravo for your first solution using React.
For best practice i will suggest you to
- Save your API response into an Array
- Using a components for the card
- Using meaningful name for the Image (Can help when working on large project or with a Team)
You could also try to make it more responsive by starting to make it mobile first. A lot of website are built Mobile First nowadays cause the majority of the traffic is on mobile device.
Have a nice day :)
Marked as helpful - @chapes111@SeyBoo
Hello nice solution your code is clean and everything work well !
Just a small design update you can do is add :
transform: scale(.9);
on the Mobile Section it will be cleaner in my opinion and you don't have a lot of code to change using scale.Have a nice day :)
Marked as helpful - @RUTVIK-SANATHARA@SeyBoo
Hello nice solution.
I will suggest you some things you can improve on your project.
- Make the Design "More Responsive" for the Tablet + More center on the Desktop.
- Some way you can do that :
- Your container change based on the view width of the users, so the img should also (if not it will not be centered)
Have a nice day ! :)
- @iAmZubair00@SeyBoo
Hello great solution i love the animation that you provide it's simple but add a lot to the website.
I suggest you some point that you can improve :
Some visual improvement :
- Maybe add a
max-width
on the main element because on larger screen we see 2 row , one with 5 box and one with 3 box. - Add a
height: 100vh;
on the container element so that i can take the full height of the screen.
JavaScript improvement:
- A easier way to do the toggle is just to add the class 'light' in the body element.
For the SCSS part your code is very well cut and organised and seem well typed so well done.
A overall great solution keep going !
- Maybe add a