هذا الكود عديم الفائده لان اضهار النتائج في خانة answer1 دائما فيه مشاكل
لحسن الحض wix توفر custom element التي يمكن كتابة كود منفصل فيها لاضهار النتائج بتصميم ومظهر 
لذلك اريدك ان تفصل الكود وتربطه 
اعني ان في الكود الاصلي الذي يجمع المعلومات الخاصه بالعمر باستخدام ارشادات wix اجعله يعطي المعلومات لل custom element حتى يقوم بالحساب 
مع الاخذ بعين الاعتبار تصميم خاص وجيد ويوضع النتآئج بصوره صحيحه ويستخدم نفس الخطوط والالوان للخلفيات والخطوط التي يستخدمها الموقع في الكود الاصلي 
الكود الكامل :
// Import necessary Wix modules
import wixData from 'wix-data';
import wixWindow from 'wix-window';

// When the page is ready
$w.onReady(function () {
    // Initially hide #section7
    $w("#section7").collapse();
    
    // Populate Year Dropdown
    populateYearDropdown();

    // Populate Month Dropdown
    populateMonthDropdown();

    // Set up event listeners for the dropdowns
    $w("#dropdown1year, #dropdown2mounth").onChange(updateDays);

    // Handle the "Calculate" button click
    $w("#calcnow").onClick(handleCalculate);

    // Initial update of days dropdown
    updateDays();
});

/**
 * Populates the Year Dropdown with options from current year down to 1900.
 */
function populateYearDropdown() {
    const currentYear = new Date().getFullYear();
    const yearOptions = [];

    for (let year = currentYear; year >= 1900; year--) {
        yearOptions.push({ label: year.toString(), value: year.toString() });
    }

    $w("#dropdown1year").options = yearOptions;
}

/**
 * Populates the Month Dropdown with month names and corresponding values.
 */
function populateMonthDropdown() {
    const monthOptions = [
        { label: "January - 1", value: "1" },
        { label: "February - 2", value: "2" },
        { label: "March - 3", value: "3" },
        { label: "April - 4", value: "4" },
        { label: "May - 5", value: "5" },
        { label: "June - 6", value: "6" },
        { label: "July - 7", value: "7" },
        { label: "August - 8", value: "8" },
        { label: "September - 9", value: "9" },
        { label: "October - 10", value: "10" },
        { label: "November - 11", value: "11" },
        { label: "December - 12", value: "12" }
    ];

    $w("#dropdown2mounth").options = monthOptions;
}

/**
 * Updates the Days Dropdown based on selected Year and Month.
 */
function updateDays() {
    const birthYear = parseInt($w("#dropdown1year").value);
    const birthMonth = parseInt($w("#dropdown2mounth").value);

    if (!birthYear || !birthMonth) {
        $w("#dropdown3day").options = [];
        return;
    }

    const lastDay = new Date(birthYear, birthMonth, 0).getDate();
    const daysOptions = [];

    for (let day = 1; day <= lastDay; day++) {
        daysOptions.push({ label: day.toString(), value: day.toString() });
    }

    $w("#dropdown3day").options = daysOptions;
}

/**
 * Handles the Calculate button click event.
 */
