DEV Community

Margaret W.N
Margaret W.N

Posted on

Day 17: I hate programming

Alt Text
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)

Collapse
 
256hz profile image
Abe Dolinger

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!

Collapse
 
mtee profile image
Margaret W.N

I'll take a break and try it, once more. Thanks Abe!

Collapse
 
nathanbarrett profile image
Nathan Barrett

would you mind pasting or attaching your front html and javascript? I could take a look and possibly help out if you like.

Collapse
 
mtee profile image
Margaret W.N

I'd really appreciate that.

Here is the html and the javascript.

And this the javascript code before i started making changes.

Collapse
 
mtee profile image
Margaret W.N

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.

Thread Thread
 
nathanbarrett profile image
Nathan Barrett

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
}

Thread Thread
 
mtee profile image
Margaret W.N

Okay, I see why i'm getting the error. I'll refactor the code to follow a similar format.

Collapse
 
nathanbarrett profile image
Nathan Barrett • Edited

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:

  1. everything inside the function is wrapped with a Promise:

let myFunction = async function () {
return new Promise((resolve, reject) => {
// do function stuff and resolve(data) or reject(error) when done
});
}

  1. if you are doing additional await stuff inside the async function you can return a fully resolved or rejected promise like so:

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!

Thread Thread
 
mtee profile image
Margaret W.N

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.

Collapse
 
devcoder profile image
devcoder

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

Collapse
 
mtee profile image
Margaret W.N

I sure need the break, i'll try something less draining in the mean time. Thank you devcoder.

Collapse
 
andrewbaisden profile image
Andrew Baisden

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.

Collapse
 
mtee profile image
Margaret W.N

Thank you Andrew, i'll keep on and try stackoverflow after a break.

Collapse
 
briang123 profile image
Brian Gaines

Cool animation, have you checked out framer motion and it’s physics based animation library for react? It’s pretty awesome too.

Collapse
 
mtee profile image
Margaret W.N

Thank you Brian.
I'll check that out I'm yet to dive into react though.