app.js

const lessons = [
  {
    title: "The Beginning",
    tagline: "Start strong with the core idea of programming.",
    content: `
      <h1>The Journey Begins</h1>
      <h2>What is Programming?</h2>
      <p>Programming is a way for us to write specific instructions for computers to solve problems, perform tasks, or create websites and apps.</p>
      
      <p>Just like we use different human languages to communicate, we use different programming languages to talk to computers.</p>
      <p>Some languages are better for making websites, while others are better for building space shuttle software or mobile apps.</p>
      
      <button class="btn" onclick="loadLesson(1)">Next: Python</button>
    `,
  },
  {
    title: "Python",
    tagline: "Learn the language used by beginners and pros alike.",
    content: `
      <h1>Python</h1>
      <p>Python is one of the most popular languages in the world. It is designed to be readable and easy to learn. It is the go-to language for Artificial Intelligence, and also used in Data Science.</p>
      
      <h2>How to Use Python?</h2>
      <p>There are multiple ways to program with Python. You can use online code editors, such as:</p>
      <ul>
      <li><a href="https://www.onlinegdb.com" target="_blank">OnlineGDB</a> (click <b>Python 3</b> where it says <b>Language</b> in the top right corner)</li>
      <li><a href="https://www.online-python.com" target="_blank">Online Python</a></li>
      </ul>
      <p>You can also download coding applications (if you'd like to save code to your computer files), such as:</p>
      <ul>
      <li><a href="https://thonny.org" target="_blank">Thonny</a></li>
      <li><a href="https://code.visualstudio.com" target="_blank">Visual Studio Code</a> (very powerful, but requires more setup for Python usage)</li>
      </ul>

      <h2>Typing</h2>
      <p>On whichever code editor you are using, you should be able to type text. This is how we can write our code.</p>

      <h2>The Terminal</h2>
      <p>To see the results of our code, we can use the <b>Terminal</b>. Think of the terminal as a simple text-based screen where the computer talks back to us. Normally, it will be at the bottom of the code editor.</p>
      
      <h2>The print() Command</h2>
      <p>The <code>print()</code> command tells the computer to display whatever is inside the brackets onto the terminal.</p>
      <pre>print("The journey begins!")</pre>
      <p>If you type this code into your editor, you would see the message: <code>The journey begins!</code> on your terminal.</p>
      
      <button class="btn" onclick="loadLesson(2)">Next: The Basics</button>
    `,
  },
  {
    title: "The Basics",
    tagline: "Build strong foundations with variables, input, and operations.",
    content: `
      <h1>The Basics</h1>
      
      <h2>Variables: Storing Data</h2>
      <p>A variable is like a labeled box. You put a piece of information inside the box and give it a name so you can find it later.</p>
      
      <p>Structure: <b>variableName = information</b></p>
      
      <h2>Data Types</h2>
      <p>There are different kinds of data that variables can store.</p>
      <h3>1. Strings</h3>
      <p>Strings store text and <b>must</b> be wrapped in quotation marks <code>" "</code>.</p>
      <pre>myName = "John"
favoriteColor = "Blue"</pre>

      <h3>2. Integers</h3>
      <p>Numbers with no decimals.</p>
      <pre>myAge = 17
currentTemperature = -10</pre>

      <h3>3. Floats</h3>
      <p>Numbers that have a decimal point.</p>
      <pre>itemPrice = 9.99
currentTax = 1.13</pre>

      <h3>4. Booleans</h3>
      <p>Booleans are simple: they are either <code>True</code> or <code>False</code>. Notice the capital letters!</p>
      <pre>isLoggedIn = True
isRaining = False</pre>

      <h2>Naming Your Variables</h2>
      <ol>
        <li><b>Characters:</b> Use only letters, numbers, or underscores.</li>
        <li><b>Start:</b> You cannot start a name with a number.</li>
        <li><b>Capitalization:</b> <code>myAge</code> and <code>myage</code> are different variables!</li>
        <li><b>Naming Conventions:</b> There are many ways to name variables. One common way is camelCase, for example: <code>userFirstName</code>.</li>
      </ol>

      <h2>Using Variables & Input</h2>
      <h3>Combining Data</h3>
      <p>You can use a comma in a <code>print()</code> statement to join text and variables together:</p>
      <pre>playerName = "John"
print("Name: ", playerName)</pre>

      <h3>Getting User Input</h3>
      <p>To let the user type something into your program, use <code>input()</code>.</p>
      <pre>favoriteFood = input("What is your favorite food? ")
print("I love ", favoriteFood, " too!")</pre>
      <p><b>Note:</b> <code>input()</code> always brings in data as a String. To do math, convert it using <code>int()</code>:</p>
      <pre>userAge = int(input("Enter your age: "))</pre>

      <h2>Math Operations</h2>
      <p>Python is a powerful calculator:</p>
      <ul>
        <li><b>Addition/Subtraction:</b> <code>+</code> and <code>-</code></li>
        <li><b>Multiplication/Division:</b> <code>*</code> and <code>/</code></li>
        <li><b>Modulus (%):</b> Gives the <b>remainder</b> after division (7 % 5 = 2)</li>
        <li><b>Floor division (//):</b> Rounds <b>down</b> to the nearest whole number after division (7 // 5 = 1)</li>
      </ul>
      
      <h2>Comments</h2>
      <p>Comments explain code. They don't affect the result. Use <code>#</code> to add a comment.</p>
      <pre># This line prompts the user to enter their age, and turns their input into an integer
userAge = int(input("Enter your age: "))</pre>
      
      <h2>Challenge</h2>
      <p>Take in two integers from the user, and print out their sum. Then, print out their product.</p>

      <button class="btn" onclick="loadLesson(3)">Next: Going Further</button>
    `,
  },
  {
    title: "Going Further",
    tagline: "Use decisions, lists, and loops to solve real problems.",
    content: `
      <h1>Going Further</h1>
      
      <h2>Conditional Statements</h2>
      <p>Conditional statements check if something is happening in your code, using comparison operators.</p>
      <h3>Comparison Operators</h3>
      <ul>
      <li>Equal to: <code>==</code></li>
      <li>Not equal to: <code>!=</code></li>
      <li>Greater than: <code>></code></li>
      <li>Greater than or equal to: <code>>=</code></li>
      <li>Less than: <code><</code></li>
      <li>Less than or equal to: <code><=</code></li>
      </ul>

      <h3>if, elif, and else</h3>
      <p>These allow your code to take different paths. <b>Important:</b> The code inside the statement must be <b>indented</b>.</p>
      <pre>userGrade = 85

if userGrade > 90:
    print("Your grade is A!")
elif userGrade > 80:
    print("Your grade is B!")
else:
    print("Keep studying!")</pre>
      
      <h2>Lists</h2>
      <p>A list stores many items in a single variable using square brackets <code>[]</code>. The first index is <b>0</b>.</p>
      <pre>friendList = ["John", "Eva", "Michael"]
# friendList[0] stores "John"
# friendList[1] stores "Eva"
# friendList[2] stores "Michael"</pre>

      <h2>Loops: Repeating Tasks</h2>
      <p>Loops allow you to run the same block of code multiple times without rewriting it.</p>

      <h3>While Loops</h3>
      <p>A while loop runs as long as a condition is <b>True</b>. Use this when you don't know exactly how many times you'll repeat.</p>
      <pre>keepPlaying = "yes"
while keepPlaying == "yes":
    print("The game is running...")
    keepPlaying = input("Do you want to keep playing? (yes/no): ")

print("Game Over!")</pre>

      <h3>For Loops</h3>
      <p>A for loop goes through a list one item at a time.</p>
      <pre>friendList = ["John", "Eva", "Michael"]

for name in friendList:
    print("Hello ", name)</pre>
      
      <h4>Using range()</h4>
      <p>The <code>range()</code> function acts like a counter. It tells the loop exactly how many times to run.</p>
      <pre>for i in range(5):
    print(i)</pre>

      <h2>Challenge</h2>
      <p>Create a list of 10 positive integers. Use a loop to go through the list. Inside the loop, check if each number is even or odd and print the result. Hint: use the <code>%</code> operator!</p>

      <button class="btn" onclick="loadLesson(4)">Next: Advanced Concepts</button>
    `,
  },
  {
    title: "Advanced Concepts",
    tagline: "Learn functions, classes, and the tools professionals use.",
    content: `
      <h1>Advanced Concepts</h1>
      
      <h2>Functions</h2>
      <p>A function is a saved block of code. Instead of writing the same code multiple times, save it once and call it when needed.</p>

      <h3>Creating a Function</h3>
      <pre>def welcomeUser(userName, userAge):
    print("Hello, ", userName, "!")
    print("You are ", userAge, " years old.")</pre>

      <h3>Parameters & Calling</h3>
      <p>Parameters are placeholders. When you call the function, you provide actual values.</p>
      <pre>welcomeUser("John", 25)</pre>
      
      <h3>Return Values</h3>
      <p>Functions can send back information using <code>return</code>.</p>
      <pre>def squareNumber(number):
    return number * number

result = squareNumber(5)
print(result) # Prints 25</pre>

      <h2>Object-Oriented Programming (OOP)</h2>
      <p>OOP is a way to organize code using <b>classes</b> and <b>objects</b>.</p>
      <pre>class Car:
    def __init__(self, brand, color):
        self.brand = brand
        self.color = color

    def describeCar(self):
        print("This car is a ", self.color, " ", self.brand)

myCar = Car("Toyota", "red")
myCar.describeCar()</pre>

      <h2>Professional Tools</h2>
      <p>As you grow, you'll want to learn:</p>
      <ul>
        <li><b>Debugging:</b> Find and fix errors fast.</li>
        <li><b>Modules:</b> Reuse code with <code>import</code>.</li>
        <li><b>Files:</b> Save and read data using <code>open()</code>.</li>
        <li><b>Version control:</b> Track your work with Git and GitHub.</li>
      </ul>

      <h2>Quick Quiz</h2>
      <p>What does the code below print?</p>
      <pre>for i in range(3):
    print(i * 2)</pre>
      <button class="btn secondary" onclick="showQuizAnswer()">Show answer</button>
      <div id="quiz-answer" class="quiz-answer"></div>

      <h2>Challenge: A Digital Pet</h2>
      <p>Create a <b>Pet</b> class that helps you take care of a virtual animal. Your class should include:</p>
      <ol>
        <li><b>Attributes:</b> Give your pet a <code>name</code> and a <code>hungerLevel</code> (starting at 50).</li>
        <li><b>A feed() method:</b> This should decrease the <code>hungerLevel</code> by 10.</li>
        <li><b>A play() method:</b> This should increase the <code>hungerLevel</code> by 5.</li>
        <li><b>A checkStatus() method:</b> This should print the pet's current hunger and a warning if the hunger is above 80.</li>
      </ol>
    `,
  },
  {
    title: "Build a Real Project",
    tagline: "Turn lessons into your first Python project.",
    content: `
      <h1>Build a Real Project</h1>

      <h2>Project Planning</h2>
      <p>Every great project starts with a plan. Choose a useful idea, then break it into small pieces:</p>
      <ul>
        <li>What will the project do?</li>
        <li>What inputs does it need?</li>
        <li>What outputs should it show?</li>
      </ul>

      <h2>Project Idea</h2>
      <p>Build a <b>study planner</b> that takes tasks from the user, saves them, and prints a daily schedule.</p>
      <p>That project uses many skills: variables, loops, conditionals, functions, and file saving.</p>

      <h2>Advanced Next Steps</h2>
      <ul>
        <li>Use <code>open(..., "w")</code> and <code>open(..., "r")</code> to save and load tasks.</li>
        <li>Split your code into functions like <code>add_task()</code>, <code>show_tasks()</code>, and <code>save_tasks()</code>.</li>
        <li>Try adding a menu loop so users can choose what to do.</li>
      </ul>

      <h2>Live Project Idea</h2>
      <div class="code-box">
        <p>Click the button to reveal a practical starter idea and next steps.</p>
        <button class="btn secondary" onclick="showProjectIdea()">Reveal project idea</button>
        <div id="project-idea" class="quiz-answer"></div>
      </div>

      <button class="btn" onclick="loadLesson(0)">Restart Curriculum</button>
    `,
  },
];

