alekrutkowski/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyboard Shortcut Cheatsheet Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">Keyboard Shortcut Cheatsheet Maker</h1>
        <p>&#9432; Use the mouse/touchpad to select, cut, copy, and paste the contents inside the left input field below.</p>
        <div class="grid-container">
            <form id="shortcutForm" class="form-inline">
                <input type="text" id="keys" class="form-control keys-input" placeholder="Enter keys (e.g., Ctrl+C)" required>
                <input type="text" id="description" class="form-control description-input" placeholder="Enter description" required>
                <button type="submit" class="btn btn-primary">Add Shortcut</button>
            </form>
            <table id="cheatsheet" class="table">
                <thead>
                    <tr>
                        <th>Keys</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

## script.js
// script.js
document.getElementById('shortcutForm').addEventListener('submit', function(event) {
    event.preventDefault();

    // Get the input values
    var keys = document.getElementById('keys').value;
    var description = document.getElementById('description').value;

    // Create a new row and cells
    var row = document.createElement('tr');
    var keyCell = document.createElement('td');
    var descCell = document.createElement('td');

    // Use the provided HTML for keys
    keyCell.innerHTML = keys;
    descCell.textContent = description;

    // Append cells to row
    row.appendChild(keyCell);
    row.appendChild(descCell);

    // Append row to the table
    document.querySelector('#cheatsheet tbody').appendChild(row);

    // Clear the input fields
    document.getElementById('keys').value = '';
    document.getElementById('description').value = '';
});

document.getElementById('keys').addEventListener('keydown', function(event) {
    event.preventDefault();  // Prevent default key actions

    let keyName = event.key;  // Key pressed by the user
    let currentValue = this.value;  // Current value in the input field

    // Convert letter keys to uppercase and format all keys
    if (keyName.length === 1) {
        keyName = keyName.toUpperCase();  // Convert letter to uppercase
    }
    keyName = formatKey(keyName);  // Format the key

    // Append formatted key if it's not already included
    if (!currentValue.includes(keyName)) {
        this.value += currentValue ? ' + ' + keyName : keyName;
    }
});

function formatKey(key) {
    // Properly format keys with <kbd> tags
    if (['Control', 'Shift', 'Alt'].includes(key)) {
        switch(key) {
            case 'Control': return '<kbd>Ctrl</kbd>';
            case 'Shift': return '<kbd>Shift</kbd>';
            case 'Alt': return '<kbd>Alt</kbd>';
        }
    } else if (key.startsWith('F') && parseInt(key.substring(1)) <= 12) {
        // Handle function keys
        return `<kbd>${key}</kbd>`;
    } else if (['Backspace', 'Delete', 'Tab', '~'].includes(key)) {
        // Special keys
        switch(key) {
            case 'Backspace': return '<kbd>Backspace</kbd>';
            case 'Delete': return '<kbd>Delete</kbd>';
            case 'Tab': return '<kbd>Tab</kbd>';
            case '~': return '<kbd>~</kbd>';
        }
    } else {
        // Default to wrapping with <kbd> tags
        return `<kbd>${key}</kbd>`;
    }
}

## styles.css
/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
}

