Create script.js

script.js

@@ -0,0 +1,263 @@
+const animeData = {
+    "Naruto": { "genres": ["Action", "Adventure", "Fantasy"] },
+    "Death Note": { "genres": ["Mystery", "Psychological", "Supernatural", "Thriller"] },
+    "Attack on Titan": { "genres": ["Action", "Dark Fantasy", "Post-apocalyptic"] },
+    "One Punch Man": { "genres": ["Action", "Comedy", "Superhero"] },
+    "My Hero Academia": { "genres": ["Superhero", "Action", "Comedy"] },
+    "Fullmetal Alchemist: Brotherhood": { "genres": ["Adventure", "Dark Fantasy", "Steampunk"] },
+    "Demon Slayer": { "genres": ["Adventure", "Dark Fantasy", "Martial Arts"] },
+    "Steins;Gate": { "genres": ["Sci-Fi", "Thriller", "Time Travel"] },
+    "Hunter x Hunter": { "genres": ["Adventure", "Fantasy", "Martial Arts"] },
+    "Code Geass": { "genres": ["Mecha", "Alternate History", "Military"] },
+    "Neon Genesis Evangelion": { "genres": ["Psychological", "Science Fiction", "Mecha"] },
+    "Cowboy Bebop": { "genres": ["Space Western", "Science Fiction", "Neo-noir"] },
+    "Gintama": { "genres": ["Action", "Comedy", "Science Fiction"] },
+    "One Piece": { "genres": ["Adventure", "Fantasy", "Comedy"] },
+    "Sword Art Online": { "genres": ["Science Fiction", "Adventure", "Romance"] }
+};
+
+const animeQuotes = [
+    { quote: "I'll take a potato chip... and eat it!", author: "Light Yagami", anime: "Death Note" },
+    { quote: "The only ones who should kill are those who are prepared to be killed.", author: "Lelouch Lamperouge", anime: "Code Geass" },
+    { quote: "People die if they are killed.", author: "Shirou Emiya", anime: "Fate/stay night" },
+    { quote: "I don't want to conquer anything. I just think the guy with the most freedom in this whole ocean... that's the Pirate King!", author: "Monkey D. Luffy", anime: "One Piece" },
+    { quote: "The world isn't perfect. But it's there for us, doing the best it can... that's what makes it so damn beautiful.", author: "Roy Mustang", anime: "Fullmetal Alchemist" },
+    { quote: "If you don't take risks, you can't create a future!", author: "Monkey D. Luffy", anime: "One Piece" },
+    { quote: "Whatever you lose, you'll find it again. But what you throw away you'll never get back.", author: "Himura Kenshin", anime: "Rurouni Kenshin" },
+    { quote: "Fear is not evil. It tells you what your weakness is. And once you know your weakness, you can become stronger as well as kinder.", author: "Gildarts Clive", anime: "Fairy Tail" },
+    { quote: "It's not the face that makes someone a monster; it's the choices they make with their lives.", author: "Naruto Uzumaki", anime: "Naruto" },
+    { quote: "If you don't like your destiny, don't accept it. Instead, have the courage to change it the way you want it to be.", author: "Naruto Uzumaki", anime: "Naruto" }
+];
+
+const quizQuestions = [
+    {
+        question: "How would you describe your personality?",
+        options: ["Energetic and optimistic", "Calm and analytical", "Determined and passionate", "Mysterious and aloof"]
+    },
+    {
+        question: "What's your ideal way to spend a weekend?",
+        options: ["Training and improving my skills", "Solving complex puzzles or mysteries", "Hanging out with friends", "Exploring new places"]
+    },
+    {
+        question: "If you had a superpower, what would it be?",
+        options: ["Super strength", "Mind reading", "Elemental control", "Time manipulation"]
+    },
+    {
+        question: "How do you handle conflicts?",
+        options: ["Face them head-on", "Analyze and strategize", "Try to understand all perspectives", "Avoid them if possible"]
+    },
+    {
+        question: "What's your biggest motivation in life?",
+        options: ["Protecting loved ones", "Seeking knowledge", "Achieving personal goals", "Making the world a better place"]
+    },
+    {
+        question: "Which animal best represents you?",
+        options: ["Fox", "Owl", "Lion", "Wolf"]
+    },
+    {
+        question: "What's your preferred fighting style?",
+        options: ["Hand-to-hand combat", "Strategic planning", "Weapons mastery", "Special abilities or magic"]
+    }
+];
+
+const characters = [
+    { name: "Naruto Uzumaki", anime: "Naruto" },
+    { name: "L Lawliet", anime: "Death Note" },
+    { name: "Mikasa Ackerman", anime: "Attack on Titan" },
+    { name: "Spike Spiegel", anime: "Cowboy Bebop" },
+    { name: "Gon Freecss", anime: "Hunter x Hunter" },
+    { name: "Lelouch Lamperouge", anime: "Code Geass" },
+    { name: "Monkey D. Luffy", anime: "One Piece" },
+    { name: "Saitama", anime: "One Punch Man" }
+];
+
+// DOM Elements
+const animeListElement = document.getElementById('animeList');
+const genreListElement = document.getElementById('genreList');
+const recommendBtn = document.getElementById('recommendBtn');
+const randomBtn = document.getElementById('randomBtn');
+const recommendationsElement = document.getElementById('recommendations');
+const quoteText = document.getElementById('quoteText');
+const quoteAuthor = document.getElementById('quoteAuthor');
+const newQuoteBtn = document.getElementById('newQuoteBtn');
+const quizQuestion = document.getElementById('quizQuestion');
+const quizOptions = document.getElementById('quizOptions');
+const quizResult = document.getElementById('quizResult');
+const restartQuizBtn = document.getElementById('restartQuizBtn');
+const quizContainer = document.getElementById('quizContainer');
+
+// State management
+let selectedAnime = new Set();
+let selectedGenres = new Set();
+let currentQuestion = 0;
+let userAnswers = [];
+
+// Utility Functions
+function createItem(text, listType) {
+    const item = document.createElement('div');
+    item.classList.add(`${listType}-item`);
+    item.textContent = text;
+    item.addEventListener('click', () => toggleItem(item, text, listType));
+    return item;
+}
+
+function toggleItem(item, text, listType) {
+    const selectedSet = listType === 'anime' ? selectedAnime : selectedGenres;
+    if (selectedSet.has(text)) {
+        selectedSet.delete(text);
+        item.classList.remove('selected');
+    } else {
+        selectedSet.add(text);
+        item.classList.add('selected');
+    }
+}
+
+// Recommendation System
+function calculateRecommendations() {
+    if (selectedAnime.size === 0 && selectedGenres.size === 0) {
+        alert('Please select at least one anime or genre!');
+        return [];
+    }
+
+    const genreWeights = new Map();
+    
+    // Weight genres from selected anime
+    selectedAnime.forEach(anime => {
+        const animeGenres = animeData[anime].genres;
+        animeGenres.forEach(genre => {
+            genreWeights.set(genre, (genreWeights.get(genre) || 0) + 1);
+        });
+    });
+
+    // Add weights from explicitly selected genres
+    selectedGenres.forEach(genre => {
+        genreWeights.set(genre, (genreWeights.get(genre) || 0) + 2);
+    });
+
+    // Calculate scores for each anime
+    const recommendations = [];
+    for (const [anime, data] of Object.entries(animeData)) {
+        if (selectedAnime.has(anime)) continue;
+
+        const score = data.genres.reduce((sum, genre) => 
+            sum + (genreWeights.get(genre) || 0), 0);
+
+        if (score > 0) {
+            recommendations.push({ title: anime, genres: data.genres, score });
+        }
+    }
+
+    return recommendations
+        .sort((a, b) => b.score - a.score)
+        .slice(0, 5)
+        .map(({ title, genres }) => ({ title, genres }));
+}
+
+function displayRecommendations(recommendations) {
+    recommendationsElement.innerHTML = '<h3>Recommendations:</h3>';
+    if (recommendations.length === 0) {
+        recommendationsElement.innerHTML += '<p>No recommendations found.</p>';
+        return;
+    }
+
+    const list = document.createElement('ul');
+    recommendations.forEach(anime => {
+        const item = document.createElement('li');
+        item.textContent = `${anime.title} - ${anime.genres.join(', ')}`;
+        list.appendChild(item);
+    });
+    recommendationsElement.appendChild(list);
+}
+
+// Quote System
+function displayRandomQuote() {
+    const randomQuote = animeQuotes[Math.floor(Math.random() * animeQuotes.length)];
+    quoteText.textContent = `"${randomQuote.quote}"`;
+    quoteAuthor.textContent = `- ${randomQuote.author} (${randomQuote.anime})`;
+}
+
+// Quiz System
+function displayQuestion() {
+    const question = quizQuestions[currentQuestion];
+    quizQuestion.textContent = question.question;
+    quizOptions.innerHTML = '';
+    question.options.forEach((option, index) => {
+        const button = document.createElement('button');
+        button.textContent = option;
+        button.addEventListener('click', () => selectAnswer(index));
+        quizOptions.appendChild(button);
+    });
+}
+
+function selectAnswer(index) {
+    userAnswers.push(index);
+    if (currentQuestion < quizQuestions.length - 1) {
+        currentQuestion++;
+        displayQuestion();
+    } else {
+        showResult();
+    }
+}
+
+function showResult() {
+    const characterIndex = Math.floor(Math.random() * characters.length);
+    const character = characters[characterIndex];
+    quizContainer.style.display = 'none';
+    quizResult.style.display = 'block';
+    quizResult.innerHTML = `
+        <h3>Quiz Result</h3>
+        <p>Based on your answers, you're most like <strong>${character.name}</strong> from ${character.anime}!</p>
+        <p>Remember, this is just for fun. Every person is unique, just like every anime character!</p>
+    `;
+    restartQuizBtn.style.display = 'block';
+}
+
+function restartQuiz() {
+    currentQuestion = 0;
+    userAnswers = [];
+    quizContainer.style.display = 'block';
+    quizResult.style.display = 'none';
+    restartQuizBtn.style.display = 'none';
+    displayQuestion();
+}
+
+// Initialize UI
+function initializeUI() {
+    // Initialize anime list
+    Object.keys(animeData).forEach(anime => {
+        animeListElement.appendChild(createItem(anime, 'anime'));
+    });
+
+    // Initialize genre list
+    const allGenres = new Set();
+    Object.values(animeData).forEach(data => {
+        data.genres.forEach(genre => allGenres.add(genre));
+    });
+    Array.from(allGenres).forEach(genre => {
+        genreListElement.appendChild(createItem(genre, 'genre'));
+    });
+
+    // Initialize quote
+    displayRandomQuote();
+
+    // Initialize quiz
+    displayQuestion();
+}
+
+// Event Listeners
+recommendBtn.addEventListener('click', () => {
+    const recommendations = calculateRecommendations();
+    displayRecommendations(recommendations);
+});
+
+randomBtn.addEventListener('click', () => {
+    const allAnime = Object.keys(animeData);
+    const randomAnime = allAnime[Math.floor(Math.random() * allAnime.length)];
+    displayRecommendations([{ title: randomAnime, genres: animeData[randomAnime].genres }]);
+});
+
+newQuoteBtn.addEventListener('click', displayRandomQuote);
+restartQuizBtn.addEventListener('click', restartQuiz);
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', initializeUI);