Giter Site home page Giter Site logo

joshuakgoldberg / konamimojisplosion Goto Github PK

View Code? Open in Web Editor NEW
13.0 17.0 1.0 381 KB

Connects konami-code-js to emojisplosion for a glorious easter egg. ๐ŸŽ‰ โœจ ๐ŸŽ†

License: MIT License

Shell 1.39% JavaScript 9.22% TypeScript 89.39%
konami-code emojisplosion emojis easter-egg javascript react

konamimojisplosion's Introduction

Konamimojisplosion

Code Style: Prettier TypeScript: Strict NPM version

โฌ† โฌ† โฌ‡ โฌ‡ โฌ… โžก โฌ… โžก ๐Ÿ…ฑ ๐Ÿ…ฐ

๐ŸŽ‰ โœจ ๐ŸŽ†

Hooks konami-code-js to trigger emojisplosion.

If a user types in the Konami Code on their keyboard or taps it on their mobile phone, emojisplosions will start firing on the page. Triggering the Konami Code again will stop the emojisplosions.

Check it out on Codecademy Docs!

Usage

Quick Mode

Plop this ๐Ÿ‘‡ at the end of your <body>:

<script async src="https://unpkg.com/konamimojisplosion/dist/global.js"></script>

Alternately, you can import and use this as a standalone function, a React hook, or a React class component.

Standalone Function

import { initializeKonamimojisplosion } from "konamimojisplosion";

initializeKonamimojisplosion();

React Hook

import { useKonamimojisplosion } from "konamimojisplosion";

function MyComponent() {
  useKonamimojisplosion();

  return <main>Hello, world!</main>;
}

React Class Component

Tip: the class component just calls the hook internally.

import { Konamimojisplosion } from "konamimojisplosion";

class MyComponent {
  render() {
    return (
      <main>
        <Konamimojisplosion />
        Hello, world!
      </main>
    );
  }
}

Development

Requires:

After forking the repo from GitHub:

git clone https://github.com/<your-name-here>/konamimojisplosion
cd konamimojisplosion
yarn

Contribution Guidelines

We'd love to have you contribute! Check the issue tracker for issues labeled accepting prs to find bug fixes and feature requests the community can work on. If this is your first time working with this code, the good first issue label indicates good introductory issues.

Please note that this project is released with a Contributor Covenant. By participating in this project you agree to abide by its terms. See CODE_OF_CONDUCT.md.

konamimojisplosion's People

Contributors

dependabot[bot] avatar joshuakgoldberg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

fox-forks

konamimojisplosion's Issues

Create a global file that can be included

People should be able to include a script like:

<script async src="[htcdnjs](https://cdnjs.cloudflare.com/konamimojisplosion/global.js" type="text/javascript" />

...and have it just work. โœจ

Add a one-line .js file for easy inclusions

For sites that want to easily include konamimojisplosion, it'd be nice to have a one-liner like:

<script src="some-package-host-cdn-thing/konamimojisplosion.js" type="text/javascript"></script>

By default, shouldn't trigger when prefer-reduced-motion is enabled

Great point from @EmmaDawsonDev from Twitch today:

Love emojisplosion! Any idea for how it would work well with prefers reduced motion media queries?

Great point! My hunch is that whoever triggers emojisplosion probably should be the one to determine whether it's a valid thing to trigger? Maybe I'm wrong there. But if not, perhaps konamimojisplosion should have an option like overridePreferReducedMotion? So that by default, it doesn't trigger if the user has prefer-reduced-motion enabled?

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.