.text-center {
    text-align: center;
    margin-bottom: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: 3fr 3fr 1fr; /* Provides more space for inputs */
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.form-inline {
    display: contents;
}

.form-control, .btn {
    padding: 10px;
    font-size: 16px;
    border-radius: 0.25rem;
}

.keys-input {
    grid-column: 1 / 2;
}

.description-input {
    grid-column: 2 / 3;
}

.btn {
    grid-column: 3 / 4;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #0056b3;
}

.table {
    width: 100%;
    grid-column: 1 / 4; /* Spans all columns created for the form */
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    border: 1px solid #dee2e6;
    text-align: left;
}

th {
    background-color: #e9ecef;
}

kbd {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 2px 4px;
    border-radius: 3px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Keyboard Shortcut Cheatsheet Generator</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">
	<h1 class="text-center">Keyboard Shortcut Cheatsheet Maker</h1>
	<p>ⓘ Use the mouse/touchpad to select, cut, copy, and paste the contents inside the left input field below.</p>
	<div class="grid-container">
	<form id="shortcutForm" class="form-inline">
	<input type="text" id="keys" class="form-control keys-input" placeholder="Enter keys (e.g., Ctrl+C)" required>
	<input type="text" id="description" class="form-control description-input" placeholder="Enter description" required>
	<button type="submit" class="btn btn-primary">Add Shortcut</button>
	</form>
	<table id="cheatsheet" class="table">
	<thead>
	<tr>
	<th>Keys</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	// script.js
	document.getElementById('shortcutForm').addEventListener('submit', function(event) {
	event.preventDefault();

	// Get the input values
	var keys = document.getElementById('keys').value;
	var description = document.getElementById('description').value;

	// Create a new row and cells
	var row = document.createElement('tr');
	var keyCell = document.createElement('td');
	var descCell = document.createElement('td');

	// Use the provided HTML for keys
	keyCell.innerHTML = keys;
	descCell.textContent = description;

	// Append cells to row
	row.appendChild(keyCell);
	row.appendChild(descCell);

	// Append row to the table
	document.querySelector('#cheatsheet tbody').appendChild(row);

	// Clear the input fields
	document.getElementById('keys').value = '';
	document.getElementById('description').value = '';
	});

	document.getElementById('keys').addEventListener('keydown', function(event) {
	event.preventDefault(); // Prevent default key actions

	let keyName = event.key; // Key pressed by the user
	let currentValue = this.value; // Current value in the input field

	// Convert letter keys to uppercase and format all keys
	if (keyName.length === 1) {
	keyName = keyName.toUpperCase(); // Convert letter to uppercase
	}
	keyName = formatKey(keyName); // Format the key

	// Append formatted key if it's not already included
	if (!currentValue.includes(keyName)) {
	this.value += currentValue ? ' + ' + keyName : keyName;
	}
	});

	function formatKey(key) {
	// Properly format keys with <kbd> tags
	if (['Control', 'Shift', 'Alt'].includes(key)) {
	switch(key) {
	case 'Control': return '<kbd>Ctrl</kbd>';
	case 'Shift': return '<kbd>Shift</kbd>';
	case 'Alt': return '<kbd>Alt</kbd>';
	}
	} else if (key.startsWith('F') && parseInt(key.substring(1)) <= 12) {
	// Handle function keys
	return `<kbd>${key}</kbd>`;
	} else if (['Backspace', 'Delete', 'Tab', '~'].includes(key)) {
	// Special keys
	switch(key) {
	case 'Backspace': return '<kbd>Backspace</kbd>';
	case 'Delete': return '<kbd>Delete</kbd>';
	case 'Tab': return '<kbd>Tab</kbd>';
	case '~': return '<kbd>~</kbd>';
	}
	} else {
	// Default to wrapping with <kbd> tags
	return `<kbd>${key}</kbd>`;
	}
	}
	/* styles.css */
	body {
	font-family: Arial, sans-serif;
	background-color: #f8f9fa;
	}

	.container {
	width: 80%;
	margin: 20px auto;
	padding: 20px;
	}

	.text-center {
	text-align: center;
	margin-bottom: 20px;
	}

	.grid-container {
	display: grid;
	grid-template-columns: 3fr 3fr 1fr; /* Provides more space for inputs */
	gap: 10px;
	align-items: center;
	justify-content: center;
	}

	.form-inline {
	display: contents;
	}

	.form-control, .btn {
	padding: 10px;
	font-size: 16px;
	border-radius: 0.25rem;
	}

	.keys-input {
	grid-column: 1 / 2;
	}

	.description-input {
	grid-column: 2 / 3;
	}

	.btn {
	grid-column: 3 / 4;
	background-color: #007bff;
	color: white;
	border: none;
	cursor: pointer;
	}

	.btn:hover {
	background-color: #0056b3;
	}

	.table {
	width: 100%;
	grid-column: 1 / 4; /* Spans all columns created for the form */
	border-collapse: collapse;
	}

	th, td {
	padding: 12px;
	border: 1px solid #dee2e6;
	text-align: left;
	}

	th {
	background-color: #e9ecef;
	}

	kbd {
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	padding: 2px 4px;
	border-radius: 3px;
	}