function handleCalculate() {
    const birthYear = parseInt($w("#dropdown1year").value);
    const birthMonth = parseInt($w("#dropdown2mounth").value) - 1; // JavaScript months are 0-based
    const birthDay = parseInt($w("#dropdown3day").value);

    if (!birthYear || isNaN(birthMonth) || !birthDay) {
        console.error("Please select all date fields");
        return;
    }

    const today = new Date();
    const birthDate = new Date(birthYear, birthMonth, birthDay);
    
    let years = today.getFullYear() - birthDate.getFullYear();
    let months = today.getMonth() - birthDate.getMonth();
    let days = today.getDate() - birthDate.getDate();

    if (days < 0) {
        const lastMonthDate = new Date(today.getFullYear(), today.getMonth(), 0);
        days = lastMonthDate.getDate() + days;
        months--;
    }

    if (months < 0) {
        months += 12;
        years--;
    }

    const totalMonths = years * 12 + months;
    const totalDays = Math.floor((today - birthDate) / (1000 * 60 * 60 * 24));
    const totalWeeks = Math.floor(totalDays / 7);
    const daysToNextBirthday = calculateDaysToNextBirthday(birthDate, today);
    const nextBirthdayDate = new Date(today.getFullYear(), birthMonth, birthDay);
    const nextBirthdayDay = nextBirthdayDate.toLocaleDateString('en-US', { weekday: 'long' });

    const zodiacSign = getZodiacSign(birthDay, birthMonth + 1);
    const birthDayOfWeek = birthDate.toLocaleDateString('en-US', { weekday: 'long' });
    const birthSeason = getSeason(birthMonth + 1);
    const birthSeasonEmoji = getSeasonEmoji(birthSeason);

    $w("#answer1").html = generateHTMLContent({
        years,
        months,
        days,
        totalMonths,
        totalWeeks,
        totalDays,
        hours: totalDays * 24,
        daysToNextBirthday,
        nextBirthdayDay,
        zodiacSign,
        birthDayOfWeek,
        birthSeason,
        birthSeasonEmoji
    });

    $w("#section7").expand();
}

/**
 * Generates the HTML content for displaying results.
 */
function generateHTMLContent(data) {
    return `
    <style>
        .age-calculator {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .section {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 25px;
            padding: 25px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .section:hover {
            transform: translateY(-5px);
        }
        
        h1, h2 {
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .main-age {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 20px;
        }
        
        .age-unit {
            flex: 1;
            max-width: 150px;
        }
        
        .age-number {
            font-size: 48px;
            font-weight: bold;
            color: #3498db;
        }
        
        .age-label {
            font-size: 18px;
            color: #7f8c8d;
        }
        
        .timeline {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 20px;
        }
        
        .timeline-item {
            padding: 15px;
            border-radius: 10px;
            background: #f7f9fc;
        }
        
        .timeline-number {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
        }
        
        .birthday-countdown {
            font-size: 36px;
            color: #e67e22;
        }
        
        .next-birthday-day {
            font-size: 20px;
            color: #7f8c8d;
            margin-top: 10px;
        }
        
        .birth-story {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        .story-item {
            flex: 1;
            min-width: 120px;
            max-width: 200px;
        }
        
        .story-emoji {
            font-size: 36px;
            margin-bottom: 10px;
        }
        
        .story-title {
            font-weight: bold;
            color: #2c3e50;
        }
        
        .story-value {
            color: #7f8c8d;
        }
        
        @media (max-width: 600px) {
            .main-age {
                flex-direction: column;
                align-items: center;
            }
            
            .age-unit {
                margin-bottom: 15px;
            }
            
            .birth-story {
                flex-direction: column;
                align-items: center;
            }
            
            .story-item {
                margin-bottom: 20px;
            }
        }
    </style>
    <div class="age-calculator">
        <div class="section">
            <h1>Your Life Journey</h1>
            <div class="main-age">
                <div class="age-unit">
                    <div class="age-number">${data.years}</div>
                    <div class="age-label">Years</div>
                </div>
                <div class="age-unit">
                    <div class="age-number">${data.months}</div>
                    <div class="age-label">Months</div>
                </div>
                <div class="age-unit">
                    <div class="age-number">${data.days}</div>
                    <div class="age-label">Days</div>
                </div>
            </div>
        </div>

        <div class="section">
            <h2>Your Timeline</h2>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-number">${data.totalMonths}</div>
                    <div class="age-label">Total Months</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-number">${data.totalWeeks}</div>
                    <div class="age-label">Total Weeks</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-number">${data.totalDays}</div>
                    <div class="age-label">Total Days</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-number">${data.hours}</div>
                    <div class="age-label">Total Hours</div>
                </div>
            </div>
        </div>

        <div class="section">
            <h2>Next Birthday</h2>
            <div class="birthday-countdown">${data.daysToNextBirthday} Days</div>
            <div class="next-birthday-day">It will be on a ${data.nextBirthdayDay}</div>
        </div>

        <div class="section">
            <h2>Your Birth Story</h2>
            <div class="birth-story">
                <div class="story-item">
                    <div class="story-emoji">${getEmojiFromZodiac(data.zodiacSign)}</div>
                    <div class="story-title">Zodiac Sign</div>
                    <div class="story-value">${data.zodiacSign.split(' ')[0]}</div>
                </div>
                <div class="story-item">
                    <div class="story-emoji">📅</div>
                    <div class="story-title">Born On</div>
                    <div class="story-value">${data.birthDayOfWeek}</div>
                </div>
                <div class="story-item">
                    <div class="story-emoji">${data.birthSeasonEmoji}</div>
                    <div class="story-title">Season</div>
                    <div class="story-value">${data.birthSeason}</div>
                </div>
            </div>
        </div>
    </div>
    `;
}

