Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const canvas = document.querySelector('.canvas');
+ const toolButtons = document.querySelectorAll('.tool-btn');
+ const templates = document.querySelectorAll('.template');
+
+ toolButtons.forEach(button => {
+ button.addEventListener('click', function() {
+ const tool = this.dataset.tool;
+ handleToolSelection(tool);
+ });
+ });
+
+ templates.forEach(template => {
+ template.addEventListener('click', function() {
+ const templateType = this.dataset.template;
+ applyTemplate(templateType);
+ });
+ });
+
+ function handleToolSelection(tool) {
+ switch(tool) {
+ case 'text':
+ addTextElement();
+ break;
+ case 'shape':
+ addShapeElement();
+ break;
+ case 'image':
+ addImageElement();
+ break;
+ case 'color':
+ changeColor();
+ break;
+ }
+ }
+
+ function addTextElement() {
+ const textElement = document.createElement('p');
+ textElement.contentEditable = true;
+ textElement.textContent = 'New Text';
+ canvas.appendChild(textElement);
+ }
+
+ function addShapeElement() {
+ const shapeElement = document.createElement('div');
+ shapeElement.style.width = '100px';
+ shapeElement.style.height = '100px';
+ shapeElement.style.backgroundColor = '#ddd';
+ canvas.appendChild(shapeElement);
+ }
+
+ function addImageElement() {
+ const imageElement = document.createElement('img');
+ imageElement.src = 'placeholder.jpg';
+ imageElement.alt = 'Image';
+ imageElement.style.maxWidth = '100%';
+ canvas.appendChild(imageElement);
+ }
+
+ function changeColor() {
+ const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
+ canvas.style.backgroundColor = randomColor;
+ }
+
+ function applyTemplate(templateType) {
+ canvas.innerHTML = '';
+ switch(templateType) {
+ case 'basic':
+ canvas.innerHTML = '
Basic Infographic
Start with this simple layout...
';
+ break;
+ case 'timeline':
+ canvas.innerHTML = '
Timeline Infographic
';
+ break;
+ case 'comparison':
+ canvas.innerHTML = '
Comparison Infographic
';
+ break;
+ }
+ }
+ });
