Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
25
Comments
24

Anton Vasilache

@AntonvasilacheBucharest580 points

Frontend developer, passionate about innovation, analytical thinker, looking to learn new things and contribute to projects.

I’m currently learning...

Next.js, Node.js

Latest solutions

  • Responsive NFT Preview Card Component using CSS Flex, SCSS

    #sass/scss

    Anton Vasilache•580
    Submitted about 1 year ago

    Not sure if the styling is optimally nested in the scss file.


    1 comment
  • Responsive Tic Tac Toe game with JS, React

    #react

    Anton Vasilache•580
    Submitted about 1 year ago

    Probably a way to make the CPU player somewhat smart, instead of relying on random moves.


    1 comment
  • Responsive BMI Calculator using CSS Flex, Grid, JS


    Anton Vasilache•580
    Submitted about 1 year ago

    Possibly adapting the page for larger screens, like 1920 or 2560px.


    1 comment
  • Responsive notifications page using CSS Flex, Grid, JS


    Anton Vasilache•580
    Submitted about 1 year ago

    Not sure what else would be needed here. Maybe making the content more dynamic.


    0 comments
  • Responsive e-commerce product page using CSS Flex, Grid, JS


    Anton Vasilache•580
    Submitted about 1 year ago

    Maybe there is a better way of refactoring the functions and handling the responsiveness.


    1 comment
  • Responsive News Homepage using CSS Grid, JS


    Anton Vasilache•580
    Submitted about 1 year ago

    How to make the page more accessible.


    1 comment
View more solutions

Latest comments

  • Sonja Krafft•310
    @sonmikrafft
    Submitted about 1 year ago

    NFT Preview Card with HTML, SCSS, BEM, and JS

    #sass/scss#bem
    1
    Anton Vasilache•580
    @Antonvasilache
    Posted about 1 year ago

    Hi,

    Good job with building the component. Looks really faithful to the design.

    Small suggestion about the responsiveness: if you add a max-width to your .card, it will prevent the component to shifting between wide and narrow, as you go to smaller screens, making the transition more consistent, and also responsive for smaller screens, down to 325px.

    @media (max-width: 39.9375em) {
      .card {
        width: calc(100% - 3rem);
        max-width: 20.45em;
      }
    

    I hope you find this useful.

    Happy coding.

  • Clark Mitchell•30
    @ClarkMitchell
    Submitted over 3 years ago

    React (CRA)

    #accessibility#react
    1
    Anton Vasilache•580
    @Antonvasilache
    Posted about 1 year ago

    Nice work! The desktop version looks really nice.

  • Tomasz Kołodziejczyk•1,020
    @KolodziejczykTomasz
    Submitted over 1 year ago

    BMI calculator in HTML, CSS and JS

    1
    Anton Vasilache•580
    @Antonvasilache
    Posted about 1 year ago

    Nice work with building the page. It looks pretty much pixel perfect!

    As a suggestion for improvement, you might want to take a look at the JS code though. The BMI calculation defaults to 23.4, regardless of the values you input.

    From what I could tell, the updateSummaryMetric function is not called inside the metric weight input:

    <div class="metric__weight">
    <div class="metric__name">Weight</div>
    <div class="metric__input--wrapper  active--desc">
    <div class="input__quantity">
    <input type="number"
    name="weight__input"
    id="weight__input"
    value="0"
    onchange="updateSummaryImperial()"> //this should be updateSummaryMetric()
    </div>
    <label class="input__unit" for="weight__input">kg</label>
    </div>
    

    As for the updateSummaryMetric function, the if condtion was based off input for imperial units, so it was not executing. The BMI formula needed an update as well. I've managed to get the correct result using this:

     function updateSummaryMetric() {
            let result;
            const height__metric = height__input.value / 100;
            const weight__metric = Number(weight__input.value);
    
            if (height__metric > 0 && weight__input.value > 0) {
              summary__metric.innerText = (
                weight__metric / Math.pow(height__metric, 2)
              ).toFixed(1);
            }
            weclomeDashboard.classList.remove("active--desc");
            activeDashboard.classList.add("active--desc");
          }
    

    I hope you find this useful, maybe it's worth taking a look at the imperial calculation as well.

    Cheers!

  • alvarozama•360
    @alvarozama
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to complete the challenge with very little outside help (tutorials, artiles, etc.). The challenge took a bit longer than I expected to complete, but I'm left quite happy with the end result nonetheless. As far as things I'd do differently next time goes, I'd probably plan ahead for how I'm going to structure my HTML markup a liitle better.

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

    Creating the lightbox for the desktop page and the slideshow thingy for the mobile page was tricky. However, getting one done pretty much meant getting the other one done as well, bar the thumbnails from the desktop lightbox. A How To article by W2Schools was helpful to solve these issues.

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

    Just the accessibility part. I still can't wrap my head around thing like aria-expanded, aria-controls, aria-label, and the like. I feel like I'm probably not using them correctly.

    E-commerce product page challenge

    1
    Anton Vasilache•580
    @Antonvasilache
    Posted about 1 year ago

    Well done with the solution. I think it looks good on all screen sizes.

    One small suggestion: check the lightbox overlay for screens larger than 1440px. It does not cover the entire screen, when you open the lightbox.

    Cheers!

    Marked as helpful
  • Anton Vasilache•580
    @Antonvasilache
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?
    • Glad I did the HTML/CSS relatively fast
    • I thought about using ASCII codes for a password algorithm and managed to make it work
    • I refactored the functions to pure, and split the code to be somewhat modular
    • Would probably choose a different method or look into a library, if this was something other than a demo project
    What challenges did you encounter, and how did you overcome them?
    • Creating the range input was a challenge, due to the browser defaults - I managed to find a resource that explains well how to remove the browser defaults and create your own.
    • Styling the svg images was difficult due to how they resize
    • Creating the 4 password categories took a lot of trial and error, to cover as many cases as I could
    What specific areas of your project would you like help with?

    I think there could be some more refactoring done to the code.

    Password generator app using vanilla JS

    2
    Anton Vasilache•580
    @Antonvasilache
    Posted about 1 year ago

    Solid feedback. Thanks for taking the time to write this. The HTML & CSS points are something I'm getting used to implementing. For the JS it could have been either of the two solutions, I just picked the more interesting one for me.

  • LukichLabadze•250
    @LukichLabadze
    Submitted about 1 year ago

    news homepage

    1
    Anton Vasilache•580
    @Antonvasilache
    Posted about 1 year ago

    Good job!

    Consider adding a `max-width' to your images, to make them scale to lower screens. something like 400px for the big one, and 100px for the smallers ones should do.

    Cheers!

View more comments

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