Skip to content
OverviewSolutions
58
Comments
16
Victor
@VictorKevz

All comments

  • Jordan Davenport•970
    @jjdavenportSubmitted 8 days ago
    What are you most proud of, and what would you do differently next time?

    I would simplify my use of state management.

     const [score, setScore] = useState(0);
  const [rulesModal, setRulesModal] = useState(false);
  const [player, setPlayer] = useState(null);
  const [computer, setComputer] = useState(null);
  const [picked, setPicked] = useState(false);
  const [playerImage, setPlayerImage] = useState(null);
  const [computerImage, setComputerImage] = useState(null);
  const choices = ["rock", "paper", "scissors"];
  const [result, setResult] = useState(null);
    What challenges did you encounter, and how did you overcome them?

    The main challenge was the animations, I used framer motion for the first time.

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

    any feedback is appreciated.

    Rock paper scissors

    1
    Victor•1,260
    @VictorKevzPosted 8 days ago

    Hey, great job on this one. As you indicated you had to overuse useState. Perhaps you can look into useReducer Hook, it will simplify state management. It's actually meant to handle complex state. A nice touch would be to combine it with useContext hook aka the Context Api.That way you won't have prop drilling issues as you can easily share state in your App. Framer motion is a good library for animations and I think you did well😁

    I hope it's useful

    Marked as helpful
    1
  • Dhia•710
    @Dhia-18Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm mostly proud of my Javascript code. I've just started learning it, and I guess I'm doing a great step through it.

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

    I had to work on positioning the cards, which was quite challenging, especially when transitioning from the mobile to the desktop version. It took me about an hour to get the code right.

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

    I would really appreciate feedback on how clear and organized my code is. If you have any better ideas for positioning the cards, I would greatly appreciate it!

    Interactive Card Details Form Main

    2
    Victor•1,260
    @VictorKevzPosted 3 months ago

    Hey there! You're doing great working on this challenge! Although I'm not an expert, I suggest using the input type as "text" instead of number. Why? When you use "number," the browser displays spinners. Using text would avoid that; all you have to do is handle the validation with JavaScript. It might seem counterintuitive, but it gives you much flexibility in formatting your user input data. Alternatively, if you choose to use "number," you can use advanced CSS like Webkit to hide those spinners (arrows).

    I hope you find this helpful 👍🏽

    Marked as helpful
    1
  • Daniel•1,010
    @GhraviteeSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Completing the project without any additional installed packages

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

    Background images problems. Asking questions as usual

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

    If there's a better way to handle the logic of the sliders or a better way to animate them, I'd really love to hear them.

    Coding bootcamp testimonial using react(vite) and tailwind css

    1
    Victor•1,260
    @VictorKevzPosted 3 months ago

    Great job! If you are using React, you can use a couple of libraries to animate your projects like GSAP and Framer Motion. I have only used Framer Motion for a couple of projects and it's quite handy. All the best and hopefully it's helpful👍🏽

    1
  • Mahmoud Elagamy•1,080
    @Mahmoud-ElagamySubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    ...

    Hello FEM Community!😉

    this is my solution for multi step form app challenge!😊.

    I'm thrilled to share my solution for the multi step form app challenge, and building this app was a fantastic learning experience that solidified my understanding of React's core concepts.

    🛠️ Built with:

    • React✔
    • Tailwind ✔
    • TypeScript✔
    • Framer Motion ✔
    • Daisy UI ✔
    What specific areas of your project would you like help with?

    Check out the live demo and feel free to leave any feedback or ask questions about my approach! Thanks a lot😊.

    A simple multi step form built with React.

    4
    Victor•1,260
    @VictorKevzPosted 3 months ago

    I love your simple animations 😁, which I honestly could adopt for my project! Also, the icons' appearance on successful form registration was a nice touch!👌🏼

    However, I think there are just minor details you may have missed like preselected or default options on both subscriptions and adds-on. It's good that you set validation in case it's not selected but I thought I could just mention that in case it wasn't intentional. Above all, I love your solution!!!!

    Marked as helpful
    0
  • Victor•1,260
    @VictorKevzPosted 4 months ago

    Hey, great job 👏 completing this challenge. I have a tip you might find useful when trying to center a div (in this case, the card).

    You need two divs one which you can set as a "wrapper/main/outer-container" and then another as may be "inner-container/card".

    you can use this code:

    .outer-container { 
display: flex;
 min-height: 100vh; 
justify-content: center; 
align-items: center;
 }

