So i basically stole the penguin from freeCodeCamp, I’m a beginner in HTML and wanted a side project while taking the courses so that i can actually put in motion the stuff i learn from here.
I put a sword, shield and a crown on the penguin, and moved the animation the first arm to the other. I added a button and when i hit that button i want the penguins arm to move, like once per button tap or something, but I’m completely lost and been trying to search the internet for it without luck so I’m gonna try here.
Here is the entire code if anyone wants to check it out and maybe give me a pointer in the direction i want.
Also the code isn’t formatting the way i want it to
To make your page interactive, you’re going to need to learn JavaScript.
In answer to your titular question though, you use something called event listeners. You will write a JavaScript function that runs when the “click event” occurs on your button.
Are event listeners in the curriculum? I expanded all of the JS sections in the curriculum list and ran a find (CTRL +f) in Firefox for ‘DOM’ and ‘event’ with no relevant results.
I am quite surprised the DOM and event listeners do not feature in the course, considering how useful it is to know about those things.
I haven’t done all of the curriculum since the most recent expansion, so I’m not sure. I know that a lot of DOM stuff historically hasn’t been in there (probably because freeCodeCamp has always been designed with the assumption that you would be using Angular or React).
While not in the curriculum, there are some great videos on the FCC Youtube channel about them. A quick google search showed this as the very first result:
…also, love that cover shot. Hungry-baby-bird face.
I know a bit about event listeners, but I’m sure that video will give me a lot of info. Beau goes deep into topics. Thanks. I’ll get my VPN on (no YouTube otherwise) and have a watch.
Thanks @ArielLeslie. Missing out some of the fundamentals of the DOM results in coders not knowing how things work. I am sure that not every site to be maintained uses a framework, so I think that knowledge is essential. Saying that, I’ve not looked at Angular or React yet.
I fully agree with you. Having an understanding of how to create an interactive web page/app without a framework is, to my mind, a very vital missing step.
It’s a lot like “developers” in the early 2000’s who learned jQuery, and decided that this made them fully capable professional javascript developers. This made them moderately capable jQuery developers, who created some hideously ugly spaghetti code, because they hadn’t learned the fundamentals of solid development.
Before diving into frameworks of any stripe, take a little time and figure out ways to do some of the same end-results “old-school”.
For me, I went through each of the front-end library challenges, and wrote those challenge projects out without a framework, first. Doing the same for the Coding Prep: Take-home projects. Build first old-school, then look at (for example) React. Or lately, I’ve been playing with Svelte.
I’ll get my VPN on (no YouTube otherwise) and have a watch.