Spaces:

Imran607
/

codecanvas-figma-to-fullstack-wizardry

Running

codecanvas-figma-to-fullstack-wizardry / script.js

can u convert figma design to code? with front-end and backend?

4ccea17 verified about 1 year ago

2.55 kB

// Shared JavaScript for CodeCanvas
// Initialize tooltips for Feather icons
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // Mobile menu toggle (will be used in navbar component)
    window.toggleMobileMenu = function() {
        const menu = document.getElementById('mobile-menu');
        menu.classList.toggle('hidden');
    };

    // Course card hover effects
    const courseCards = document.querySelectorAll('.course-card');
    courseCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.classList.add('shadow-lg');
        });
        card.addEventListener('mouseleave', () => {
            card.classList.remove('shadow-lg');
        });
    });

    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fadeIn');
            }
        });
    }, observerOptions);

    document.querySelectorAll('.animate-on-scroll').forEach(element => {
        observer.observe(element);
    });
});
// Figma API integration
async function importFigmaDesign(fileId, nodeIds) {
  try {
    const response = await fetch('/api/figma/import', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ fileId, nodeIds })
    });
    
    const data = await response.json();
    if (data.success) {
      return data;
    } else {
      throw new Error(data.error || 'Failed to import design');
    }
  } catch (error) {
    console.error('Figma import failed:', error);
    return { success: false, error: error.message };
  }
}
try {
        const response = await fetch('https://api.example.com/courses/featured');
        const data = await response.json();
        // Process and display courses
    } catch (error) {
        console.error('Error fetching courses:', error);
    }
}

// Initialize when page loads
window.onload = function() {
    feather.replace();
    if (window.location.pathname === '/') {
        fetchFeaturedCourses();
    }
};


	// Shared JavaScript for CodeCanvas
	// Initialize tooltips for Feather icons
	document.addEventListener('DOMContentLoaded', function() {
	// Smooth scroll for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	});
	});

	// Mobile menu toggle (will be used in navbar component)
	window.toggleMobileMenu = function() {
	const menu = document.getElementById('mobile-menu');
	menu.classList.toggle('hidden');
	};

	// Course card hover effects
	const courseCards = document.querySelectorAll('.course-card');
	courseCards.forEach(card => {
	card.addEventListener('mouseenter', () => {
	card.classList.add('shadow-lg');
	});
	card.addEventListener('mouseleave', () => {
	card.classList.remove('shadow-lg');
	});
	});

	// Intersection Observer for animations
	const observerOptions = {
	threshold: 0.1
	};

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('animate-fadeIn');
	}
	});
	}, observerOptions);

	document.querySelectorAll('.animate-on-scroll').forEach(element => {
	observer.observe(element);
	});
	});
	// Figma API integration
	async function importFigmaDesign(fileId, nodeIds) {
	try {
	const response = await fetch('/api/figma/import', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({ fileId, nodeIds })
	});

	const data = await response.json();
	if (data.success) {
	return data;
	} else {
	throw new Error(data.error \|\| 'Failed to import design');
	}
	} catch (error) {
	console.error('Figma import failed:', error);
	return { success: false, error: error.message };
	}
	}
	try {
	const response = await fetch('https://api.example.com/courses/featured');
	const data = await response.json();
	// Process and display courses
	} catch (error) {
	console.error('Error fetching courses:', error);
	}
	}

	// Initialize when page loads
	window.onload = function() {
	feather.replace();
	if (window.location.pathname === '/') {
	fetchFeaturedCourses();
	}
	};