Skip to content

Instantly share code, notes, and snippets.

@tonkec

tonkec/README.md

Created November 2, 2018 12:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tonkec/e0393f6f1aff07326ef4450874626778 to your computer and use it in GitHub Desktop.
Save tonkec/e0393f6f1aff07326ef4450874626778 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Smallroundears Website

Overview

What is this website for?

This is a website for people to learn about Hippopotami and/or then test them on their knowledge.

What does it do?

This website has various pages for people to read lots of information about Hippopotami, ranging from what they eat and their habitat, to their behavior and tendencies. Users can then quiz themselves on their new found Hippo knowledge.

How does it work

This website uses AngularJS to route viewers through the site and control which Javascript is executed. The site is styled with Bootstrap. The quiz has been created using Javascript and modal for enlarging images is displayed using some JQuery code. Bower has been used to manage package dependencies for deployment of site on github pages. The site can be viewed HERE

Features

Existing Features

  • Eye catching front page
    • Sliding picture box
  • Information page.
    • Sidebar to navigate to different parts of the information
  • Media page with plenty of pictures and a video
  • Links page to other sites with information about Hippopotami
  • Quiz page for viewers to test their knowledge
    • Form for viewers to input their answers or check the correct box
    • Submit button so viewers can see how they scored on the quiz

Features Left to Implement

  • None

Tech Used

Some the tech used includes:

  • HTML, CSS and Javascript
    • Base languages used to create website
  • AngularJS
    • We use AngularJS to handle page routing and to build custom directives
  • Bootstrap
    • We use Bootstrap to give our project a simple, responsive layout
  • JQuery
    • Use JQuery for boostrap and displaying modal
  • npm
    • We use npm to install http-server in order to view the site
  • Bower
    • Using Bower to manage package dependencies

Testing

  • Prototype code was written and tested using jasmine
  • All code used on the site has been tested to ensure everything is working as expected
  • Site viewed and tested in the following browsers:
    • Google Chrome
    • Opera
    • Microsoft Edge
    • Mozilla Firefox

Contributing

Getting the code up and running

  1. Firstly you will need to clone this repository by running the git clone <project's Github URL> command
  2. After you've that you'll need to make sure that you have npm installed
  3. You can get npm by installing Node from here
  4. After those dependencies have been installed you'll need to make sure that you have http-server installed. You can install this by running the following: npm install -g http-server # this also may require sudo on Mac/Linux
  5. Once http-server is installed run http-server -c-1
  6. The project will now run on localhost
  7. Make changes to the code and if you think it belongs in here then just submit a pull request

Credits

Media

  • The photos used in this site were obtained from Pixabay
  • The video used on this site belongs to Nat Geo Wild channel on youtube

Information

  • The information used to create this site was from a number of sources
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment