I have a problem on this task, it works fine on desktop tho. So i used the keypress event to handle to the error but when i deployed it and viewed it on mobile it isnt working and what are the possible ways i can handle this?.Thanks in Advance
Hi... Hope this helps (thumbs up if it does). Easiest way to handle error checks is to make use of the onsubmit event attached to the form.
Also, your name field, try using a fixed length for name, or truncate it when you are about to display.Using a long name broke your card UI, and alerts as error display is a bad UX.
The keypress event might work, but it is not the best way to go about it.
Also use the proper semantics for your forms. There is a button element, no need to convert an input tag to a button.
Using the onSubmit event with an error check library like formik, goes a long way to make your work easier, and checks simpler.
Hey, everybody! 👋
This was an awesome challenge that I enjoyed and in which I learned a lot! I used Svelte.js for the first time and it was pretty amazing. Svelte's features made it a lot easier to create a todo app like this and it was a lot of fun to learn! 👍
I added some transitions to make the actions smoother and a Christmas theme 🎄 (because it's drawing near to that special time of year) and used local storage to store the state of the to-do list and the most recently used theme. 😊
There are a few quirks that I'm aware of—the order of the items in the to-do list isn't saved in local storage if they are changed via drag-and-drop and there is no transition for the "Clear Completed" action because of the way I passed data around in my Svelte files. I almost wish I could redo this challenge and do a few things differently (such as make my code less ugly), but... IDK. 😅
Feedback is welcome and appreciated (I really hope everything works okay)! 😀
Happy coding (and happy holidays, too 🎅)! 😁
wow, nice... Good to know there is a functional library for drag and drop.. I Had to adapt one using vanilla js (my code), most i saw were not compatible with react... good job chief
Hey guys!
One question I had was that I noticed that if the total outputs are more than $100, it changes the size of the calculator. I was just wondering how you would fix this, whether you would use max-width or another method?
Other than that, I worked really hard on the JS for this project, and I'm pretty proud of getting it to work, but I'm open to any suggestions for how to improve!
Also, I wasn't sure how to initiate the calculations since there wasn't a submit button, but I ended up making everything happen after you press "Enter." I'm curious about how others approached this, though.
For the data collation, i am not sure how i wired mine, didnt really cross check before submitting, but you can wire it all to be a form, that way you can do a validation on submit which just checks the input fields and type
Hey guys!
I'm pretty proud of how this project turned out for the most part. I would've liked to make the cart so that after the first time you added to it, any subsequent presses of the "Add to cart" button added to the total, rather than just making the total whatever was in the number input, but I couldn't get the functionality to work right for some reason. As usual, I'm totally open to any suggestions on how to improve!
hi,good job.. you could try modellling the result you want,then recreate that using document.createElement (its best to save it as a function so its reusable). This create element will then build your cart data whenever add to cart is clicked. to make validation easy,the data on the product right can be made as a form, that way you can easily validate before you send to cart. I hope you understand, would be better explaining via a voice note i guess... good work thouigh
I still don't know how to use and style media queries properly. Pretty sure I messed up my code a bit with that.
I will appreciate any assistance with it.
Hi.. Maybe take a look at this tutorial, they sure did help me CSS : https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT CSS-POSITION : https://www.youtube.com/playlist?list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh CSS-FLEXBOS : https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG
Good job, keep it up.
Oh thanks for the feedback.. normally I pay attention to these points you've made while coding (and I also use Chrome light house for audit),but for this project my focus was mainly on the use of tailwindcss, so I allowed myself that liberty. ... Thank you,really appreciate that you took the time.
Hi everyone! Could I please get some help with my local storage? I know I need to work on the responsive version of my output URL but I'm confused me as is to why my local storage does not work correctly.
Hi... Nice Usage of JQuery, Maybe try use a separate JS file instead of the embedded with HTML... For the local storage, i couldnt find where you set your data to localStorage,you have to set it up,before you can pull from it.... Nice work on the documentation also
Please give feedback because it helps me to improve. Thankyou!
What would be the optimal way to create the white circle on the progress element?. i thought about using absolute positioning,but thought it might not be a great idea in an actual project with data
thank you for this @Roman, will make sure to apply it when next i come across such.
On using image overlays,to keep track of this,is it ideal to write multiple media queries?... or is there a better way to go about it???
Thanks it did help...i'd love to see your finished work when its done,i hope to clarify some doubts i have concerning positioning... Thank you
