Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
13
P

Mirko Zlatunic

@mirkozlatunicCalifornia USA250 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Password Generator


    P
    Mirko Zlatunic•250
    Submitted about 1 month ago

    N/A


    1 comment
  • Tip-Calculator


    P
    Mirko Zlatunic•250
    Submitted about 2 months ago

    If there is a way to combine the functionality of JavaScript and make it even cleaner code.


    1 comment
  • Timetracking Dashboard with Button Functionality


    P
    Mirko Zlatunic•250
    Submitted about 2 months ago

    N/A


    1 comment
  • Newsletter sign-up component


    P
    Mirko Zlatunic•250
    Submitted 2 months ago

    I'd like feedback on the refactoring part and how others would approach the React functionality with form validations.


    1 comment
  • Responsive card with toggle Button functions


    P
    Mirko Zlatunic•250
    Submitted 3 months ago

    N/A


    2 comments
  • Responsive Landing Page using TalwindCSS for Grid

    #tailwind-css#vite#react

    P
    Mirko Zlatunic•250
    Submitted 3 months ago

    The hero section pictures to have the styled the same way as the solution.


    1 comment
View more solutions

Latest comments

  • P
    Brais•270
    @braismarquez2025
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Me siento orgulloso por todo lo aprendido con este proyecto, ha sido el que más tiempo me ha llevado completar.

    What challenges did you encounter, and how did you overcome them?

    He aprendido a darle estilos a los inputs de tipo "slide", ya que algunos estilos entran en conflicto con los estilos por defecto del navegador. También me ha costado personalizar el checkbox, sobre todo a la hora de hacer click sobre el y que cambie su estilo. Mi forma de platearlo ha sido crear un elemento desde javascript y colocarlo por encima de la casilla vacía sobre la que el usuario pincha, no sé si es la mejor forma o me he complicado de más, cualquier punto de vista diferente se agradece! Por último, he tenido que pensar los condicionales para el apartado de la seguridad de la contraseña, ya que al principio no funcionaba bien.

    What specific areas of your project would you like help with?

    Sobre el planteamiento de realizar ciertos componentes, como pueden ser el checkbox o el componente de la seguridad de la contraseña.

    Aplicación generadora de contraseñas con Javascript

    1
    P
    Mirko Zlatunic•250
    @mirkozlatunic
    Posted about 1 month ago

    Look great. Work as intended, but I was not able to generate the password without having the checkboxes clicked. It would also be an option for the user to use, in my opinion. But overall, nice job!

  • ysagohh•260
    @ysagohh
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how I approached the challenge by splitting it into smaller parts. I'm also proud that I did it myself.

    What challenges did you encounter, and how did you overcome them?

    I thought this challenge would be straightforward, then I realized there were many details to consider. At first, I found it overwhelming, but then I wrote down my ideas as comments in the code, then I tackled them one by one.

    What specific areas of your project would you like help with?

    How should I fix the layout such that it still looks good even if the user enters large numbers (e.g. 1000000000000). Right now, since the layout is responsive, it breaks when the input is large.

    Input validation and calculations using Javascript

    1
    P
    Mirko Zlatunic•250
    @mirkozlatunic
    Posted about 2 months ago

    Looks great. I think it has to do with setting a minimum and maximum for the tip area of it. I was reviewing my code, but I couldn't see the significant difference.

  • P
    Carlos Eduardo Santos Oliveira•180
    @Carlos-Eduardo-S
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have completed the project, implemented the interaction with JavaScript, and used JSON. Since it was my first time using JSON, I enjoyed working with the tool and was glad to complete the project using it.

    What I would do differently is write the code in a more simplified way. I believe my code turned out too lengthy.

    What challenges did you encounter, and how did you overcome them?

    The interaction with JSON, since it was my first time using fetch, was a bit more challenging. But after studying a bit and doing some tests, I was able to use it easily, and the project went very well.

    What specific areas of your project would you like help with?

    I would like help both with the code itself — how I can simplify it — and, especially, whether I could have done something differently with JavaScript, or if there’s a way I could have made it simpler.

    HTML, CSS with Flexbox and Grid, and JavaScript.

    1
    P
    Mirko Zlatunic•250
    @mirkozlatunic
    Posted about 2 months ago

    great job to have the styling so it looks good to me. what I suggest to change is the following:

    • Try not to repeat the code for each button click
    • Set on of the button to default

    Here is an example that I did:

    // Fetch data from the JSON file
    fetch('./data.json')
      .then((response) => response.json())
      .then((data) => {
        // Render cards with the default timeframe (e.g., "weekly")
        renderCards(data, 'weekly');
    
        // Set "Weekly" as the default active button on page load
        const weeklyButton = Array.from(buttonEl).find(
          (button) => button.textContent.trim().toLowerCase() === 'weekly'
        );
        if (weeklyButton) {
          weeklyButton.classList.add('active');
        }
    
        // Add event listeners to buttons for dynamic updates
        buttonEl.forEach((button) => {
          button.addEventListener('click', () => {
            const timeframe = button.textContent.trim().toLowerCase(); // Get the timeframe (daily, weekly, monthly)
    
            // Remove the active class from all buttons
            buttonEl.forEach((btn) => btn.classList.remove('active'));
    
            // Add the active class to the clicked button
            button.classList.add('active');
    
            // Re-render cards with the selected timeframe
            renderCards(data, timeframe);
          });
        });
      })
      .catch((error) => console.error('Error fetching data:', error));
    
    Marked as helpful
  • P
    Carlos Eduardo Santos Oliveira•180
    @Carlos-Eduardo-S
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Again, I am proud to have completed the JavaScript interaction.

    What I would try to do differently would be the form. I saw some ways to do it and could have made my project differently.

    What challenges did you encounter, and how did you overcome them?

    What challenged me the most again was JavaScript. Making page changes in case of success and maintaining it in case of failure was easier than the last project.

    What gave me the most work was validating the email in case of failure.

    I overcame this challenge by doing research and customizing codes I saw.

    What specific areas of your project would you like help with?

    I would like help with JavaScript programming. If there are more ways to do it, especially if it's easier, I would appreciate it.

    HTML, CSS with Flexbox, and JavaScript.

    1
    P
    Mirko Zlatunic•250
    @mirkozlatunic
    Posted 2 months ago

    Great job on the solution. No inputs from my side.

  • Emmanuel Oluwatosin Alao•60
    @Manuel928
    Submitted 3 months ago

    Article Preview Component Challenge

    1
    P
    Mirko Zlatunic•250
    @mirkozlatunic
    Posted 3 months ago

    so far so good. check the solution more and adapt the styling to the solution.

  • P
    Erik S. Carlsten•290
    @ecarlste
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I think I am the most proud of getting the hero section at the top of the layout working. It was simple enough to get it working for mobile and tablet, although once I was working on the desktop that was a bit tougher. It felt quite rewarding to get it working.

    I think I might try using a grid for something with a similar responsive layout to the hero section next time.

    What challenges did you encounter, and how did you overcome them?

    I found the z-index manipulation that I had to do to get the footer section challenging. I've used z-indexes before with other UIs like WPF for windows, etc. I have not had to use it much, or potentially ever, for web apps I've built.

    What specific areas of your project would you like help with?

    I'd like some advice on alternative ways to solve the top hero section, especially if there are cleaner ways to organize the elements of that section to get it to be responsive.

    Meet Landing Page w/ React, Next.js, tailwindcss, and TypeScript.

    #next#react#tailwind-css#typescript
    1
    P
    Mirko Zlatunic•250
    @mirkozlatunic
    Posted 3 months ago

    Great job on your solution. Looks awesome.

View more comments
Frontend Mentor logo

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

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