Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Mcnafaha• 240

    @TheMcnafaha

    Posted

    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!

    2
  • Mcnafaha• 240

    @TheMcnafaha

    Posted

    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

    0
  • Mcnafaha• 240

    @TheMcnafaha

    Posted

    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!!!

    0
  • MaryUba• 40

    @MaryUba

    Submitted

    I am a bit confused on my Javascript, and my output disappears immediately it shows. Any feedback would be appreciated

    Age calculator using javascript

    2

    Mcnafaha• 240

    @TheMcnafaha

    Posted

    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

    1
  • Mcnafaha• 240

    @TheMcnafaha

    Posted

    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!

    0
  • Mcnafaha• 240

    @TheMcnafaha

    Posted

    Great job!

    Your solution makes it clear that you understand HTML and CSS. The one change that I would make is giving your container class a max-width. In general, giving your containers a max-width in pixels makes sure your text doesn't go super wide on large screens. I've attached a set of pictures here demonstrating this.

    Marked as helpful

    1
  • Mcnafaha• 240

    @TheMcnafaha

    Posted

    Though it may not seem like a lot, you've got all the pieces of the puzzle already. Now all you need is to shuffle them a bit to get the full picture right.

    Setting up the GitHub and the GitHub page puts you in a pretty good spot since it shows you are determined to get things working. Perfection is like the sun: its bright. Too bright. It's so bright that if you look at it for too long you will go blind!

    I'd recommend you take this free course by Kevin Powell that's given over the span of 21 days. It will give you good foundations of how to work out design problems like this one.

    Feel free to reach out if you get stuck on the course. Below is a happy face to lift up your mood.

    (＾▽＾)

    Marked as helpful

    0
  • Mcnafaha• 240

    @TheMcnafaha

    Posted

    Quick FYI: Your link to the source code is not working.

    When I click on it, Gitlab sends me a 404. Your preview-site link does work though.

    0