Wikipedia Viewer. JS too verbose?

Hey guys, here is my Wikipedia Viewer. It’s not finished yet, I have done virtually no styling on it. I’m posting it now because I’m not happy with my JS (particularly my generateCard() function), I just feel like it’s too verbose. Is it possible to generate elements dynamically using JS in a more concise manner?

Tear down my coding, every criticism is an opportunity to learn! As I said though, I haven’t done much styling yet, so criticizing my CSS is somewhat pointless, but I’ll still take all advice on board.

@P1xt Two way data-binding is a thing of beauty! I think that’s why I’m not happy with this code, because I’m more used to just writing a template and interpolating the variables from a controller. I hate having to manually create elements and append them to the body.

I was just wondering if there is a more eloquent way using vanilla JS, or jQuery, to generate your HTML. I couldn’t think of a method to create a whole bunch of custom HTML without it seeming so brittle. I mean, my data and view is just so mashed together. I guess it’s just the result of jQuery’s “hacky” DOM manipulation style.

Thanks for offering an opinion!

I’ve never used Vue before, but having looked through it there, it might be just what I’m looking for to do the challenges with. I was considering using Angular, but having to use CodePen I relly didn’t want to try mash a whole application into a single JS file. I wouldn’t feel right making API requests in a controller, and I also wouldn’t feel right putting a service in the same file as the controller and module. I guess I’m just weird like that!

Awesome, I didn’t know that. I’ve been developing locally in my IDE and then pasting to Codepen. So then when I finish the challenge, should I paste the link to the site, or to the GitHub repo into the FCC dialog?

Thanks for that! Now I can really go modular!

Have you looked at HandlebarsJS at all? Templating engines a good way to separate the view. I made extensive use of it in my project remakes, and a simple RxJS example I made earlier this year. I wouldn’t say it’s necessarily a better option than Angular, Vue, React, et al., but it’s very easy to get it up and running, and it works very well with jQuery.

Do you know, I never thought of using something like Handlebars for a purely front end project. I’ve used MustacheJS for templating a front end to be served up with Node, but I never thought used it for any of these projects. That might be even better for quick and easy data-binding. Thanks!