Giter VIP home page Giter VIP logo

gta's Introduction

gta

Grand Theft Autocorrect | A typing test game for the criminally insane.

gtaLogoCircleGradientNew

Functional deployment:

https://grand-theft-autocorrect.netlify.app/

Details:

  • I set out to create more of a game-ified version of classic typing practice websites like 10 Fast Fingers and (especially) Type Racer.
  • At time of website deployment, you are tasked with typing in a prompt fetched from either the lovely Quotable API or the equally lovely Metaphorpsum Random Sentence API.
  • You must quickly enough to beat the police's words per minute level (set in increasing difficulty for all levels) in order to secure the next car you are trying to steal.
  • Additionally, you will sustain health loss for accuracy misses (in addition to the expcted loss of words/minute speed for typos).

Technologies used:

  • I used HTML, CSS, and JavaScript (with the Fetch API) to create my site.
  • I used CSS to stylize the website for mobile, tablet, and desktop usage, with mobile responsiveness thanks largely to the wonder of FlexBox.
  • I used Fetch to refresh (and allow the user to refresh) the dog facts and pictures that greet the user. For this, I used the aforementioned Quotable API and alternatively the Metaphorpsum Random Sentence API.
  • I used CSS Animations, but a project revisit will have me utilizing JavaScript in order to assign animations dynamically.
  • I utilized only Vanilla JavaScript for functionality.

Room for Improvement:

  • Implement a two-player feature -- I have some of JavaScript set up with this in mind. Basically, Player One would be the criminal, while Player Two would be a new instance of the Player class. The highest words per minute rate in a best of three wins!
  • Improve the responsiveness of the website.
  • I love the effect on TypeRacer of the car moving in accordance to how far into a prompt you have reached. Basically, the car moves in proportion to how quickly you type. My website does not do that currently, and I would need to figure out a proper way of doing so with fetched quotes. The alternative would be utilizing a fixed array of quotes and thereby assessing the length of each prompt, etc.
  • I would love to have a soft chime or user-customizable sound play when a session is complete.
  • More GTA flair!
image

Installation

  • Feel free to clone this repo! The JavaScript and CSS files are linked to the HTML file and can be loaded up like any other website locally.

Wireframe & Design Process

grandTheftBetter grandTheftFlee grandTheftlaterchoice grandTheftuserchoice

gta's People

Contributors

ianpmaher avatar

Watchers

 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.