Not Found
Not Found
Cannot read properties of null (reading 'code')
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Cannot read properties of null (reading 'code')
Not Found
Not Found
Not Found
Cannot read properties of null (reading 'code')
Not Found
Log in with GitHub
OverviewSolutions19Comments14

All comments

  • Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge, it looks great 🥳

    I took a look at your index.css and styles.css files, I see you've used margin: auto to try and center your content, this is good, but css provides you with better tools such as flexbox and grid for more layout customizations.

    here are some reference links on how to use them:

    CSS Flexbox

    CSS Grid

    Also, if you take a look at the design preview, you will see that the challenge expects you to have you text-align: center, on your text content, applying the same, will let your webpage be a more accurate representation of the design provided.

    Hope this was helpful 😊

    Marked as helpful

    3
  • The Nghia• 140

    @dothenghia

    Submitted

    This is my first project that uses ReactJS. So there were a few confusions during the implementation of the project:

    • I haven't used Vite to create a ReactJS project and I had some trouble deploying the project to github => I followed this website and this video . But I find it quite annoying to have to create a branch, Is this a good way to push Vite project to github?

    • Is it a good idea for me to use 'useState' and pass them through props for the child component to change the parent component's state?

    Interactive rating component [using ReactJS]

    #react#vite

    3

    Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge, it looks great 🥳

    I’ll be answering your second question, It’s normal to pass useState to the child component, to let it modify the data as a beginner, But the idea of React, is to build reusable components, which are meant to handle any environment.

    (One example is the <input> component, which itself takes a value, and an onChange function callback, thus the input component is no longer responsible for handling the data, but rather, only displays any changes)

    So if you wanted to build a more robust version of RatingCard and ThankCard, You should structure it as follows.

    <Rating
    rating={rating}
    OnRatingChange={(rating) => setRating(rating)}
    OnSubmit={(submit)=> setSubmit(submit)}
/>

    And in the Rating.jsx file,

    
