Demo Preview

by academiax

HTML

<div id="code-snippets"></div>

<div id="render-area">
  <!-- Rendering will be displayed here -->
</div>

CSS

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

#code-snippets {
  width: 40%;
  display: flex;
  flex-wrap: wrap;
}

.snippet {
  background-color: #f2f2f2;
  border-radius: 10px;
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.snippet:hover {
  background-color: #e6e6e6;
  transform: scale(1.05);
}

.selected {
  background-color: lightblue;
  transform: scale(1.1);
}

#render-area {
  width: 50%;
  background-color: #f2f2f2;
  border-radius: 10px;
  border: 1px solid gray;
  padding: 20px;
  text-align: center;
}

JavaScript

const config = [
  {
    id: 'snippet1',
    title: 'Snippet 1',
    rendering: 'Snippet 1 rendering'
  },
  {
    id: 'snippet2',
    title: 'Snippet 2',
    rendering: 'Snippet 2 rendering'
  },
  {
    id: 'snippet3',
    title: 'Snippet 3',
    rendering: 'Snippet 3 rendering'
  }
];

const codeSnippetsContainer = document.querySelector('#code-snippets');
const renderArea = document.querySelector('#render-area');

config.forEach(snippet => {
  const codeSnippet = document.createElement('div');
  codeSnippet.classList.add('snippet');
  codeSnippet.id = snippet.id;
  codeSnippet.innerHTML = `
    ${snippet.title}
    <button class="copy-button" data-clipboard-text="${snippet.title}">Copy</button>
  `;
  codeSnippet.addEventListener('click', function() {
    const selectedSnippets = document.querySelectorAll('.selected');
    selectedSnippets.forEach(selectedSnippet => {
      selectedSnippet.classList.remove('selected');
    });
    this.classList.add('selected');
    renderArea.innerHTML = snippet.rendering;
  });
  codeSnippetsContainer.appendChild(codeSnippet);
});

const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach(copyButton => {
  copyButton.addEventListener('click', function(e) {
    e.stopPropagation();
  });
});

const copyButton = document.querySelector('.copy-button');
copyButton.addEventListener('click', async event => {
  try {
    const text = event.currentTarget.dataset.clipboardText;
    await navigator.clipboard.writeText(text);
    console.log(`Copied "${text}" to clipboard`);
  } catch (error) {
    console.error('Failed to copy text: ', error);
  }
});