DEV Community: Mohammad Reza Omrani

adding new files

Mohammad Reza Omrani — Sat, 14 Dec 2024 03:38:07 +0000

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example .myext Editor</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      position: relative;
    }
    #fileContent {
      width: 100%;
      height: 300px;
    }
    button {
      margin-top: 10px;
    }
    .popup {
      display: none;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .popup .close {
      display: block;
      text-align: right;
      cursor: pointer;
    }
    /* New tab styling */
    .tab {
      display: inline-block;
      padding: 10px;
      background: #f1f1f1;
      border: 1px solid #ccc;
      margin-right: 5px;
      cursor: pointer;
    }
    .tab.active {
      background: #ddd;
    }
    .new-file-btn {
      position: absolute;
      right: 10px;
      top: 10px;
      background: #007bff;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Edit .myext Files</h1>
  <div id="tabs"></div>
  <textarea id="fileContent"></textarea>
  <button onclick="saveChanges()">Save Changes</button>
  <button onclick="showPopup()">Show Function Result</button>
  <button class="new-file-btn" onclick="createNewFile()">New File</button>

  <div id="popup" class="popup">
    <div class="close" onclick="closePopup()">✖</div>
    <div id="popupContent"></div>
  </div>

  <script>
    let currentFile = 'example.myext';

    // Function to create and activate a new tab
    function createTab(filename) {
      const tabs = document.getElementById('tabs');
      const newTab = document.createElement('div');
      newTab.className = 'tab';
      newTab.textContent = filename;
      newTab.onclick = () => {
        currentFile = filename;
        fetchFileContent(currentFile);
        setActiveTab(newTab);
      };
      tabs.appendChild(newTab);
      setActiveTab(newTab);
    }

    // Fetch and display the current file content
    fetchFileContent(currentFile);
    createTab(currentFile);

    function fetchFileContent(filename) {
      fetch(`/${filename}`)
        .then(response => response.text())
        .then(data => {
          document.getElementById('fileContent').value = data;
        });
    }

    function saveChanges() {
      const content = document.getElementById('fileContent').value;
      fetch(`/${currentFile}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: content })
      })
      .then(response => response.text())
      .then(data => {
        alert('File saved successfully');
      })
      .catch(err => {
        alert('Error saving file');
      });
    }

    function showPopup() {
      const result = myCustomFunction();
      document.getElementById('popupContent').textContent = result;
      document.getElementById('popup').style.display = 'block';
    }

    function closePopup() {
      document.getElementById('popup').style.display = 'none';
    }

    function myCustomFunction() {
      return 'Custom function executed!';
    }

    function createNewFile() {
      const newFileName = prompt('Enter the name for the new file:', 'example1.myext');
      if (newFileName) {
        currentFile = newFileName;
        createTab(newFileName);
        fetchFileContent(newFileName);
      }
    }

    function setActiveTab(tab) {
      const tabs = document.querySelectorAll('.tab');
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
    }
  </script>
</body>
</html>

server.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example .myext Editor</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      position: relative;
    }
    #fileContent {
      width: 100%;
      height: 300px;
    }
    button {
      margin-top: 10px;
    }
    .popup {
      display: none;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .popup .close {
      display: block;
      text-align: right;
      cursor: pointer;
    }
    /* New tab styling */
    .tab {
      display: inline-block;
      padding: 10px;
      background: #f1f1f1;
      border: 1px solid #ccc;
      margin-right: 5px;
      cursor: pointer;
    }
    .tab.active {
      background: #ddd;
    }
    .new-file-btn {
      position: absolute;
      right: 10px;
      top: 10px;
      background: #007bff;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Edit .myext Files</h1>
  <div id="tabs"></div>
  <textarea id="fileContent"></textarea>
  <button onclick="saveChanges()">Save Changes</button>
  <button onclick="showPopup()">Show Function Result</button>
  <button class="new-file-btn" onclick="createNewFile()">New File</button>

  <div id="popup" class="popup">
    <div class="close" onclick="closePopup()">✖</div>
    <div id="popupContent"></div>
  </div>

  <script>
    let currentFile = 'example.myext';

    // Function to create and activate a new tab
    function createTab(filename) {
      const tabs = document.getElementById('tabs');
      const newTab = document.createElement('div');
      newTab.className = 'tab';
      newTab.textContent = filename;
      newTab.onclick = () => {
        currentFile = filename;
        fetchFileContent(currentFile);
        setActiveTab(newTab);
      };
      tabs.appendChild(newTab);
      setActiveTab(newTab);
    }

    // Fetch and display the current file content
    fetchFileContent(currentFile);
    createTab(currentFile);

    function fetchFileContent(filename) {
      fetch(`/${filename}`)
        .then(response => response.text())
        .then(data => {
          document.getElementById('fileContent').value = data;
        });
    }

    function saveChanges() {
      const content = document.getElementById('fileContent').value;
      fetch(`/${currentFile}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: content })
      })
      .then(response => response.text())
      .then(data => {
        alert('File saved successfully');
      })
      .catch(err => {
        alert('Error saving file');
      });
    }

    function showPopup() {
      const result = myCustomFunction();
      document.getElementById('popupContent').textContent = result;
      document.getElementById('popup').style.display = 'block';
    }

    function closePopup() {
      document.getElementById('popup').style.display = 'none';
    }

    function myCustomFunction() {
      return 'Custom function executed!';
    }

    function createNewFile() {
      const newFileName = prompt('Enter the name for the new file:', 'example1.myext');
      if (newFileName) {
        currentFile = newFileName;
        createTab(newFileName);
        fetchFileContent(newFileName);
      }
    }

    function setActiveTab(tab) {
      const tabs = document.querySelectorAll('.tab');
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
    }
  </script>
