Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
2

daklo

@daklo91Oslo, Norway170 points

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

  • using only css and html


    daklo•170
    Submitted 4 months ago

    0 comments
  • faq page - html, css, js


    daklo•170
    Submitted 6 months ago

    How can I make the page more accessible for people with difficulties?


    0 comments
  • Plain HTML with CSS style tags


    daklo•170
    Submitted 7 months ago

    1 comment
  • Recipe page with focus on accessibility and learning tailwind

    #tailwind-css

    daklo•170
    Submitted about 1 year ago

    0 comments
  • Summary Component with React

    #react

    daklo•170
    Submitted about 2 years ago

    0 comments
  • Todo app created with React, Beautiful DnD and Confetti

    #react

    daklo•170
    Submitted over 3 years ago

    2 comments
View more solutions

Latest comments

  • Baken0101•20
    @Baken0101
    Submitted 7 months ago
    What specific areas of your project would you like help with?

    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!

    Social links profile responsive solution

    1
    daklo•170
    @daklo91
    Posted 7 months ago

    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!

  • Sankalp Verma•40
    @VermaSankalp
    Submitted over 3 years ago

    Calculator App with Changeable Themes

    #react
    2
    daklo•170
    @daklo91
    Posted over 3 years ago

    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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub