Skip to content
OverviewSolutions
11
Comments
8
AC 🍀
@alleycaaat

All comments

  • GHNetCode•170
    @GHNetCodeSubmitted over 1 year ago

    Thank you FrontEndMentor yet again for this challenge! It was great to put together and learn about JSON API which is my FIRST API project now completed. Muchly appreciated and i was surprised how easy it was to implement. Due to the interface being quite simple in design i could not resist but give it some life with Animations. Please do have a whirl and let me know what you think. One question i do have in regards to the animations, is there a way of doing it via CSS instead of via JS to replay the animation? I managed to get it as far as playing on the first push of the button, but on the second press onwards, there was no joy in the animation playing... I suspect it might have something to do with the name of the KeyFrame and using it in conjuction with the "animation-name" attribute. One last comment and bit of great advice for those who are using "ontouch" And "onclick" to handle their events in JS, just to say there is another event called "pointerdown" that will handle BOTH so no need to duplicate your code. BR, Mark.

    Responsive Landing Page using mspaint,WindowTop,VSC,Brave Browser.

    1
    AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Congrats on finishing the project! APIs were daunting at first to me, but they're really not that bad and really open up so many fun programming opportunities.

    Can you elaborate on your question about the animation? When I hover the dice icon/button it rotates fast, clicking it slides a new quote in, and when I remove hover from the button it slowly reverses its spin. So the animations appear to be working. Are you talking about making the animations occur every time via CSS instead of JS? That I may be able to help with! Or rather, the classList property can help.

    I typically define the styles in my SCSS and add or remove them via JS; this keeps my JS cleaner and all my styles in the stylesheet. Sometimes a class may need to be removed automatically after a set time, the setTimeOut function can help you there. This is really helpful with animations in particular, in my experience.

    Let me know if this didn't make sense, I'm happy to clarify further.

    -Cheers!

    Marked as helpful
    0
  • Larry•170
    @lawrence-yoonSubmitted over 1 year ago

    What did you find difficult while building the project?

    -The most difficult parts of the project were the algorithms for the CRUD methods applied to the client side app data state. It was tough because the given data.json has an array within the app data object, and that array is an array of other objects, with the possibility of having a further nested array of objects.

    Which areas of your code are you unsure of?

    -The areas of code that I am unsure of have to do with the previously mentioned algorithms.

    Do you have any questions about best practices?

    -I do. What is the best practice for importing/exporting/abstracting the handler functions (handleUpdate, handleDelete, etc...)? I have it all at my app.jsx and feel like it is too cluttered.

    Responsive and Interactive comments section clientside state

    1
    AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Nice job completing this project! I'm going to preface my comment by saying I'm not an expert on CRUD apps, I fell down a Jamstack rabbit hole last year and have developed a mild obsession, but I am learning new things with each one I complete. Another sidenote, I formatted my comments in the style of facebook, where there's only the parent comment and all the replies below it (at least that's how I think facebook does it, I haven't been on in years). I didn't go the reddit route where replies to replies get nested.

    Tl;dr nesting: I ignored the formatting of the .json file and just used the data.

    Your comment about the data being an object and nesting becoming an issue is valid. It depends on how you set things up, how data gets altered and saved. I used context and actually hooked my project up to a Fauna database (I know the db is overkill, don't worry hahah) and made a collection of comments. A collection is similar to a table in other databases, if you have server side experience. Each comment or reply was an individual document, which is how any record or item is stored with Fauna, as a document.

    The way I formatted the documents, the comments, can be applied to a front-end only project. All comments had a parent_id key, if it was the original comment it had a value of an empty string, if it was a reply it was given the id of the parent comment for the value. Then I just used the parent_id property to sort out comments versus replies. I disregarded the format of the data.json file provided and just pulled the data out. You certainly could stick with their formatting, but I try not to nest too deep to make my life easier.

    Regarding best practices for data handling: again I'm not an expert, but what I do is make a separate folder to throw all the data handling code in, and call functions when needed. I'll then use a useEffect hook to get the data from the server or the .json file to set things up in my App.js file. For example, this is the function I used for the buttons to change the score:

    const ModScore = (direction) => {
        const update = AdjustScore(comments, id, direction);
        modComment(id, update);
    };

    The plus and minus buttons onClick event handler points to ModScore, here's a link to the AdjustScore code. AdjustScore does the heavy lifting, but in its own separate file. If you're doing a state based project, you can do the same thing, just call the functions from App.js and save the return to state.

    I can definitely go into more detail if you'd like if you have more questions or I wasn't clear enough. :)

    Cheers!

    1
  • AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Good job completing the project!

    I took a look at your code and have a couple of comments. Technically your HTML is fine and works, but for accessibility there are a couple of things that could improve. For the rating options you used a span tag, which doesn't tell users with screen readers what they, the span element, are. A user could infer it based on context, but there are steps we can take to make things clearer. For instance, making the rating options buttons or radio inputs will let the user know it's something they can interact with. Here's an article on accessible buttons if you want to read more. Another reason this is really important is for keyboard users, they can visually see that the numbers are something to interact with, but if you press tab while on the page, the focus goes to the Submit button. They don't have a way to pick a rating. You submit button is great because it's already a button element and the text on it will tell the user what it does when pressed. :)

    Your JavaScript looks good! One way it could be a little cleaner is to add or remove a class from the clicked element versus changing the actual styling in your JS. Where you have span.style.backgroundColor = 'hsl(217, 12%, 63%)'; you could put span.classList.add('selected') and that style from your stylesheet would change the background-color and text color. Here's the MDN article on classList. There's nothing technically wrong with your code now, classList is just a handy property to access. :)

    You could also use classList to hide or display your divs, too. Right now you have .container-after-submisson with z-index: -1, tucking it behind your .container div. And it works, but messing with z-index is a little more effort. Since you used flexbox, you can simply give .container a style of display: flex and div .container-after-submisson another class of hidden { display: none !important}. When you want to display the results page, remove .hidden from .container-after-submisson and then apply it to .container.

    Overall, it's a really nice project! The JS comments just clean things up and make for easier coding, but I do really recommend making your rating option elements more accessible. Let me know if you have any questions or I was confusing :)

    Cheers!

    Marked as helpful
    1
  • Elyticus•380
    @ElyticusSubmitted over 1 year ago

    I know is not the best coding. I've tried to make it as functional as possible, however, when you click on body/HTML the rating remains rendered. I would like to reset the rating and make the "Submit button" active only by pressing the buttons.

    So if you can advise me on that, it would be appreciated :D

    Interactive Rating Component - Using @media for mobile and JS

    1
    AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Hey, good job finishing this project!

    You did a great job mimicking the design! I don't quite follow what your question was regarding wanting to reset the rating and make the submit button active only by pressing the buttons. For me the submit button only functioned properly once I'd selected a rating. One thing I did notice, if a user clicks a rating and then clicks off of their selection (removes the focus), the rating goes back to the default color, rather than staying grey to indicate what has been selected. Small change and you'll be golden.

    Great job!

    Marked as helpful
    1
  • AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Just a heads-up the link for your code doesn't go to a repo, shows a 404 error. From the demo link your project looks good though and seems to function properly. When switching to dark mode there's a little delay for the header image to change, I have slow internet, so it could be just on my end. Now I'm just rambling to hit the comment length minimum, so I can let you know about the broken link.

    Cheers!

    1
  • Axel•250
    @AxlMrtSubmitted over 1 year ago

    I've used React to work on this challenge.

    It didn't took me as long as I was thinking, only a few hours (i think around 5h in total). This was a good challenge, it helped me to work on my JS / React skills, even if it's far from perfect.

    I've tried to be as close as possible to the design but i couldn't figured out why my tags aren't centered.. (New! & Featured)

    Well, if someone has something to help me improve, or has any advices, i'll be glad ! Thank you !

    Edit : I don't know why the report on FrontEnd signal that i've didn't put any alt text to the img but there is alt text. I don't know.. Meh.

    Job Listing (React)

    3
    AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Great job on your project! I took a look at your code based on your comment about the alt failing. You're right, you did put it in the code <img src={post.logo} alt={post.title} />, but when you look at data.json, there isn't a title key. Swap that out, and I think you'll be golden :) Gotta love coding where simple, small goof-ups can be so annoying.

    Marked as helpful
    1
  • Siani•30
    @sianidanSubmitted over 1 year ago

    I'm still practicing JavaScript, so any suggestions on how my code could be improved is appreciated. At first, I made my submit button type="submit", but since the default behavior makes the page reload, I changed it to type="button". Would preventing the default behavior work well here or should that be avoided?

    Responsive Rating Component with Flexbox

    2
    AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Great job on your project! Your code looks great, clean and tidy. The person who already commented has good input, having a set height for .container could be problematic, especially when you think about folks viewing your project on a mobile device. Some of them have small screens :) I like to view my projects in Developer Tools (ctrl+shift+i in Chrome) to see the various screen sizes and how it impacts my design.

    For the submit question, using button type=submit will submit the form data to the server when the user clicks the button (unless there's JS to say otherwise), and type=button doesn't have a default behaviour. In this case, since the data isn't actually going anywhere/being collected, I think you're safe with type=button.

    1
  • Jhef•140
    @imjheefSubmitted over 1 year ago

    Could you please help me improve this code?

    Is it accesible?

    I was not able to find with what I know how to make the code responsive :C

    Summary reaction page

    2
    AC 🍀•360
    @alleycaaatPosted over 1 year ago

    Great job on your project! Regarding your question on accessibility, you nailed it! You used main, section, h1, h2, h3 and footer, which really improve accessibility compared to plain div elements. Your icons have alt text for screen readers, too. One thing that could be improved, is for your button, add cursor: pointer to further indicate it's an interactive element.

    A small suggestion would be to take a look at the example and see where the 'Your Result' and 'Summary' headings are, they could use a little top-margin to scoot them down. And look at the results in the summary section, the icon/category are on the left and the score is on the right side of the box (I'd check out other options for justify-content and see if you can get the space sorted). I had to get nitpicky for constructive feedback because you did such a good job! :)

    Marked as helpful
    0