</body>
</html>

add new file button

Mohammad Reza Omrani — Sat, 14 Dec 2024 03:33:58 +0000

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example .myext Editor</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      position: relative;
    }
    #fileContent {
      width: 100%;
      height: 300px;
    }
    button {
      margin-top: 10px;
    }
    .popup {
      display: none;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .popup .close {
      display: block;
      text-align: right;
      cursor: pointer;
    }
    /* New tab styling */
    .tab {
      display: inline-block;
      padding: 10px;
      background: #f1f1f1;
      border: 1px solid #ccc;
      margin-right: 5px;
      cursor: pointer;
    }
    .tab.active {
      background: #ddd;
    }
    .new-file-btn {
      position: absolute;
      right: 10px;
      top: 10px;
      background: #007bff;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Edit .myext Files</h1>
  <div id="tabs"></div>
  <textarea id="fileContent"></textarea>
  <button onclick="saveChanges()">Save Changes</button>
  <button onclick="showPopup()">Show Function Result</button>
  <button class="new-file-btn" onclick="createNewFile()">New File</button>

  <div id="popup" class="popup">
    <div class="close" onclick="closePopup()">✖</div>
    <div id="popupContent"></div>
  </div>

  <script>
    let currentFile = 'example.myext';

    // Fetch and display the current file content
    fetchFileContent(currentFile);

    function fetchFileContent(filename) {
      fetch(`/${filename}`)
        .then(response => response.text())
        .then(data => {
          document.getElementById('fileContent').value = data;
        });
    }

    function saveChanges() {
      const content = document.getElementById('fileContent').value;
      fetch(`/${currentFile}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: content })
      })
      .then(response => response.text())
      .then(data => {
        alert('File saved successfully');
      })
      .catch(err => {
        alert('Error saving file');
      });
    }

    function showPopup() {
      const result = myCustomFunction();
      document.getElementById('popupContent').textContent = result;
      document.getElementById('popup').style.display = 'block';
    }

    function closePopup() {
      document.getElementById('popup').style.display = 'none';
    }

    function myCustomFunction() {
      return 'Custom function executed!';
    }

    function createNewFile() {
      const newFileName = prompt('Enter the name for the new file:', 'example1.myext');
      if (newFileName) {
        currentFile = newFileName;
        const newTab = document.createElement('div');
        newTab.className = 'tab';
        newTab.textContent = newFileName;
        newTab.onclick = () => {
          currentFile = newFileName;
          fetchFileContent(currentFile);
          setActiveTab(newTab);
        };
        document.getElementById('tabs').appendChild(newTab);
        setActiveTab(newTab);
        fetchFileContent(newFileName);
      }
    }

    function setActiveTab(tab) {
      const tabs = document.querySelectorAll('.tab');
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
    }
  </script>
</body>
</html>

Show Result Button

Mohammad Reza Omrani — Sat, 14 Dec 2024 03:31:59 +0000

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example .myext Editor</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    textarea {
      width: 100%;
      height: 300px;
    }
    button {
      margin-top: 10px;
    }
    /* Popup styling */
    .popup {
      display: none;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .popup .close {
      display: block;
      text-align: right;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Edit example.myext File</h1>
  <textarea id="fileContent"></textarea>
  <button onclick="saveChanges()">Save Changes</button>
  <button onclick="showPopup()">Show Function Result</button>

  <div id="popup" class="popup">
    <div class="close" onclick="closePopup()">✖</div>
    <div id="popupContent"></div>
  </div>

  <script>
    // Fetch the content of the .myext file and display it
    fetch('/example.myext')
      .then(response => response.text())
      .then(data => {
        document.getElementById('fileContent').value = data;
      });

    // Save changes made to the .myext file
    function saveChanges() {
      const content = document.getElementById('fileContent').value;
      fetch('/example.myext', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: content })
      })
      .then(response => response.text())
      .then(data => {
        alert('File saved successfully');
      })
      .catch(err => {
        alert('Error saving file');
      });
    }

    // Show the popup with the function result
    function showPopup() {
      const result = myCustomFunction();
      document.getElementById('popupContent').textContent = result;
      document.getElementById('popup').style.display = 'block';
    }

    // Close the popup
    function closePopup() {
      document.getElementById('popup').style.display = 'none';
    }

    // Define the custom function
    function myCustomFunction() {
      return 'Custom function executed!';
    }
  </script>
</body>
</html>

Document Content Save Button

Mohammad Reza Omrani — Sat, 14 Dec 2024 03:23:01 +0000

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example .myext Editor</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    textarea {
      width: 100%;
      height: 300px;
    }
    button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Edit example.myext File</h1>
  <textarea id="fileContent"></textarea>
  <button onclick="saveChanges()">Save Changes</button>
  <script>
    // Fetch the content of the .myext file and display it
    fetch('/example.myext')
      .then(response => response.text())
      .then(data => {
        document.getElementById('fileContent').value = data;
      });

    // Save changes made to the .myext file
    function saveChanges() {
      const content = document.getElementById('fileContent').value;
      fetch('/example.myext', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: content })
      })
      .then(response => response.text())
      .then(data => {
        alert('File saved successfully');
      })
      .catch(err => {
        alert('Error saving file');
      });
    }
  </script>
</body>
</html>

server.js

const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');

// Serve static files
app.use(express.static('public'));

// Route to fetch .myext file content
app.get('/example.myext', (req, res) => {
  const filePath = path.join(__dirname, 'example.myext');
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      return res.status(500).send('Error loading .myext file');
    }
    res.send(data); // Send the content of the .myext file
  });
});

// Serve the main HTML page
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.post('/example.myext', (req, res) => {
    let body = '';
    req.on('data', chunk => {
      body += chunk;
    });

    req.on('end', () => {
      const data = JSON.parse(body);
      const filePath = path.join(__dirname, 'example.myext');
      fs.writeFile(filePath, data.content, 'utf8', (err) => {
        if (err) {
          return res.status(500).send('Error saving .myext file');
        }
        res.send('File saved successfully');
      });
    });
  });


app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

lang.js

function myCustomFunction() {
    console.log('Custom function executed!');
  }

  myCustomFunction(); // Call the function

example.myext

myCustomFunction();