Giter Club home page Giter Club logo

antroproject's Introduction

Louis Murerwa

Lab 2 :BuzzFeedStyle Quiz

This project is a Buzzfeed style quiz that takes user input and outputs a travel recomandation.The quiz has 4 questions with four possible answers which have images.I chose to focus on the brain(Javascript) of this quiz.The quiz uses javascript to do some cool animation.I tried to style this quiz but I ended up with a simple and captivating design.

I implememented the following designs some of which are for extra scredit.I did both Option 1 and Option 2 so that I could get some JavaScript.

  1. Extra:My website reads data from a json and renders it on the page.
  2. I 4 potential display states:
    • initial none selected state - All slides look the smae
    • have a :hover effect :The answers transform to a larger size.
    • have a clicked/selected state:Text of selected is green and others are written in red.
  3. Amazing Buttons which buttons appear and dissapear like the Invisible man :).
    • I have three button states which get chances to be displayed.
      • I have NEXT. To move to next question
      • I have DiscOver yourself.Calculates out put and activates a modal.
      • I have restart which restarts quiz.
  4. I have an alert system if a user doesnt select a warning meessage appears at the top and dissapears.
  5. I implemented a weight system which tracks the weights of options selected by the user and returns a recomandation.
  6. This site is also available for mobile.

Output:

I have a modal which slides from the top.Ittttss cooool.

The js behind this is phenomenal.

I have a ton suprise hidden features also so enjoy :)

Features....

Alert if user forgots to select option.

screen shot 2019-02-03 at 2 59 34 am

Alert plus Hover

screen shot 2019-02-03 at 2 59 34 am

HoverUnselected :If not option has been selected.

screen shot 2019-02-03 at 2 59 34 am

Hover Selected:If option has been selected

screen shot 2019-02-03 at 2 59 34 am

Output:Modal Output

screen shot 2019-02-03 at 2 59 34 am

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.