shriram/homepage.html

## homepage.html
<!DOCTYPE html>
<!-- Credits: mostly written by GPT-4. -->
<html>
<head>
    <title>Quick Items</title>
    <style>
        /* Add your CSS styles here */
        body {
            font-family: Arial, sans-serif;
        }
        #itemList {
            margin-top: 5px;
            margin-bottom: 10px;
        }
        .list-item {
            display: flex;
            margin-bottom: 10px;
        }
        .list-item input[type="checkbox"] {
            margin-right: 10px;
        }
	#itemInput {
	    width: 60ch; /* Width approximately for 60 characters */
	    height: 5em; /* Height for 5 rows */
	}
    </style>
    <!-- Include marked.js from CDN for Markdown parsing -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <h2>Quick Items</h2>
    <div id="itemList">
        <!-- List items will appear here -->
    </div>
    <textarea id="itemInput" width="40" height="5" placeholder="Enter new item (Markdown)"></textarea>
    <button onclick="addItem()">Add Item</button>

    <script>
        // Load items from local storage
        window.onload = function() {
            loadItems();
        };

        function addItem() {
            var input = document.getElementById("itemInput");
            var newItem = input.value.trim();

            if (newItem) {
                // Parse Markdown to HTML
                var htmlContent = marked.parse(newItem);

                // Add item to the list
                addItemToList(htmlContent);

                // Save items to local storage
                saveItems();

                // Clear the input field
                input.value = "";
            }
        }

        function addItemToList(itemMarkdown) {
            var list = document.getElementById("itemList");
            var div = document.createElement("div");
            div.className = 'list-item';
            div.setAttribute('data-markdown', itemMarkdown);

            var checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.onclick = function() { removeItem(this); };

            div.appendChild(checkbox);
	    var itemHtml = marked.parse(itemMarkdown);
	    div.insertAdjacentHTML('beforeend', "\n" + itemHtml + "\n");

            list.appendChild(div);
        }

        function removeItem(checkbox) {
            // Remove the list item
            checkbox.parentElement.remove();

            // Save the updated list to local storage
            saveItems();
        }

	function saveItems() {
	    var items = [];
	    document.querySelectorAll("#itemList .list-item").forEach(function(div) {
		items.push(div.getAttribute('data-markdown'));
//		items.push(div.textContent.trim());
	    });
	    localStorage.setItem("homepageItems", JSON.stringify(items));
	}

	function loadItems() {
	    var savedItems = localStorage.getItem("homepageItems");
	    if (savedItems) {
		var items = JSON.parse(savedItems);
		items.forEach(function(item) {
		    addItemToList(item);
		});
	    }
	}

    </script>
</body>
</html>
	<!DOCTYPE html>
	<!-- Credits: mostly written by GPT-4. -->
	<html>
	<head>
	<title>Quick Items</title>
	<style>
	/* Add your CSS styles here */
	body {
	font-family: Arial, sans-serif;
	}
	#itemList {
	margin-top: 5px;
	margin-bottom: 10px;
	}
	.list-item {
	display: flex;
	margin-bottom: 10px;
	}
	.list-item input[type="checkbox"] {
	margin-right: 10px;
	}
	#itemInput {
	width: 60ch; /* Width approximately for 60 characters */
	height: 5em; /* Height for 5 rows */
	}
	</style>
	<!-- Include marked.js from CDN for Markdown parsing -->
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	</head>
	<body>
	<h2>Quick Items</h2>
	<div id="itemList">
	<!-- List items will appear here -->
	</div>
	<textarea id="itemInput" width="40" height="5" placeholder="Enter new item (Markdown)"></textarea>
	<button onclick="addItem()">Add Item</button>

	<script>
	// Load items from local storage
	window.onload = function() {
	loadItems();
	};

	function addItem() {
	var input = document.getElementById("itemInput");
	var newItem = input.value.trim();

	if (newItem) {
	// Parse Markdown to HTML
	var htmlContent = marked.parse(newItem);

	// Add item to the list
	addItemToList(htmlContent);

	// Save items to local storage
	saveItems();

	// Clear the input field
	input.value = "";
	}
	}

	function addItemToList(itemMarkdown) {
	var list = document.getElementById("itemList");
	var div = document.createElement("div");
	div.className = 'list-item';
	div.setAttribute('data-markdown', itemMarkdown);

	var checkbox = document.createElement("input");
	checkbox.type = "checkbox";
	checkbox.onclick = function() { removeItem(this); };

	div.appendChild(checkbox);
	var itemHtml = marked.parse(itemMarkdown);
	div.insertAdjacentHTML('beforeend', "\n" + itemHtml + "\n");

	list.appendChild(div);
	}

	function removeItem(checkbox) {
	// Remove the list item
	checkbox.parentElement.remove();

	// Save the updated list to local storage
	saveItems();
	}

	function saveItems() {
	var items = [];
	document.querySelectorAll("#itemList .list-item").forEach(function(div) {
	items.push(div.getAttribute('data-markdown'));
	// items.push(div.textContent.trim());
	});
	localStorage.setItem("homepageItems", JSON.stringify(items));
	}

	function loadItems() {
	var savedItems = localStorage.getItem("homepageItems");
	if (savedItems) {
	var items = JSON.parse(savedItems);
	items.forEach(function(item) {
	addItemToList(item);
	});
	}
	}

	</script>
	</body>
	</html>