All solutions

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

I am proud of how I structured my state management and components. I used two components for the Form and Success Message.

And kept track of two state variables. one keeps track of which state we're showing to the user. e.g. initial or error or success. in the initial state we show our form component and we also show it in the error state but we add the modifier class form--error to style it. in the success state we show the Thank You Message component passing it the email.

Another piece of state is the email itself. our input is controlled. so whenever the user is typing the email stored in react updates to match it.

I used BEM to assign classes to my components. and style in them in one file using CSS Nesting. I might try out a different approach of styling next time.

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

My main challenge was with styling the project. my first problem was how to handle the svgs illustrations. my first thought was to put them both inline and use the display property to hide one and show one using media queries. however for some reason with this approach the second one loses all colours. I have no idea why that happens. if someone knows why please let me know.

So I removed them. and used them as background images instead. I had no idea on how to style the project between the mobile size and desktop size so I just made the image stretch. not totally happy with that. but it seemed good enough.

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

As always I'd like to know if my code is readable and understandable.

Any feedback is of course welcomed!

Thank you for viewing my solution!

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

I'm proud of the fact that I used one component for all the activities cards. it allowed me to have practice with creating a generic component that will show different content based on it's props.

I'm also proud of the fact that I typed my state using a union of string literal types to avoid typos and unrecognised values.

I also noticed from this project that the more you want type safety the more work you need to put in. I took the easy road in some cases by using generic types such as string. I'd like to think more about what's needed in terms of typing in the next projects.

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

Making one component for the activities cards was a bit challenging. I had to generate all info from the props and grab the correct icon and show the right prefix for the previous time period.

For the icons I used a vite plugin that allow you to import the svg icons as React component and created an object with activity names as keys and the icons as the values. A similar pattern was done for the prefix but in this case it was the time periods names rather than the activities names.

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

I'd like feedback around the structure of my code , my typing and readability of the code base.

I'm very interested in finding out if other developers find my code base readable, understandable and follows best practices.

As always any feedback / criticism is welcomed!

Thank you for viewing my solution!

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

I'm just proud of the fact that I completed this project using React, Vite and TypeScript. the jump from plain HTML / CSS / Vanilla JS. to using all of this tooling was a bit overwhelming but after completing this project. I can see the myriad of benefits of using React and Typescript.

Vite seemed to be the best choice when it comes to choosing a bundler. that is because of it's speed and the ton of features it comes with.

I wouldn't do anything different next time. I'd like to practice this tooling as much as I can before jumping to fullstack frameworks like Next.js or Remix.

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

Since this is my first time using React + TS and Vite. I struggled on how to structure the components and CSS. I made each component along with it's types into their separate files.

As for the CSS I used only two files imported into the main JS entrypoint. I thought about using CSS modules however since I'm used to doing my work into a single CSS file and this project seemed small enough to do it I went with that approach.

I used BEM to assign classes to the different elements of my components and used a single CSS file to style them.

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

I would like to know if I should have used CSS Modules or used separate CSS files for each component?

I would like also to know how other developers think about the structure of my components, hooks and their types. and if they are readable and understandable.

Thank you for viewing my solution!

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

I'm proud of the fact that within this project. I had to think about the user behaviour such as if the user focuses the custom tip percentage I have to uncheck any radio buttons as this indicates that the user wants to enter a custom tip percentage.

I also used inputs of type text rather than number because I couldn't hide or find a way to hide the spin buttons that comes with input of types number in a standard way across browsers. however I did attached keydown event handlers to text inputs to disallow the user from inputting letters. so they mimic inputs of type number.

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

The challenges that I had encountered was validating the data as it is being changed by the user and when we have all of the data that is required to make a calculation we update the display to show the results.

For that I used a form and inputs of type text and radio with the attributes required and pattern for validation. on the javascript side I have listened for change events on the inputs and used the Constraint Validation API to validate the inputs. whenever an input is changed we also check if we have all required information to start a calculation if there is we update the display.

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

I tried to use BEM to structure my CSS and HTML Classes. It's always an aim for me to have structured and readable code.

I'd like to know if you found my code readable, understandable and follow best practices.

As always thank you for viewing my solution!

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

I'm proud of the fact that I learned a couple of concepts working on this challenge such as new css at rules. variable fonts and what's different about them than static fonts. I also learned about the DOMParser interface and BEM methodology to organise CSS Code.

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

There were three challenges I had to overcome during this challenge:

• Code Structure and readability.
• Locally located font files and fallbacks
• Getting the data to populate the web interface from a local json file.

For the first challenge I tried to use BEM (Block, Element, Modifier methodology).

I have to be honest I didn't read a lot about it before implementing it. but I already saw a some of the code that implements it. and tried to do the same. however it seems quite simple.

For the second challenge this was my first time using locally located font-files the challenge supplied us with static font files for each font weight and one variable font file.

So I used @font-face rule to load the static files if the browser doesn't support variable fonts. checking that using an @supports rule. otherwise we load the variable font file using @font-face rule.

For the third challenge I used fetch to grab the locally json file. loops through the data. grab the svgs using fetch and used the DOMParser interface to turn the svgs string into an XMLDocument which I insert into the appropriate page.

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

I'd like to know if my code structure is readable and understandable to other web developers. I'd also like to know if I'm adhering to best practices.

Thank you for viewing my solution!

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

proud of building a project that interacts with third party API's using the modern fetch method.

I also tried to structure the code in a readable and understandable manner.

fetch seemed great so I don't know if I'll use anything different next time. but I'm curious how interacting with API's work in the context of frontend frameworks.

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

The main challenege was requesting the data from the Advice Slip Json API.

I used the fetch method to accomplish that. wrapped in an async function that fetches one random advice and returns it.

On page load and on the click of the button. we fetch one random advice and update the UI using simple DOM manipulation.

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

I would like to know if my code is readable and understandable by other developers.

Thank you for checking out my solution.

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

I'm proud of using a native API for the form validation as it does some heavy lifting.

I also tried to write the html / CSS / JS in a structured / readable / understandable matter.

Next time I'd like to try out form validation using a well known library or framework.

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

The main challenge was the form validation. for that I relied on the Constraint Validation Native API.

When the form is submitted we call form.checkValidity() native method which returns if the form is valid based on the controls attributes / types. and trigger invalid events on any controls that don't pass validation.

We listen for the invalid and change events on the inputs and we call a function that adds the errors indicators based on why the input is invalid or remove them if the input is valid. also relied on the :invalid pseudo class selector for styling the invalid inputs.

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

I would like to know if my code is readable and understandable by other developers.

Thank you for viewing my solution!

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

I'm proud of using JavaScript and event delegation to add a class to the rating chosen by the user. which add the visual indicator to the appropriate rating using CSS styling.

I tried to limit Media Queries in my stylesheet and tried to structure the code in a readable and understandable manner.

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

The main challenge was how to handle the markup of the hidden "Thank you state" that should show when the user submits a rating.

Rather than hiding elements using CSS. I used a template element to contain the markup of the hidden "Thank you state". which is styled alongside the default markup.

When the user submits the rating we delete the children of the body. and insert the contents of the template.

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

I would like to know if the structure of my code is readable and understandable for other developers. if you find it confusing please let me know.

Thank you for viewing my solution!

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

I'm proud that this is my first project employing JavaScript. the project required to validate an email input. which I implemented using a simple regex. I'm sure the regex is not enough but it seems the most correct way to validate an email is to send a confirmation mail which seems outside the scope of the project.

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

The main challenge was to validate the email. and how to handle the error appearing in the UI. did a couple of trials and errors to get it working. but essentially it's just an empty paragraph that's hidden and only shows when the email is not valid positioned using grid.

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

I would to know if my JavaScript code adhere to best practices.

Thank you for your interest in my solution.

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

I'm proud of using CSS Grid to manage the layout across different viewports. using grid-template-areas for readable CSS.

It was like magic using Grid to manage the layout as it made it super easy to control it the way I wanted across different screen sizes.

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

One challenge was when to use margin to create space between the body and the grid container. and when to use width with some percentage.

On mobile since we will definitely have vertical scrolling. I used margin-block to create vertical space. while on desktop I limited the container width to a percentage of the body and just centred the content.

I also used a little media query for desktop that checks the height of the viewport and if it is less than 800px I added back the margin-block. since we will have vertical scrolling also in that case.

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

Getting the spacing and font-size correct by using only the jpg images was hard. I doubt I got it correct but I think I got it close enough to be similar to the design provided.

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

I'm proud of the fact that I used grid-template-areas. to define the layout on mobile and desktop. I think this way the layout is understandable just from looking at the CSS.

I also used clamp to make the main heading responsive with one CSS line which was cool to try out.

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

The main challenges that I faced was managing spacing and font size across different screen sizes. I used a combination of clamp and just overriding font-size on media queries to try to get it right.

Used grid and flexbox heavily since they do a good job in being flexible with the space giving to them.

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

This is my first time using clamp. I'm not sure I used it in an appropriate way. the values I used were kinda arbitrary and based on trial and error.

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

I'm proud that I focused on the semantic nature of HTML. used visually hidden elements to provide context to screen readers users. and tried to organise headings properly to have a good outline for accessibility users.

I also used custom properties to override the styles of each feature card. which lead to a more readable CSS style sheet.

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

The layout of the cards on the desktop was challenging.

The way I did it was to have a grid of 3 columns and 4 rows. make each card span 2 rows. and laying them out using grid-areas and empty cells.

It was also challenging to know when to change the layout I chose a break point of 992px because bootstrap uses that to denote small desktop devices.

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

Thank you for checking it out my solution. Iet me know if it looks good on the device you're using.

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

I'm proud of the fact that I used calc functions and a combination of vw / rem units to make the typography / spacing responsive without media queries.

I'd like to make use of the clamp function next time as it seems to be a powerful function to achieve responsive typography.

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

The main challenge was ensuring the design looks good on all devices without cluttering the CSS with a huge number of media queries.

I tried to make the CSS responsive by default without using media queries. though, I still used media queries to adjust the width of the container and to split the design into two columns on large screen sizes.

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

I think I still struggle on how to achieve a design that looks optimal across the wide range of devices in the market today.

I tried to make typography and padding responsive in this particular challenge using the calc function and vw / rem units. but I'm unsure if I used them correctly.

This was the hardest challenge for me. although it was similar to the previous ones.

I have a few concerns about the solution.

1- I used a picture element to pick the right image based on the viewport size. and css blend modes to apply the effect on the image. I'm not sure If I should have used css background images and linear gradients instead. what do you think?

2- I'm not sure about how I structured the html and css for this project. let me know if you like / dislike the structure of the code ?

3- I have doubts on how I handled the responsiveness and fear that my design looks bad on some screen sizes. let me know if that is the case for you.

Fun challenge that helped solidify the skills used in most layouts when designing web pages.

I liked working though it and I'd like to get more practice before moving on to more complex layouts and designs.

Thank you for viewing my solution. Thank you!

Fun challenge to explore CSS Grid and Flexbox.

How does the design look on your screen? I hope it looks alright!

Thank you for taking a look at my solution!

In this project I used CSS Grid and Flexbox to handle the spacing and layout along some margin and padding.

I'd like to know what you think of the way I used these tools in the context of layout and spacing. Thank you!

The Project was interesting to do as a beginner in web development lacking a lot of practice. it seemed simple but I do have doubts about it. that I hope some of you can clear for me.

The challenge was provided in mobile and desktop versions. I'm really doubting the way I used media queries I'm not sure I'm adhering to best practices on those and I feel like I'm not accounting for all possible screen sizes with the fear that some devices will have a messy layout.

I hope some of you will share how do they tackle this part of responsiveness of the challenge. Thank you!