schoolproject123/codeexplainer-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CodeExplainer Pro</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 500: '#6366F1',17 },18 secondary: {19 500: '#EC4899',20 }21 }22 }23 }24 }25 </script>26 <style>27 .code-block {28 font-family: 'Courier New', monospace;29 background-color: #1E293B;30 color: #F8FAFC;31 border-radius: 0.5rem;32 padding: 1rem;33 margin: 1rem 0;34 overflow-x: auto;35 }36 .explanation-card {37 transition: all 0.3s ease;38 }39 .explanation-card:hover {40 transform: translateY(-4px);41 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);42 }43 </style>44</head>45<body class="bg-gray-50 min-h-screen">46 <!-- Navigation -->47 <nav class="bg-white shadow-sm">48 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">49 <div class="flex justify-between h-16">50 <div class="flex items-center">51 <i data-feather="code" class="text-primary-500"></i>52 <span class="ml-2 text-xl font-bold text-gray-900">CodeExplainer Pro</span>53 </div>54 <div class="flex items-center space-x-4">55 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-500">Home</a>56 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-500">Examples</a>57 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-500">About</a>58 </div>59 </div>60 </div>61 </nav>62 63 <!-- Hero Section -->64 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">65 <div class="text-center">66 <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">67 JavaScript Callbacks <br>Explained Visually68 </h1>69 <p class="mt-5 max-w-xl mx-auto text-xl text-gray-500">70 Understand callback functions in JavaScript through interactive examples and clear explanations.71 </p>72 </div>73 </div>74 75 <!-- Main Content -->76 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">77 <!-- Section 1: Basic Callback Function -->78 <div class="mb-16">79 <h2 class="text-2xl font-bold text-gray-900 mb-6">1. Basic Callback Function Example</h2>80 81 <div class="grid md:grid-cols-2 gap-8">82 <!-- Code Block -->83 <div class="code-block">84 <pre><code>function calculate(a, b, callback) {85 return callback(a, b);86}87 88const sum = calculate(5, 3, (a, b) => a + b);89console.log(sum); // Output: 890 91const product = calculate(5, 3, (a, b) => a * b);92console.log(product); // Output: 15</code></pre>93 </div>94 95 <!-- Explanation -->96 <div class="bg-white p-6 rounded-lg shadow-md explanation-card">97 <div class="flex items-center mb-4">98 <div class="p-2 rounded-full bg-primary-100 mr-3">99 <i data-feather="info" class="text-primary-500"></i>100 </div>101 <h3 class="text-lg font-medium text-gray-900">How This Works</h3>102 </div>103 <div class="space-y-3 text-gray-700">104 <p>1. We define a <span class="font-semibold text-primary-500">calculate</span> function that takes three parameters: <span class="font-semibold">a</span>, <span class="font-semibold">b</span>, and a <span class="font-semibold">callback</span> function.</p>105 <p>2. The <span class="font-semibold">calculate</span> function simply calls the <span class="font-semibold">callback</span> with <span class="font-semibold">a</span> and <span class="font-semibold">b</span> as arguments.</p>106 <p>3. We then call <span class="font-semibold">calculate</span> twice:</p>107 <ul class="list-disc pl-5 space-y-1">108 <li>First with an arrow function that adds the numbers</li>109 <li>Then with an arrow function that multiplies them</li>110 </ul>111 <p>4. The output shows the results of these operations.</p>112 </div>113 </div>114 </div>115 </div>116 117 <!-- Section 2: Process User with Callback -->118 <div class="mb-16">119 <h2 class="text-2xl font-bold text-gray-900 mb-6">2. Processing User Data with Callback</h2>120 121 <div class="grid md:grid-cols-2 gap-8">122 <!-- Explanation -->123 <div class="bg-white p-6 rounded-lg shadow-md explanation-card order-2 md:order-1">124 <div class="flex items-center mb-4">125 <div class="p-2 rounded-full bg-secondary-100 mr-3">126 <i data-feather="user" class="text-secondary-500"></i>127 </div>128 <h3 class="text-lg font-medium text-gray-900">Understanding This Pattern</h3>129 </div>130 <div class="space-y-3 text-gray-700">131 <p>1. The <span class="font-semibold text-secondary-500">processUser</span> function takes a name and a callback function.</p>132 <p>2. It then executes the callback with the provided name.</p>133 <p>3. We demonstrate two different uses:</p>134 <ul class="list-disc pl-5 space-y-1">135 <li>One with an English welcome message</li>136 <li>Another with a Russian welcome message</li>137 </ul>138 <p>4. This shows how callbacks allow different behaviors with the same core function.</p>139 </div>140 </div>141 142 <!-- Code Block -->143 <div class="code-block order-1 md:order-2">144 <pre><code>function processUser(name, callback) {145 callback(name);146}147 148processUser("imya", (name) => {149 console.log(`Welcome, ${name}!`);150 // Output: Welcome, imya!151});152 153processUser("Bobur", (name) => {154 console.log(`Добро пожаловать, ${name}!`);155 // Output: Добро пожаловать, Bobur!156});</code></pre>157 </div>158 </div>159 </div>160 161 <!-- Section 3: forEach Examples -->162 <div class="mb-16">163 <h2 class="text-2xl font-bold text-gray-900 mb-6">3. Array forEach with Callbacks</h2>164 165 <div class="grid md:grid-cols-2 gap-8">166 <!-- Code Block -->167 <div class="code-block">168 <pre><code>const numbers1 = [2, 4, 6, 8];169 170numbers1.forEach(number => {171 console.log(number * 2);172 // Output: 4, 8, 12, 16173});174 175const names = ["Ali", "Baxruz", "Bunyod"];176 177names.forEach(name => {178 console.log(`дарова, ${name}!`);179 // Output: дарова, Ali! дарова, Baxruz! дарова, Bunyod!180});</code></pre>181 </div>182 183 <!-- Explanation -->184 <div class="bg-white p-6 rounded-lg shadow-md explanation-card">185 <div class="flex items-center mb-4">186 <div class="p-2 rounded-full bg-primary-100 mr-3">187 <i data-feather="list" class="text-primary-500"></i>188 </div>189 <h3 class="text-lg font-medium text-gray-900">forEach in Action</h3>190 </div>191 <div class="space-y-3 text-gray-700">192 <p>1. <span class="font-semibold text-primary-500">forEach</span> is an array method that takes a callback function.</p>193 <p>2. It executes the callback once for each element in the array.</p>194 <p>3. In the first example, we double each number:</p>195 <ul class="list-disc pl-5 space-y-1">196 <li>2 becomes 4</li>197 <li>4 becomes 8</li>198 <li>6 becomes 12</li>199 <li>8 becomes 16</li>200 </ul>201 <p>4. In the second example, we greet each name in Russian.</p>202 </div>203 </div>204 </div>205 </div>206 207 <!-- Section 4: Map Examples -->208 <div class="mb-16">209 <h2 class="text-2xl font-bold text-gray-900 mb-6">4. Array map with Callbacks</h2>210 211 <div class="grid md:grid-cols-2 gap-8">212 <!-- Explanation -->213 <div class="bg-white p-6 rounded-lg shadow-md explanation-card order-2 md:order-1">214 <div class="flex items-center mb-4">215 <div class="p-2 rounded-full bg-secondary-100 mr-3">216 <i data-feather="repeat" class="text-secondary-500"></i>217 </div>218 <h3 class="text-lg font-medium text-gray-900">Transforming Arrays</h3>219 </div>220 <div class="space-y-3 text-gray-700">221 <p>1. <span class="font-semibold text-secondary-500">map</span> creates a new array by transforming each element.</p>222 <p>2. Unlike forEach, it returns a new array rather than just executing code.</p>223 <p>3. In the first example, we square each number:</p>224 <ul class="list-disc pl-5 space-y-1">225 <li>1 becomes 1 (1×1)</li>226 <li>2 becomes 4 (2×2)</li>227 <li>3 becomes 9 (3×3)</li>228 <li>4 becomes 16 (4×4)</li>229 </ul>230 <p>4. In the second example, we convert tech names to uppercase.</p>231 </div>232 </div>233 234 <!-- Code Block -->235 <div class="code-block order-1 md:order-2">236 <pre><code>const numbers2 = [1, 2, 3, 4];237 238const squaredNumbers = numbers2.map(number => number ** 2);239console.log(squaredNumbers);240// Output: [1, 4, 9, 16]241 242const techs = ["js", "ts", "node"];243 244const uppercaseTechs = techs.map(tech => tech.toUpperCase());245console.log(uppercaseTechs);246// Output: ["JS", "TS", "NODE"]</code></pre>247 </div>248 </div>249 </div>250 251 <!-- Key Takeaways -->252 <div class="bg-white p-8 rounded-lg shadow-lg border-t-4 border-primary-500">253 <h2 class="text-2xl font-bold text-gray-900 mb-6">Key Takeaways</h2>254 <div class="grid md:grid-cols-2 gap-6">255 <div class="flex items-start">256 <div class="p-2 rounded-full bg-primary-100 mr-3 mt-1">257 <i data-feather="check-circle" class="text-primary-500"></i>258 </div>259 <div>260 <h3 class="font-medium text-gray-900 mb-2">Callback Functions</h3>261 <p class="text-gray-600">Functions passed as arguments to other functions, to be executed later.</p>262 </div>263 </div>264 <div class="flex items-start">265 <div class="p-2 rounded-full bg-secondary-100 mr-3 mt-1">266 <i data-feather="arrow-right-circle" class="text-secondary-500"></i>267 </div>268 <div>269 <h3 class="font-medium text-gray-900 mb-2">Higher-Order Functions</h3>270 <p class="text-gray-600">Functions that accept other functions as arguments or return functions.</p>271 </div>272 </div>273 <div class="flex items-start">274 <div class="p-2 rounded-full bg-yellow-100 mr-3 mt-1">275 <i data-feather="list" class="text-yellow-500"></i>276 </div>277 <div>278 <h3 class="font-medium text-gray-900 mb-2">forEach vs map</h3>279 <p class="text-gray-600">forEach executes a function on each element, while map transforms each element and returns a new array.</p>280 </div>281 </div>282 <div class="flex items-start">283 <div class="p-2 rounded-full bg-green-100 mr-3 mt-1">284 <i data-feather="code" class="text-green-500"></i>285 </div>286 <div>287 <h3 class="font-medium text-gray-900 mb-2">Flexibility</h3>288 <p class="text-gray-600">Callbacks allow the same function to produce different behaviors based on the callback provided.</p>289 </div>290 </div>291 </div>292 </div>293 </div>294 295 <!-- Footer -->296 <footer class="bg-gray-800 text-white py-8">297 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">298 <div class="md:flex md:justify-between">299 <div class="mb-6 md:mb-0">300 <div class="flex items-center">301 <i data-feather="code" class="text-primary-500"></i>302 <span class="ml-2 text-xl font-bold">CodeExplainer Pro</span>303 </div>304 <p class="mt-2 text-gray-400">Making JavaScript concepts crystal clear.</p>305 </div>306 <div class="grid grid-cols-2 gap-8 sm:grid-cols-3">307 <div>308 <h3 class="text-sm font-semibold uppercase tracking-wider">Resources</h3>309 <ul class="mt-4 space-y-2">310 <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>311 <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>312 </ul>313 </div>314 <div>315 <h3 class="text-sm font-semibold uppercase tracking-wider">Company</h3>316 <ul class="mt-4 space-y-2">317 <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>318 <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>319 </ul>320 </div>321 <div>322 <h3 class="text-sm font-semibold uppercase tracking-wider">Legal</h3>323 <ul class="mt-4 space-y-2">324 <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>325 <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>326 </ul>327 </div>328 </div>329 </div>330 <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">331 <div class="flex space-x-6 md:order-2">332 <a href="#" class="text-gray-400 hover:text-white">333 <i data-feather="twitter"></i>334 </a>335 <a href="#" class="text-gray-400 hover:text-white">336 <i data-feather="github"></i>337 </a>338 <a href="#" class="text-gray-400 hover:text-white">339 <i data-feather="linkedin"></i>340 </a>341 </div>342 <p class="mt-8 text-gray-400 md:mt-0 md:order-1">343 © 2023 CodeExplainer Pro. All rights reserved.344 </p>345 </div>346 </div>347 </footer>348 349 <script>350 feather.replace();351 </script>352</body>353</html>354