/**
 * Helper functions
 */
function calculateDaysToNextBirthday(birthDate, today) {
    let nextBirthday = new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate());
    if (nextBirthday < today) {
        nextBirthday.setFullYear(today.getFullYear() + 1);
    }
    nextBirthday.setHours(0,0,0,0);
    today.setHours(0,0,0,0);
    const diffTime = nextBirthday - today;
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}

function getZodiacSign(day, month) {
    const zodiacSigns = [
        { name: "Capricorn", symbol: "♑️", endDay: 19 },
        { name: "Aquarius", symbol: "♒️", endDay: 18 },
        { name: "Pisces", symbol: "♓️", endDay: 20 },
        { name: "Aries", symbol: "♈️", endDay: 19 },
        { name: "Taurus", symbol: "♉️", endDay: 20 },
        { name: "Gemini", symbol: "♊️", endDay: 20 },
        { name: "Cancer", symbol: "♋️", endDay: 22 },
        { name: "Leo", symbol: "♌️", endDay: 22 },
        { name: "Virgo", symbol: "♍️", endDay: 22 },
        { name: "Libra", symbol: "♎️", endDay: 21 },
        { name: "Scorpio", symbol: "♏️", endDay: 21 },
        { name: "Sagittarius", symbol: "♐️", endDay: 21 },
        { name: "Capricorn", symbol: "♑️", endDay: 31 }
    ];

    const index = month - 1;
    if (day > zodiacSigns[index].endDay) {
        return zodiacSigns[(index + 1) % 12].name + " " + zodiacSigns[(index + 1) % 12].symbol;
    } else {
        return zodiacSigns[index].name + " " + zodiacSigns[index].symbol;
    }
}

function getEmojiFromZodiac(zodiacWithSymbol) {
    const parts = zodiacWithSymbol.split(' ');
    return parts.length >= 2 ? parts[1] : "";
}

function getSeason(month) {
    if (month >= 3 && month <= 5) return "Spring";
    if (month >= 6 && month <= 8) return "Summer";
    if (month >= 9 && month <= 11) return "Autumn";
    return "Winter";
}

function getSeasonEmoji(season) {
    const seasonEmojis = {
        "Spring": "🌸",
        "Summer": "☀️",
        "Autumn": "🍁",
        "Winter": "❄️"
    };
    return seasonEmojis[season] || "❓";
}

الكود الافتراضي الموجود في custom element :
const _createClass = (function () {
  function defineProperties(target, props) {
    for (let i = 0; i < props.length; i++) {
      const descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ('value' in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
})();

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError('Cannot call a class as a function');
  }
}

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called",
    );
  }
  return call && (typeof call === 'object' || typeof call === 'function')
    ? call
    : self;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== 'function' && superClass !== null) {
    throw new TypeError(
      'Super expression must either be null or a function, not ' +
        typeof superClass,
    );
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true,
    },
  });
  if (superClass)
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass);
}

// To debug this code, open wixDefaultCustomElement.js in Developer Tools.

