EcutDavid/medium-canva-JavaScript-SDK-demo-3.html

## medium-canva-JavaScript-SDK-demo-3.html
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        padding-top: 50px;
        text-align: center;
        font-size: 2.5em;
      }

      img {
        margin-top: 10px;
        max-width: 500px;
      }
    </style>
  </head>
  <body>
    <script src="https://sdk.canva.com/designbutton/v2/api.js"></script>
    <div id="imageContainer"></div>
    <button id="createNewDesign">Create a new book cover</button>
    <script>
      const imageContainer = document.querySelector("#imageContainer");
      const createNewDesignButton = document.querySelector("#createNewDesign");
      Canva.DesignButton.initialize({
        // Please replace the apiKey with yours :)
        apiKey: "18dxRFfjOIGvPQbq1TSGErFi",
      }).then((api) => {
        function onDesignPublish({ exportUrl, designId }) {
          const img = document.createElement("img");
          img.src = exportUrl;
          imageContainer.append(img);
          imageContainer.append(document.createElement("br"));

          // Please wrap the image into a button and give the button aria-label
          // for better accessibility.
          img.addEventListener("click", () => {
            api.editDesign({
              design: { id: designId },
              onDesignPublish: ({ exportUrl }) => {
                img.src = exportUrl;
              },
            });
          });
        }

        createNewDesignButton.addEventListener("click", () => {
          api.createDesign({
            design: { type: "BookCover" },
            onDesignPublish,
          });
        });
      });
    </script>
  </body>
</html>
	<html lang="en">
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	body {
	padding-top: 50px;
	text-align: center;
	font-size: 2.5em;
	}

	img {
	margin-top: 10px;
	max-width: 500px;
	}
	</style>
	</head>
	<body>
	<script src="https://sdk.canva.com/designbutton/v2/api.js"></script>
	<div id="imageContainer"></div>
	<button id="createNewDesign">Create a new book cover</button>
	<script>
	const imageContainer = document.querySelector("#imageContainer");
	const createNewDesignButton = document.querySelector("#createNewDesign");
	Canva.DesignButton.initialize({
	// Please replace the apiKey with yours :)
	apiKey: "18dxRFfjOIGvPQbq1TSGErFi",
	}).then((api) => {
	function onDesignPublish({ exportUrl, designId }) {
	const img = document.createElement("img");
	img.src = exportUrl;
	imageContainer.append(img);
	imageContainer.append(document.createElement("br"));

	// Please wrap the image into a button and give the button aria-label
	// for better accessibility.
	img.addEventListener("click", () => {
	api.editDesign({
	design: { id: designId },
	onDesignPublish: ({ exportUrl }) => {
	img.src = exportUrl;
	},
	});
	});
	}

	createNewDesignButton.addEventListener("click", () => {
	api.createDesign({
	design: { type: "BookCover" },
	onDesignPublish,
	});
	});
	});
	</script>
	</body>
	</html>