AnjelToppo
@AnjelToppoAll comments
- @lh62863P@AnjelToppo
Nice work! However, I felt 'navigation' was missing, and your slide button only changed images, not the content.
- @Code-BeakerWhat are you most proud of, and what would you do differently next time?
This is one of my dream projects! ✨
I have wanted to complete this project this project from ever since I joined this platform. Today I finished it! It took around a week and half to finish and deploy the project. I didn't hurry and mess up my code. Instead did it patiently and effectively.
Built with: ⚒️
- Semantic Vanilla HTML
- SCSS
- CSS
- Vanilla JS
- Vite
I initially started this project using Parcel. But I encountered an error of some of my elements disappearing on the live preview. After switching to Vite, I got them fixed.
I have tried my best to build an accessible and responsive website. Made use of
What challenges did you encounter, and how did you overcome them?aria
properties for better accessibility and added interactive effects for users. As I mentioned, it took around a week because I was busy with school, else I think I could've finished it earlier. The layout itself is simple but the positioning of some elements is different from what I've built in the past. So, I am happy that I could break things down and build the best possible result.I usually have a lot of difficulty building grid layouts and responsive navigation bars. But this time, I did things easily. Didn't google a lot. I did try using the new syntax for getting transparent background from custom properties.
.element { background-color: hsla(from m.color(primary__black) h s l / .5); }
I got this idea from Kevin Powell's last video and I found it really handy. I have always wanted an easy way to get a transparent background without having to copy-paste my
What specific areas of your project would you like help with?hsl
code and then converting it tohsla
.I would like to know how responsive it is on your devices. How to improve my JavaScript and build better and accessible websites.
Any suggestions on how I can improve are welcome! 😄
P@AnjelToppoWell done!
- @AymaneOnlineWhat are you most proud of, and what would you do differently next time?
I've done this challenge to practice BEM CSS Methodology for the first time.
What challenges did you encounter, and how did you overcome them?The workflow was quite smooth all along the project (besides that overlay on top of the image which took me a bit of time somehow)
What specific areas of your project would you like help with?I would be happy with any feedback guys, especially the one related to BEM methodology.
P@AnjelToppoThat's a nice attempt at completing this challenge.
- @Wojtek-AP@AnjelToppo
Let's see if I've got this right...
To calculate Body Mass Index (BMI) using the imperial system, the formula is:
BMI = (weight [in pounds]×703) / (height [in inches]×height [in inches])
For a height of 5ft 11in (71 inches), we can determine the ideal weight range by considering a healthy BMI range of 18.5 to 24.9.
Lower Ideal Weight Range (BMI of 18.5):
Lower Ideal Weight in stones = ((71×71×18.5)/703) / 14 ≈9.47 st
Converting the decimal part to pounds:
0.47 stones×14 pounds/stone≈6.58 pounds
Taking the integer part, the lower end of the ideal weight range is approximately 9 stones and 6 pounds.
Upper Ideal Weight Range (BMI of 24.9):
Upper Ideal Weight in stones = ((71×71×24.9)/703) / 14 ≈ 12.75 st
Converting the decimal part to pounds:
0.75 stones×14 pounds/stone=10.5 pounds
Taking the integer part, the upper end of the ideal weight range is approximately 12 stones and 10 pounds.
Therefore, the ideal weight range for someone who is 5ft 11in tall is approximately 9 stones 6 pounds to 12 stones 10 pounds.
- @irontrooper7P@AnjelToppo
Your design is excellent, especially the responsive aspect.
However, I've found some functionality issues.
- For example, when items are already in the cart, the quantity counter works, but the "add to cart" button fails. This issue occurs when the cart contains an item but works correctly when the cart is empty.
- Regarding the Lightbox, it should open when the main image is clicked, not the thumbnails.
- P@rafaeldgeoWhat are you most proud of, and what would you do differently next time?
I'm proud to have get using Lit Library to build different type of UI Elements It's necessary to learn more about this library, if I desire use it in future.
What challenges did you encounter, and how did you overcome them?The main challenge was building the mobile menu. I consulted the docs of the Lit and W3School.
What specific areas of your project would you like help with?I would like help about Lit Library.
P@AnjelToppoWell, since I have no knowledge of the lit library, I can't comment on your code. However, your site looks good.
- @gustavo2023What are you most proud of, and what would you do differently next time?
I'm proud that I was able to easily build the layout for the contact form and understood how to correctly use semantic HTML to improve accessibility.
What challenges did you encounter, and how did you overcome them?There wasn't any particular challenge that was difficult
What specific areas of your project would you like help with?- Is my use of
aria-describedby
,aria-required
, andaria-invalid
appropriate and sufficient for this form? Are there other ARIA attributes or techniques I could use to further enhance accessibility, especially for the custom radio/checkbox controls or the toast notification? - Are there ways to make my custom radio button and checkbox styling more robust or cross-browser compatible? Are there potential accessibility issues with hiding the native input and relying solely on CSS for the visual representation?
P@AnjelToppoYou made an excellent attempt at completing this challenge overall.
However, I noticed that the screen reader is not reading the success message toaster.
- Is my use of
- @Tonye-OnuohaWhat are you most proud of, and what would you do differently next time?
I am most proud of my ability to complete this project, as well as the accessibility challenges that were given, especially seeing as I've never built an FAQ accordion before and have always wondered how it was done.
What challenges did you encounter, and how did you overcome them?The only thing that looked like it was going to pose a challenge to me was not only keeping the FAQ container in the center, but ensuring that its height only grew according to the size of its content. The latter part turned out to be a bit tricky at first, but I eventually figured it out.
What specific areas of your project would you like help with?None that I can think of for now, but I am open to any sort of feedback on my work.
P@AnjelToppoOverall, you made a good attempt.
However, I've noticed a small issue: when all the FAQs are open, the content of the
.faq-container
is cut off in the UI, which results in a poor user experience. - @AgnerShimokawaWhat are you most proud of, and what would you do differently next time?
I was able to get the rate that was submitted and successfully displayed it on the thank you card. For next time I would like to try and work on the whole first and check what needs to be done before trying to hard code stuff.
What challenges did you encounter, and how did you overcome them?It was difficult to figure it out how to get the rate number after it was selected, and I overcame it once I realize that I was overcomplicating the challenge and didn't need to get the value until the submit button was pressed.
What specific areas of your project would you like help with?With this challenge I think there's nothing.
P@AnjelToppoNice, you achieved the result perfectly!
- P@hectorlil48What are you most proud of, and what would you do differently next time?
** What I’m Most Proud Of ** I’m most proud of how much I’ve learned and accomplished throughout this project. Despite feeling overwhelmed at times, I pushed through and developed an app that not only works as intended but also incorporates multiple React concepts and features. I’m proud of:
- Tackling React from Scratch: I had to re-learn React after not using it for a while, and it felt great to see the progress I made, especially with passing props, managing state, and using hooks like useEffect.
- Building a Functional and Interactive App: Creating a working quiz app with a dynamic user interface, dark/light mode toggle, and smooth transitions between questions was an achievement I’m proud of.
- Deploying the App: Getting my app up on GitHub Pages was a big step for me, as it made everything feel more real and professional. Sharing my app with others gave me a sense of accomplishment.
** What I Would Do Differently Next Time ** While I’m proud of my work, there are a few things I’d approach differently next time:
- Planning and Wireframing: I’d spend more time planning the app before starting. I didn’t do much wireframing, which made me jump into coding without a clear visual direction. This led to some unnecessary back-and-forth during the development process.
- Handling State More Effectively: While I used props and state well, I feel I could have used Context API or Redux to manage state more efficiently, especially as the app grows and more features are added.
- Testing Early: I didn’t implement testing during the development process, which in hindsight, would’ve been helpful to catch bugs earlier. Next time, I’ll start writing tests right from the beginning.
- Design and UI/UX: Although I made the app functional, the design could have been more polished. I’d focus more on UI/UX principles and try to make the app look as good as it works.
** Challenges I Encountered and How I Overcame Them ** Throughout the development of my quiz app, I encountered several challenges, each of which taught me something valuable. Here’s how I navigated those obstacles:
-
Understanding React Basics: After not using React for a while, I found myself struggling to remember some of the core concepts. To overcome this, I watched tutorials and referred to the React documentation regularly. ChatGPT also helped me clarify doubts and explain concepts in simpler terms, allowing me to move forward with confidence.
-
Managing App State and Props: Passing props between components and managing state was tricky at first, especially as the app grew more complex. I overcame this by breaking down the app into smaller, reusable components and using props to pass data between them. I also practiced more with state management in React, which made me more comfortable with it over time.
-
Dark Mode/Light Mode Toggle: Implementing a theme toggle was more challenging than I initially thought. I had to manage CSS variables and ensure the switch worked smoothly across the entire app. By looking up examples and experimenting with localStorage to persist the theme across sessions, I was able to implement this feature successfully.
-
Handling onClick Events: As the app required multiple user interactions, handling onClick events properly was crucial. At times, I faced issues where event handlers weren’t firing as expected. I debugged these issues by checking my syntax and making sure the events were bound to the correct elements. Referring to Stack Overflow also helped me find solutions to common event handling issues.
-
Deploying to GitHub Pages: Deploying the app to GitHub Pages presented its own set of challenges, especially when dealing with routing and React's single-page application (SPA) nature. After some trial and error and reading through GitHub’s documentation, I found the solution to configure the app correctly for deployment. This process taught me a lot about deployment tools and the importance of understanding how they interact with your app.
While I’ve made significant progress on my quiz app, there are still a few areas where I’d appreciate some guidance to improve and refine my work:
-
State Management with Context API or Redux: As the app expands, managing state across multiple components is becoming more challenging. I would love help understanding the best practices for using Context API or Redux to streamline state management and avoid prop drilling.
-
Testing the Application: I haven’t yet written tests for my app, and I’m unsure where to start. I’d like help with setting up testing frameworks like Jest or React Testing Library and writing effective tests to ensure my app works as expected.
-
UI/UX Design Improvements: While the app is functional, the design could use some refinement. I would appreciate feedback on improving the user interface and user experience, such as making it more intuitive, visually appealing, and accessible.
-
Performance Optimization: As the app grows and becomes more complex, performance could become an issue. I’d like help identifying potential bottlenecks and optimizing the app for better speed and responsiveness.
-
Deployment Best Practices: Although I deployed my app on GitHub Pages, I’d like to learn more about other deployment strategies (e.g., Netlify, Vercel) and how to set up Continuous Integration/Continuous Deployment (CI/CD) for smoother project management.
P@AnjelToppoOne minor issue I found in your app is when you submit the wrong answer it still shows submit button and after clicking it, then shows next button. So, in conclusion in between these steps there is an extra step step came when you chose wrong option.
In general, once you submit the wrong answer then it should display the wrong and correct option at once and in the same time it should also display next button.
- P@SamuelKRuan1901P@AnjelToppo
You did a great work with this project. The application is working fine.
- @bettercallmkWhat are you most proud of, and what would you do differently next time?
I’m proud that I applied what I learned and compared my results with the example, allowing me to experience a small taste of success.
What challenges did you encounter, and how did you overcome them?
Although I relied heavily on GPT's help this time, my goal is to complete future projects more independently by myself.Since it had been a while since I learned basic CSS, it was challenging to recall some parts, especially regarding Flexbox.
What specific areas of your project would you like help with?
I overcame this by searching for information online and getting feedback through GPT, which helped me complete the project.I would appreciate receiving honest feedback.
Although this wasn’t a particularly difficult challenge, I believe that even a short, sincere comment could help me grow further.P@AnjelToppoYou did a great work with this project. It looks good in all viewports.
However, you can improve your html code -
- By providing atleast one
<main>
tag.
Last thing, try using relative units like
rem
,em
,%
etc instead ofpx
- By providing atleast one
- @adeyshWhat are you most proud of, and what would you do differently next time?
I made the app as close to the design as possible and also added some other nitty features such as showing validation checks and tips for the user.
What challenges did you encounter, and how did you overcome them?I encountered different layout challenges since it was hard to style radio buttons in the form according to grid layout as well as catch their input in the form. Also I wanted to reuse components as much as possible so had to think about how well can I reuse different fields having same styles. I also had problems rendering the correct error on the field that the user was typing in since to make it maintainable I had to create a utility function that would render that message.
What specific areas of your project would you like help with?I wanted to modularize my code in the js into different files but on doing that my styles wouldn't apply and I had no idea what was going on. Since I was using vite, I thought that it had to do something with this. So how do i use different files as js modules and import them in a single file and then initialize it with vite. Do i have to change some config settings? It would be really helpful if you can provide me that solution! Thanks
Responsive Tip Calculator built with SASS/BEM and Vanilla JS + Vite
#accessibility#bem#vite#sass/scssP@AnjelToppoYou've done a great job with this! I noticed the extra features you implemented, which is a nice touch.
However, I did come across a small bug. It seems that when a custom tip percentage is entered and then a radio tip percentage is selected, the calculator doesn't update to use the newly selected radio percentage.
- @jadeli1720P@AnjelToppo
Overall, you did a great work, and the animation is particularly smooth. However, I'm unable to view your code at the moment.
Additionally, I noticed a minor issue on your site: when the hour is 0 or 1, it displays "hrs" which should be "hr".
Marked as helpful - @whiteknight-devWhat are you most proud of, and what would you do differently next time?
I am proud of the end product. I think it is very similar.
What challenges did you encounter, and how did you overcome them?The most challeging thing was form validation. I used the mdn documentation.
What specific areas of your project would you like help with?If you see something that I could improve, please let me know I will appreciate it.
P@AnjelToppoYou've done a great job with this!
However, I encountered a small issue when I tried to subscribe to the newsletter – the page seemed to break.
Looking at the main.js file, around line 31, I noticed the line
window.location.href = "/success.html";
. It appears an absolute path is being used here, which might be the reason for the broken page.To potentially fix this, you could try using a relative path by simply removing the leading /, like this:
window.location.href = "success.html";
.Alternatively, if you still prefer to use an absolute path, you might want to try this:
window.location.href = "/Newsletter-Sign-Up-FM/success.html";
.One other minor point I noticed is in the successful subscription message. It seems to display a hardcoded email address, ash@loremcompany.com. It would be great if this could be updated to show the actual email address the user provided during sign-up.
Marked as helpful - @Barnabas001P@AnjelToppo
You did a great work.
Regarding the
.footer-button-section
class, I observed that the content is enclosed within<button>
tags. Considering their likely function as links, would it be beneficial to update them to<a>
tags instead! For instance:BEFORE
<button class="footer-active-button"> <img src="images/icon-facebook.svg" alt="" /> </button>
AFTER
<a class="footer-active-button" href="/"> <img src="images/icon-facebook.svg" alt="" /> </a>
- P@curricleWhat are you most proud of, and what would you do differently next time?
Using Sass/SCSS for the first time in a while, I felt the organization of my stylesheet getting away from me a little bit towards the end. Next time I'll have to keep in mind how I want to nest styles consistently across breakpoints.
P@AnjelToppoI believe that simply attempting this challenge is a significant achievement in itself.
If this is your first experience with Sass, you've done a wonderful job.
However, I've encountered a noticeable issue on your live site between the 1280px and 495px media query breakpoints where several elements appear to be misaligned. For example, the
.featured-photos
section seems to be cut off, and the styles for#footer__content
appear to break. - @SuLeImaNSAAWhat are you most proud of, and what would you do differently next time?
The most thing I'm proud of that in this project it was my first time I used TailwindCss.
What challenges did you encounter, and how did you overcome them?The responsive in small screens.
What specific areas of your project would you like help with?The responsive in smaller screens.
P@AnjelToppoYou did an amazing work! 👍
However, the way you included the image might work in development mode, but once you host it, the images will break.
Here you can check out how images can be included.
Marked as helpful