Java Script

CIT  21500  BONUS  –  PHOTO  CONTEST  

We’ll  be  building  a  photo  contest  website  in  the  last  part  of  the  course.    This  bonus  assignment  gives   you  the  opportunity  to  create  the  template  for  that  website.  

ASSIGNMENT  DETAILS  

Using  HTML  (or  HTML5)  and  CSS  (you  are  not  required  to  use  JavaScript  or  PHP  for  this  project  but  you   may  for  additional  points),  you  will  design  the  layout  and  graphic  design  for  a  website  that  will  offer  a   weekly  photo  challenge.  

The  idea  of  the  website  is  that  administrators  can  create  a  new  themed  challenge  each  week  or  so,  and   users  will  upload  photographs  to  “compete”  in  that  challenge.    When  a  contest  has  ended,  users  will  vote   on  the  entries  and  then  the  winners  (the  top  3  photos)  will  be  announced.  

As  this  is  a  website  for  creative  people,  it  should  have  a  creative  interface.    That’s  where  you  come  in.  

REQUIRED  FILES  

All  pages  should  use  a  similar  “template”  (with  a  common  header,  footer,  and  global  navigation.)    The  rest   of  the  design  is  COMPLETELY  up  to  you.    Go  nuts,  and  make  it  cool.  

At  a  minimum,  you  will  need  to  create  the  following  pages:  

Index.html  (The  Home  Page)  

The  home  page  should  have  a  small  bit  of  text  that  introduces  the  idea  of  the  website,  and  should  show  a   list  of  current  contests  for  submission,  current  contests  that  are  in  the  voting  stage,  and  recent  contest   winners.  

Registration  Form  

Users  will  register  for  the  website  by  completing  the  following  fields:  

• First  Name   • Last  Name   • Email  Address   • Country  (which  will  be  selected  from  a  dropdown  –  just  put  a  couple  of  sample  countries  in  the  

form  for  now)   • Password   • Password  Confirmation  

Note!    Although  you  are  not  required  to  use  JavaScript  to  validate  this  form,  you  should  still  use  a  <LABEL>   tag  and  provide  an  error  <DIV>  for  each  form  field.  

 

Contest  Entry  Form  

Logged-­‐in  users  will  be  able  to  select  a  contest  and  see  a  form  that  allows  them  to  upload  a  photograph  as   an  entry.  

The  form  needs  the  following  fields:  

• File  Upload  (Just  use  an  standard  text  <INPUT>  for  now.    We’ll  upload  files  later.)   • Title   • Description  (a  <TEXTAREA>  for  more  information)  

Again!    Each  field  needs  a  <LABEL>  and  <DIV>.  

Contest  Gallery  Page  

When  a  contest  is  no  longer  accepting  entries,  users  should  be  able  to  browse  all  of  the  entries  (either  for   voting  or  just  to  go  back  and  review).  

Lay  out  this  page  so  that  users  can  view  multiple  photos  at  once  (like  a  “gallery.”)      

You  should  spend  a  bit  of  time  looking  at  other  creative  websites  that  have  gallery-­‐type  pages  to  get   layout  ideas.    Try  to  make  this  fun  and  engaging.  

You  will  need  to  use  some  sample  photos  to  demonstrate  how  this  page  will  look.  

 

REQUIRED  TECHNOLOGY  AND  ASSETS  

As  stated,  you  DO  NOT  need  any  JavaScript  or  PHP  to  get  some  points  for  this  assignment.    However,  if   you  want  to  include  the  JavaScript  for  form  validation  and  you  want  to  use  PHP  includes  to  lay  out  your   pages,  you  can  earn  additional  points  for  doing  so.    (See  “grading”  for  more  details.)  

You  MAY  reference  some  existing  HTML/CSS  templates  but  you  MUST  cite  your  sources  in  comments  in   your  HTML/CSS  files.    You  must  also  manipulate  the  resources  so  that  you  are  not  simply  copying  and   pasting  someone  else’s  website  (even  if  it’s  open-­‐source  and  free.)  

Submissions  that  use  outside  code  but  do  not  cite  their  sources  will  receive  zero  points.  

Finally,  you  may  use  “comp”  (free,  watermarked)  images  from  stock  photo  sites  such  as   http://www.istockphoto.com  either  in  the  template/design  of  your  site  or  as  contest  “entries”  (or  both!)     This  is  not  stealing.    The  images  are  watermarked,  we  are  not  using  them  commercially,  and  there  are   allowances  for  use  of  copyrighted  images  for  student  projects.  

 

 

 

MAKE  IT  COOL  

All  joking  aside,  web  development  is  at  its  heart  a  creative  activity.    If  a  site  is  pretty  but  not  usable,  no   one  will  use  it.    If  a  site  is  ugly  and  totally  functional,  no  one  will  WANT  to  use  it.    We  need  to  bridge  the   gap  between  “ugly  but  smart”  and  “pretty  but  dumb.”  

Be  creative.    Use  your  own  artwork,  different  fonts,  web  fonts,  cool  layouts.    Mix  it  up.  

 

GRADING  

Criteria   Points  

Layout  /  Design  /  Creativity   15  

JavaScript  validation  of  Registration  and  Contest  Entry  forms   5  

Use  of  PHP  for  header/footer/config  includes   5  

Total   25  

 

SUBMITTING  YOUR  ASSIGNMENT  

Zip  your  Assignment  folder  together  into  a  single  .zip  file!  

Once  that  is  ready:  

• Go  to  the  appropriate  Oncourse  Assignment  page    

• Paste  the  link  to  your  page  in  the  submission  details  box.    Check  this  link  to  verify  the  files  are   present  and  functioning  on  the  server.  

• ATTACH  the  zip  file  to  the  Assignment  submission  page  

• Exercises  are  due  by  11:59pm  on  the  due  date  listed  on  the  Assignments  page.      

• No  late  Assignment  submissions  are  accepted