Frontend Mentor | Anton Vasilache's profile

@sonmikrafftSubmitted 4 months ago

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

@AntonvasilachePosted 4 months 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.

0

Clark Mitchell•30

@ClarkMitchellSubmitted over 2 years ago

React (CRA)

1

Anton Vasilache•580

@AntonvasilachePosted 4 months ago

Nice work! The desktop version looks really nice.

0

Tomasz Kołodziejczyk•1,020

@KolodziejczykTomaszSubmitted 10 months ago

BMI calculator in HTML, CSS and JS

1

Anton Vasilache•580

@AntonvasilachePosted 4 months 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!

0

alvarozama•360

@alvarozamaSubmitted 5 months 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

@AntonvasilachePosted 5 months 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

1

Anton Vasilache•580

@AntonvasilacheSubmitted 5 months 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

@AntonvasilachePosted 5 months 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.

0

LukichLabadze•250

@LukichLabadzeSubmitted 5 months ago

news homepage

1

Anton Vasilache•580

@AntonvasilachePosted 5 months 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!

1

Emmanuel•50

@vidaencodigoSubmitted 6 months ago

What are you most proud of, and what would you do differently next time?

I learn bootstrap 5 for layout design and use its components

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

form validation and I create the alert from scratch with css and js

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

improve my css and js

My bootstrap soluction

1

Anton Vasilache•580

@AntonvasilachePosted 5 months ago

Nice work!

0

king-Carter•80

@king-CarterSubmitted 7 months ago

What are you most proud of, and what would you do differently next time?

This was my first project using JavaScript , through out the I wrote codes using JS to make a functional FAQ Accordion. I will like to improve further and would like to receive feedbacks and suggestions.

FAQ accordion responsive design

1

Anton Vasilache•580

@AntonvasilachePosted 5 months ago

Great job on building this component.

You could try to implement keyboard navigation as well, by using the tabindex attribute on your question elements.

Cheers!

Marked as helpful

0

LukichLabadze•250

@LukichLabadzeSubmitted 5 months ago

rating

1

Anton Vasilache•580

@AntonvasilachePosted 5 months ago

Hi,

Good effort on building the component. Consider a few adjustments for making your content fit into the container at different screen sizes:

#container{
width: 100%;
max-width: 24rem;

Lower the margin-bottom from 3 to 2rem on the individual elements.

For semantic HTML purposes, you can also turn the <div id='container'> into a <main> element, and replace the h2 with an h1.

Hope this helps.

Good luck!

0

KL•290

@TorHammSubmitted 6 months ago

What are you most proud of, and what would you do differently next time?

LEARN ALOT ALOT ALOT OF REACT WITH THIS PROJECT

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

IT TAKE ME A WHILE TO FINISHED THIS PROJECT AND MOST OF THE HELP COME FROM CHATGPT AND YOUTUBE GUY

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

Open for any suggestions!

ReactJS Sass - FrontendQuizApp

1

Anton Vasilache•580

@AntonvasilachePosted 5 months ago

Hi,

Really nice work with the challenge. It looks very close to the design and I like the animations and the responsiveness.

One bug that I found during use though: when trying to access any of the routes (e.g. https://torhammproject14.netlify.app/Question/0), or changing the theme during the game (due to reload I think), I get a Page Not Found error. Maybe you can look into that.

Cheers!

0