Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
8
Jon Wright
@Dr-Wrong-Mo

All comments

  • Maksim Baravy•220
    @maximkatut
    Submitted about 3 years ago

    Comments - TS | NextJS | trpc | prisma | mySQL | zustand | NextAuth

    #next#typescript#zustand#mysql
    1
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted almost 3 years ago

    I'm not seeing any interaction with the voting components. I can't vote up or down on anything.

    I also don't get any mouse interaction with the voting buttons. The cursor doesn't change when I hover and the color of the icons don't change. I think you may have imported the icons as images. You may look into embedding the svg data in your html so you can use CSS to alter the path and fill. If you look at my version of this project, you should be able to find how I did that.

    I see you used MySQL for your database and that you did hide your database credentials in your environment variables. Great work!

  • Jose Chaparro•455
    @jchapar
    Submitted about 3 years ago

    Mobile First approach using TailwindCSS

    #tailwind-css
    1
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted almost 3 years ago

    Hi Jose,

    First, layout wise, your project looks nice.

    Second, with the way you have your HTML setup using regular DIVs, I would recommend using data attributes.

    You can set a data attribute on each voting div, something like:

    <div data-value="1" class="... rating">
    

    You can then access the data attribute in JS:

    Element.dataset.value
    

    If your Element is the defined as the above div, then this would return a value of 1, as declared in the HTML above.

    Just a note to be clear. The data attribute doesn't need to be "value". It could be data-foo="bar" and the JS would be Element.dataset.foo, which would return a value of 'bar'. Basically, it is any variable name you want after data-.

    I hope this helps.

    Marked as helpful
  • Purnima Kumar•390
    @purnimakumarr
    Submitted about 3 years ago

    Interactive Rating Component using CSS Flexbox & Vanilla JavaScript

    1
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted about 3 years ago

    Honestly, it's a small enough project that I think the design works on pretty much any screen size.

    I would say that it still looks okay until you get to 300px. So the question is, how small of a screen do you need to support?

    According to this thread on ux.stackexchange.com, the minimum screen size you really need to plan on accommodating is 320px.

    I think your design is fine as is.

  • Brendan•1,120
    @OneManBanned
    Submitted about 3 years ago

    Fylo data storage component solution

    #bem
    1
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted about 3 years ago

    Your project looks very nice. To your question about BEM:

    I would give your classes names that are more descriptive.

    Instead of firstDiv, I would name it something like .tool-container.

    Then .tool-container__title and .tool-container__icon.

    Instead of secondDiv, I might name it .storage-meter.

    Then .storage-meter__range. And the children of that would be:

    .storage-meter__range--meter .storage-meter__range--amount

    This allows for easier nesting when you use SCSS.

    Your SCSS would look like this:

    .storage-meter { property: value;

    &__range {
        property: value;
    
        &--meter {
            property: value;
        }
    
        &--amount {
            property: value;
        }
    

    } }

    If you haven't used SCSS before, you can nest your child elements inside their parents. The ampersand symbol (&) extends the parent selector you are nested inside of. I'd recommend learning SCSS. The basics aren't all that difficult, but it can help you separate your code when you are working on a large project. You split different pages, utility functions and such into their own files, then import those files into your main SCSS file.

    Marked as helpful
  • Cường•885
    @docuong0912
    Submitted about 3 years ago

    Todo app using ReactJs and Sortable JS

    #react#sass/scss
    3
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted about 3 years ago

    I see the problem with your background exceeding your content. There are a few items you need to change.

    The primary issue is that your div with the class "todo-box" has a position of absolute (I'll start referring to this as div.todo-box or just .todo-box). The property absolute position takes it out of the normal content flow. It is now positioned within the closest element that has position relative. If no ancestors have position relative, it becomes relative to the window.

    I suggest you study CSS Flex-Box and CSS Grid for your layout properties.

    The reason this is important is that your primary element (div.App) is now functionally empty.

    Position absolute should be used sparingly, and almost never on your primary content.

    Here is what I changed to make it work:

    1. On div.todo-box, remove "position: absolute"

    2. On div.App, change "height = 100vh" to "min-height = 100vh"

    This will fix the problem where your background cuts off, but it will mess up the formatting for the child elements within div.todo-box. It will also make your todo-box align to the left side of the screen.

    You can recenter your content by modyfing div.App as follows:

    display: flex; justify-content: center; padding-top: 100px;

    This will look better but your dark mode toggle will still have absolute positioning, which will move it to the top-right of the screen.

    Remove position absolute (as well as the top and right properties). This will place it directly under your heading.

    I would wrap the heading and the image in a parent div. Let's call it div.heading. So it would look like this:

    <div class="heading"> <h1>todo</h1> <img .../> </div>

    Now the CSS

    .heading { display: flex; justify-content: space-between; }

    This has almost worked, but your hidden icon is blocking the shown icon from being where it wants. This is because you used "opacity: 0" to hide it. Opacity does not remove the item from the flow of the body. It only makes it less visible, but it is still taking up space. What you can do instead is apply "display: none". This will remove it from the flow of the body, allowing your shown icon to fit where you want.

    Your icon will need to have some new properties applied to get it to have the shape you want.

    A few other notes:

    I didn't like the interface of needing to click on the checkbox in order to submit a new item. It would be better if I could press enter to submit the item, clear the input field, and place the cursor back into the now empty input field, ready for another new item.

    Also, the positioning of the checkmark within the checkboxes is off. In my previous comment, I mentioned that you should study up on Flex-Box. This is another expample of where you could use Flex-Box (or Grid).

    The project looks decent otherwise. Good job!

    Marked as helpful
  • jonathan•50
    @Jonathanmeij
    Submitted about 3 years ago

    Interactive comments section with React

    #react
    1
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted about 3 years ago

    Your CSS work here is fantastic.

    I like that you managed the voting history, and I can't upvote or downvote a comment more than once.

    What issues did you run into with editing and managing data?

    I used JavaScript object classes for my comment object. I thought that was very useful in maintaining continuity.

    Marked as helpful
  • micoirvin•80
    @micoirvin
    Submitted about 3 years ago

    Vanilla JS, data structures and algorithms, DOM access, grid, flex

    4
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted about 3 years ago

    This is very well executed. One thing I think you could have done better, which I've seen with many examples of this project, is managing the vote history better. Though, I think that would be a bigger challenge for you because you added the ability to change users.

    What I mean by that, is remembering which comment a user has voted for already and not letting them duplicate that vote. So only one upvote, one downvote or null.

    I did this by adding a new key/value pare to the comment object called 'voted' and set that to true or false. Then I had another key/value pair to tell me if the current user voted up, down or there isn't a vote. I represented that as 1:upvote, 0:no-vote, and -1:downvote.

    I also used this data to add classes to my voting buttons which changed the color of the icons, so you can see that you have voted up or down. If you click on the plus icon for a comment you have already given an upvote, it would remove the class, adjust the score down 1 and change the value of voted to false. If you've upvoted something, then you downvote it, it would toggle the class on both the plus and minus buttons, adjust the score down 2 points, but the value of voted would remain true.

    I hope I explained that well. It's basically the function that Reddit has with their voting system.

    If you were going to do this and remember the voting history of each user for each comment, that would be a much bigger task. You'd basically have to emulate a many to many relationship table in local storage. I don't know if you've worked with databases at all, but that would be an interesting (if not silly) challenge to accomplish with local storage. The fact that you have infiniate nesting could make that even more of a challenge.

    All in all though, very nice work.

    Marked as helpful
  • Sara•70
    @skuenzi
    Submitted about 3 years ago

    Interactive Comments Section using React

    #react
    1
    Jon Wright•160
    @Dr-Wrong-Mo
    Posted about 3 years ago

    To your question about keeping your code DRY, I created a JS file for all my HTML templates. Where I saw significant commonalities, I would break those sections into partial templates. Here's the file in my GitHub repo if you're curious. Scroll down to line 79 to see what I mean.

    https://github.com/Dr-Wrong-Mo/fem-interactive-comments-section/blob/master/src/scripts/templates_html.js

    I used that template for both comments and replies.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub