Skip to content

Kayahma23/facebook_wall

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 

Repository files navigation

#Project: Facebook Wall

image

##Overview

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 in the unit.

Starter Code

See here for code and here to view.

Solution Code

See here for the solution code (private).

Assessment

  1. Write a Do Now based off of assessments from previous lesson.

##During Class

###Do Now

  1. Attendance
  2. Return reviewed Do Now and Exit Ticket from previous class.
  3. Do Now

###Opening

What is the Facebook wall? How does it work?

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

###Introduction to New Material ("I Do")

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

1. Clone this 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."

Once the workspace has been processed, check to be sure it is up to date by running git status in the terminal. You should receive a messege telling you that your branch is up to date.
Imgur

NOTE: It is common practice to push you changes to your GitHub repository often. It is recommended you make a push after every major change. Through the course of completing this project you should make 7-10 pushes to GitHub. Your manager will be grading you on this.

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

2. 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.

3. 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

###Guided Practice ("We Do") ####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?

###Independent Practice ("You Do") 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.

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

###How to Submit Also, remind students to push this code back up to their GitHub repo. Students will then share the link to their repo at bit.ly/ScriptEdProjects.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 90.7%
  • JavaScript 6.6%
  • CSS 2.7%