GabrielCousin / wiiiiish

Useless plugin for random happy new year wishes

Wiiiiish

Useless plugin for random happy new year wishes

Usage

Wiiiiish is expecting the following HTML structure to work but does not rely on classnames. Those 3 IDs shown below must not be changed unless you pass custom options when instantiating.

<h1 class="w-title">
  <span>We wish you </span>
  <span class="w-wish" id="w-container">
    <span>a happy new year!</span>
  </span>
</h1>
<ul class="w-hidden-list" id="w-list">
  <li>the best</li>
  <li>to join the Billionaire Boys Club</li>
  <li>to enjoy 2018</li>
</ul>
<button class="w-trigger" id="w-trigger" type="button">
  ✨ Make a wish ✨
</button>

<script src="wiiiiish.js"></script>
<script>
  var myWish = new Wiiiiish(/* options */);
</script>

Module support

import Wiiiiish from './wiiiiish'
const myWish = new Wiiiiish(/* options */)

Configuration

Each option can be customized via the options object

• itemsSelector: selector of the list of wishes | default: #w-list
• targetSelector: selector of the element where wishes will be updated | default: #w-container
• triggerSelector: selector of the element that triggers wishes update | default: #w-trigger
• removalDelay: pause between trigger click and text removal | default: 300
• addDuration: pause between text removal and text addition | default: 700
• pause: delay between two character additions | default: 100

Methods

Available after creation:

var myWish = new Wiiiiish();

Add a random wish (with animations and deletion)

myWish.updateText();

Add a random wish (without deletion)

myWish.addText();

Clear/stop pending animations

myWish.clear();

Remove wish

myWish.removeText();

Select wish visually

myWish.selectText();

Development

Requirements

• Node.js
• NPM or Yarn

Starting server

$ yarn start // npm start

Build/Release

$ yarn build // npm run build