.inner-container { 
/here just style the container as you see fit for example;/ 
min-width: 300px; 
max-width: 400px; 
width: 100%; 
border-radius: 15px; 
}

    If you don't want an outer-container you apply the styles to the body instead, it's up to you!

    I hope you find this helpful👍

    Marked as helpful
    1
  • Dylan de Bruijn•3,230
    @DylandeBruijnSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I had the most fun experimenting with GSAP, I'm trying to use it in more projects.

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

    Getting the card to take up 100% width on mobile. Turns out it was just a simple media query. I tried min() but that didn't work.

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

    Any feedback is much appreciated.

    Social Links Profile

    2
    Victor•1,260
    @VictorKevzPosted 5 months ago

    Pretty cool! 👌🏻

    1
  • Victor•1,260
    @VictorKevzPosted 5 months ago

    Hey, great job completing this challenge. I have a tip you might find useful when trying to center a div (in this case, the card).

    You need two divs one which you can set as a "wrapper/main/outer-container" and then another as may be "inner-container/card" or profile-card(in your case).

    You don't have to manually use this code to center a card or container left: 700px; top: 40px; padding: 30px;

    Instead, you can use this code: .outer-container { display: flex; min-height: 100vh; justify-content: center; align-items: center; }

    .inner-container { /here just style the container as you see fit for example/ min-width: 300px; max-width: 400px; width: 100%; border-radius: 15px; }

    If you don't want an outer-container you apply these styles to the body instead, it's up to you!

    I hope you find this helpful👍

    Marked as helpful
    1
  • Victor•1,260
    @VictorKevzPosted 5 months ago

    Hey, great job completing this challenge. I have a tip you might find useful when trying to center a div (in this case, the card).

    Basically, you need two divs one which you can set as a "wrapper or outer-container" and then another as may be "inner-container" or profile-card(in your case).

    Below is the code that would solve that for you without needing to use that top: 20%; you used

    .outer-container { display: flex; min-height: 100vh; justify-content: center; align-items: center; } .inner-container { /here just style the container as you see fit for example/ min-width: 300px; max-width: 400px; width: 100%; border-radius: 15px; }

    If you don't want an outer-container you apply these styles to the body instead, it's up to you! I hope you find this helpful👍

    0
  • Victor•1,260
    @VictorKevzPosted 5 months ago

    Great job completing this challenge, for me as funny as it may sound, I had trouble with that little heading 😅 which caused me to miss the alignment with the design. I see you didn't manage to customize your slider, I hope you find this code helpful. Otherwise, your solution looks great!👍🏽

    .slider { width: 100%; height: 8px; position: relative; appearance: none; background: var(--light-grayish-blue-slider); border-radius: .5rem; cursor: pointer; transition: all 0.3s ease; }

    .slider::-webkit-slider-thumb { appearance: none; background-image: url("../../assets/images/icon-slider.svg"); background-color: var(--strong-cyan); background-repeat: no-repeat; background-position: center; border-radius: 50%; transition: all .3s ease-in-out; width: 40px; height: 40px; box-shadow: 0 1.6rem 3.2rem hsl(174, 97%, 48%); cursor: pointer; }

    Marked as helpful
    0
  • Hazel-David•260
    @Hazel-DavidSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    ..

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

    //

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

    //

    HTML AND CSS

    1
    Victor•1,260
    @VictorKevzPosted 5 months ago

    Hey, great job completing this challenge. I have a tip you might find useful when trying to center a div (in this case, the card).

    Basically, you need two divs one which you can set as a "wrapper or outer-container" and then another as may be "inner-container" or profile-card(in your case).

    Below is the code that would solve that for you without needing to use that margin: 5vh auto; you used. You should have used min-height:100vh or dvh to make sure the card is centered vertically

    .outer-container { display: flex; min-height: 100vh; justify-content: center; align-items: center; } .inner-container { /here just style the container as you see fit for example/ min-width: 300px; max-width: 400px; width: 100%; border-radius: 15px; }

    If you don't want an outer-container you apply these styles to the body instead, it's up to you! I hope you find this helpful👍

    Marked as helpful
    0
  • Gilbert Koomson•260
    @Gilbert-KoomSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I love the fact that i used display flex and justify content to center my items but next time i will try to use other layout technique.

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

    I found it hard to figure out the correct font sizes and weight without the figma files but i tried my best by using the images from the design folders

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

    I would like to transition the profiles background colors smoothly to green

    Social links profile page

    2
    Victor•1,260
    @VictorKevzPosted 6 months ago

    Hey, great job completing this challenge. I have a tip you might find useful when trying to center a div (in this case, the card).

    Basically, you need two divs one which you can set as a "wrapper or outer-container" and then another as may be "inner-container" or profile-card(in your case).

    Below is the code that would solve that for you without needing to use that margin: 100px auto; you used. You should have used min-height:100vh or dvh to make sure the card is centered vertically

    .outer-container { display: flex; min-height: 100vh; justify-content: center; align-items: center; } .inner-container { /here just style the container as you see fit for example/ min-width: 300px; max-width: 400px; width: 100%; border-radius: 15px; }

    If you don't want an outer-container you apply these styles to the body instead, it's up to you! I hope you find this helpful👍

    0
  • Victor•1,260
    @VictorKevzPosted 6 months ago

    Hey, great job completing this challenge. I have a tip you might find useful when trying to center a div (in this case, the card).

    Basically, you need two divs one which you can set as a "wrapper or outer-container" and then another as may be "inner-container" or profile-card(in your case).

    Below is the code that would solve that for you without needing to use that margin: 100px auto; you used

    .outer-container { display: flex; min-height: 100vh; justify-content: center; align-items: center; } .inner-container { /here just style the container as you see fit for example/ min-width: 300px; max-width: 400px; width: 100%; border-radius: 15px; }

    If you don't want an outer-container you apply these styles to the body instead, it's up to you! I hope you find this helpful👍

    Marked as helpful
    0