Giter Club home page Giter Club logo

streamoneproject-2's Introduction

Trailer Park Boys Fan Page

Overview

What is this project for?

This is a fan page meant for Trailer Park Boy viewers. It is front-end only and has no server-side connection. This project is only for fun and has no actual ties to the Trailer Park Boys.

What does it do?

Visitors can check on upcoming TPB tours, send a message to a member of the cast, and play a short trivia questionnaire to test their TPB knowledge.

How does it work

This page uses Angular JS framework to construct the DOM. Angular controllers are used to store interactive functions for a Fan Mail Modal and Trivia game.

Trivia: An array of answers is stored in the controller and called on from a directive, then passed through on an html page. When an answer is chosen and submitted, a counter initiates the next set of answers and questions. When the user gets an answer correct, the array of answers is randomized to prevent the correct answer becoming fixed on a single radio button.

Testing

  • Tested that the array index randomizer worked correctly using jasmine
  • Other methods include simple trial and error, and utilizing console logs to check for expected results
  • Much time was spent building understanding of the DOM and how everything connects in Angular JS

Features

Existing Features

  • Send fan mail (no backend implemented)
  • Check upcoming tours and follow link to buy tickets
  • Interactive multiple choice trivia

Features Left to Implement

  • Animations to make things look prettier
  • Mobile accessibility

Tech Used

Some of the tech used includes:

  • AngularJS
    • AngularJS used to handle page routing, and build custom directives to handle trivia questions/answers
  • Bootstrap
    • Bootstrap used to give the project a consistent and responsive overall layout
  • jQuery
    • jQuery used to pull data within the DOM to trigger a modal
  • npm
    • npm used to help manage some of the dependencies in our application
  • bower
    • Bower used to manage the installation of libraries and frameworks
  • CSS Formatter
    • CSS Formatter used to prettify CSS code
  • HTML Formatter
    • HTML Formatter used to prettify HTML
  • Netlify
    • Site Host used to host fan page

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 and bower installed
  3. You can get npm by installing Node from here
  4. Once you've done this you'll need to run the following command: npm install -g bower # this may require sudo on Mac/Linux
  5. Once npm and bower are installed, you'll need to install all of the dependencies in package.json and bower.json
npm install

bower install
  1. 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
  2. Once http-server is installed run http-server -c-1
  3. The project will now run on localhost
  4. Make changes to the code and if you think it belongs in here then just submit a pull request

streamoneproject-2's People

Contributors

sbarrypatt avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.