I used a bunch of YouTube Videos for various functionality and designs so not sure whether I can call it my app :-/ . But nevertheless, here is the first app I created in React.
2 Likes
Congrats on finishing your first app. It looks very slick. I’m going to suggest a few accessibility enhancements for you to think about.
-
It is not very keyboard friendly. There is no focus indicator on the Add Task button. You have turned it off with
outline: none;(naughty-naughty). The keyboard user should always be able to see where their current keyboard focus is, so put the focus indicator back on that button (and also on the Close/Save Task buttons). Also, I can’t get to the close “x” on each item with the keyboard because you are not using a<button>for them. -
The “Set Reminder” checkbox should be very close to the text. Right now it is on the opposite side of the form. This will help people who use screen magnification and can only see a very small part of the screen at a time. Also, I think most people expect the checkbox to be to the left of the text.
-
The
<label>for the “Set Reminder” checkbox is not working properly because you forgot to include theforattribute. Same issue with the Task and “Day & Time” labels. -
I’m not sure why the first To Do item does not have a green border but the other three do. Is there something special about the first one? Also, while the hover effect is fun I’m not sure I would keep it as it makes it seem like there is something special about these items that should be triggered when you click on them. I would recommend you remove this effect and instead put a simple effect on the close “x”.
-
The placeholder text on your inputs should not just repeat the label but rather give the user a hint as to what you want them to add. For “Day & Time” I would recommend something like “January 1 at 12:00pm”. Personally, I would split this into two fields, one for the date and the other for the time. You could also use an accessible date picker, although I think that plain text inputs are just as good and some accessibility experts think they are better than date pickers because of the accessibility issues.
1 Like
Thank you for a detailed feedback. I will make the changes that you recommended. soon.
Do you know how we can prevent mobile users from zooming into on double click? I had on DoubleClick set on the tasks and set them equal to toggling the reminder state on each app along with toggling the box shadow on and off, and when I checked on my phone double clicking/tapping actually zoomed the screen.
I was having a similar problem in my original portfolio website too https://ankurchaulagain.com.np
When I am on my phone this website loads as if its zoomed in like say 5%. I have to pinch/zoom out to get a perfect fit view. I wonder what is going on here. I did set the margin and padding to zero in the body(if you want to see the code you can see the codepen if you click on the portfolio website picture)
Looks nice.
-
I would get rid of the hover tilt or restrict it to much less motion.
-
The set reminder feature is a little obscure. Mainly what it does and that you have to double click to toggle it.
-
As said, you should use a date picker for the date/time field.
-
Most todo list apps have a completed state. If you want to get fancier you can also implement a filter function so you can filter between all, completed, and not completed.
-
Look into using localStorage to save the list client side so the user can refresh the page and keep the todos.
-
The add task UI feels like it should be a modal. I know that complicates things a bit but I just wanted to mention it anyway.
-
Maybe some better form validation instead of the alert would be a nice touch as well.
Great job, keep it up.
1 Like
I just tested both your new app and portfolio on my phone and did not have the zoom issues you were describing so I’m not sure what to tell you about that. But I will say that you never want to disable native functionality like preventing user’s from being able to zoom.
1 Like
Looks clean, and I like the choice of colours.
Some thoughts:
-
it’s not clear that you can double-click an item to toggle the reminder on/off (I had to dig into the source code to figure that out), so I’d either add some text to tell the user about it, or add a checkbox to each task to toggle the reminder
-
it’s a little weird that you can turn on a reminder for a task that has no day/time set
-
if you want to use that tilt effect, I’d definitely get rid of the vanilla-tilt script (it says in the name that it’s for websites using vanilla JS) and instead use this library: https://www.npmjs.com/package/react-vanilla-tilt. It does the same, except it’s for a React app. Since this is an assignment for an interview if I’m not mistaken, it might get you some bonus points for integrating this instead of its vanilla counterpart. It would also solve the problem you had earlier with the effect only working for the items that are already in the DOM when the page loads, not for any tasks that the user adds later
1 Like
Maybe its my phone’s browser settings then might have to mess around with it a little
You are right. I should have added. I was actually making this app as a part of a take home project for a job application and had spent quite some time on it so I skipped it thinking people might see some tasks highlighted and some not highlight so might click to see what’s up 
Right. 
This was not an app I was planning on like say uploading to play store or anything like that so lot of work to be done here. For example for me personally the deeply unsatisfying thing is the tasks not saving anywhere that is same predefined things coming up every time I load which I assume I would learn when I do the back end sections/certifications.
Thank you for the link. I will definitely look into it and into other links others shared like creating a images slider with BootStrap and all.
I think I was asked a question during the interview which CLI or package manger or some similar question like that and I had no idea what to say. Or about what a PR was(pull request just didn’t knew the full form) When they mentioned have you heard of npm I was like yeah they teach this in the back end
Thanks to Youtube I learned about everything from node js to Git and GitHub. (I found out that I did have an account in GitHub that I had created years ago when I was trying to learn Python for scientific computing via a MOOC class and did knew some some terms. Lots of things to learn and I can already see how working on Projects can help me learn instead of just doing the curriculum.
I actually just sent an email with the repository link and the app website link. I could try implementing it before the developers look at it tomorrow but this was tiring. Will take a break now but will definitely implement in future projects. Thank you!
On the side note, one thing I was really interested in learning next was Typing animation. I saw a video by Kevin Powell on it, I was wondering whether there is an easier way to do it(not that it was difficult but just curious whether it could be done with say some packages or Bootstrap like in the case with images slider/carousel)
Also I was wondering whether it’s cool to follow along YouTube videos while creating projects or adding things to it like say Typing animation, tilt, glass effects, or whether it’d be considered dishonesty/cheating while applying to jobs. What’s your take on this? I updated my description in this post for that same reason that it not being sure about whether I can call it my app when I followed several YouTube videos while creating it. (I did spent a lot of time on it though like three days of continuous coding plus 2 days of continuous learning other things)
You don’t need a backend for that, you can use the browser’s local storage. It’s very simple to get and set items with JavaScript, you’ll find a lot of YT videos that explain it.
npm is not only a backend thing. It lets you install packages for all kinds of things that can be used on the frontend, like an image slider component for React, or the tilt effect you wanted to have on your task items, or whatever else.
You have already used it when you set up your project with npx create-react-app my-app.
A typing animation is something quite common, so it’s very likely that there’s already a package for it. Just google “npm typing animation” and voilà : https://www.npmjs.com/package/react-typing-text-animation
You can code it from scratch (either by yourself or following a tutorial), or you can use the package. In most cases, a package is more robust, has better browser compatibility and is more thoroughly tested than anything you can code yourself. Doing it from scratch is great for learning purposes, but in an app you want to publish, you’d rather use the library.
I am no senior developer so take my words as just an opinion. I don’t think that following along tutorials (especially for such a common thing like a todo-app) would be considered cheating. The bonus points you get are in the implementation and your personal style.
1 Like
I just tried this but it looks like the Titlt element creates a white block around my object. Do you know how I can get rid of it? I tried giving it a class name and trying to change its visibility with CSS and also inline either of them did not work.
Not sure what you mean with “white block”, can you post a screenshot or a live example?
1 Like
Here you go. Here’s the picture after adding. (I guess because its a block level element wrapping around the task components. Which I am not able to remove through CSS)
Here is the picture before adding it. (Also one really messed up thing is that even after I remove the title tags now and add the scripts back in index.html, the tilt is not working. 
I guess the currently installed package overrides the default behavior. Any idea how to fix it?
Thanks for the advice, I will probably use your advice …
I’ve never used that library and it’s hard to tell where this big white box is coming from without a live example. I can only recommend to use the browser inspect tools to see which element has a white background, then change that to “transparent”.
Removing the <Tilt /> element from the code should be enough, the package won’t do anything (I think) when you’re not rendering its component. To be safe, you can also remove the import statement, and uninstall the whole package with
npm uninstall react-vanilla-tilt
1 Like
Thank you I will try it.
congrats man. keep doing it.
1 Like
Hi @ankurchaulagain!
Congrats on your first App! It’s so nice you have something out there to show off!! 
One simple change that might be a better UI is to change the date input type to “datetime-local”. This way users will have a date picker instead of having to write the date.
<input type="datetime-local">
Two other improvements you might consider in further developments are:
- Allow users to edit a task, for instance when you click on it
- Add a feature to change order of the tasks
All the best and keep up with the good work!!
1 Like
Thanks for your feedback. I will make those changes soon 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.