React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none.
What specific areas of your project would you like help with?Any feedback is welcome!
Hi @roidzuh! Nice job. Layout looks top-notch! A few details to mention: – No hover for the menu-items – No hover for the read-more button – No "cursor: pointer" on clickable elements – Can't click read-more button because it is covered by the menu with the opacity: 0. But it is still present on the layout. – Accessibility could be better. Impossible to open the menu without a trackpad or a mouse. Assistive technologies would not understand that the hamburger menu is the button which opens navigation and is clickable.
Best, Nikita.
Hi @wyasyn! –Semantic HTML –LightHouse (chrome dev tools) rates accessibility at 89 / 100 points. I believe there could be made some improvements. –Looks nice on big screens –Well structured code –Fits design
Great job!
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Hi @Fixito! Nice job!
I want to mention a few issues with the desktop version: –paddings –margins –radio inputs layout alignment
It looks sharp on the mobile version though!
I'm particularly proud of the additional complexity I introduced to this project by challenging myself to avoid using React Router for navigation. Instead, I implemented a sophisticated state management system using the Context API and a reducer function. This approach allowed me to create a conditional rendering system for components based on the application's state, demonstrating my ability to architect complex, production-grade code structures.
The decision to use Context API for global state management, while keeping it local to the UI, showcases my understanding of when to apply different state management solutions. This approach is perfectly suited for managing UI-specific state without the overhead of more complex state management libraries.
I'm also pleased with how I tackled styling the application using Styled Components, especially when it came to dynamically styling components based on different answer behaviors. This required a deep dive into the capabilities of Styled Components and pushed me to expand my skills in creating flexible, reusable styled components.
Another aspect I'm proud of is the implementation of a dark/light mode theme from scratch. By choosing not to rely on a third-party library, I gained valuable experience in creating a theme system. While I acknowledge that my implementation might not be optimal, I remain open to feedback and improvements.
To enhance the user experience beyond the initial challenge requirements, I incorporated animation effects using Framer Motion. This addition, along with the confetti celebration at the end of each quiz, brings a dynamic and visually appealing element to the application.
For future projects, I might consider exploring more efficient ways to implement theming, possibly by researching best practices or leveraging existing libraries while maintaining a deep understanding of the underlying principles.
What challenges did you encounter, and how did you overcome them?One of the main challenges was applying the principles of "Thinking in React" to this project, especially given the additional complexity I introduced. The process involved:
This approach required significant reflection and planning, particularly due to the self-imposed constraints. It was an iterative process that demanded numerous modifications throughout the development cycle. Each step presented its own challenges, from deciding on the optimal component structure to determining the most efficient way to manage and propagate state changes.
Implementing the theme provider for the entire application also presented some difficulties. Ensuring that the theme was consistently applied across all components and that theme changes were smoothly reflected throughout the UI required careful consideration of component structure and state management.
What specific areas of your project would you like help with?I'm particularly interested in receiving feedback on my implementation of the dark/light theme system. If there are more efficient or elegant methodologies for implementing theme switching in React applications, I would be eager to learn about them. I'm always looking to improve my code and adopt best practices, so any insights into optimizing theme management or alternative approaches would be greatly appreciated.
Hi @juliengDev! Great work overall! Your solution: – Contains semantic HTML – Robust accessibility – Layout looks perfect across different screen sizes – Well structured code
According to dark mode, I decided to add a class on the body in the theme-switcher component when dark mode is on and remove it when it is off. My dark mode implementation looks like this:
body.dark
background-color: variables.$slate-900
color: white
.theme-switcher
&__icon
svg
fill: white
.introduction
&__title
color: white
&__info
color: variables.$blue
.options
&__item
background-color: variables.$slate-600
color: white
.final
&__title
color: white
.score
background-color: variables.$slate-600
&__points
color: white
&__questions-amount
color: variables.$blue
I paid a lot of attention to details. Results can display numbers with up to 8 digits without breaking the layout. The app displays error messages according to validation results. I believe JS is written according to best practices and is easily scalable. I have tried to use pure functions as much as possible.
Hi @webdevbynight! Thank you for your detailed feedback!
any for the user inputs, but after your notice, I realized that the entered inputs are always strings..gitignore. Can you explain pls ?For this project, I focused on implementing a clear and well-structured logic. Each functionality is encapsulated in distinct functions with clearly defined responsibilities, such as password generation, strength evaluation, and security bar updates. This approach ensures that the code is both maintainable and easily extensible for future improvements.
I also paid close attention to thoroughly commenting the code, making it easier to understand and follow for anyone who might work on it.
The event management is well-structured as well. Event listeners are properly attached to the DOM elements, with clear conditions for activating the different options. The handling of password state and its related options is efficient, with synchronized updates to the interface.
Overall, the project is built to be both robust and user-friendly.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was the thought process behind the implementation, which required careful planning. I spent time ensuring that I followed best practices to deliver solid, maintainable, and readable code.
I had to do some research to implement certain features, particularly the password generation logic, the dynamic visual updates when manipulating the slider, and the rendering of the security level bars. Additionally, I looked into how to implement the copy-to-clipboard functionality, ensuring it worked seamlessly within the app. Overcoming these challenges involved learning and applying new techniques while maintaining code quality.
What specific areas of your project would you like help with?I would like to get a review on the logic part of the code, specifically to see if there might be an alternative approach that could improve it.
The layout looks great! Just for perfection: – The gap between checkboxes and labels might be decreased a bit. – Hover effect for the thumb of the range input for now it works only for active state. – For me, the max range input value looks more 20 then 16. – On sm screen resolution fonts look way bigger and label checkboxes wrap on the second line. – The "To week!" state overlaps with neighbour elements. – The white color for the copy button should be on the active state not hover – The "Copied" notification looks too little. The app works well and is nice! Logic part: – With no selected checkboxes the app gives the "Medium" state. – The app doesn't generate a password with the selected options if the character length is set to less than 6 (included). – With no selected options or length = 0 the copy button copies placeholder text to the clipboard. But it might be not a bug, but the feature =))
Sorry for such amount of comments I know it is annoying after well-completed work. But it is what it is. I believe you noticed most of them yourself, but I hope you fond something knew.
Thank you for reading Best, Nikita
I might try React for a similar project next time, as the useState hook would probably help a lot. Even tho here are some bugs and improvements needed, as well as some repeated code but proud to finished it.
Hi @KapteynUniverse! I was also considering a React approach for this challenge. It seems like it would be more efficient. After reviewing your feedback, I understand that you've identified some bugs in your app, and I'm confident you'll address them. Great work on completing the challenge!
I appreciate how your app responds dynamically to each input. While I'm curious about your choice to use a "keyup" listener, I suggest considering a "change" listener for a more responsive experience. Your focus on reactivity aligns with my approach, and I'll likely incorporate similar techniques.
Finally, if I were in your position, I'd explore removing the step attribute from the input elements.
Best, Nikita.
I'm happy to manage how to get data from JSON file and display them dynamically. it took me a while searching related stuff and try it out
What challenges did you encounter, and how did you overcome them?the responsive layout is not easy....finally i can't change the position of "lastweek -hours" from left to the right when in bigger screen size....i finally need to use a trick of absolute positioning , i am thinking what is the perfect way to make it
What specific areas of your project would you like help with?the responsive layout is not easy....finally i can't change the position of "lastweek -hours" from left to the right when in bigger screen size....i finally need to use a trick of absolute positioning , i am thinking what is the perfect way to make it
Hi @zbuli-t! I think your solution includes semantic HTML, but you can improve a few. I suggest you to add main and footer tags in body. According accessibility i believe you may add more details in alt attribute. Here you can find how good alt can be written – https://rockcontent.com/blog/how-to-write-good-alt-text/ I think your layout looks great beside you need to sort out how to center it. What i suggest: HTML:
<body>
<main>
<div class="big-container"></div>
</main>
<footer>
<div class="attribution"></div>
</footer>
For HTML we add two elements – main and footer, they help us improve semantic and we can style them for center layout.
CSS:
html,
body {
height: 100%;
}
/* We say take the whole height of document to position children using flexbox*/
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
/* Here we are saying that main axis is Y, also that main and footer elements should be distanced from each other */
main {
flex-grow: 1;
display: flex;
align-items: center;
}
/* Here we say that main should grow as much is possible align it children in center*/
Short video explaining flexbox https://www.youtube.com/watch?v=phWxA89Dy94 Article https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Deep-dive https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
Best, Nikita.
@jen067 Jen you have made the best review I ever had. Thank you so much! According to your suggestions:
You have significantly improved my markup. Please let me know if you ever would like to get a review from me on any challenge. Please have a great day =) Best, Nikita
can anyone help me with the css validation? like the :invalid and the :invalid state I try using this but the default of this is sucks like it automatically invalid even though user still didn't do anything. I try user-invalid and user-valid and it work fine and it work as expected. Is it good using that tho?
Hi @Hoaxilog! I suggest not to use browser validation. Because the task in that challenge is to use JS validation. Here you can find out about client-side validation: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#different_types_of_client-side_validation
For that add novalidate attribute on form tag in html. You can read about attribute here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate
After all that:
const handleSubmit = (e) => {
e.preventDefault(e);
const formData = new FormData(e.target);
const data = Object.fromEntries(formData);
console.log(data);
};
Now we have submitted data from all inputs (we have only one, but you can use the same approach if you have more).
function validateEmail(email) {
const regExp = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g; // this is regular expression
return regExp.test(email); // here we are testing submitted email. // result is true or false
}
2.1 We can store result of the function in variable:
const isEmailValid = validateEmail(data.email)
3. Now we can do something according isEmailValid variable
If(isEmailValid){ //If valid
show dialog
}
if(!isEmailValid) { //If not valid
show error
}
Final code might look like this:
function validateEmail(email) {
const regExp = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g; // this is regular expression
return regExp.test(email); // here we are testing submitted email. // result is true or false
}
emailForm.addEventListener("submit", (e) => {
e.preventDefault()
const formData = new FormData(e.target);
const data = Object.fromEntries(formData);
const isEmailValidated = validateEmail(data.email)
if(isEmailValidated) {
show dialog
}
if(!isEmailValidated) {
show error
}
})
No need to use action="#success-message" method="get" on form. Those are for php script.
The Time I spend building the main Layout is Decraesing every time I finish a Project, I'm really proud that I'm Actually learning Something and Leveling up My Skills.
What challenges did you encounter, and how did you overcome them?Nothing Was that hard as i actually practice some of my previous challenges regularly
What specific areas of your project would you like help with?Nothing as of now
Awesome pixel perfect. Just for perfection want to suggest to change font-sizes according design of desktop version.
