Skip to main content

Get Started with HTML

You can use Spacha with HTML

Prepare​

  1. Create sample-spc directory

    mkdir -p sample-spc

  2. Download spacha.min.js and place it in js/ directory

  3. Prepare index.html

    index.html
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Spacha Sample</title>
    </head>
    <body>

    </body>
    </html>

  4. Make sure the file structure be like this.

    sample-spc
    ├── index.html
    └── js
        └── spacha.min.js

    1 directory, 2 files

Setup Spacha​

In this section, we'll create Spacha that build with HTML like this (you can't export as image).

  1. Add div tag.

    index.html
    ...
    <body>
        <div id="spc-div"></div>
    </body>
    ...

  2. Load spacha.min.js.

    index.html
    ...
    <body>
        <div id="spc-div"></div>
        <script src="js/spacha.min.js"></script>
    </body>
    ...

  3. Load spc-div for Spacha.

    index.html
    ...
    <body>
        <div id="spc-div"></div>
        <script src="js/spacha.min.js"></script>
        <script>
            var spc = document.getElementById("spc-div");
            new Spacha(spc);
        </script>
    </body>
    ...

  4. Open HTML on your browser, then you can see that Spacha has build (price will be change each time you reload it). Example banner

  5. You can specify detail options.

    index.html
    ...
    <body>
        <div id="spc-div"></div>
        <script src="js/spacha.min.js"></script>
        <script>
            var spc = document.getElementById("spc-div");
            new Spacha(spc, {
                message: "Hello, Spacha!",
                price: 2000,
                user: {
                    name: "Spacha User"
                }
            });
        </script>
    </body>
    ...

    Example banner

Entire of index.html should be like this.

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spacha Sample</title>
</head>

<body>
    <div id="spc-div"></div>
    <script src="js/spacha.min.js"></script>
    <script>
        var spc = document.getElementById("spc-div");
        new Spacha(spc, {
            message: "Hello, Spacha!",
            price: 2000,
            user: {
                name: "Spacha User"
            }
        });
    </script>
</body>

</html>

Samples​

See samples at here．