syafiqfaiz · January 27, 2025 13:51
diff --git a/dom_example.html b/dom_example.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript DOM Manipulation Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .highlight {
            background-color: yellow;
        }
        ul {
            padding: 0;
        }
        li {
            list-style: none;
            margin: 5px 0;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .completed {
            text-decoration: line-through;
            color: gray;
        }
    </style>
 </head>
 <body>
    <h1>JavaScript DOM Manipulation</h1>

    <section id="text-demo">
        <h2>Change Text Example</h2>
        <p id="text">This is the original text.</p>
        <button id="changeText">Change Text</button>
    </section>

    <section id="style-demo">
        <h2>Change Style Example</h2>
        <p id="styleText">Click the button to highlight this text.</p>
        <button id="toggleHighlight">Toggle Highlight</button>
    </section>

    <section id="list-demo">
        <h2>Dynamic List Example</h2>
        <input type="text" id="itemInput" placeholder="Enter new item">
        <button id="addItem">Add Item</button>
        <ul id="itemList"></ul>
    </section>

    <script>
        // Change Text Example
        const changeTextButton = document.getElementById('changeText');
        const textParagraph = document.getElementById('text');

        changeTextButton.addEventListener('click', () => {
            textParagraph.textContent = "The text has been changed!";
        });

        // Change Style Example
        const toggleHighlightButton = document.getElementById('toggleHighlight');
        const styleText = document.getElementById('styleText');

        toggleHighlightButton.addEventListener('click', () => {
            styleText.classList.toggle('highlight');
        });

        // Dynamic List Example
        const addItemButton = document.getElementById('addItem');
        const itemInput = document.getElementById('itemInput');
        const itemList = document.getElementById('itemList');

        addItemButton.addEventListener('click', () => {
            const newItemText = itemInput.value.trim();
            if (newItemText) {
                const listItem = document.createElement('li');
                listItem.textContent = newItemText;

                // Add delete button to each list item
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.style.marginLeft = '10px';
                deleteButton.addEventListener('click', () => {
                    itemList.removeChild(listItem);
                });

                // Add toggle complete feature
                listItem.addEventListener('click', () => {
                    listItem.classList.toggle('completed');
                });

                listItem.appendChild(deleteButton);
                itemList.appendChild(listItem);
                itemInput.value = '';
            }
        });
    </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>JavaScript DOM Manipulation Demo</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}
	.highlight {
	background-color: yellow;
	}
	ul {
	padding: 0;
	}
	li {
	list-style: none;
	margin: 5px 0;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}
	.completed {
	text-decoration: line-through;
	color: gray;
	}
	</style>
	</head>
	<body>
	<h1>JavaScript DOM Manipulation</h1>

	<section id="text-demo">
	<h2>Change Text Example</h2>
	<p id="text">This is the original text.</p>
	<button id="changeText">Change Text</button>
	</section>

	<section id="style-demo">
	<h2>Change Style Example</h2>
	<p id="styleText">Click the button to highlight this text.</p>
	<button id="toggleHighlight">Toggle Highlight</button>
	</section>

	<section id="list-demo">
	<h2>Dynamic List Example</h2>
	<input type="text" id="itemInput" placeholder="Enter new item">
	<button id="addItem">Add Item</button>
	<ul id="itemList"></ul>
	</section>

	<script>
	// Change Text Example
	const changeTextButton = document.getElementById('changeText');
	const textParagraph = document.getElementById('text');

	changeTextButton.addEventListener('click', () => {
	textParagraph.textContent = "The text has been changed!";
	});

	// Change Style Example
	const toggleHighlightButton = document.getElementById('toggleHighlight');
	const styleText = document.getElementById('styleText');

	toggleHighlightButton.addEventListener('click', () => {
	styleText.classList.toggle('highlight');
	});

	// Dynamic List Example
	const addItemButton = document.getElementById('addItem');
	const itemInput = document.getElementById('itemInput');
	const itemList = document.getElementById('itemList');

	addItemButton.addEventListener('click', () => {
	const newItemText = itemInput.value.trim();
	if (newItemText) {
	const listItem = document.createElement('li');
	listItem.textContent = newItemText;

	// Add delete button to each list item
	const deleteButton = document.createElement('button');
	deleteButton.textContent = 'Delete';
	deleteButton.style.marginLeft = '10px';
	deleteButton.addEventListener('click', () => {
	itemList.removeChild(listItem);
	});

	// Add toggle complete feature
	listItem.addEventListener('click', () => {
	listItem.classList.toggle('completed');
	});

	listItem.appendChild(deleteButton);
	itemList.appendChild(listItem);
	itemInput.value = '';
	}
	});
	</script>
	</body>
	</html>