| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Control Structures | Code Crusaders</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h1 class="text-3xl font-bold text-indigo-800">Control Structures</h1> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-sm text-gray-600">Progress:</span> | |
| <div class="w-32 h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="progress-fill h-full bg-indigo-600" data-section="control"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-semibold text-indigo-700 mb-4">Conditional Statements</h2> | |
| <p class="text-gray-700 mb-4"> | |
| Control structures allow you to control the flow of execution in your program based on certain conditions. | |
| </p> | |
| <h3 class="text-xl font-semibold text-indigo-600 mb-3">If-Else Statements</h3> | |
| <div class="code-block mb-6"> | |
| <pre><code><span class="code-keyword">int</span> score = 85; | |
| <span class="code-keyword">if</span> (score >= 90) { | |
| cout << <span class="code-string">"Grade: A"</span> << endl; | |
| } <span class="code-keyword">else if</span> (score >= 80) { | |
| cout << <span class="code-string">"Grade: B"</span> << endl; | |
| } <span class="code-keyword">else if</span> (score >= 70) { | |
| cout << <span class="code-string">"Grade: C"</span> << endl; | |
| } <span class="code-keyword">else</span> { | |
| cout << <span class="code-string">"Grade: F"</span> << endl; | |
| }</code></pre> | |
| </div> | |
| <h3 class="text-xl font-semibold text-indigo-600 mb-3">Switch Statements</h3> | |
| <div class="code-block mb-6"> | |
| <pre><code><span class="code-keyword">char</span> grade = 'B'; | |
| <span class="code-keyword">switch</span> (grade) { | |
| <span class="code-keyword">case</span> 'A': | |
| cout << <span class="code-string">"Excellent!"</span> << endl; | |
| <span class="code-keyword">break</span>; | |
| <span class="code-keyword">case</span> 'B': | |
| cout << <span class="code-string">"Good job!"</span> << endl; | |
| <span class="code-keyword">break</span>; | |
| <span class="code-keyword">case</span> 'C': | |
| cout << <span class="code-string">"Well done"</span> << endl; | |
| <span class="code-keyword">break</span>; | |
| <span class="code-keyword">default</span>: | |
| cout << <span class="code-string">"Keep trying"</span> << endl; | |
| }</code></pre> | |
| </div> | |
| <h2 class="text-2xl font-semibold text-indigo-700 mb-4">Loops</h2> | |
| <h3 class="text-xl font-semibold text-indigo-600 mb-3">For Loop</h3> | |
| <div class="code-block mb-6"> | |
| <pre><code><span class="code-comment">// Print numbers 1 to 5</span> | |
| <span class="code-keyword">for</span> (<span class="code-keyword">int</span> i = 1; i <= 5; i++) { | |
| cout << i << endl; | |
| }</code></pre> | |
| </div> | |
| <h3 class="text-xl font-semibold text-indigo-600 mb-3">While Loop</h3> | |
| <div class="code-block mb-6"> | |
| <pre><code><span class="code-comment">// Countdown from 5</span> | |
| <span class="code-keyword">int</span> count = 5; | |
| <span class="code-keyword">while</span> (count > 0) { | |
| cout << count << endl; | |
| count--; | |
| }</code></pre> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <a href="basics.html" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition"> | |
| <i data-feather="arrow-left" class="inline mr-2"></i> Back | |
| </a> | |
| <button onclick="markSectionComplete('control')" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> | |
| Mark Complete <i data-feather="check" class="inline ml-2"></i> | |
| </button> | |
| <a href="functions.html" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> | |
| Next: Functions & OOP <i data-feather="arrow-right" class="inline ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script>feather.replace();</script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |