All solutions

Hi everyone,

This is my first time using TypeScript, so any specific feedback relating to that would be awesome!

I'm also wondering whether the way I've implemented the theme toggle is correct, or is this a situation where I should be using the Context API?

Some things I may work on later:

1. Ensuring users can click an operator instead of having to click the equals button before they can start a new calculation.
2. Making the calculator more accessible by allowing users to use keyboard buttons for numbers.

Any other feedback on how to do the above or any other feedback would be appreciated.

Thanks!

Hey everyone,

I've used NextJS, Styled-components, and a little bit of GSAP (first time using it) to make this site. (The screenshot looks a little weird due to the animations playing).

Any general feedback would be appreciated, but would specifically appreciate feedback on:

1. General code organization (any tips on how to make the CSS cleaner, and how to better organize React code).
2. Feedback on how I've created the general layout - this was a CSS-heavy website so I'm sure there are plenty of ways I could've improved the code.
3. Feedback on the navigation component - I split the component into two separate components (mobile and desktop) but I assume there is a cleaner way to do this.

I also see I have a few accessibility / HTML issues which I will clean up soon.

Any other comments would be appreciated as this is the hardest challenge I have done so far on the site :)

Hi everyone,

Would appreciate any general feedback, but a few specific questions I have:

1. After fetching the data, I filter the data it based on the timeframe that has been selected by mapping over the array and creating a new object, and then adding the relevant timeframe. Is there a better way I could be doing this?

2. I know that this app could be optimized (maybe using useMemo / useCallback), for e.g. fetching the data which only needs to be done once rather than every time a component is updated. Could anyone help me figure out how this should be done, and where else it could be done?

Any other improvements and suggestions would also be appreciated.

Thanks!

Hi everyone,

I used React (currently learning) to build this app. I found it quite challenging due to being new to React and not knowing how to do certain things that I know how to do in vanilla JavaScript.

A few questions that would really help me out:

1. What is the best way to show which button has been selected? I thought about storing something in the state of the "tip selection" component, but I'm not sure what I should be storing, and how I would dynamically change the colour based on which button has been stored in state (would I change the prop of the selected button somehow?)

2. Any improvements in how I have organized my React code would be great, primarily the way I am utilizing components and props (I know my styled-component and JS code looks quite messy in the calculator component).

3. I also got ESLint errors "JSX Props should not use functions", but I'm not sure how else I would achieve this functionality without sending some of the functions down to child components. Any ideas on how I could avoid this error?

4. I didn't get around to adding the error states, opting to try to conduct validation in the input fields instead. If I were to add error states, would I simply use state to check if the input is valid (turning state to either true or false), and then use a conditional in the JSX to display the error message if state says the input is invalid?

Any other comments would also be appreciated!

Hey everyone,

This is my (admittedly messy) solution using React. I've only recently started learning/using react so I understand that I should refactor the code to split into further components (e.g. a component for the slider).

Any suggestions on how to improve, including whether I am using useEffect() correctly, would be appreciated. I know useEffect & setState trigger re-renders so I am not sure whether this solution is performant. I assume it is not.

Cheers! Shiv

Hi everyone,

This was my first time using Sass & BEM, and I just wanted to try this challenge to practice naming and Sass code organisation.

I am open to any and all feedback, but I have a few specific questions around Sass & BEM:

1. As you will see, my code only contains one "base.scss" file. I originally was going to have different files (e.g. one for layout and one for components) but I couldn't conceptually grasp how I should be splitting the code up in both the HTML and the CSS. I know the aim is to keep the code DRY (which I have obviously failed at) but how should I be splitting things up? Should I be adding any "container" related CSS in a "layout.scss" file? And any component based CSS (e.g. for the button) in the components file? I guess it will make more sense when I work on a bigger project, but any feedback would be great.

2. While using BEM, I was mostly focused on the naming convention - I think I still need to grasp the concept of "block / element / modifier". I also found it tricky to have a clean naming convention while also splitting the Sass code, and it was one of the reasons I kept to one "base.scss" file. Any feedback on how I've handled BEM, and what I can do to improve this project further, would be awesome.

3. Utility classes - I'm sure that I should add utility classes (e.g. to center text) - but in order to do this, do I simply make a "utilities.scss" file and add .text-center { text-align: center }, and then add it to every class in the HTML that needs it? I'm going to do some more reading around this, but any feedback or help would be great!

Hey everyone!

I've tried to use CSS Grid for this challenge. Mobile view was relatively easy, but I felt like I ran into more issues when updating the Grid rules for the desktop styling. I've used grid gap in certain places, where padding / margin may have been better.

In particular, getting the cards at the bottom to look good in different widths & heights was one of the things I had issues with. I'm looking for any general suggestions to improve how I have used Grid. I think next time, I may use Grid for the general layout, and Flexbox for the specific sections.

Thanks!

Hi guys!

Looking for any general feedback for improvement.

Some specific questions I hope can get answered:

1.For the error styling of the email input field, I had to put "!important" for the CSS rule. I assume it wasn't working without this because the other css style was targeting the input field itself. Is this correct? And would the correct approach be to add a separate class for the border colour, so that both valid and error states are the same specificity? (Hopefully that makes sense).

Would appreciate any other feedback around HTML and CSS structure and usage, which is my current focus.

Thanks!

Hi there!

I am looking for any constructive feedback, specifically I am looking for advice on:

1. How to properly align the background images: As you will see, the background images on mobile do not resize properly. I tried a few ways to make them align properly by using position:absolute, but the bottom image kept increasing the page height. I would also love some advice on how I've structured the HTML, and if that is the correct way of doing this.

2. Aligning the Profile image: The profile image isn't cantered 100% accurately, and I've just used "top" and "right" to guess the correct alignment. Any advice on how to do this properly would be appreciated.

Thanks, Shivam

Hi everyone,

This was my first time using grid outside of tutorials, so I would be grateful for any feedback on how I have used it.

I also had some issues which I hope some people can help me out with:

1. Aligning the text / button as shown in design.

At first, I added display:flex to the card container, and then justify-content: space around, so that the text would space out evenly. However, I found that once I did this, I couldn't fine-tune the alignment for some of the items which needed to be closer together e.g. The h2 and p in the top box, which are closer together.

1. The use of Widths and Heights

I felt like with this challenge, since the whole component was centred in the middle, I had some issues with making the container size up correctly on different mobile sizes without sections getting cut off. Hence why on mobile, my solution doesn't look exactly like the design, as when I increased the padding on elements, the container would start getting cut off on smaller widths. If anyone can look at what I've done and tell me some improvements, that would be great.

1. White line at the bottom of the component, due to the box shadow.

I've added a box shadow on the component, but when I add it, I see a white line at the bottom of the component and I'm not sure why. Does anyone know?

I would also appreciate any other general feedback.

Thanks!

Hey guys,

I skipped the JS for this challenge, I'll probably come back to it a little later. Some questions:

• Any improvements on the way I made the mobile & desktop images switch out? I had a little trouble figuring out the best way to make them switch, as well as positioning the logo where I wanted it to go.
• Best way to define the width of content? For example, the logo, h1, p, and form all use padding-left: vh to make them all line up. Is there a better way to do this?

Cheers

Hey guys,

This is my first submission. I'm looking for any suggestions on improvements, including the way I have structured the HTML (e.g. more HTML 5 Classes, etc).

Also looking for improvements that can be made to:

• Way I've implemented font size (currently learning rem/em, so this is just a first rough attempt).
• Ways to improve responsiveness
• Ways to improve flexbox usage.

Thanks!