const IMAGE_URL = 'https://wix.to/vUBXBKU';
const H2_TEXT = 'This is a Custom Element (Velo)';
const H3_1_TEXT =
  'View its code by selecting its Velo file in the Site Structure.';
const H3_2_TEXT =
  'Explore this code and use it as a reference to create your own element.';
const DEBUG_TEXT =
  "Loading the code for Custom Element 'wix-default-custom-element'. To debug this code, open wixDefaultCustomElement.js in Developer Tools.";

const createImage = function createImage() {
  const imageElement = document.createElement('img');
  imageElement.src = IMAGE_URL;
  imageElement.id = 'wdce-image';
  return imageElement;
};

const createH2 = function createH2() {
  const h2Element = document.createElement('h2');
  h2Element.textContent = H2_TEXT;
  h2Element.id = 'wdce-h2';
  return h2Element;
};

const createH3 = function createH3(id, text) {
  const h3Element = document.createElement('h3');
  h3Element.id = id;
  h3Element.textContent = text;
  return h3Element;
};

const createTextContainer = function createTextContainer() {
  const textContainer = document.createElement('div');
  textContainer.id = 'wdce-text-container';
  textContainer.appendChild(createH2());
  textContainer.appendChild(createH3('wdce-h3-1', H3_1_TEXT));
  textContainer.appendChild(createH3('wdce-h3-2', H3_2_TEXT));
  return textContainer;
};

const createImageContainer = function createImageContainer() {
  const imageContainer = document.createElement('div');
  imageContainer.id = 'wdce-image-container';
  imageContainer.appendChild(createImage());
  return imageContainer;
};

const createStyle = function createStyle() {
  const styleElement = document.createElement('style');
  styleElement.innerHTML =
    "\n    wix-default-custom-element {\n        background-color: #f0f4f7;\n        display: flex;\n        height: 100%;\n        height: -moz-available;\n        height: -webkit-fill-available;\n        width: 100%;\n        justify-content: center;\n      }\n\n    #wdce-image-container {\n        width: 35%;\n        max-width: 165px;\n        display: flex;\n        margin: 0 20px 0 30px;\n        overflow: hidden;\n    }\n\n    #wdce-image {\n        width: 100%;\n        min-width: 100px;\n    }\n\n    #wdce-text-container {\n        display: flex;\n        flex-direction: column;\n        width: 65%;\n        justify-content: center;\n        max-width: 314px;\n        min-width: 200px;\n    }\n\n    #wdce-h2 {\n        font-family: 'HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, メイリオ, meiryo, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, sans-serif',\n        font-size: 16px;\n        font-weight: 500;\n        letter-spacing: 0.89px;\n        color: #32536a;\n        margin: 0 0 16px 0;\n    }\n\n    #wdce-h3-1, #wdce-h3-2 {\n        font-family: 'HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, メイリオ, meiryo, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, sans-serif',\n        font-size: 14px;\n        font-weight: 300;\n        line-height: 1.43;\n        color: #162d3d;\n        margin: 0 0 8px 0;\n    }\n    ";
  return styleElement;
};

const WixDefaultCustomElement = (function (_HTMLElement) {
  _inherits(WixDefaultCustomElement, _HTMLElement);

  // eslint-disable-next-line no-shadow
  function WixDefaultCustomElement() {
    _classCallCheck(this, WixDefaultCustomElement);

    const _this = _possibleConstructorReturn(
      this,
      (
        WixDefaultCustomElement.__proto__ ||
        Object.getPrototypeOf(WixDefaultCustomElement)
      ).call(this),
    );

    // eslint-disable-next-line no-console
    console.log(DEBUG_TEXT);
    return _this;
  }

  _createClass(WixDefaultCustomElement, [
    {
      key: 'connectedCallback',
      value: function connectedCallback() {
        this.appendChild(createStyle());
        this.appendChild(createImageContainer());
        this.appendChild(createTextContainer());
      },
    },
  ]);

  return WixDefaultCustomElement;
})(HTMLElement);

customElements.define('wix-default-custom-element', WixDefaultCustomElement);