All solutions

Hello there,

This is my #9 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

I choose to do this simple project to experiment with SASS for the first time 🤩. This project was also perfect to deepen my knowledge in CSS Grid.

Here are some of my customizations:

• 🌟 I added some entrance animations, different for each device to be full responsive.
• 📱 To work more on the responsive aspect of this project I added a tablet version.

Please tell me what I could improve especially with Sass.

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #8 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

I choose to do this project in TypeScript language and with the framework React to deepen my skills in these fields. This challenge also allowed me to deepen my knowledge of CSS for the layout part of this project.

Here are some example of my customization I added to this project:

⏯️ I decided to add a button to control the start of the countdown. This button can also pause the countdown. 🔄 I also added a reset button. This button is available only when the countdown is running.

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #7 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

I choose to do this project in TypeScript language and with the framework React to deepen my skills in these fields. This challenge also allowed me to deepen my knowledge of CSS Animations and Styled Components for the layout part of this project. Concerning Styled Components, I learned that I can passes through all props, I have used it especially when inputs fields were empty.

Here are some example of my customization I added to this project:

• 💅 Passed props with Styled Components for the inputs fields.
• 🔄 I customized the submit button with a flip button effect.

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #6 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

I choose to do this project in TypeScript language and with the framework React to deepen my skills in these fields. This challenge also allowed me to deepen my knowledge of CSS and Animations for the layout part of this project.

Here are some example of the custom features I added to this project:

• 🎲 An animation on the dice, when the user click on the dice's button, during the loading of the advice the dice keep rotating until the API return the advice.
• 🚨 A custom alert message is displayed if there is an error with API fetching. I chose to display this alert message with a neon effect to match the design of this project, and also added a flashing effect to it.

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #5 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

I choose to do this project in TypeScript language and with the framework React and in to deepen my skills in these fields. This challenge also allowed me to deepen my knowledge of Grid and Styled Component for the layout part of this project.

I also challenged myself with this project to add some CSS animations to smoother the UI experience. I choose to add some animations for the entrance of the RatingCard and the ThankYouCard, as well as some animations for the submit button and the figure elements of the RatingCard, and finally for the shown of the alert message.

Here are some example of the other custom features I added to this project:

• ⭐ An animation on the star icon
• ⚠️ A custom alert message for the scoreboard component. When the user clicks the submit button without having selected a number, the button disappears and instead displays a "Please select a value" alert message.
• 📈 One more hover feature on figure inputs with transform: scale(1.10)

🤔 With the border-radius property the branchs of the star icon are a little bit cut, is anyone have an any to how fix this please ?

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #4 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #3 challenge 🙈 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

For the larger screen version I would like to display the footer under the text section and not under the text and the picture, have you any idea of how to do that ? Do I have to move the footer into the main tag ? In this case, How could I adjust the CSS and flexbox ?

I also don't know why the font-weight for the h1 span do not display correctly. Any idea ?

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #2 challenge 🙈 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊 Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire

Hello there,

This is my #1 challenge 🙈 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊 Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire