Hi, I just started in Web development, I did my best on this one and I'm open to any criticism in order to improve, thank you very much for your advice and for reading my code!
I'm a self-taught front-end web developer. I used most of my time on articles and YouTube videos to learn the basics and Vue. I later bought an Udemy course on React which grew my skills exponentially, and I learned to love React. It is important to learn from the best sources.
I’m currently learning...I'm currently building a portfolio and filling it with projects to showcase my skills and passion.
Latest solutions
faq page - html, css, js
Submitted 6 months agoHow can I make the page more accessible for people with difficulties?
Recipe page with focus on accessibility and learning tailwind
#tailwind-cssSubmitted about 1 year ago
Latest comments
- @Baken0101What specific areas of your project would you like help with?@daklo91
looks great! you could add a hover effect on the social links by adding a class like ".social-link:hover {backgorund-color: green}".
keep it going!
- @VermaSankalp@daklo91
Hi, there is of course a million ways to implement the slider, my way was this: https://github.dev/daklo91/reactolator/blob/d5c431923ec280fd7a5f66573cd89988b4a36c61/src/components/Layout/Header.js#L14
Basically what it is, is a div within a div. I personally gave my divs the class names "switch-body" and "switch-knob" and the css is in the Header.module.css.
It is controlled by a state which can have the number 1, 2 or 3. If a user clicks on the "switch-body", it will switch between these numbers. And honestly, think of it as a button instead of a switch/slider because a button is better for mobile users with small screens (in this scenario at least).
Anyway the magic happens here: const toggleSwitchNotch = switchTheme === 1 ? { marginLeft: "0px" } : switchTheme === 2 ? { marginLeft: "22.5px" } : { marginLeft: "45px" };
If the state which I called "switchTheme" is on 1, the margin on the "switch-knob" div will be 0px. If the state is on 2, the margin on the "switch-knob" div will be 22.5px. If the state is on 3, the margin on the "switch-knob" div will be 45px.
And of course, you can use these numbers to control the theme as well which you can see in my code.
Hope this helps :)
Marked as helpful