So I built my project, it was a random quote generator and it was my first project using
JS, jQuery and AJAX and BootStrap.
But to be honest I struggled with it and around 90% of it was copied from our example project.
And even then I still don’t understand why my background color and button color is not changing. I checked the syntax like 5 times and still don’t get what’s wrong.
Here is a link for my Pen: [https://codepen.io/Gamintor/pen/ExZENbV]
All animated properties should be animated to a single numeric value , except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width , height , or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.
Hi, I’m not well-versed in JQuery as I mostly do stuff in React. So I imagine my process of fixing this issue with limited understanding would probably be useful to you for future debugging. Therefore I’ll include it here:
First I put console.log(colors[color]) after you’ve generated a random index for the array colors to see if you generate a valid index.
Then I put console.log(bodyColor) before and after your html body animate to see if that color is being applied to the elements and isn’t appearing somehow.
At this point I’ve narrowed it down to precisely the .animate() not working, so I head over to the JQuery documentation of .animate(): .animate() | jQuery API Documentation
where I find this sentence:
The jQuery UI project extends the
.animate()method by allowing some non-numeric styles such as colors to be animated.
to confirm not importing jqueryui is the issue, I then head over to the sample codepen provided by FCC, and click the gear icon beside the javascript tab. I scroll down and see that indeed they’ve imported both jquery-min.js and jquery-ui.js. In the same place in your codepen I did not see the same scripts imported.
Finally I import the two scripts and your codepen now correctly changes colors.
Final note, it really really is important that you chew through what you don’t understand. It only gets more complex, and eventually you will reach a point where there is no sample code to copy from. These projects are meant to make you do stuff to build a strong foundation, the certification is just a byproduct.
I had tons of trouble doing this exact project, but after I’ve really gone through it and understood each part, I feel like I’ve learned so much. If you have the time, please try and redo the parts you have copied.
" I then head over to the sample codepen provided by FCC, and click the gear icon beside the javascript tab. I scroll down and see that indeed they’ve imported both jquery-min.js and jquery-ui.js ."
I don’t know how to see this, I can’t find it.
And yes, I will have to figure out every bit of code because there is just no point in copy pasting without knowing what I do.
And also where do you write console.log commands. Is it inside the codePen because I can’t see anything on screen?
Hi, access the import screen by clicking the gear icon beside the tab named JS:
Then you will see a popup that contains the scripts already loaded:
To see console outputs, since it is not meant for the end user, you have to use devtools. For me on Firefox thats F12 and it opens up this:
Where you can choose different things to look at. Inspector is great for checking out HTML/CSS, and the console tab is where you can see all the warning/error/console messages.
Thanks a lot, now I can debug my code a lot more easily.
I am planning on rewriting all js part from scratch, but I would like to make my own quotes.
Now I know I could just make an array of objects inside my js block but I would really like to do what’s being done here, and that is having a page on another location and then using ajax to retrieve data from that page.
Question I have is how do I make that page, I can see its very basic HTML and I get that but where do I host it, I think this current one is being hosted on github, and I just made a github account yesterday. So I am still new to it and I don’t know all the possibilities it has?
Git is a complex topic. Due to its primary function being version control, you need to learn some fundamentals and several commands to be able to start using Git and Git hosting services such as GitHub. If you are interested to learn it at this point, there are a lot of resources online on learning Git, the resource I used was Coursera.
But if you are simply looking for a place to host the files for public access, I believe Google Drive can also provide that function. And you can save learning Git for another day.
Yeah I am gonna enroll into that online course.
I know that learning git is just a matter of time because we all will need it at some point.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
