License Plate Possibility Generator

{"name":"License Plate Possibility Generator","description":"Create a fun and interactive tool that transforms any word into a license plate format! Users can input their favorite words and customize how letters are substituted with numbers, making it easy to see their ideas come to life. With options to modify substitutions, this generator ensures every plate is personal and unique!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-03-12T18:52:30.759798Z","updated_at":"2025-03-12T18:52:30.759807Z","user_id":97,"status":"PRIVATE","parent_id":null,"id":6171,"user":{"photo":null,"email":"leobm365@gmail.com","recess_id":"e4690172-2707-46c3-8bcb-1a2b76e418e9","created_at":"2024-05-02T18:14:08.971561Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"super_kamin","id":97,"password_hash":"$2b$12$PMJB58N8WLDuLopyknSp6.czfqNoUg9tTH9bQqK.0xzUbXRKoCWEW","updated_at":"2024-05-02T18:14:08.971564Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let backOfCar;\n\nfunction preload() {\n backOfCar = loadImage(\"@asset('backOfCar')\"); // Load the image asset\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n}\n\nfunction draw() {\n // Draw the image and maintain its aspect ratio\n const imgWidth = backOfCar.width;\n const imgHeight = backOfCar.height;\n const aspectRatio = imgWidth / imgHeight;\n\n // Set the width of the image to fit the canvas\n const newWidth = windowWidth;\n const newHeight = windowWidth / aspectRatio;\n\n image(backOfCar, 0, 0, newWidth, newHeight); // Draw the image without stretching\n}\n\nfunction closePopup() {\n document.getElementById('popup').style.display = 'none'; // Hide the pop-up when closed\n}\n\nfunction toggleCheckbox(checkboxId, otherCheckboxIds) {\n const checkbox = document.getElementById(checkboxId);\n\n if (checkbox.checked) {\n // If the current checkbox is checked, uncheck the others\n otherCheckboxIds.forEach(id => {\n document.getElementById(id).checked = false;\n });\n }\n}\n\nfunction convertCharToNumber(char) {\n const isIto1Checked = document.getElementById('checkbox_I_to_1').checked;\n const isLto1Checked = document.getElementById('checkbox_L_to_1').checked;\n const isZto2Checked = document.getElementById('checkbox_Z_to_2').checked;\n const isEto3Checked = document.getElementById('checkbox_E_to_3').checked;\n const isBto3Checked = document.getElementById('checkbox_B_to_3').checked;\n const isAto4Checked = document.getElementById('checkbox_A_to_4').checked;\n const isSto5Checked = document.getElementById('checkbox_S_to_5').checked;\n const isGto6Checked = document.getElementById('checkbox_G_to_6').checked;\n const isBto6Checked = document.getElementById('checkbox_B_to_6').checked;\n const isBto8Checked = document.getElementById('checkbox_B_to_8').checked;\n const isTto7Checked = document.getElementById('checkbox_T_to_7').checked;\n const isLto7Checked = document.getElementById('checkbox_L_to_7').checked;\n const isYto7Checked = document.getElementById('checkbox_Y_to_7').checked;\n const isPto9Checked = document.getElementById('checkbox_P_to_9').checked;\n const isEto9Checked = document.getElementById('checkbox_E_to_9').checked;\n const isoChecked = document.getElementById('checkbox_O_to_0').checked;\n const isDto0Checked = document.getElementById('checkbox_D_to_0').checked;\n\n if (isIto1Checked && char.toUpperCase() === 'I') return '1';\n if (isLto1Checked && char.toUpperCase() === 'L') return '1';\n if (isZto2Checked && char.toUpperCase() === 'Z') return '2';\n if (isEto3Checked && char.toUpperCase() === 'E') return '3';\n if (isBto3Checked && char.toUpperCase() === 'B') return '3';\n if (isAto4Checked && char.toUpperCase() === 'A') return '4';\n if (isSto5Checked && char.toUpperCase() === 'S') return '5';\n if (isGto6Checked && char.toUpperCase() === 'G') return '6';\n if (isBto6Checked && char.toUpperCase() === 'B') return '6';\n if (isTto7Checked && char.toUpperCase() === 'T') return '7';\n if (isLto7Checked && char.toUpperCase() === 'L') return '7';\n if (isYto7Checked && char.toUpperCase() === 'Y') return '7';\n if (isPto9Checked && char.toUpperCase() === 'P') return '9';\n if (isEto9Checked && char.toUpperCase() === 'E') return '9';\n if (isoChecked && char.toUpperCase() === 'O') return '0';\n if (isDto0Checked && char.toUpperCase() === 'D') return '0';\n\n return null; // Return null if no conversion is possible\n}\n\nfunction selectAllCheckboxes() {\n // Define IDs of checkboxes to exclude\n const excludedCheckboxes = ['checkbox_L_to_7', 'checkbox_B_to_3', 'checkbox_B_to_6', 'checkbox_E_to_9'];\n\n // Get all the checkboxes in the container\n const checkboxes = document.querySelectorAll('#checkboxContainer input[type=\"checkbox\"]');\n\n // Iterate over all checkboxes and select them if they are not in the excluded list\n checkboxes.forEach(checkbox => {\n if (!excludedCheckboxes.includes(checkbox.id)) {\n checkbox.checked = true;\n } else {\n checkbox.checked = false; // Ensure excluded checkboxes are unchecked\n }\n });\n}\n\nfunction filterInputAndWarn() {\n const inputElement = document.getElementById('wordInput');\n const warningMessage = document.querySelector('.limit-message');\n const filteredValue = inputElement.value.replace(/[^a-zA-Z]/g, ''); // Allow only letters\n\n if (inputElement.value !== filteredValue) {\n inputElement.value = filteredValue; // Filter out non-letter characters\n flashWarning(warningMessage, 'Only letters are allowed!');\n }\n}\n\nfunction flashWarning(element, message) {\n element.textContent = message;\n element.style.color = 'red'; // Change text color to red for warning\n setTimeout(() => {\n element.style.color = '#555'; // Change back to original color\n element.textContent = 'Must be exactly 8 characters. Only letters are allowed!';\n }, 1000); // Flash for 1 second\n}\n\nfunction checkInputLength() {\n const input = document.getElementById('wordInput').value;\n const button = document.getElementById('generateButton');\n\n // Enable button only if the input length is exactly 8 and consists only of letters\n const isValidLength = input.length === 8;\n const isOnlyLetters = /^[a-zA-Z]+$/.test(input);\n\n button.disabled = !(isValidLength && isOnlyLetters);\n}\n\nfunction generateLicensePlate() {\n // Get the input word and pattern\n const wordInput = document.getElementById('wordInput').value;\n const pattern = 'lllnlnnn'; // Fixed pattern for this example\n\n // Initialize the license plate result\n let licensePlate = '';\n let errorMessages = [];\n\n // Loop through each character in the input word up to the pattern length\n for (let i = 0; i < wordInput.length && i < pattern.length; i++) {\n const char = wordInput[i];\n const patternChar = pattern[i];\n\n if (patternChar === 'l') {\n // Keep the letter as is\n licensePlate += char;\n } else if (patternChar === 'n') {\n let converted = convertCharToNumber(char);\n if (converted) {\n licensePlate += converted; // Add converted number\n } else {\n licensePlate += '❌'; // Add X emoji if no conversion possible\n errorMessages.push(`Cannot convert '${char}' at position ${i + 1}`);\n }\n }\n }\n\n // If the word is longer than the pattern, add a message\n if (wordInput.length > pattern.length) {\n errorMessages.push('The word is too long for the pattern.');\n }\n\n // Display the generated license plate and any error messages in the pop-up\n document.getElementById('popupText').textContent = licensePlate;\n document.getElementById('popupProblems').innerHTML = errorMessages.length > 0 ? errorMessages.join('
') : 'None';\n \n document.getElementById('popup').style.display = 'block'; // Show the pop-up\n}\n\n","style.css":"body {\n margin: 0;\n}\n\n/* style.css */\nbutton {\n padding: 10px 15px;\n /* Add padding for better touch area */\n background-color: #007BFF;\n /* Blue background */\n color: white;\n /* White text */\n border: none;\n /* Remove border */\n border-radius: 5px;\n /* Rounded corners */\n cursor: pointer;\n /* Pointer cursor on hover */\n transition: background-color 0.3s;\n /* Smooth transition */\n}\n\n/* style.css */\nbody {\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n font-family: Arial, sans-serif;\n font-size: 2em;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n background-color: white;\n color: black;\n padding: 5px;\n}\n\ncanvas {\n display: block;\n}\n\n#checkboxContainer {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n margin: 20px;\n}\n\ninput[type=\"text\"] {\n padding: 10px;\n margin: 10px 0;\n border: 2px solid #007BFF;\n border-radius: 5px;\n width: 200px;\n transition: border-color 0.3s;\n font-family: 'Courier New', Courier, monospace;\n /* Updated to monospaced font */\n font-weight: bold;\n /* Make input text bold */\n}\n\ninput[type=\"text\"]:focus {\n border-color: #0056b3;\n outline: none;\n}\n\nbutton {\n padding: 10px 15px;\n background-color: #007BFF;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n font-family: 'Courier New', Courier, monospace;\n /* Updated to monospaced font */\n font-weight: bold;\n /* Make button text bold */\n}\n\n.limit-message {\n color: #555;\n font-size: 14px;\n margin-top: 5px;\n text-align: center;\n font-family: 'Courier New', Courier, monospace;\n /* Updated to monospaced font */\n font-weight: bold;\n /* Make limit message text bold */\n}\n\n#popup {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: white;\n border: 1px solid black;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n font-family: 'Courier New', Courier, monospace;\n /* Updated to monospaced font */\n font-weight: bold;\n /* Make popup text bold */\n}\n\nbutton:hover {\n background-color: #0056b3;\n}\n\nbutton:disabled {\n background-color: #b0d4ff;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* style.css */\n#popup {\n display: none;\n position: absolute;\n top: 30%;\n /* Adjust this value to move the popup vertically */\n left: 50%;\n /* Center horizontally */\n transform: translate(-50%, -50%);\n /* Center the element */\n background: white;\n border: 1px solid black;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n font-family: 'Courier New', Courier, monospace;\n /* Updated to monospaced font */\n font-weight: bold;\n /* Make popup text bold */\n text-align: center;\n /* Center text in the popup */\n overflow: hidden;\n /* Ensure no overflow */\n}","index.html":"\n\n\n\n\n \n \n License Plate Possibility Generator\n \n \n\n\n\n \n

\n 1 = I\n 1 = L\n 7 = L\n 7 = T\n 2 = Z\n 3 = B\n 6 = B\n 8 = B\n 4 = A\n 5 = S\n 6 = G\n 7 = Y\n 9 = P\n 3 = E\n 9 = E\n 0 = O\n 0 = D\n

\n \n

Must be exactly 8 characters. Only letters are allowed!

\n \n\n \n \n\n \n\n\n"},"chat_history":[{"project_id":6171,"sender":"human","message":"can you please separate the result text and the car img so later we can do change easier","deleted":0,"created_at":"2025-03-16T20:28:27.527417Z","output_tokens":null,"code_id":217459,"input_tokens":null,"id":117484},{"project_id":6171,"sender":"ai","message":"Certainly! We can separate the result text and the car image in the pop-up to make it easier to modify them individually later. Let's update the code to achieve this separation.\n\nFirst, let's update the HTML to have separate containers for the image and the text.\n\n```html\n\n\n\n\n\n \n \n License Plate Possibility Generator\n \n \n\n\n\n \n

\n 1 = I\n 1 = L\n 7 = L\n 7 = T\n 2 = Z\n 3 = B\n 6 = B\n 8 = B\n 4 = A\n 5 = S\n 6 = G\n 7 = Y\n 9 = P\n 3 = E\n 9 = E\n 0 = O\n 0 = D\n

\n \n

Must be exactly 8 characters. Only letters are allowed!

\n \n\n \n \n\n \n\n\n\n```\n\nNext, let's update the JavaScript to insert the text into the correct HTML elements.\n\n```javascript\n// script.js\nfunction generateLicensePlate() {\n // Get the input word and pattern\n const wordInput = document.getElementById('wordInput').value;\n const pattern = 'lllnlnnn'; // Fixed pattern for this example\n\n // Initialize the license plate result\n let licensePlate = '';\n let errorMessages = [];\n\n // Loop through each character in the input word up to the pattern length\n for (let i = 0; i < wordInput.length && i < pattern.length; i++) {\n const char = wordInput[i];\n const patternChar = pattern[i];\n\n if (patternChar === 'l') {\n // Keep the letter as is\n licensePlate += char;\n } else if (patternChar === 'n') {\n let converted = convertCharToNumber(char);\n if (converted) {\n licensePlate += converted; // Add converted number\n } else {\n licensePlate += '❌'; // Add X emoji if no conversion possible\n errorMessages.push(`Cannot convert '${char}' at position ${i + 1}`);\n }\n }\n }\n\n // If the word is longer than the pattern, add a message\n if (wordInput.length > pattern.length) {\n errorMessages.push('The word is too long for the pattern.');\n }\n\n // Display the generated license plate and any error messages in the pop-up\n document.getElementById('popupText').textContent = licensePlate;\n document.getElementById('popupProblems').innerHTML = errorMessages.length > 0 ? errorMessages.join('
') : 'None';\n \n document.getElementById('popup').style.display = 'block'; // Show the pop-up\n}\n```\n\n### How It Works:\n- **HTML Updates**: The HTML now includes separate `

` elements for the image and text, making it easier to style or modify them independently.\n- **JavaScript Updates**: The `generateLicensePlate` function updates the text content in the designated HTML elements for the license plate and problems.\n\nWould you like to make any further changes or modifications?","deleted":0,"created_at":"2025-03-16T20:28:27.557238Z","output_tokens":1408,"code_id":217459,"input_tokens":6056,"id":117485}],"assets":[{"cloudinary_id":"gy3mzozdwfgldfnqjnsv","name":"backOfCar","deleted":false,"id":61278,"created_at":"2025-03-16T19:45:57.919956Z","project_id":6171,"resource_type":"image"}],"messages_sent":63,"comments":[],"steps":[]}