Examples
1. Basic Generator
Use the .createGenerator(domElementSelector) method to show the Avatar Maker where you would like it to appear in the DOM. The domElementSelector should be the class name or id of the element in which the generator will appear in. In the example below, the generator is put in a div element with the id ex1-generator. If it was a class name then it would be .createGenerator(".ex1-generator").
"use strict"

const avatarCreator = new AvatarMaker();
avatarCreator.createGenerator("#ex1-generator");
2. Generator with Hidden Features
The .hide(featureName) method can be used to remove the ability to edit certain features in the avatar maker. In the example below, the nose and hair features cannot be edited. A default will be shown instead. featureName is a string of the feature which is chosen to be removed. The following are valid for featureName:
  • "base"
  • "hair"
  • "eyes"
  • "nose"
  • "mouth"
  • "facialHair"
  • "clothes"
  • "accessories"
  • "glasses"
"use strict"

const avatarCreator = new AvatarMaker();
avatarCreator.createGenerator("#ex2a-generator")
avatarCreator.hide("nose")
avatarCreator.hide("hair")
If the hair, facial hair and clothes features are hidden, the Avatar Maker will automatically also hide the colour selector.
"use strict"

const avatarCreator = new AvatarMaker();
avatarCreator.createGenerator("#ex2b-generator")
avatarCreator.hide("hair")
avatarCreator.hide("facialHair")
avatarCreator.hide("clothes")
The .hide(featureName, showFeature) method takes in a second argument. By default it is true. If set to false, the feature will not be shown on the avatar.
"use strict"

const avatarCreator = new AvatarMaker();
avatarCreator.createGenerator("#ex2c-generator")
avatarCreator.hide("nose", false)
avatarCreator.hide("mouth", false)
avatarCreator.hide("hair", false)