All solutions

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

Creating the component as close to the design and add a tiny bit of animation to the button

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

There are a lot of new things i learned from this challenge. I'm proud i can make a working range slider and toggle button.

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

Judging from the screenshot, the slider default value don't reflect the correct price and pageviews for that value. I think it had something to do with the window event but I don't know how or which event type this applies to.

I appreciate any kind of feedback.

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

Using grid and components like navbar and footer to make the webpage. I think i want to try on mapping the links into the navbar for practice next time.

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

As expected making navbar is still a challenge for me. There are a lot of way on how to make a navbar and each framework or tools you use always come up with different coding. I encounter this problem in previous challenge and yet, I still couldn't figure out on how to darken the page when the navbar is open on mobile.

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

Using javascript event listener for calculating the age and validate user input. I'm also quite happy with the mobile and desktop design for this challenge.

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

I think it took me more time to make the input validation because I need to think several condition possible and different error message for the input. Although I put the condition when the value is empty the message displayed should be "This field is required", it just keep displaying message for invalid value instead. I just leave it be but I still think it could be nice to have different error message for certain condition.

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

• Feedback on what should I do to display error message for empty input value as mention above.
• I'm not sure how to put condition when the month value is February, April, June, etc... and how do you include leap year in the condition for the date input validation.

Feel free to check my code and live site any feedback would help a lot.

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

Getting the component look as close to the design and implementing share button

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

Positioning share options so it won't obscure the share button when clicked

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

Using CSS grid and using media query for displaying the grid in mobile state.

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

none

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

none

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

Passing the button value and add custom alert function when there's no rate selected. I also added animation to spice up the page.

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

Using react library to build the webpage along with the components for navbar and dropdown menu.

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

Getting the navbar work in mobile design using useState and workaround with the media queries.

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

I have problem with the styling svg for the mouse event. And also i'm not sure on how to add background overlay when the mobile navbar is open.

Feel free to check my code and live site and tell me where should i improve.

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

being able to use implement grid using tailwind CSS.

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

although i got the grid order for mobile design wrong but overall i understood well how the media query works.

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

none

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

I'm happy i can get the styling as close to the design including the mobile design. I was able to make this using single page HTML. making the form validation was also pretty easy.

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

I was thinking about whether to make this as a single page or make another page for success message. but i decided to make it single page by changing the form and success message display on CSS.

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

I wonder if you can use backend like php to display the success message and how to do it.

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

i'm proud i can make the desktop and mobile page look as close to the design as possible

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

none

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

none

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

this time i tried using react framework to build this. i learn how to fetch an API and using react hooks to render the data. i can't get the page look as close to the design like usual but i'm proud i can make it responsive.

there are some hurdle i need to overcome as to be fair my understanding in react is quite low, but i'm would like use react framework in more challenges in the future.

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

when i read the challenge i thought i'm going to use math.random() to randomize the advice, but at first i didn't know where to put it. after some time i decided to make another fetch function for handling the button and use math.random() to randomize the id instead.

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

since i can't get my solution as close to the design, i would like to ask for help with the button placement and how do you keep it "anchored" to the card's border.

and also this is the first time i use react framework for a challenge like this, feel free to review my live site and code and tell me your feedback.

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

getting the page as close to the design as possible

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

none

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

none

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

i thought of using a framework to workaround the css grid, but i decided to stick with pure html, css, js. i mostly happy i could make form validation and customizing alert using js. some css element need a workaround using class to get active/focus event work, i'm happy i got new insight from that.

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

making form validation function was not quite hard but when you don't want to use browser's default alert, you had to write more code and adding more element in the page. styling the css based on certain function or event is also challenging.

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

i wonder if there is more efficient or shorter function to implement validation for each field in the form

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

i tried using javascript to map the score in the html. i also used function to assign class name to each score category so i could custom each css.

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

sometimes when you have too many different design for each elements you get confused which id/class to edit. i think i should be careful and keep track which html element share the same css element and which are don't to save time and shorten the code.

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

i'm open to any suggestion so feel free to review my code and live site and tell me which part i should improve

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

i was able to make this page as accurate as possible using the Figma file. i was able to use em and rem as the measurement in most of the elements used. using flexbox for media query was really helpful to make it responsive

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

none

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

feel free to review my code and live site, i'm open to any suggestion especially on how to make the code more accessible.

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

this one's pretty easy so i'm proud i can jotted down which element to use in the html page

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

getting the page as accurate as possible to the design

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

i'm not really sure how to ensure my code's accessibility even for a small webpage like this one

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

being able to customize the bootstrap components

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

customizing the bootstrap's components, as some of the components are pre-renderred and also need to add !important in the custom CSS to override the elements. it was nice challenges but also annoying at the same time.

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

i'm open to any suggestion

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

getting the margin/padding close to the design. next time i want to try using relative measurement unit to improve the accessibility

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

none

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

i'm open to any suggestion