Wikipedia Viewer. JS too verbose?

Wikipedia Viewer. JS too verbose?
0

#1

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.


#3

@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!


#5

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!


#7

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!


#9

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.


#10

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!