Skip to content
OverviewSolutions
31
Comments
537
P
visualdennis
@visualdenniss

All comments

  • shalri•620
    @shalri
    What are you most proud of, and what would you do differently next time?

    Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

    I had so much fun with this challenge. It was challenging but well worth it. I am pleased with how I implemented the logic for the app. This really helped me develop a deeper understanding of hooks.

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

    I still need to practice coding forms and using Typescript. Hopefully, these challenges will help me improve my proficiency.

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

    I am good for now. Learning so much from these challenges!

    Tip Calculator App - NextJs React Tailwind & Typescript

    #next#react#tailwind-css#typescript
    1
    P
    visualdennis•8,395
    @visualdenniss

    Hello,

    your solutions looks great and visually quite pleasing :) I like the smooth hover effects. One thing I'd like to suggest is, currently there seems to be a lot of useStates created. But since they are related states, they can be grouped together as an object. Something like this: const [state, setState] = useState({ bill: null, tipPercentage: 0, numberOfPeople: 0, customTip: "", tip: 0, total: 0, });

    This will make the state management cleaner and reduce the number of state updates, which can improve performance. Also it will be easier to keep track of what to update and when, and most importantly, keep them synced. I recommend digging this source as well on this topic: https://react.dev/learn/choosing-the-state-structure

    Hope this helps and keep up the great work! :)

    Marked as helpful
  • Hira•130
    @hirashabeer
    What are you most proud of, and what would you do differently next time?

    Proud of using some new animations ,some pseudo class elements(actually always forget the difference bw pseudo elements and pseudo classes 😁 plz explain it to me),and using JSON data file...

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

    1=> I find it extremely difficult to make the website responsive to all screen sizes i just made to y screen then to min width of 375 px .... please share some techniques to make it responsive easily and share some resources to me where i can learn the responsive techniques .(is there any tool which could make the website responsive by it self by giving it the code of one screen size 😂 ) 2=> I always try to Make the code as short as possible as i think this is good approach and makes execution fast .is it a fact or just my myth😌 ..please check my code for any improvement in logic or cleanliness 3=> I found it difficult to make the bar on hover display "another" element popup in CSS so I had to write long code in js. pleaseeeeeee🙏 share a way to do it in css 5=> In the script.js file the last part commented out is not working for me why ?

    Expenses Chart Component

    2
    P
    visualdennis•8,395
    @visualdenniss

    Hello Hira,

    To answer few of your questions: Pseudo-classes: define a special state of an element (e.g., :hover, :first-child). Pseudo-elements: style specific parts of an element (e.g., ::before, ::first-line).

    For mobile and general avoid giving fixed widths like 35px for the individual bar. they should be like 100%, and you can use display:grid for the #bars. E.g.: display: grid; grid-template-columns: repeat(7, 1fr); /* Create 7 equal columns */ and remove the fixed widths from the grid-items. And also add a max-width if you want for the bars so that they don't get too wide.

    as for the JS part. couldn't look in depth but, e.g. const popups = document.querySelectorAll(".popup"); is declared but not used since it is locally scoped inside the event listener func of DOMContentLoaded. Also I think instead of all those mouseOut event listeners, a simple :hover in CSS could suffice. Leading to cleaner and concise code.

    Hope this helps and keep up the great work! :)

  • MarieG41•220
    @MarieG41
    What specific areas of your project would you like help with?

    I'd like some help for the Javascript part. I can make the second slider appear and the first one disappear, but I can't make the first one appear again.

    const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const testimonialOne = document.querySelector('.One');
const testimonialTwo =document.querySelector('.testimonial-2');

function nextTest() {
        next.addEventListener('click', function() {
        testimonialTwo.classList.remove('hidden');
        testimonialOne.classList.add('hidden');
    })
}
function PreviousTest() {
    prev.addEventListener('click', function() {
        testimonialTwo.classList.add('hidden');
        testimonialOne.classlist.remove('hidden');
    }) 
}

