Mind mapping tool
Inserisci qui il tuo testo...
#mindmap {
width: 100%;
height: 500px;
border: 1px solid black;
}
.node {
position: absolute;
width: 100px;
height: 100px;
background-color: #eee;
border: 1px solid black;
}
.node.active {
background-color: #ddd;
}
.node:hover {
cursor: pointer;
}
var mindmap = document.getElementById("mindmap");
var nodes = [];
var activeNode = null;
var nodeCount = 0;
mindmap.addEventListener("click", function(e) {
if (e.target.classList.contains("node")) {
if (activeNode) {
activeNode.classList.remove("active");
}
activeNode = e.target;
activeNode.classList.add("active");
}
});
document.getElementById("addNode").addEventListener("click", function() {
var newNode = document.createElement("div");
newNode.classList.add("node");
newNode.id = "node-" + nodeCount;
newNode.style.top = Math.random() * 400 + "px";
newNode.style.left = Math.random() * 800 + "px";
mindmap.appendChild(newNode);
nodes.push(newNode);
nodeCount++;
});
document.getElementById("deleteNode").addEventListener("click", function() {
if (activeNode) {
mindmap.removeChild(activeNode);
nodes.splice(nodes.indexOf(activeNode), 1);
activeNode = null;
}
});
document.getElementById("editNode").addEventListener("click", function() {
if (activeNode) {
var text = prompt("Enter new node text:");
activeNode.innerHTML = text;
}
});
// Select the DOM elements for the mind map and the buttons
const mindmap = document.getElementById("mindmap");
const addNodeBtn = document.getElementById("addNode");
const deleteNodeBtn = document.getElementById("deleteNode");
const editNodeBtn = document.getElementById("editNode");
// Define a function to add a new node to the mind map
function addNode() {
// Create a new node element
const node = document.createElement("div");
node.classList.add("node");
node.textContent = "New Node";
// Add the node to the mind map
mindmap.appendChild(node);
}
// Define a function to delete the last node from the mind map
function deleteNode() {
// Find the last child node of the mind map and remove it
const lastNode = mindmap.lastChild;
if (lastNode) {
mindmap.removeChild(lastNode);
}
}
// Define a function to edit the text content of the last node in the mind map
function editNode() {
// Find the last child node of the mind map and prompt the user to enter new text content
const lastNode = mindmap.lastChild;
if (lastNode) {
const newText = prompt("Enter new text for the node", lastNode.textContent);
if (newText) {
lastNode.textContent = newText;
}
}
}
// Add event listeners to the buttons to trigger the corresponding functions when clicked
addNodeBtn.addEventListener("click", addNode);
deleteNodeBtn.addEventListener("click", deleteNode);
editNodeBtn.addEventListener("click", editNode);