function loadLesson(index) {
  const main = document.getElementById("main-content");
  const lesson = lessons[index];

  main.innerHTML = `
    <div class="content-section">
      <div class="lesson-meta">
        <span class="pill">Lesson ${index + 1} of ${lessons.length}</span>
        <span class="pill">Topic: ${lesson.title}</span>
        <span class="pill">${lesson.tagline || "Learn with examples, resources, and challenges."}</span>
      </div>
      ${lesson.content}
      <div class="resource-panel">
        <h3>Resources & next steps</h3>
        <div class="resource-list">
          <a href="https://www.python.org/doc/" target="_blank">Official Python documentation</a>
          <a href="https://realpython.com/" target="_blank">Real Python tutorials</a>
          <a href="https://replit.com/" target="_blank">Try Python live in the browser</a>
        </div>
      </div>
    </div>
  `;

  document.querySelectorAll("#lesson-list li").forEach((li, i) => {
    li.classList.toggle("active", i === index);
  });

  main.scrollTop = 0;
}

function toggleTheme() {
  document.body.classList.toggle("theme-dark");
  const button = document.getElementById("theme-toggle");
  const isDark = document.body.classList.contains("theme-dark");
  button.textContent = isDark ? "Light mode" : "Dark mode";
  localStorage.setItem("programmingOdysseyTheme", isDark ? "dark" : "light");
}

function showQuizAnswer() {
  const answer = document.getElementById("quiz-answer");
  if (!answer) return;
  answer.innerHTML = `<p><strong>Answer:</strong><br>0<br>2<br>4</p>`;
}

function showProjectIdea() {
  const box = document.getElementById("project-idea");
  if (!box) return;
  box.innerHTML = `
    <p><strong>Starter idea:</strong> A study planner that accepts subjects, tasks, and due dates.</p>
    <p>Build it with a menu loop, functions for each action, and a data file so the planner remembers tasks between runs.</p>
  `;
}

window.onload = () => {
  const savedTheme = localStorage.getItem("programmingOdysseyTheme");
  if (savedTheme === "dark") {
    document.body.classList.add("theme-dark");
  }

  const button = document.getElementById("theme-toggle");
  if (button) {
    button.textContent = document.body.classList.contains("theme-dark") ? "Light mode" : "Dark mode";
  }

  loadLesson(0);
};