Interactive Digital Code Editor and Workspace: Copy, Download, Edit and Share Code Snippets with Real-Time Notifications and Customization Features.

Components

Scrolling Text Section: A scrolling text area displaying "Digital writer Suresh" that changes to "Download the code" after scrolling.

Button Bar: Four buttons for copying code, downloading code, editing and sharing the page.

Code Block: A text area displaying code snippets with editing capabilities.

Notification Container: Displays success or error messages.

Functionality

Scrolling Text Animation: The scrolling text animates horizontally, displaying "Digital writer Suresh" followed by "Download the code."

Copy Code: Copies the code in the code block to the clipboard.

Download Code: Downloads the code as a text file.

Edit Mode: Toggles edit mode for the code block, allowing users to modify the code.

Share Page: Shares the page URL via the browser's share feature or copies it to the clipboard.

Notifications: Displays success messages for copy, download and share actions.

Styling

Button Styling: Uniform width, height and colors for buttons.

Code Block Styling: Black background, white text and editable functionality.

Notification Styling: Colored backgrounds for success messages.

JavaScript Functions

updateScrollingText: Animates scrolling text.

copyCode: Copies code to clipboard.

downloadCode: Downloads code as a text file.

toggleEditMode: Toggles code block editability.

sharePage: Shares page URL.

showNotification: Displays success messages.

Key Features

Interactive coding environment.

Customizable code block.

User-friendly interface.

Real-time notifications.

This code combines HTML, CSS and JavaScript to create an interactive coding space with user-friendly features.

Digital writer Suresh

<p>&nbsp;</p><p><br /></p><p></p><div style="border-radius: 10px; border: 3px solid rgb(136, 136, 136); margin: 20px; padding: 10px;">
  <!--Scrolling text section-->
  <div style="background-color: #f0f0f0; border-radius: 5px; margin-bottom: 10px; overflow: hidden; padding: 5px; width: 100%;">
    <div id="scrollingText" style="color: #4caf50; font-size: 16px; font-weight: bold; text-align: center; white-space: nowrap;">
      Digital writer Suresh
    </div>
  </div>

  <!--Top bar with buttons arranged in two rows-->
  <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;">
    <div style="display: flex; gap: 10px;">
      <button class="custom-button" onclick="copyCode()">Copy</button>
      <button class="custom-button" onclick="downloadCode()">Download</button>
    </div>
    <div style="display: flex; gap: 10px; margin-top: 10px;">
      <button class="custom-button" id="editButton" onclick="toggleEditMode()">Edit</button>
      <button class="custom-button" onclick="sharePage()">Share</button>
    </div>
  </div>

  <!--Code block with white background and black text color-->
  <div style="background-color: white; border: 1px solid rgb(221, 221, 221); margin-top: 10px; padding: 10px;">
    <pre contenteditable="false" id="codeBlock" style="background-color: white; font-family: monospace; font-size: 14px; max-height: 200px; overflow-y: auto; padding: 10px; white-space: pre-wrap;"><span style="color: blue;">suresh</span><br /></pre>
  </div>

  <!--Notifications container centered on the screen-->
  <div id="notificationsContainer" style="align-items: center; display: flex; flex-direction: column; gap: 10px; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%);"></div>

  <script>
    let isEditing = false;

    // Function to alternate between scrolling text and static message
    function updateScrollingText() {
      const scrollingText = document.getElementById("scrollingText");

      scrollingText.textContent = "Digital writer Suresh";
      scrollingText.style.color = "#4caf50";
      scrollingText.style.animation = "scrollingText 5s linear";
      
      // After "Digital writer Suresh" scrolls, show "Download the code" in the center
      setTimeout(() => {
        scrollingText.style.animation = "none";
        scrollingText.textContent = "Download the code";
        scrollingText.style.color = "#ff5722";
        
        // Show "Download the code" for 1 second, then loop back
        setTimeout(() => {
          scrollingText.style.opacity = "0"; // Hide after 1 second
          setTimeout(() => {
            scrollingText.style.opacity = "1";
            updateScrollingText(); // Loop back to "Digital writer Suresh"
          }, 1000); // Wait for fade out
        }, 1000);
      }, 5000); // After "Digital writer Suresh" scrolls
    }

    updateScrollingText();

    function copyCode() {
      var copyText = document.getElementById("codeBlock").textContent;
      navigator.clipboard.writeText(copyText).then(function() {
        showNotification("Copied successfully", "#4caf50");
      }, function(err) {
        alert("Failed to copy the code!");
      });
    }

    function downloadCode() {
      var codeText = document.getElementById("codeBlock").textContent;
      var pageTitle = document.title;
      var timestamp = new Date().toLocaleString("en-GB", { 
        year: 'numeric', month: '2-digit', day: '2-digit', 
        hour: '2-digit', minute: '2-digit', second: '2-digit', 
        hour12: false 
      }).replace(/[\/, :]/g, '-');
      var milliseconds = new Date().getMilliseconds();
      var fileName = `${pageTitle} - http://Digitalwritersuresh.blogspot.com - ${timestamp}-${milliseconds}.txt`;
      var blob = new Blob([codeText], { type: "text/plain" });
      var link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      showNotification("Downloaded successfully", "#ff9800");
    }

    function toggleEditMode() {
      var codeBlock = document.getElementById("codeBlock");
      var editButton = document.getElementById("editButton");

      if (!isEditing) {
        codeBlock.contentEditable = "true";
        codeBlock.style.border = "1px dashed #2196F3";
        editButton.textContent = "Save";
        showNotification("Now in edit mode", "#2196f3");
      } else {
        codeBlock.contentEditable = "false";
        codeBlock.style.border = "1px solid rgb(221, 221, 221)";
        editButton.textContent = "Edit";
        showNotification("Saved successfully", "#4caf50");
      }
      
      isEditing = !isEditing;
    }

    function sharePage() {
      var pageUrl = window.location.href;
      if (navigator.share) {
        navigator.share({
          title: document.title,
          text: "Check out this page:",
          url: pageUrl
        }).then(() => {
          showNotification("Page URL shared successfully", "#673ab7");
        }).catch((error) => {
          showNotification("Error sharing the page", "red");
        });
      } else {
        navigator.clipboard.writeText(pageUrl).then(function() {
          showNotification("Page URL copied for sharing", "#673ab7");
        });
      }
    }

    function showNotification(message, color) {
      const notification = document.createElement("div");
      notification.textContent = message;
      notification.style.backgroundColor = color;
      notification.style.color = "white";
      notification.style.padding = "10px 20px";
      notification.style.borderRadius = "5px";
      notification.style.opacity = "1";
      notification.style.transition = "opacity 0.5s ease";
      
      const notificationsContainer = document.getElementById("notificationsContainer");
      notificationsContainer.appendChild(notification);

      setTimeout(function() {
        notification.style.opacity = "0";
        setTimeout(function() {
          notificationsContainer.removeChild(notification);
        }, 500); 
      }, 2000);
    }
  </script>
</div>

<style>
  /* Button Styling for uniform width and height */
  .custom-button {
    width: 120px; /* Set button width */
    height: 40px; /* Set button height */
    border-radius: 5px;
    border: none;
    color: white;
    cursor: pointer;
    text-align: center;
  }

  /* Individual background colors for different buttons */
  .custom-button:nth-child(1) { background-color: #FF6347; } /* Copy - Tomato */
  .custom-button:nth-child(2) { background-color: #4682B4; } /* Download - Steel Blue */
  .custom-button:nth-child(3) { background-color: #32CD32; } /* Edit - Lime Green */
  .custom-button:nth-child(4) { background-color: #DA70D6; } /* Share - Orchid */

  /* Animation for scrolling text */
  @keyframes scrollingText {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
  #scrollingText {
    display: inline-block;
    animation: scrollingText 5s linear;
    transition: opacity 1s ease;
  }
</style>
<p></p><p><br /></p><p><br /></p><p><br /></p>