const activeHandle = (e) => {
 let activeOption = document.getElementsByClassName('active');
 for (let option of activeOption) {
    option.classList.remove('active');
}
 e.target.classList.add('active');
 props.onOptionChange(e.target.innerHTML);
}

    You can follow similar logic for submit as well.

    Now you do not need to pass setState callback into the child component and let the child do the modifications

    Hope this was helpful 😊

    Marked as helpful

    1
  • Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge 🥳

    I have a few suggestions regarding CSS used

    • Try to use relative units rather than absolute units wherever possible this might help you
    • position:absolute should be used as a last resort, since it abstracts out the content from the website flow more about the same here
    • You seem to have specified the font family properly, but also make sure to include link to the right font family in html, or import in the css file hope this helps

    Overall, Good work! The page looks pretty cool! 😄

    Marked as helpful

    0
  • Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge! 🥳

    It looks great!

    I found a few places where you could improve upon the CSS side of things:

    • You could improve upon the use of responsive units for element sizing this might help you
    • It seems you've used the Fraunces font family in all typography elements, I would encourage you to refactor the CSS file and also include Montserrat font family in the required element styles.
    • You should also try to include all the specified font weights to ensure that the website looks similar to the design file

    Other than these issues, the Challenge site looks great! keep up the good work😄

    Marked as helpful

    0
  • Goran• 500

    @GoranK89

    Submitted

    Hello,

    here I focused on practicing custom hooks, portal, conditional component rendering, and useReducer.

    The Terms & Services link has a basic popup and there is a "fake" rudimentary loading and successful form submission message (the collected data is just displayed in the console).

    The submit button is disabled until every input is filled out properly.

    If I missed anything, please let me know! ✌

    Intro component with signup form, made with Vite, React, Scss

    #react#vite#sass/scss

    1

    Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge! It looks amazing 🥳.

    I had a few ideas for the project (some of them are definitely over-engineered).

    Marked as helpful

    0
  • Richard Tom• 80

    @CryptoFallen

    Submitted

    I have an issue with the button the whole div expands vertically when hovering over the button, what is the best way to counteract that?

    Other than the issue listed above, I had a great time building this static project. I have a lot of work still to do with learning the responsive layout.

    Responsive Three Column Preview Card Component

    1

    Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge 🥳. It looks pretty cool!

    To answer your question, The reason why your div expands in size when you hover over the button, is: because of: border: 1px solid var(--light-gray);. This property adds an additional layout size to your button on hover. A quick fix for the same would be,

    .learn-more{
 border: 1px solid transparent;
}
.learn-more:hover{
border: 1px solid var(--light-gray);
}

    This will allow you to have a placeholder border, with no visibility, that will already have adjusted the parent div's size from the start itself. Thus it will lead you to not, having a resize on hover.

    Marked as helpful

    2
  • Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge! 🥳

    It seems you might need to edit your code a lot, the mobile site seems broken with its layout. Some ways you can start with refactor is:

    • abstract out the css into its own file
    • use flexbox for structuring and alignment of your html elements
    • make sure to make wise decisions as to when you should be using block/inline elements this would be helpful
    • make sure that the image src for the nft used is accessible by your html (currently it is not)
    • use relative units and media queries to adjust the css style properties according to the screen size this might be helpful

    Marked as helpful

    0
  • isaac• 280

    @katongole-isaac

    Submitted

    How can i improve my skills in web development

    Product-card-in-react

    #react#webpack

    1

    Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge!🥳

    I have a few pointers as to where you can make changes

    • use <main id="root"><main> as your react entry endpoint instead of <div id="root"> this helps with the accessibility of your webpage
    • include alt prop with a valid string, describing the image, again, this helps with the accessibility
    • Try to include a <h1> tag describing the content of website, if you want, you can style it to have a display: "none", this is important, since this serves as a heading describing your site

    Good Job on the challenge! If you have any doubts regarding react side of things, feel free to reach out.

    Marked as helpful

    0
  • Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Congratulations on completing the challenge 🥳, It looks amazing

    I would suggest a few HTML edits and one CSS edit:

    • Try adding a h1 tag in your page, to identify and describe the main content of the page.
    • Ensure that you use tags such as main, to describe the main section of your html body, this helps increase the accessibility of your page
    • You should definitely edit your breakpoint for a responsive design to be triggered at a lower width, at the moment, even laptops with 1024px screen width, will be rendering a mobile oriented design

    Marked as helpful

    0
  • Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Your responsive solution looks amazing! I tried using the website on phone, and it looks great! 🥳

    I do think the positioning, the sizing and the alignment of your elements for desktop can be implemented a bit better.

    Also, the form error states can have a bit of a transition on them.

    Since you’re using React, you can also allow for realtime form validation.

    0
  • Zuzana• 80

    @zuzanapiarova

    Submitted

    Sign up form with validation done with Javascript

    I had one problem I could not solve - I want the ( ! ) icons to move every time the user clicks on Submit when there is still any error field left. The animation works but only for the first time user clicks on Submit, not any other time. I tried many solutions in JS but it always moves only this first time. Any suggestions?

    Sign up form validation

    1

    Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Your solution looks amazing! 🥳

    I figured out how to solve your issue for repeated animation, on button click.

    I have made a few edits to your code

    function setError(element, message) {
  const parentEl = element.parentElement; //target inputs parent
  const errorMessage = parentEl.querySelector(".error-message"); //target first element in a parent with class 'error', this is the element that will display the error message

  errorMessage.innerHTML = message; //add error message into the element designated to display error

  parentEl.classList.add("error"); //add error class that changes style and visibility of elements

  const errorIcon = parentEl.querySelector(".error-icon");

  errorMessage.style.visibility = "visible";
  errorIcon.style.visibility = "visible";

  if (parentEl.classList.contains("error")) {
    //should move error icon if submit is clicked but the field is still empty but does not work
    errorIcon.classList.add("animate");
  }
}

    I changed the function to allow dynamic addition of classes, rather than explicitly specifying the same on the element itself (this is just good practice)

    Now, for the main show!

    form.addEventListener("submit", (e) => {
  //this function makes the submit button not reload right after if something is wrong - so if anything is wrong the page will not reload when hitting submit as it normally would
  e.preventDefault();
  const errorIcons = document.querySelectorAll(".error-icon");
  errorIcons.forEach((errorIcon) => errorIcon.classList.remove("animate"));
  setTimeout(() => {
    checkInputs();
  });
});

    Here I initially remove the class animate from error icon (if it exists on the errorIcon classList),

    lastly, I invoke your checkInputs function, inside a setTimeout, this ensures that all the DOM related events are done executing before, the setTimeout codeBlock executes.

    you can understand how the same works, in depth, here

    If you want me to send you the complete solution, just say so! 😄

    0
  • Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! Your solution looks amazing!🥳

    I would suggest a few changes to the CSS though.

    • Try to use CSS variables to hold values such as colors

    this might be helpful

    Also, it seems the font sizing and colors used for text elements (h3, p), seem a bit off. I suggest you take a look and refactor the same.

    Otherwise, It looks awesome 🤩 !

    Marked as helpful

    1
  • Andrea Cervellin• 10

    @cerve86

    Submitted

    hello all!

    I've done this first project to get to know the FE Mentor community and I love it already ;) I made some simple flex boxes to maintain the alignment on the columns while adding some styling to the container to match the solution.

    The question I have is:

    What are other ways to define the width of the container (contains QR code and the text) rather than fixing the width in CSS?

    QR code box - CSS and HTML using Flex

    2

    Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi, your solution looks amazing! 🥳 The use of CSS variables is pretty cool too! the only change I would suggest is that

    You should always try to use responsive units such as rem, ex etc

    This might be a helpful reference for the same

    Marked as helpful

    0
  • Ari Griggs• 270

    @nevercanon

    Submitted

    Do you know why my icons were disappearing when I set them to position: absolute? Is it because I'd already set the error messages to absolute in the same div? How can I resolve this? Should I be using preventDefault() even when the form input values are valid? When I tried moving it to only be used when the values were invalid, it continued working while the inputs were valid. Do you have any criticisms of my code or suggestions on how to improve it? Thanks for everyone's help! I've learned a lot from the feedback I've received here and I hope it shows!

    Intro Component with Signup Form

    1

    Gaurav Singh• 440

    @Gaurav4604

    Posted

    Hi! I am a newbie frontend dev myself, Your project looks amazing, from a UI POV. 🥳 I'd suggest cleaning up the JS side of things a bit

    form.addEventListener('submit', validateEmail)
form.addEventListener('submit', validateFirstName)
form.addEventListener('submit', validateLastName)
form.addEventListener('submit', validatePassword)

    you can use the same eventListener to be used for calling all of these functions, this would promote less code repetition, also, same can be done for the error showcase UI logic

    firstName.classList.remove('error')
firstNameErrorMessage.remove('display-block')
firstName.value = ""

    Instead of the above code, being used for each function, you can abstract out the logic, into its own function such as

    function showErrorInFormField(formFieldDOMRef, formFieldErrorDOMRef){
 formFieldDOMRef.classList.remove('error');
formFieldErrorDOMRef.remove('display-block')
formFieldDOMRef.value = ""
}

    This way, your JS file will be smaller in size, Another thing, I would suggest is, adding comments to your codebase, so that you can read your code later and understand exactly what the workflow and logic was trying to achieve 😄

    Marked as helpful

    0