It has been an entire day of trying different solutions and refactoring code more than hundred times, but it still wont work. Adding habits from a webpage is my unending nightmare, i can't seem to capture the input values. The button only adds a new card but no title. My mind is super exhausted not to mention frustrated. Oh, and did i mention i broke the code too.
On a lighter note I tried animate.css, it's as easy as adding class to html:
The optimist in me: "There are better days ahead"
The Pessimist in me: "Oh no darling, it gets worse"
Day 17
Top comments (15)
Both are true - it will get worse, but mostly, it will get much better. Don't be afraid to take breaks and refresh your brain! What seems unsolvable at the end of a long day can seem straightforward the next. Good luck!! Oh, and don't be afraid to ask for help!
I'll take a break and try it, once more. Thanks Abe!
would you mind pasting or attaching your front html and javascript? I could take a look and possibly help out if you like.
I'd really appreciate that.
Here is the html and the javascript.
And this the javascript code before i started making changes.
I initially had a self invoking function to get habits from the database, loop through and display them on the web. I was trying to refactor that code to allow me to call it in the add habits function and pass new habit as a parameter. This was my reference but I get keep getting an error that displayHabits is not a function.
I see that. I'm not sure that it is necessary to wrap the function as self executing. displayHabits 1. doesn't take any arguments when you define it but you are giving it an argument when you attempt to use it later in the code. 2. displayHabits fires itself first then returns itself to displayHabits.
I would simplify and make two functions
let displayInitialHabits = async function () {
// axios call to get saved habits and then display them
//
}
// then when document is loaded
displayInitialHabits();
// and another function to add a new habit on form submit
let addHabit = async function (event) {
event.preventDefault();
// get form data and save as a new habit
// clear form inputs after save
// add new habit to the list
}
Okay, I see why i'm getting the error. I'll refactor the code to follow a similar format.
ok, after a quick review one thing did stand out. your async function addNewHabit does not return a promise. also, async functions should always return a promise. you can achieve that in one of two ways:
let myFunction = async function () {
return new Promise((resolve, reject) => {
// do function stuff and resolve(data) or reject(error) when done
});
}
let myFunction = async function () {
let data
try {
data = await someOtherAsyncFunction();
} catch (error) {
return Promise.reject(error)
}
return Promise.resolve(data)
}
so in your code I would change "return newHabit" to "return Promise.resolve(newHabit)"
remember, async functions will always return a Promise
if you need any additional help or get stuck again feel free to hit me up. good luck!
I'll make the changes and reach out if i get stuck. Thank you for taking your time to review the code. I'm grateful.
sounds like its time for a break, i did something similar to this and it took me about a week to finish, so be patient you will you figure it out.....step away from it for a day or so
I sure need the break, i'll try something less draining in the mean time. Thank you devcoder.
Never give up. You will find a solution eventually give your brain a rest and sleep on it. If that does not work you could try stackoverflow. No need to struggle alone.
Thank you Andrew, i'll keep on and try stackoverflow after a break.
Cool animation, have you checked out framer motion and it’s physics based animation library for react? It’s pretty awesome too.
Thank you Brian.
I'll check that out I'm yet to dive into react though.