Pokedex Project

Download the following zip: pokedex_materials.zip
It contains a csv of pokemon data, as well as some folders with images.

This project will have you write python code to turn this data into a wiki (a "Pokedex")
with multiple pages to display this info in a nice way.


Deadlines, submissions, grading
Phase 1 will be due on Monday the 6th by 8am. Make sure it's up ON HOMER.
I will be checking your submissions in class on Monday.
Make sure your phase one is in "homer.stuy.edu/~user/proj_phase1/..."
- After you upload it, don't modify the phase1 directory, so I can 
  see your original unmodified phase 1 site.
- In the phase1 submission, upload your phase1 python code

If you are not in class on Monday, make sure you put it up on homer and email
me before 8:00am on monday to let me know. If it's not up on homer when
I go to check it on monday, I will mark you as not having submitted phase1.
If you have not submitted phase1 by monday, you will lose 5 points on your final project,
even if the final submission is complete and on time.

AS SOON AS YOU'VE SUBMITTED YOUR PHASE 1:
- Make a separate directory "public_html/proj_final". 
- Don't make any changes to proj_phase1, do all further changes in proj_final

The final submission will be due Friday the 10th at midnight. However, if you submit your 
final version by midnight on Wednesday, you will get 3 bonus points on your grade.
For your final, make sure you upload it to homer in your "proj_final/" directory

In your submissions, make sure to include:
- Your name and class period
- URL of your website for that phase (MUST BE ON http://homer.stuy.edu/~usernmae/proj_phase1/... or /proj_final/)
- your .py file
- description of any bonuses or extra features you added


Requirements:
Phase 1 (Due Monday 06/06)
- Your python program should read and parse the pokemon.csv file

- It should write out an html file "allpokemon.html", with a table of all the pokemon

- The table should include each pokemon's number, name, and types.
    - The table should not include any of the other columns in the csv
    - Add small images of each pokemon as the leftmost column of the table

- At the top of your page, you should have:
    - an h1 header for the page
    - "Made by:", with your name and class period
    - a paragraph that gives your views on pokemon: 
        e.g., video games are dumb / which version is best / which pokemon is 
        most likely to be voted homecoming queen

- The webpage you generate should be styled to look nice (or at least distinctive)

- Your webpage should be up on homer.stuy.edu/... 
    - IF IT IS NOT THERE, YOU WILL GET A 0, so make sure you check it, 
      ideally from a separate computer or phone.


Phase 2 (Due Friday 06/10 ; Extra Credit if submitted by Wednesday)
- Your program should also create a separate page for each pokemon (i.e. 151 total pages)
- Each pokemon's page should have:
    - a header with the name and number of the pokemon
    - a text description of the pokemon (note: the csv has "," replaced with ";" in the descriptions)
    - the type or types of the pokemon
    - a large image of it (i.e. scaled up)
    - all of the pokemon's stats, organized nicely together
    - a link back to allpokemon.html

- Modify your allpokemon.html:
    - each pokemon's name in the table should now link to its individual page

- Again, both your allpokemon.html and your individual pokemon 
  pages should be laid out and styled nicely

- Again, your webpage should be up on homer.stuy.edu/... 
    - IF IT IS NOT THERE, YOU WILL GET A 0, so make sure you check the URL that you 
        submit, ideally from a separate computer or phone.


    
Bonuses (worth extra points!):
    - add a navbar to the top of each of your pages
        - here are instructions on how to make a navbar
        - Your navbar should be IDENTICAL across all pages (maybe make a helper function for it)
        - (the navbar is only really if you have more than 1 entry to put on it, i.e. if you do
            some of the other bonuses)

    - Since the pokemon are numbered, you can add links to next/previous
      pokemon on the individual pokemon pages

    - Pick a color to represent each of the 17 types, and color the table
      according to each pokemon's type (may need to color just the type cells)
      in the table appropriately
        - If you're feeling fancy, find/make some icons for the types, and add those in

    - Show both the front and back images for each pokemon
        - when hovering over a pokemon's image in the table or in next/prev, instead display
          its back

    - Make a "top 10" page of your 10 favorite / best / most unusual / etc. pokemon. 
        - You should have at least a few sentences describing what it's a top 10 list of.
        - You should have a list of your pokemon, with a text description for each 
          one of why it makes the cut

    - Modify your program to create 17 "type" pages, one for each type (fire, water, grass, etc)
        - Each "type" page should list a table of all pokemon that have that type
          as either their primary or secondary 
          (i.e., all pokemon that are at least partially fire-type)
        - add links to each type page on allpokemon.html (ideally in a dropdown on your navbar) 
        - if possible, make sure that all types you put in your html as text are also working 
          links to the appropriate type page.

    - Use the "evolves from" column to add evolution information to your pokemon pages:
        - Display which other pokemon the current one evolved from, if any
        - Display which other pokemon the current one evolves into, if any
        - You should display at least the name and the link for these, not just their number
        - Does your evolution info work correctly for pokemon 133-136?

    - You can add any other pokemon-relevant features to this site that you like
        - If you do, please let me know in the comments-to-teacher box.



TROUBLESHOOTING NOTES:
- IF YOUR IMAGES LOOK BLURRY:
    - adding style="image-rendering: pixelated;" to your img tag 
      will prevent the browser from blurring them.
    - images are 96x96 pixels: if changing their size, scaling 
      the width / height by a whole number will make them look nicest.
      i.e. width="192px" (2x size), not width="150px"

- IF YOU GET WEIRD BROKEN UNICODE CHARACTERS:
    - make sure your html file starts with the following:
        <!DOCTYPE html>
        <html><head>
            <meta charset="utf-8">
            ...

- IF YOU CANT SEE A LISTING OF YOUR FILES AT homer.stuy.edu/~username
    - On a lab computer, open a terminal
    - COPY AND PASTE the following line into it
    - echo "Options +Indexes" > ~/public_html/.htaccess