Latest solutions
Responsive NFT Preview Card Component using CSS Flex, SCSS
#sass/scssSubmitted about 1 year agoNot sure if the styling is optimally nested in the scss file.
Responsive Tic Tac Toe game with JS, React
#reactSubmitted about 1 year agoProbably a way to make the CPU player somewhat smart, instead of relying on random moves.
Responsive BMI Calculator using CSS Flex, Grid, JS
Submitted about 1 year agoPossibly adapting the page for larger screens, like 1920 or 2560px.
Responsive notifications page using CSS Flex, Grid, JS
Submitted about 1 year agoNot sure what else would be needed here. Maybe making the content more dynamic.
Responsive e-commerce product page using CSS Flex, Grid, JS
Submitted about 1 year agoMaybe there is a better way of refactoring the functions and handling the responsiveness.
Responsive News Homepage using CSS Grid, JS
Submitted about 1 year agoHow to make the page more accessible.
Latest comments
- @sonmikrafft@Antonvasilache
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.
- @ClarkMitchell@Antonvasilache
Nice work! The desktop version looks really nice.
- @KolodziejczykTomasz@Antonvasilache
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!
- @alvarozamaWhat 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.
@AntonvasilacheWell 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 - @AntonvasilacheWhat 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
- 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
I think there could be some more refactoring done to the code.
@AntonvasilacheSolid 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@Antonvasilache
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!