EncodeTheCode/rename_box_individually2.htm

## rename_box_individually2.htm
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desktop File Renaming</title>
  <style>
    /* Add your CSS styling here */
    .desktop-icon {
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      display: inline-block;
    }
    .desktop-icon:hover {
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      display: inline-block;
      background-color:red;
      color:yellow;
    }
    .desktop-icon:active {
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      display: inline-block;
      background-color:black;
      color:white;
    }
  </style>
</head>
<body>
  <div id="desktop">
    <!-- Example icons -->
    <div class="desktop-icon" data-id="document.txt">document.txt</div>
    <div class="desktop-icon" data-id="image.jpg">image.jpg</div>
  </div>

  <input type="text" id="newFileNameInput" placeholder="Enter new file name">
  <button onclick="renameFile()">Rename File</button>

  <script>
    function renameFile() {
      const newFileNameInput = document.getElementById('newFileNameInput');
      const newFileName = newFileNameInput.value.trim();
      if (!newFileName) {
        alert('Please enter a new file name.');
        return;
      }

      const selectedIcon = document.querySelector('.desktop-icon.selected');
      if (!selectedIcon) {
        alert('Please select a file to rename.');
        return;
      }

      const fileId = selectedIcon.getAttribute('data-id');

      // Simulate renaming on the desktop
      selectedIcon.textContent = newFileName;
      selectedIcon.setAttribute('data-id', newFileName);

      // Simulate renaming in the DOS environment
      console.log(`Renaming file ${fileId} to ${newFileName} in DOS.`);
    }

    // Add event listener to select desktop icons
    const desktopIcons = document.querySelectorAll('.desktop-icon');
    desktopIcons.forEach(icon => {
      icon.addEventListener('click', () => {
        desktopIcons.forEach(icon => icon.classList.remove('selected'));
        icon.classList.add('selected');
      });
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Desktop File Renaming</title>
	<style>
	/* Add your CSS styling here */
	.desktop-icon {
	margin: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	display: inline-block;
	}
	.desktop-icon:hover {
	margin: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	display: inline-block;
	background-color:red;
	color:yellow;
	}
	.desktop-icon:active {
	margin: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	display: inline-block;
	background-color:black;
	color:white;
	}
	</style>
	</head>
	<body>
	<div id="desktop">
	<!-- Example icons -->
	<div class="desktop-icon" data-id="document.txt">document.txt</div>
	<div class="desktop-icon" data-id="image.jpg">image.jpg</div>
	</div>

	<input type="text" id="newFileNameInput" placeholder="Enter new file name">
	<button onclick="renameFile()">Rename File</button>

	<script>
	function renameFile() {
	const newFileNameInput = document.getElementById('newFileNameInput');
	const newFileName = newFileNameInput.value.trim();
	if (!newFileName) {
	alert('Please enter a new file name.');
	return;
	}

	const selectedIcon = document.querySelector('.desktop-icon.selected');
	if (!selectedIcon) {
	alert('Please select a file to rename.');
	return;
	}

	const fileId = selectedIcon.getAttribute('data-id');

	// Simulate renaming on the desktop
	selectedIcon.textContent = newFileName;
	selectedIcon.setAttribute('data-id', newFileName);

	// Simulate renaming in the DOS environment
	console.log(`Renaming file ${fileId} to ${newFileName} in DOS.`);
	}

	// Add event listener to select desktop icons
	const desktopIcons = document.querySelectorAll('.desktop-icon');
	desktopIcons.forEach(icon => {
	icon.addEventListener('click', () => {
	desktopIcons.forEach(icon => icon.classList.remove('selected'));
	icon.classList.add('selected');
	});
	});
	</script>
	</body>
	</html>