@andreasci
Latest solutions
Browser extensions manager UI
#accessibilitySubmitted 2 months agoI have trouble making the logo to appear as white on dark modes any suggestions would be a great help!
age-calculator app
Submitted 6 months agomaking the validation error appear more accurately and stop the program when the error is verified or spotted
shopping cart with JavaScript oops programing techinique
Submitted 7 months agomaking the decrease and increase of the quantity using the oops method I used in the project
Latest comments
- @jabo-arnold-landry
I would like to talk about your code base, well you did a great job there but I would like to recommend you to not validate the email as the way you did in your codes because it will be hard for you to recall it in the near future and it is hard to understand it would be better to learn more about regex or regular expression they are the best tool for such validation like this and one last thing try learning how to refactor your codes by using short and clear syntax in short words use the right tool for the job instead of using the style property on an element try using the classList().
But you are doing a great job there 💯 continue the hard work.
Marked as helpful - @boompowWhat are you most proud of, and what would you do differently next time?
I'm really proud that I made a dynamically rendering site in Vanilla JS and it really gave me under-the-hood understanding of how React re-renders after every update
What challenges did you encounter, and how did you overcome them?I initially tried to statically render the extensions on HTML but the state changes (remove button, toggle) and the filtering buttons were better handled if the extensions were dynamically rendered like how React renders in JSX
@jabo-arnold-landryYes you are right if you want to change the state of those features it must be rendered dynamically by including them with in the function which is rendering those extension as you would do in normal html and then attach the event listener to the extension container in order to be to add functionalities for remove and toggle since they are continuously re-rendering in order for not deleting their event handlers when the state changes and another thing when working with pure vanilla javascript try not to use var to set your variable try using let and const because var can be overwritten easily
Marked as helpful - @EvellynLWhat are you most proud of, and what would you do differently next time?
I'm proud that I managed to integrate this with a test database using JSON Server. I think I could have used Context API or explored more hooks like useLocation
What challenges did you encounter, and how did you overcome them?I think my main challenge was knowing how I would organize the project, how I would create it, what would be a component or not, if there would be routes? Maybe. React really opens up a million possibilities and I intend to continue exploring and improving myself in this framework. I tried to do it in the way that I felt most confident, but now that the project is finished, I see other better ways to do it.
What specific areas of your project would you like help with?I think that in terms of code organization, some parts are quite messy. I also welcome some tips on responsiveness with CSS and how I can make my commits in the most professional way possible.
@jabo-arnold-landryI could recommend to not use fixed width like instead of explicit setting width to some value like this: width:2rem; you could write it like this may be max-width:2rem; This means that no matter how the screen size is the width of an element will not grow beyond that value,so you can use min when you want it to not shrink beyond a certain point, you can also use @container queries since you are using React container query works the same as @media query the only difference is that with container queries the width will consider the width of it's container width while media queries consider the screen size.
Last but not least try not use px when setting margins and width and heights try using em and rem.
And when you commit try to commit key changes or functionalities you added or removed which are vital or a big issue it is not mandatory to commit every change you made.
Hope it was helpful
Marked as helpful - @codewthvWhat are you most proud of, and what would you do differently next time?
I'm glad that I was able to complete this project and I've been able to learn a lot from this project to complete this project. I decided to try using Float in this project although I could use Flexbox or CSS grid. I just wanted to try something new and I guess it worked perfectly. Next time, I would try using flexbox and CSS grid since I've learnt it better now.
What challenges did you encounter, and how did you overcome them?Initially, I tried using Flexbox cause I just started learning about it but it got kinda messy and I had to look for alternatives. Later on, I learnt about CSS grid and Float and I decided to use Float for this project and it worked!!
What specific areas of your project would you like help with?I would like to try out using frameworks to build this project. And I'm still trying to learn how to use linear gradient and CSS colors generally.
@jabo-arnold-landryI would recommend you to first understand the layout design using flex box and grids because float was used in previous years before flex and grid and it was used to make layout and then they introduced flex box and grids to help make a more responsive and good looking layout so float is not recommended to use it for layout even though it is still being applied.
And the reason for this is that flex and grid provide more tools and ways to make responsive layout without using media queries or container queries which float can't, My advice to you would be to first understand those two layout concept and then jump to framework because flex and grid are now the most used building blocks to build layout.
And you did a great job continue with the flow you will get there.
Marked as helpful - @BMAJonesWhat are you most proud of, and what would you do differently next time?
This is my first time using HTML and CSS so I've still got a lot to learn but I really enjoyed trying to match the design.
What specific areas of your project would you like help with?I'm struggling with the idea of different screen sizes, and the size of my solution on screen looks a bit strange to others.
@jabo-arnold-landryYou did a Great job 👏, even though you are still trying to familizing your self with css and HTML, what I can recommend about that issue you are facing is to learn responsive designs in general you will find a lot that could solve you're issue and the other thing try using responsive units like 'em', 'rem' and like percentage and other responsive units px are great but when used to set margins and width can cause issues when resizing the browser it's behavior don't adapt to screen size that's the first reason you are facing such issues.
😅😅 I think I've said a lot but you are on the right track try learning more about responsive designs and units and you will be good at making responsive designs.
Marked as helpful - @Hanan-Mir@jabo-arnold-landry
well, you did great but try to make the layout more responsive and use the font-family provided in the style guide and make the contents fit the content because the content is overlapping the background but keep it up the good work you are on the right track!