nextTest();
PreviousTest();

    Coding bootcamp testimonials slider with SCSS

    #accessibility#sass/scss
    1
    P
    visualdennis•8,395
    @visualdenniss

    Salut Marie,

    first of all, there is a typo inside ur second func: testimonialOne.classlist.remove('hidden'); it should be classList, which causes the problems.

    Secondly there is no need to wrap ur eventlisteners into a function just to call them. Also, it's better practice to set up your event listeners outside of the function definitions, ensuring they are added when the DOM is fully loaded, smth like so:

    const prev = document.querySelector(".prev"); const next = document.querySelector(".next"); const testimonialOne = document.querySelector(".One"); const testimonialTwo = document.querySelector(".testimonial-2");

    function nextTest() { testimonialTwo.classList.remove("hidden"); testimonialOne.classList.add("hidden"); }

    function previousTest() { testimonialTwo.classList.add("hidden"); testimonialOne.classList.remove("hidden"); }

    // Set up event listeners

    next.addEventListener("click", nextTest);

    prev.addEventListener("click", previousTest);

    Hope this helps! :)

    Marked as helpful
  • WasiArshad•30
    @WasiArshad
    What are you most proud of, and what would you do differently next time?

    This project put me the extra pressure and that's leads me to work hard get to know many new things in the different ways.

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

    I was unable to show popup button seamlessely but later on I tried and learn from other third party websites.

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

    I can me more helpful in the HTML and CSS .

    Article Preview Component using flexbox

    1
    P
    visualdennis•8,395
    @visualdenniss

    Hello there,

    great job completing this successfully! Few suggestions for further improvements:

    • Add a little bit more gap between 'Share' and button icons.
    • No need to choose headers based on their size, e.g. h5 to get a smaller. Headings on a page should follow an order, h1 , h2 etc. and use CSS to change their style.
    • Consider using media queries to add responsiveness for mobile view.
    • Variable naming in JS looks a little confusing, as one would except 'buttons' would be multiple buttons, but you are just selecting one button, so better to name as 'button' etc.

    Hope these recommendations are helpful!

  • P
    visualdennis•8,395
    @visualdenniss

    Hello Olena,

    great solution, looks almost identical to the design :)

    there seems to be some areas to improve on regarding best practices of accessibility. For example: setting a fixed height like max-height: 450px; to a text containing element might cause various issues like content overflow with changing data or when user changes base font size on their device etc.

    Also, for similar reasons it is better to use responsive units like rem/em than px.

    there is also a great article about this particular FEM Challenge, showing and explaining best practices: Product Preview Card, feel free to check it out :)

    Hope you find this feedback helpful! Keep up the great work!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Hey Jo,

    great work! This one is a quite tricky challenge and u have did an amazing job :)

    There seems to be little issue with the vote system. Once u vote, if u can only cancel that vote but u cannot vote the opposite way. E.g. if u upvote, it goes up to 5, but if u downvote it never goes to 3, which should be the case. I've listed here Vote System States. Also i dont think it is necessary to put an explicit warning to a user. The standard practice on web is to toggle when clicked twice, instead of a pop up alert.

    Its also very nice that u added little menu to switch users. I've also initially wanted to make a menu like u and display users with animation onClick, then i thought since this is a demo, people might not spend time much, so i wanted to make it very explicit. But if it was a real-world thing, i'd hide them into a menu too.

    Hope you find this feedback helpful! Keep up the great work ;)

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Great work Adriana!

    you can add breakpoints anywhere you need, the given design images with 375px and 1440px show only how the app should look like at that particular browser width, so you are free to choose where to add breakpoints. It is usually best to check the look of your app for sizes as small as 320px and up to 2500px. Adding tablet is always recommended. Keep up the good work!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Hello Mermaido,

    Good effort! I've couple of suggestions to improve further:

    first, u need to change your html structure, not the body but a <main> should be the container for these elements and do not give any fixed height, only a max-width is enough. You can make the image width:100%, which will grow as much as it can until it hits containers max-width. You can then add a padding so there is little white space between image and the containers borders.

    To center the QR card inside the body, u can use display: grid; place-items: center; min-height: 100vh;

    I also recommend you to check my solution for the QR code for further ideas: SOLUTION LINK

    Hope you find this feedback helpful!:)

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Amazing job Mikolay! You are clearly talented and make very fast progress. Keep pushing your boundries 🔥

    Small tip when submitting: you can temporarily turn off the animations on your code before taking a screenshot on FEM, after you generated the screenshot here you can enable the animation in your code again so the live demo has animations. This way, all parts of your app will be visible in the screenshot.

  • P
    visualdennis•8,395
    @visualdenniss

    Great job with the creative touches in this one! Always love to see the work of people who keep pushing the boundries, keep it up that way and looking forward to see more 🔥

  • P
    visualdennis•8,395
    @visualdenniss

    Hey Reymart!

    Great job on completing this complex challenge successfully! Final result looks good.

    Few suggestions to improve further:

    • Ideally, users should be increase/decrease the vote number only once but currently one can upvote the same comment infinitely.
    • Every clicking on "Reply" keeps opening new input field, it would be better to use a toggle logic instead, where first click on the button displays the add comment input field and the second click hides it.

    Hope you find this feedback helpful!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Hello Sandra :)

    congrats on completing the challenge successfully! Nice result.

    However there seems to be couple issues to work on. To name a few: Giving a height: 60vh; is not a good idea, because it will stretch and squeeze depending on the screen size and cause unwanted paddings etc. It is best to avoid giving any fixed height or a height using percentages like this, instead just let the content of container determine the height. Use paddings and margins instead to tweak the look.

    The color of the body text seems to be too bright, so using a darker value would improve the contrast and reability.

    Hope you find this feedback helpful!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Hey Michelle,

    congrats on completing the challenge successfully! Very neat job.

    Using width:50% on the container causes it to squeeze a lot when resizing the browser, while there is still enough space. Instead i'd suggest using width:100% but a max-width: some-value-in-rem. and add a small margin so it does not touch the edges of the screen.

    There seems to be some room for improving the design as well. The title "Your Result" should be something like white so it has enough contrast with the background. Also the background color of the page does not seem harmonious with the rest of the design, so i'd suggest keeping it cleaner by using something more neutral and closer to white.

    Hope you find this feedback helpful!

  • P
    visualdennis•8,395
    @visualdenniss

    Hello Ezequiel,

    congrats on finishing the challenge successfully! Looks very neat!

    regarding design, the body text color seems to be mismatching the design, it supposed to be brighter and whiter. The currently used gray has very low-contrast to the background, so its harder to read.

    on certain browsers widths, the form inputs etc. get too much squeezed due to huge padding-inline of 12rem. Instead u can use an approach like margin: 0 auto; max-width: 68.75rem; on the container of the two columns. or set the breakpoints higher so it changes layout before it starts to break.

    Hope you find this feedback helpful!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Hello Saad,

    thanks a lot for the shoutout and happy to hear that you were inspired by my solution! :) Good job implementing with the framer-motion!

    When resizing on desktop, the image gets distorted, so you can prevent that by using object-fit: cover; on the img element. You can also add some easing to the animation to make it smoother and natural looking.

    At the bottom part of the letter 'W', there seems to be some weird shapes in the svg, idk why that.

    Also i think it is better to avoid using fixed/absolute values like "600"px for the initial value of the image, cuz depending on the screen size, parts of the image is visible on initial load. Consider using something more responsive, maybe percentage etc.

    Hope you find this feedback helpful and keep up the great work!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Hey Alex,

    great work completing this tedious challenge only in vanilla JS! It seems there is a bug about the win condition, the very first connect four is not counter, only starting from 2nd connect for, it starts to count wins for players. Also i believe after one connect 4, the game should end and don't let user to continue, instead restart the new game. But i guess u are already aware of these bugs.

    Hope you find this feedback helpful!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Feels elegant and smooth. Great job with it. Only a minor detail, which i've believe you have forgotten is to add cursor: pointer; to the hover states of radio btns to indicate user that they are interactive elements. Keep up the good work!

    Marked as helpful
  • P
    visualdennis•8,395
    @visualdenniss

    Looks like a neat job! Unfortunately page does not load for me, the loader is stuck endlessly, saying transferring data.. :/

    Judging by the screenshot, i like the gradient you have used, however i think the yellow color in the provided image does not go very well with it, too many tones and colors on a single page. I'd suggest using an alternative image decorated with shapes but with no more than a single color. Also the constrast between paragraph and background seems to be a bit low, as well as nav text having diff color than heading/paragraph makes it look a bit inconsistent.

    Keep up with the creative work and experimenting!