Apply JavaScript code and CSS styles as HTML elements.

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<div class="container">
  <!-- Example link -->
  <div id="editor">
    <a href="https://example.com" onclick="modify_link(event, this)"
      >Click me</a
    >
  </div>
</div>

<!-- Modal (hidden by default) -->
<div id="linkModal" class="modal">
  <div class="modal-content">
    <h2>Modify Link</h2>
    <table>
      <tr>
        <td><label for="href">Href:</label></td>
        <td><input type="text" id="href" /></td>
      </tr>
      <tr>
        <td><label for="download">Download:</label></td>
        <td>
          <input type="text" id="download" placeholder="Optional filename" />
        </td>
      </tr>
      <tr>
        <td><label for="hreflang">Hreflang:</label></td>
        <td><input type="text" id="hreflang" placeholder="Optional" /></td>
      </tr>
      <tr>
        <td><label for="media">Media:</label></td>
        <td><input type="text" id="media" placeholder="Optional" /></td>
      </tr>
      <tr>
        <td><label for="ping">Ping:</label></td>
        <td><input type="text" id="ping" placeholder="Optional" /></td>
      </tr>
      <tr>
        <td><label for="referrerpolicy">Referrer Policy:</label></td>
        <td>
          <select id="referrerpolicy">
            <option value="no-referrer">no-referrer</option>
            <option value="origin">origin</option>
            <option value="unsafe-url">unsafe-url</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><label for="rel">Rel:</label></td>
        <td>
          <select id="rel">
            <option value="noopener">noopener</option>
            <option...

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 5%;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    width: 400px;
    border-radius: 8px;
}

JavaScript

$(document).ready(function () {
  // Wait for the page to load
  // Select all <a> elements inside the #editor div
  const links = document.querySelectorAll('#editor a');

  // Add onclick attribute to each link
  links.forEach((link) => {
    link.setAttribute('onclick', 'modify_link(this)');
  });
});

const links = document.querySelectorAll('#editor a');

// Add onclick attribute to each link
links.forEach((link) => {
  link.setAttribute('onclick', 'modify_link(this)');
});

let currentLink = null;

// Open modal and populate inputs
function modify_link(link) {
  event.preventDefault(); // <-- Stop the browser from navigating
  currentLink = link;

  document.getElementById('href').value = link.href || '';
  document.getElementById('download').value = link.download || '';
  document.getElementById('hreflang').value = link.hreflang || '';
  document.getElementById('media').value = link.media || '';
  document.getElementById('ping').value = link.ping || '';
  document.getElementById('referrerpolicy').value =
    link.referrerPolicy || 'no-referrer';
  document.getElementById('rel').value = link.rel || 'noopener';
  document.getElementById('target').value = link.target || '_blank';
  document.getElementById('type').value = link.type || '';

  document.getElementById('linkModal').style.display = 'block';
}

// Save modifications back to the link
document.getElementById('saveLink').addEventListener('click', () => {
  if (!currentLink) return;

  currentLink.href = document.getElementById('href').value;
  currentLink.download = document.getElementById('download').value;
  currentLink.hreflang = document.getElementById('hreflang').value;
  currentLink.media = document.getElementById('media').value;
  currentLink.ping = document.getElementById('ping').value;
  currentLink.referrerPolicy = document.getElementById('referrerpolicy').value;
  currentLink.rel = document.getElementById('rel').value;
  currentLink.target =...