Untitled

const fs = require('fs');
const marked = require('marked');

function generateForm() {
  try {
    // Read the Markdown file
    const mdText = fs.readFileSync('contact-form.md', 'utf8');

    // Process the form and generate HTML
    const htmlForm = processForm(mdText);

    // Read the CSS file
    const cssStyles = fs.readFileSync('styles.css', 'utf8');

    // Write the HTML form with styles to an 'index.html' file
    fs.writeFileSync('index.html', generateHTML(htmlForm, cssStyles));

    console.log('Form HTML generated successfully as index.html!');
  } catch (error) {
    console.error('Error:', error.message);
  }
}

function processForm(mdText) {
  const tokens = marked.lexer(mdText);
  let formHtml = '<form>';

  tokens.forEach(token => {
    if (token.type === 'heading' && token.depth === 2) {
      // Process form sections
      formHtml += `<h2>${token.text}</h2>`;
      formHtml += '<ul>';
    } else if (token.type === 'list_item_start') {
      // Process form fields
      formHtml += '<li>';
    } else if (token.type === 'text' && token.text.trim() !== '') {
      // Extract field label and properties
      const [labelText, inputProperties] = token.text.split(':');
      const [fieldName, fieldType, fieldRequired] = labelText.trim().split(/\s+/);
      const inputType = (fieldType && fieldType.replace(/\([^)]*\)/, '')) || 'text'; // Extract type from "text(required)" format
      const inputRequired = fieldRequired === 'required';

      // Create form input element
      formHtml += `<label>${fieldName}</label>`;

      if (inputType === 'textarea') {
        formHtml += `<textarea name="${fieldName.toLowerCase()}" placeholder="${fieldName}" ${inputRequired ? 'required' : ''}></textarea>`;
      } else if (inputType === 'select') {
        const options = inputProperties.split(',').map(option => option.trim());
        formHtml += `<select name="${fieldName.toLowerCase()}" ${inputRequired ? 'required' : ''}>`;
        options.forEach(option => {
          formHtml += `<option value="${option}">${option}</option>`;
        });
        formHtml += '</select>';
      } else if (inputType === 'checkbox') {
        formHtml += `<input type="checkbox" name="${fieldName.toLowerCase()}">${fieldName}`;
      } else if (inputType === 'file') {
        formHtml += `<input type="file" name="${fieldName.toLowerCase()}" ${inputRequired ? 'required' : ''}>`;
      } else {
        formHtml += `<input type="${inputType}" name="${fieldName.toLowerCase()}" placeholder="${fieldName}" ${inputRequired ? 'required' : ''}>`;
      }
    } else if (token.type === 'list_item_end') {
      // Close form field
      formHtml += '</li>';
    } else if (token.type === 'bullet_list_end') {
      // Close form section
      formHtml += '</ul>';
    }
  });

  formHtml += '<button type="submit">Submit</button>';
  formHtml += '</form>';

  return formHtml;
}

function generateHTML(formContent, cssStyles) {
  return `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
      body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      }

      ${cssStyles}
    </style>
  </head>
  <body>
    ${formContent}
  </body>
  </html>`;
}

generateForm();
Editor is loading...