Skip to content
OverviewSolutions
6
Comments
9

Mcnafaha

@TheMcnafahaDrifting in outer space240 points

I like coding.

Latest solutions

Latest comments

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

    Proud Of: The page successfully adjusting to different view-page sizes so the QR code and text don't get warped.

    Differently: Not that much approach wise besides trying to figure out how to get the page to look like the original.

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

    The main challenges I faced were trying to get the aspect ratio of the image to look normal and importing and using external font sizes. Both were solved by looking up methods online.

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

    I would like help with adjusting the image size so that the space it takes up in the card is more align to the original version

    Responsive QR Code page

    #tailwind-css#react
    1
    Mcnafaha•240
    @TheMcnafaha

    Hello @TuetrungNguyen!

    I like that you picked tailwind for your CSS solution. It shows that you understand how to use the modifiers to make a responsive website.

    As for your question regarding image size, I noticed you used a background image with the width value of 100% (w-full bg-code bg-cover). This is a good approach if you don't have a target size as the image will grow. If your goal is to have more control over the image, then putting the image in a container element with a max-width should do the trick.

    My only other tips are about how to best use Next js, but these are minor concers (eg the title tag), so I'm not sure if they're the best use of your time.

    Keep coding and have fun!

  • Mcnafaha•240
    @TheMcnafaha

    Hello @er-faran,

    You should be proud of this app. The programing logic works great, and it is very aesthetically pleasing.

    However, I have two suggestions that could make this app a bit better:

    One, consider using a form element to improve the keyboard & accessibility. Currently, you need to click on the arrow button to make your app process the input. With a form element, you could just press the "enter" key to make your app process the input.

    Second, try implementing the "maxlength" attribute for your text inputs. The "maxlength" attribute would make it so your users can't put more than two strings on your month and day input. And for your year input, your uses wouldn't be able to put more than 4 strings. This should be every easy to add. I suggest you look over this MDN article if you want to add this feature.

    Happy coding, and keep it up!

  • Mcnafaha•240
    @TheMcnafaha

    Hola @jhonjunior1!

    Despues de ver tu applicacion es claro que tienes un buen futuro en esta industria.

    Tengo una critica contructivas para ti:

    Ten cudido con las tags titulares de HTML. Por ejemplo, esta parte de tu HMTL es un poco confusa.

    <h1>Improve your front-end skills by building projetcts</h1>
