You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.
Each of the examples also has a README at GitHub if you’re curious about the why and how of it.
If you want to see demonstrations of what jQuery can do — with just a few lines of code! — view these examples. These are complete files, not jsFiddles. You can copy and use any of this code. This is a GitHub repo with several nifty example pages.
In addition, here are some of my fiddles with brief jQuery examples:
toggleClass — I showed this in class; it adds or removes yellow highlighting.
prepend — I talked about this in class; there are four useful jQuery functions that you can experiment with in this fiddle to see how they work: before, after, prepend and append. Use them to add content dynamically to your HTML.
I fell in love with this web app as soon as I laid eyes on it: Monroe Work today. The site is about the research done by an American man named Monroe Nathan Work, who died in 1945. His research was about lynching in the United States. This app demonstrates a great way to tell a story.
First, I zoomed in on the map and started clicking around.
Then I wanted to find out where the data came from. I wanted to know if I could trust it. I spied a little link at the bottom that says, “Should I believe this … ?” Clicking that took me to a section that carefully documented all the sources and all the unanswered questions raised in this project. I loved this part! Too often, digital projects just stuff all their sources into a big list o’ links at the end. This, in contrast, takes the time to explain how the facts were checked and where the research originated.
Using the Chrome extension Wappalyzer, I did a quick look to see whether Bootstrap was used for the design/CSS. It wasn’t — but the producers did use another web framework, one called Ink. Looks pretty awesome. However, they could have made this app with a Bootstrap theme just as easily — it all depends what you and your teammates on a project already know. If someone is comfortable with Bootstrap, he or she will choose Bootstrap. If a person has learned another framework instead, he or she will choose that one.
This “Live Fact Check” site from National Public Radio is highly responsive and very well designed. You should check it out on desktop, phone and tablet, and compare how it adapts to all sizes. The NPR Visuals team is well known for producing excellent online and mobile apps. The site was also embeddable by NPR member stations.
Update (Sept. 28): This behind-the-scenes article explains how NPR managed the process of live fact checking through this app, using a Google Doc (!) — so creative!