Getting Started
1. Download the stylesheet and JavaScript for the library from here.
2. Include JQuery Library. 
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
3. Link the CSS stylesheet for the library. 
<link rel="stylesheet" type="text/css" href="AvatarMaker.css">
4. Include the JavaScript file for the library. 
<script defer type="text/javascript" src="./js/AvatarMaker.js"></script>
5. Create a div element in your body. Give it an id. This is where the generator will go. For example: 
<div id="generator-container"></div>
6. Create a new JavaScript file and include it in your HTML. Place it after you import the library. For example: 
<script defer type="text/javascript" src="./js/example.js"></script>
7. In the JavaScript file, instantiate the library and call createGenerator(). The generator should appear on the page. 
const avatar = new AvatarMaker();
            
avatar.createGenerator("#generator-container");
API
.createGenerator(domElement)
Creates a generator in the domElement specified.
.hide(featureName, isShowing)
Hides feature specified by featureName in the featureName specified. isShowing is true by default. If set to false, the feature will not be shown in the generator. Acceptable arguments for featureName:
.onSave(function)
The developer can specify what they would like to do when the user clicks save after creating their avatar. The function argument must be a function. In the example below, onAvatarSave() will be called when the user saves an avatar. 
    const avatarCreator = new AvatarMaker();
    avatarCreator.createGenerator("generator-container")

    function onAvatarSave() {
        console.log("Avatar saved!")
        

        // The avatar object will return an object containing an id and the svgs that make up
        the avatar. This can be saved externally (for ex. to a database) for storage.

        const avatar = avatarCreator.getAvatars()[avatarCreator.getAvatars().length - 1]
    }


    avatarCreator.onSave(onAvatarSave)
.displayAvatarGivenSVGs(svgsArray, domElement)
This method can be used to display an avatar by passing in the array of SVGs. This method is useful if you are getting your avatar from an external source and rendering it on the page. The svgsArray is an array containing the svgs of all the features. The domElement is the id of the element in which you want to render the avatar in. See example below: 
    const avatar = new AvatarMaker()

    // SVG code not put here to prevent example from taking up too much space on the page. See actual code
    here.
    const svgs = [`baseSVG`, `hairSVG`, `eyesSVG`, `noseSVG`, `mouthSVG`, `facialHairSVG`, `clothesSVG`,
    `accessoriesSVG`, `glassesSVG`]

    avatar.displayAvatarGivenSVGs(svgs, "#displaying-example")
Code above will output:



The following API methods will use the generator below as an example.

.getAvatars()
This will return an array of all the avatar objects that are saved. Important: If page is refreshed, previously saved avatars will be lost.
To see this function in action, follow these steps:
  1. Create an avatar in the generator above.
  2. Click save.
  3. Click the "Get Avatars" button below. In the console, you will see an array with all the saved avatar objects.
  4. Repeat steps 1-3 to create more avatars.
The code looks like this: 
    document.getElementById("get-avatars-btn").addEventListener("click", () => {
        const avatars = avatarMaker.getAvatars();
        console.log(avatars)
    });

.displayAllAvatars(domElement)
Use this method to display all the saved avatars in the specified domElement. Important: If page is refreshed, previously saved avatars will be lost.
To see this function in action, follow these steps:
  1. Create an avatar in the generator above.
  2. Click save.
  3. Click the "Display Avatars" button below. If there any saved avatars, they will appear below.
  4. Repeat steps 1-3 to create more avatars and display them.
The code looks like this: 
    document.getElementById("display-avatars-btn").addEventListener("click", () => {
        avatarMaker.displayAllAvatars("#container-to-display-avatars-in");
    });

.getAvatar(avatarID)
Given the avatarID, this method will return the avatar object which contains an id and an array of all the feature SVGs. Important: If page is refreshed, previously saved avatars will be lost.
To see this function in action, follow these steps:
  1. Create an avatar in the generator above.
  2. Click save.
  3. Click the "Get Avatars" button above. In the console, use the output to get an id of an avatar.
  4. Enter the id in the input below.
  5. Click "Get Avatar" button below to get the corresponding avatar for that id. The avatar object will be returned in the console.
  6. Repeat steps 1-5 to get different avatars.
The code looks like this: 
    document.getElementById("get-avatar-btn").addEventListener("click", (e) => {
        var avatarId = document.getElementById("avatar-id-input").value;
        const avatar = avatarMaker.getAvatar(avatarId);
        console.log(avatar)
    })

.displayAvatarGivenId(avatarID, domElement)
Given the avatarID, this method will display the avatar in the specified domElement. Important: If page is refreshed, previously saved avatars will be lost.
To see this function in action, follow these steps:
  1. Create an avatar in the generator above.
  2. Click save.
  3. Click the "Get Avatars" button above. In the console, use the output to get an id of an avatar.
  4. Enter the id in the input below.
  5. Click "Display Avatar" button below to see the avatar below.
  6. Repeat steps 1-5 to get different avatars.
The code looks like this: 
    document.getElementById("display-avatar-btn").addEventListener("click", (e) => {
        var avatarId = document.getElementById("avatar-id-input2").value;
        avatarMaker.displayAvatarGivenId(avatarId, "#container-to-display-avatar-in");
    })