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
Log in with GitHub
OverviewSolutions13Comments11

All comments

  • P
    Geochi Nova• 40

    @ar78studio

    Submitted

    All feedback is welcome! :)

    1. One of the improvements I'm working on is the: new Date().getTime() as there is a slight drift over-time with the progress bar if using setInterval() only.
    2. The progress bar is counting seconds and is showing the progress of each minute passed, I would also like to have the progress bar display total time elapsed/remaining.

    Vanilla JS, syncing of progress bar in CSS with JS timer

    #animation

    1

    P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Hi Geochi,

    You can follow this video by Google Chrome Developers about JavaScript accurate timer. I used this in my solution also.

    Another suggestion is to actually use an existing pomodoro app to compare how it works, like the pomofocus app

    Hope this helps, all the best!

    0
  • P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Hi David, your solution looks and works very well!

    I like how the code is clean and easy to understand! Great job!

    Please see my suggestions below

    1. Use the "button" tag on increment and decrement controls of your pomodoro, short break, and long break number fields.

    Doing so will give more accessibility features to your app for example users can tab through those fields and will still be able to increment and decrement just by using their keyboard.

    1. Use radion buttons for the Font and Color fields, also for accessibility. e.g. right now you can't select those through tabbing. See my solution as a reference.

    2. Use the form tag on the settings modal for accessibility e.g. users are not able to submit their changes by pressing the enter key on their keyboard.

    3. Modal accessibility also can be improved e.g. pressing escape key when the modal active should close the modal

    Hope this helps, all the best!

    0
  • Dominic• 40

    @dominicgerman

    Submitted

    • I'm curious how you all deal with SVGs in React. I wound up just wrapping the svgs in custom components rather than importing them with third party libraries. What is your favorite way of using SVGs in React?
    • I'd love to know if there are better/more robust ways of structuring/organizing my React app. How many lines per file is too many lines? How small/reusable should your components really be?
    • When it comes to testing, how much if any would you say is realistic in an app like this?
    • I'm wondering if my app has any blindspots in terms of accessibility.

    Pomodoro timer using Typescript, React, Vite, and CSS Modules.

    #react#typescript#vite

    1

    P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Hi Dominic! You've done a good job with this challenge! Looks very good!

    To answer some of your questions, please see below

    1. You can simply deal with inline SVG without third-party libraries by importing them like React Components for example: import { ReactComponent as YourSvg } from './your-svg.svg';
    2. If you think that your component handles too much logic you can break it down into smaller components that way your components will stay simple and pure.
    3. Cross-browser testing is a great way to check if your app works on most browsers.
    4. You can check the Accessibility report of your solution for any accessibility issues. Also try to press the tab multiple times when your settings modal is active, it should focus on each field one by one. See my solution to this challenge as a reference.

    Hope this helps you! All the best!

    0
  • P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Hi Mohamed! 👋

    Looking good with your work here! Keep it up!

    One suggestion is to add the border initially in the buttons instead on hover so the cards will still be the same height.

    You can also improve your implementation by changing the cards text length and check if the cards still align with each other and if the button always remain in the bottom.

    A quick giveaway is to use flex direction of column and margin top auto! Good luck and have fun!

    0
  • imagine_lilies• 80

    @Lilee52

    Submitted

    Hmm, for this challenge I tried to make it look as much as possible to the design but it still looks different, the media query gave a bit of head-ache, I had to restart the whole process after I was done cos the overall looks wasn't satisfactory to me even this but I'll keep practicing. I'd really appreciate feedback on what I could have done better.

    intro-section-with-dropdown-navigation

    #accessibility#contentful#foundation#sass/scss#solid-js

    1

    P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Hi Lilee! 👋

    You're making good progress! Keep going!

    It is a better practice to write mobile first CSS and use min-width media queries for tablet and desktop. This means that styles are applied first to mobile devices, where most of the visitors will come. There are other more advantages in writing mobile first CSS which you can read further here

    You can checkout my take on this challenge which uses mobile first approach as your guide!

    Also check your HTML and accessibility issues, can keep it in mind in your next project!

    Hope this helps!

    0
  • P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Great work byron! Checking your work I learned that button default type is "submit"! Keep it up!

    Marked as helpful

    0
  • P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    I like that your javascript code is readable! My suggestion is to follow the guidelines here https://github.com/ryanmcdermott/clean-code-javascript.

    I noticed that some parts of your js code have a chain of else if statements which is not ideal. You can read more here on why - https://dev.to/dglsparsons/write-better-code-and-be-a-better-programmer-by-never-using-else-statements-4dbl

    Also, it is ideal to ditch jquery in today's standard as modern javascript can pretty much handle all that you need. You can check some alternatives here - https://youmightnotneedjquery.com/

    If you want to make your JavaScript knowledge better I recommend this course https://learnjavascript.online/

    I hope this are all helpful! happy coding!

    Marked as helpful

    1
  • Michael• 160

    @Minard-NG

    Submitted

    Kindly review... Feedbacks are very welcome!

    HTML SCSS JS

    #sass/scss

    1

    P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Hi @Minard-NG, you might want to consider always including a CSS reset in your stylesheet. This will keep your styles consistent on all browsers. You don't have to worry about the user agent styles that browsers add to the page.

    0
  • P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Great work @dinahbrito! You might want to consider checking out BEM for naming CSS classes. Also, you might want to check on larger screens.

    0
  • P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    Good work Aleksandra! I suggest fixing your accessibility issues and HTML issues. It is pretty easy to fix and it's always good to follow these standards.

    1
  • P
    Danilo Parra Jr• 340

    @daniloparrajr

    Posted

    You can start by improving your CSS. If you don't have access to the design files, you can use this extension (https://www.welldonecode.com/perfectpixel/) to help achieve close to design results.

    1