This is a website for people to learn about Hippopotami and/or then test them on their knowledge.
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.
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
- 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
- None
- 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
- 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
- Firstly you will need to clone this repository by running the
git clone <project's Github URL>
command - After you've that you'll need to make sure that you have npm installed
- You can get npm by installing Node from here
- 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
- Once http-server is installed run
http-server -c-1
- The project will now run on localhost
- Make changes to the code and if you think it belongs in here then just submit a pull request
- The photos used in this site were obtained from Pixabay
- The video used on this site belongs to Nat Geo Wild channel on youtube
- The information used to create this site was from a number of sources
- Wikipedia webpage on Hippos and Pygmy Hippos
- The African Wildlife Foundation website