Giter Club home page Giter Club logo

facebook_wall's Introduction

Facebook wall

image

##Scope

This project involves creating a simple Facebook-like wall. The objective of this project is for students to practice their jQuery skills. Unlike previous projects, students are presented with minimal scaffolding.

##Before Class

Prerequisites

Students should only start this project after they have completed the other lessons and projectsin the unit.

Starter code

See here for code and here to view.

Solution code

See here for code (private).

Assessment

  1. Students will be assessed based on their performance in the project.

##During Class

###Do Now

  1. Attendance
  2. Return graded do-now and exit ticket from previous class
  3. Do-now activity

###Opening

What is the Facebook wall? How does it work?

Let's see a live demonstration by showing off the solution code preview.

###Lecture

You are going to build a simple Facebook Wall. Your instructions:

1. Fork this Repo

Do this by clicking the Fork button on the top right of this page.

Imgur

2. Clone your repo into your own Cloud9 account workspace

  1. Copy the "clone URL" from this repo
  2. In your Cloud9 dashboard click on the green "Create New Workspace" button and select "Clone from URL"

3. Fill out wall.js

You must fill out js/wall.js. Unlike previous projects, there is very little starter code given. This is on purpose.

For the poster picture (image of a blank face), use http://i.imgur.com/87kIXSN.jpg.

4. Test

To test if your Wall works as expected, post the following messages in order: "First message", "Second message", "Third message". Afterwards, your Wall should look like:

image

###Brainstorming Before you start coding, identify the list of steps you need to do to finish this project. Here's a start:

  1. Read index.html. Pay attention to the IDs of the text box, button, and div at the bottom.
  2. How will you detect the click on the "Post" button?
  3. What should happen once the "Post" button is clicked? Will you need to generate HTML?

###Build Time Students will work alone on this project. The teacher's role will be to walk around the room helping students with any questions they have. Students are encouraged to look at previous lessons for reference.

##Closing Select students to present their work to the class.

###Check for Understanding Teachers should keep track of student success while they are presenting to the class.

###How to Submit This project must be pushed back up to your repo on GitHub. Then you will share your link with the instructor

To push to GitHub run the following commands in your terminal: git status
git add .
git commit -m "example comment"
git push origin master

facebook_wall's People

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.