Duolingo Clone

I'll help create a simplified version of Duolingo with core functionality like lessons, progress tracking, and a gamified interface. Duolingo Clone

Duolingo Clone

🔥 0

💎 0 XP

Choose a language to learn

Spanish

French

German

:root { --green: #58cc02; --light-green: #61e002; --dark-green: #3caa3c; --blue: #1cb0f6; --white: #ffffff; --gray: #e5e5e5; --dark-gray: #4a4a4a; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: var(--white); color: var(--dark-gray); } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--gray); } .logo { font-weight: 700; color: var(--green); font-size: 1.5rem; } .user-info { display: flex; gap: 1rem; } .streak, .xp { display: flex; align-items: center; gap: 0.25rem; } main { max-width: 800px; margin: 2rem auto; padding: 1rem; } .language-selector h2 { margin-bottom: 1.5rem; text-align: center; } .languages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .language-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border-radius: 8px; background-color: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; } .language-card:hover { transform: translateY(-4px); } .language-card img { width: 40px; height: 30px; object-fit: cover; } .lesson-container { display: none; } .lesson-header { margin-bottom: 2rem; } .progress-bar { height: 8px; background-color: var(--gray); border-radius: 4px; margin-top: 0.5rem; } .progress { height: 100%; width: 0%; background-color: var(--green); border-radius: 4px; transition: width 0.3s; } .exercise { background-color: var(--white); padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .prompt { font-size: 1.2rem; margin-bottom: 1.5rem; font-weight: 600; } .options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .option { padding: 1rem; border: 2px solid var(--gray); border-radius: 8px; background-color: var(--white); font-size: 1rem; cursor: pointer; transition: all 0.2s; } .option:hover { border-color: var(--blue); } .feedback { margin-top: 1rem; padding: 1rem; border-radius: 8px; text-align: center; font-weight: 600; } .correct { background-color: rgba(88, 204, 2, 0.1); color: var(--green); } .incorrect { background-color: rgba(255, 59, 48, 0.1); color: #ff3b30; } .next-btn { display: block; margin: 1rem auto 0; padding: 0.75rem 2rem; background-color: var(--green); color: var(--white); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .next-btn:hover { background-color: var(--light-green); } .hidden { display: none; } const languages = document.querySelectorAll('.language-card'); const languageSelector = document.querySelector('.language-selector'); const lessonContainer = document.querySelector('.lesson-container'); const lessonTitle = document.querySelector('.lesson-title'); const progressBar = document.querySelector('.progress'); const promptElement = document.querySelector('.prompt'); const optionsContainer = document.querySelector('.options'); const feedbackElement = document.querySelector('.feedback'); const nextButton = document.querySelector('.next-btn'); const streakElement = document.querySelector('.streak'); const xpElement = document.querySelector('.xp'); let currentLesson = 0; let streak = 0; let xp = 0; const lessons = { spanish: [ { title: "Lesson 1: Greetings", exercises: [ { prompt: "Translate 'Hello' to Spanish", options: ["Hola", "Adiós", "Gracias", "Por favor"], correct: 0 }, { prompt: "Translate 'Goodbye' to Spanish", options: ["Adiós", "Hola", "Buenos días", "Noche"], correct: 0 }, { prompt: "Translate 'Thank you' to Spanish", options: ["Gracias", "Por favor", "Lo siento", "De nada"], correct: 0 } ] }, { title: "Lesson 2: Common Phrases", exercises: [ { prompt: "Translate 'Please' to Spanish", options: ["Por favor", "Gracias", "De nada", "Perdón"], correct: 0 }, { prompt: "Translate 'Excuse me' to Spanish", options: ["Perdón", "Por favor", "Gracias", "De nada"], correct: 0 } ] } ], french: [ { title: "Lesson 1: Greetings", exercises: [ { prompt: "Translate 'Hello' to French", options: ["Bonjour", "Au revoir", "Merci", "S'il vous plaît"], correct: 0 } ] } ] }; languages.forEach(language => { language.addEventListener('click', () => { const selectedLanguage = language.dataset.lang; startLesson(selectedLanguage); }); }); function startLesson(language) { languageSelector.classList.add('hidden'); lessonContainer.classList.remove('hidden'); loadExercise(language, 0); } function loadExercise(language, exerciseIndex) { const lesson = lessons[language][currentLesson]; const exercise = lesson.exercises[exerciseIndex]; lessonTitle.textContent = lesson.title; promptElement.textContent = exercise.prompt; // Calculate progress const progress = ((exerciseIndex + 1) / lesson.exercises.length) * 100; progressBar.style.width = `${progress}%`; // Clear previous options optionsContainer.innerHTML = ''; // Add new options exercise.options.forEach((option, index) => { const button = document.createElement('button'); button.className = 'option'; button.textContent = option; button.addEventListener('click', () => checkAnswer(index === exercise.correct, language, exerciseIndex)); optionsContainer.appendChild(button); }); // Hide feedback and next button feedbackElement.classList.add('hidden'); nextButton.classList.add('hidden'); } function checkAnswer(isCorrect, language, exerciseIndex) { const lesson = lessons[language][currentLesson]; // Disable all options document.querySelectorAll('.option').forEach(option => { option.disabled = true; option.style.cursor = 'not-allowed'; }); // Show feedback feedbackElement.classList.remove('hidden'); if (isCorrect) { feedbackElement.textContent = 'Correct! �'; feedbackElement.className = 'feedback correct'; streak++; xp += 10; } else { feedbackElement.textContent = 'Incorrect! Try again.'; feedbackElement.className = 'feedback incorrect'; streak = 0; } // Update streak and XP streakElement.textContent = `🔥 ${streak}`; xpElement.textContent = `💎 ${xp} XP`; // Show next button if not last exercise if (exerciseIndex < lesson.exercises.length - 1) { nextButton.classList.remove('hidden'); nextButton.onclick = () => { loadExercise(language, exerciseIndex + 1); }; } else { nextButton.classList.remove('hidden'); nextButton.textContent = 'Complete Lesson'; nextButton.onclick = () => { currentLesson = (currentLesson + 1) % lessons[language].length; loadExercise(language, 0); }; } }