script.js

const API_KEY = "d727cc29acda44c3a813a205e5e875ec";
const url = "https://newsapi.org/v2/everything?q=";

// DOM Elements
const menuBtn = document.querySelector(".menuBtn");
const mobileMenu = document.querySelector(".mobile");
const searchForm = document.getElementById("searchForm");
const searchFormMobile = document.getElementById("searchFormMobile");
const searchInput = document.getElementById("searchInput");
const searchInputMobile = document.getElementById("searchInputMobile");
const backToTopBtn = document.getElementById("back-to-top-btn");
const loadingContainer = document.getElementById("loading");

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
    // Load initial news
    fetchData("cryptocurrency").then(data => {
        renderMain(data.articles);
        hideLoading();
    });

    // Setup event listeners
    setupEventListeners();
});

// Setup all event listeners
function setupEventListeners() {
    // Mobile menu toggle
    menuBtn.addEventListener("click", toggleMobileMenu);
    
    // Search functionality
    searchForm.addEventListener("submit", handleSearch);
    searchFormMobile.addEventListener("submit", handleMobileSearch);
    
    // Back to top button
    window.addEventListener('scroll', toggleBackToTopButton);
    backToTopBtn.addEventListener('click', scrollToTop);
    
    // Close mobile menu when clicking outside
    document.addEventListener('click', function(e) {
        if (!mobileMenu.contains(e.target) && e.target !== menuBtn) {
            mobileMenu.classList.add('hidden');
        }
    });
}

// Toggle mobile menu
function toggleMobileMenu() {
    mobileMenu.classList.toggle("hidden");
    document.body.style.overflow = mobileMenu.classList.contains("hidden") ? 'auto' : 'hidden';
}

// Fetch news data from API
async function fetchData(query) {
    showLoading();
    try {
        const res = await fetch(`${url}${query}&apiKey=${API_KEY}`);
        if (!res.ok) {
            throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);
        }
        const data = await res.json();
        return data;
    } catch (error) {
        // console.error("Error fetching data:", error);
        showError("Failed to load news. Please try again later.");
        return { articles: [] };
    } finally {
        hideLoading();
    }
}

// Handle main search form submission
async function handleSearch(e) {
    e.preventDefault();
    if (!searchInput.value.trim()) return;
    
    const data = await fetchData(searchInput.value);
    renderMain(data.articles);
    searchInput.value = '';
    mobileMenu.classList.add('hidden');
}

// Handle mobile search form submission
async function handleMobileSearch(e) {
    e.preventDefault();
    if (!searchInputMobile.value.trim()) return;
    
    const data = await fetchData(searchInputMobile.value);
    renderMain(data.articles);
    searchInputMobile.value = '';
    mobileMenu.classList.add('hidden');
}

// Render news articles to the page
function renderMain(articles) {
    if (!articles || articles.length === 0) {
        showError("No articles found. Try a different search term.");
        return;
    }

    // Sort articles by published date (newest first)
    articles.sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt));

    let mainHTML = '';
    articles.forEach(article => {
        if (article.urlToImage) {
            mainHTML += `
                <div class="card fade-in">
                    <a href="${article.url}" target="_blank" rel="noopener noreferrer">
                        <img src="${article.urlToImage}" alt="${article.title}" loading="lazy" />
                        <div class="card-content">
                            <h4>${article.title || 'No title available'}</h4>
                            <div class="publishbyDate">
                                <p>${article.source?.name || 'Unknown source'}</p>
                                <span>•</span>
                                <p>${new Date(article.publishedAt).toLocaleDateString()}</p>
                            </div>
                            <div class="desc">
                                ${article.description || 'No description available'}
                            </div>
                        </div>
                    </a>
                </div>
            `;
        }
    });

    document.querySelector("main").innerHTML = mainHTML;
}

// Search function for category buttons
async function Search(query) {
    const data = await fetchData(query);
    renderMain(data.articles);
    mobileMenu.classList.add('hidden');
}

// Show loading spinner
function showLoading() {
    loadingContainer.style.display = 'flex';
}

// Hide loading spinner
function hideLoading() {
    loadingContainer.style.display = 'none';
}

// Show error message
function showError(message) {
    document.querySelector("main").innerHTML = `
        <div class="error-message">
            <p>${message}</p>
        </div>
    `;
}

// Back to top button functionality
function toggleBackToTopButton() {
    if (window.scrollY > 300) {
        backToTopBtn.style.display = 'block';
    } else {
        backToTopBtn.style.display = 'none';
    }
}

function scrollToTop(e) {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

// Typing animation for search placeholder
const typingStrings = ["Bitcoin", "Ethereum", "Blockchain", "Crypto News"];
let currentStringIndex = 0;
let currentCharIndex = 0;
let isDeleting = false;
let typingSpeed = 100;
let deletingSpeed = 60;

function typeAnimation() {
    const currentString = typingStrings[currentStringIndex];
    
    if (isDeleting) {
        if (currentCharIndex > 0) {
            searchInput.placeholder = currentString.substring(0, currentCharIndex - 1);
            currentCharIndex--;
            setTimeout(typeAnimation, deletingSpeed);
        } else {
            isDeleting = false;
            currentStringIndex = (currentStringIndex + 1) % typingStrings.length;
            setTimeout(typeAnimation, typingSpeed);
        }
    } else {
        if (currentCharIndex < currentString.length) {
            searchInput.placeholder = currentString.substring(0, currentCharIndex + 1);
            currentCharIndex++;
            setTimeout(typeAnimation, typingSpeed);
        } else {
            isDeleting = true;
            setTimeout(typeAnimation, 2000); // Pause at end of word
        }
    }
}

// Start typing animation
typeAnimation();