<h2>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</h2>
<h3>Realizado Por</h3>
<h4>Jhon Suarez</h4>

    Las tags titulares de HTML se usan para crear titulos o crear la jerarquía de un documento.

    Este es un ejemplo de un articulo en MDN usando las tags titulares de HTML:

    h1 Harry Potter
    h2 Sypnosis
    h2 Novelas
        h3 Harry Potter y la Piedra Filosofal
        h3 Harry Potter y la Cámara de los Secretos
        h3 Harry Potter y el Prisionero de Azkaban
        h3 Harry Potter y el Cáliz de Fuego
        h3 Harry Potter y la Orden del Fenix
        h3 Harry Potter y el Príncipe Mestizo
        h3 Harry Potter y las Reliquias de la Muerte

    Como puedes ver, las tags crean una divison de niveles que aqui se demustra usando espacios. Usando esa misma idea, asi se ve tu applicacion:

    h1 Improve your front-end skills by building projetcts
        h2 Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
            h3 Realizado Por
                h4 Jhon Suarez

    Creo que una mejor forma seria usando la tag <p> y talves una <h1>. Algo como asi:

    h1 Improve your front-end skills by building projetcts
 p Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
 p Realizado por Jhon Suarez
    Marked as helpful
  • Mcnafaha•240
    @TheMcnafaha

    Nice job @jubelo1234!!!

    You manged to create a very useful and good looking calculator. In fact, it's so good that I'm not sure what your two questions mean since it seems to me that you have already found solutions to those two problems.

    One, you have added the over-scroll scroll for the display to handle numbers overflowing the display. This is the exact same thing I did.

    Two, you calculator functions according to arithmetic rules. It seems you used a combination of your own code for the user input and a math library to parse the user-made string. In my version, I had to (through multiple trials and errors) come up with my own function that does the same thing as evalute does for you.

    The only problem that I could notice with your calculator was that it currently has no way to handle someone spamming an operator. For example, if I click on the "+" key multiple times, I get "+++++" which is not what should happen. See example here.

    Luckily, thanks to your wise use of React's reducer, this is very easy to fix since your operator logic is easy to read and change.

          case "operator":
        const optr = `${action.payLoad}`;
        // this is first part of the code that I added
        const isOperator = /[.+/*]/.test(
          state.dispaly[state.dispaly.length - 1],
        );
        console.log("this is an operator ", isOperator);
        if (isOperator) {
          return { ...state };
        }
        // this is the last part of the code that I added
        return {
          ...state,
          dispaly: state.dispaly.concat(action.payLoad),
          show: state.dispaly.concat(optr),
          err: "",
        };

    With that code added, your app only accepts one operator at a time. Feel free to ask any questions about any part of the code above. Do note that it is still possible to spam the "." operator with my solution (see the second image here). As always, feel free to reach out if you want to explore a solution to that problem together.

    Can't wait to see what you code next, Best of luck!!!

  • Mcnafaha•240
    @TheMcnafaha

    Hello@MaryUba,

    Your solution looks awesome and the logic of your app is easy to follow.

    To answer your question, anytime a form is "submitted" it triggers a page refresh by default. In your app, this happens when the button is clicked (the one with the aptly named CSS class of "submit-btn"). The good news is that this is super easy to fix. Simply add the code I've attached below to your form tag:

       <form onsubmit="event.preventDefault()">

    Alternately, you could do the same thing inside your script.js file in case you want to keep all js in one place:

    const element = document.querySelector('form');
element.addEventListener('submit', event => {event.preventDefault()});

    Both methods will stop the page from being reloaded when the form is submitted. I personally tend to go for the first one but it all comes down to personal taste.

    I'm not sure which part of your JavaScript confuses you, but if I had to guess I would say it's your CalculateDate function. If that is what confuses you then I'm sorry to be the bringer of bad news: working with time confuses all programmers. My only two pieces of advice here are the following:

    One, always remember that months in JavaScript are 0-indexed (fancy way of saying they start at 0). What this basically means is that if you were born in November 22, 2003, your JS DOB is (yyyy/mm/dd) 2003/10/22. In JS, you have to always subtract one month. Yes, this is very annoying to keep track of and the root of many bugs.

    Two, look for existing libraries. Unless you want a challenge, there's a ton of useful time-related libraries that have been literally time tested.

    Overall, I really like your code. It shows that you understand HTML and that you know how to use the DOM. I especially liked you use of "isValid" to keep track of all the possible checks the form had to pass before it could be rendered.

    Best of wishes, @TheMcnafaha.

    Marked as helpful
  • Mcnafaha•240
    @TheMcnafaha

    Great job @kokenydaniel!!!

    You should be very proud of this app. Your code is easy to follow and your HTML uses different tags to make the user-experience awesome.

    I especially liked how you named your CSS classes. Before I even read further, I already knew what to expect from .date & .dates thanks to your naming scheme.

    I only see two places where you can take this app even further, and I have organized them in order of my perceived importance:

    One, consider using a form over a div and using the event onSubmit over onClick. This could give your app better keyboard behavior because, currently, the "enter key" does not immediately process the data since you have attached it to a "onClick" on the SVG. I have to tab to the SVG and then hit enter for the data to process. It would also give more semantic meaning to the component and button.

    Two, give a min-width to your main class to avoid overflow. On very small screens, your components suffers from overflow issues. This is caused by your main class being based only on a 80% width. I have attached a set of screenshots demonstrating this issue at very small screens here.

    I am happy to provide you with a PR showing how I would implement solutions for my two recommendations in case you are curious or would find that useful.

    I can't wait to see what other apps you build in the future, so be sure to let me know!

View more comments