Spark Boulder, Summer 2017
Session 14: The Phantom Session
Coin Flipping App project Show-and-Tell, Lab session
XKCD’s Simple Writer
A box for writing words where you can only use the ten hundred words that people use the most often.
Anybody want to show off what they've got so far?
I'm going to have you create the front end of a very simple social media site. We'll call it the "Spark Front End Web Development Student Social Site", or SFEWDSSS for short.
Your site should have two pages.
The first page should be your news feed. Every time someone goes to it, they'll be able to see all of the most recent posts by everyone on the SFEWDSSS. I'd recommend that this is your
index.html, so that whenever people go to
http://kens-super-social-media-site.site44.com/ they'll see the main page.
The second page should be your posting page. It will allow you to create new posts on the SFEWDSSS. It should be a secret! Don't include a link to it on your main page. Only you should know which page you should go to in order to create a new post. Your URL for this page will probably be something like
That's correct! That's why I've built one for you.
Generally, big social media sites like these require you to be able to log in, and edit your profile, and all sorts of complicated backend stuff. This isn't backend web dev, so I'm not going to make any of you do that!
The official documentation for the Spark Front End Web Development Student Social Site API is located at https://spark-class-social-network-api.hoff.tech. You'll use a couple of the provided URLs to make requests in order to get and create posts on SFEWDSSS.
For your final project, I'm going to have you create the front end to the Spark Front End Web Development Social Network.
All of the students in the class are on the Social Network! You can create new posts, and everyone else in the Social Network can see those posts.
For your front end, you'll need at least 2 pages:
index.html) should show all the posts in the Social Network, from most recent to least recent. Each post has some content, an author, and a date/time that it was created.
You'll need to make requests to the API to create and get posts on the Social Network. All of the API documentation is up at https://spark-class-social-network-api.hoff.tech/.
profile_idis just your Slack username.
profile_secretin order to post to the Social Network. I'll direct message you your
profile_secretwith anyone, and don't share the URL of your posting page with anyone, or else they'll be able to post to your profile as you!
profile_secretanywhere in your
index.html, and don't include it in any scripts that are included in your
index.html- otherwise, I'll be able to open that script and find it.
forloop that does nothing but create spam posts all day, then I'm going to be sad :(
What questions are there?
I'm going to have you build an app that displays a random quote whenever you visit the page!
Your Random Quote App must do three things:
You don't have all the information that you need to complete this project yet! That's okay, because we'll be learning jQuery and how to communicate with servers over the next 5 sessions.
Submit your Random Quote App as assignment 19. You can also get this information with
readings 19. Remember to keep the site live after the class ends, so that potential employers and clients can see it!
So I built one for you!
randomquote is a REST API that allows you to retrieve quotes from lists of quotes, and add new quotes to lists of quotes.
Documentation is available at http://randomquote.hoff.tech.
For this project, you'll only need to do two main things:
(but, the API provides many more functions than that! Feel free to use them)
The API is unauthenticated. This means that anyone can get any data or post any data into this database.
Things you should do:
Things you should not do: