peeeep/javascript-without-javascript-wizardry
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>JavaScript Examples - Without JS</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 .example-card {12 transition: all 0.3s ease;13 border-top: 4px solid transparent;14 }15 .example-card:hover {16 transform: translateY(-5px);17 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);18 }19 .example-card.interactive:hover {20 border-top-color: #3b82f6;21 }22 .nav-link.active {23 border-bottom: 2px solid #3b82f6;24 color: #3b82f6;25 }26 </style>27</head>28<body class="bg-gray-50 font-sans">29 <!-- Einfache Navigation -->30 <nav class="bg-white shadow-lg sticky top-0 z-10">31 <div class="container mx-auto px-6 py-4">32 <div class="flex justify-between items-center">33 <a href="/" class="text-2xl font-bold text-primary">JS<span class="text-secondary">NoJS</span></a>34 <div class="flex space-x-6">35 <a href="/" class="text-gray-600 hover:text-dark font-medium">Start</a>36 <a href="/examples.html" class="nav-link active text-dark font-medium">Beispiele</a>37 <a href="/tutorials.html" class="nav-link text-gray-600 hover:text-dark font-medium">Tutorials</a>38<a href="https://developer.mozilla.org/de/docs/Web/JavaScript" target="_blank" class="text-gray-600 hover:text-dark font-medium">MDN Docs</a>39 <a href="mailto:info@jsnojs.de" class="text-gray-600 hover:text-dark font-medium">Kontakt</a>40 </div>41 </div>42 </div>43 </nav>44 <!-- Examples Header -->45 <header class="bg-gradient-to-r from-primary to-secondary text-white py-20">46 <div class="container mx-auto px-6 text-center">47 <h1 class="text-4xl md:text-5xl font-bold mb-6">JavaScript Beispiele</h1>48 <p class="text-xl mb-8 max-w-2xl mx-auto">Visuelle Demonstrationen von JavaScript Konzepten mit reinem HTML und CSS</p>49 <div class="flex justify-center space-x-4">50 <a href="#basic" class="bg-white text-primary px-6 py-2 rounded-full font-medium">Einfach</a>51 <a href="#intermediate" class="border border-white text-white px-6 py-2 rounded-full font-medium">Mittel</a>52 <a href="#advanced" class="border border-white text-white px-6 py-2 rounded-full font-medium">Fortgeschritten</a>53 </div>54 </div>55 </header>56<!-- Examples Content -->57 <main class="container mx-auto px-6 py-12">58 <!-- Basic Examples -->59 <section id="basic" class="mb-16">60 <h2 class="text-3xl font-bold mb-8 text-dark">Einfache Beispiele</h2>61<div class="grid md:grid-cols-2 gap-8">62 <!-- Variables Example -->63 <div class="bg-white rounded-xl shadow-md p-8 example-card">64 <div class="flex items-center mb-4">65 <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">66 <i data-feather="code" class="text-primary w-6 h-6"></i>67 </div>68 <h3 class="text-2xl font-bold text-dark">Variables</h3>69 </div>70 <p class="text-gray-600 mb-6">Variables store data values. In JavaScript you can declare them with let, const, or var.</p>71 <div class="bg-gray-100 p-4 rounded-lg mb-6">72 <div class="flex justify-between items-center mb-2">73 <span class="font-mono text-sm text-gray-600">let name = "Alice";</span>74 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">String</span>75 </div>76 <div class="flex justify-between items-center mb-2">77 <span class="font-mono text-sm text-gray-600">const age = 30;</span>78 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Number</span>79 </div>80 <div class="flex justify-between items-center">81 <span class="font-mono text-sm text-gray-600">let isProgrammer = true;</span>82 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Boolean</span>83 </div>84 </div>85 <div class="bg-blue-50 border-l-4 border-blue-500 p-4">86 <p class="text-sm text-blue-700"><strong>Tip:</strong> Use <code class="bg-blue-100 px-1 py-0.5 rounded">const</code> by default, and only use <code class="bg-blue-100 px-1 py-0.5 rounded">let</code> when you need to reassign.</p>87 </div>88 </div>89 90 <!-- Functions Example -->91 <div class="bg-white rounded-xl shadow-md p-8 example-card interactive">92 <div class="flex items-center mb-4">93 <div class="bg-secondary bg-opacity-10 p-3 rounded-full mr-4">94 <i data-feather="repeat" class="text-secondary w-6 h-6"></i>95 </div>96 <h3 class="text-2xl font-bold text-dark">Functions</h3>97 </div>98 <p class="text-gray-600 mb-6">Functions are reusable blocks of code that perform specific tasks.</p>99 100 <div class="relative mb-6">101 <div class="bg-gray-800 text-green-400 p-4 rounded-lg overflow-x-auto">102 <pre><code>function greet(name) {103 return `Hello, ${name}!`;104}105 106const result = greet("Alice");</code></pre>107 </div>108 <div class="absolute -right-2 -top-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">Output</div>109 </div>110 111 <div class="bg-gray-100 p-4 rounded-lg">112 <div class="flex items-center">113 <div class="bg-gray-200 rounded-full p-2 mr-3">114 <i data-feather="chevron-right" class="w-4 h-4 text-gray-600"></i>115 </div>116 <div>117 <p class="font-mono text-sm">Hello, Alice!</p>118 </div>119 </div>120 </div>121 </div>122 </div>123 </section>124 <!-- Intermediate Examples -->125 <section id="intermediate" class="mb-16">126 <h2 class="text-3xl font-bold mb-8 text-dark">Mittlere Beispiele</h2>127<div class="grid md:grid-cols-2 gap-8">128 <!-- DOM Manipulation -->129 <div class="bg-white rounded-xl shadow-md p-8 example-card interactive">130 <div class="flex items-center mb-4">131 <div class="bg-purple-500 bg-opacity-10 p-3 rounded-full mr-4">132 <i data-feather="layout" class="text-purple-500 w-6 h-6"></i>133 </div>134 <h3 class="text-2xl font-bold text-dark">DOM Manipulation</h3>135 </div>136 <p class="text-gray-600 mb-6">JavaScript can modify page content, styles, and structure.</p>137 138 <div class="mb-6">139 <div class="flex space-x-4 mb-4">140 <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded">Change Text</button>141 <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded">Change Color</button>142 <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded">Toggle Visibility</button>143 </div>144 <div class="border-2 border-dashed border-gray-300 p-4 rounded-lg text-center">145 <p id="demo-text" class="text-lg">This element would change with JavaScript</p>146 </div>147 </div>148 149 <div class="bg-gray-100 p-4 rounded-lg">150 <p class="font-mono text-sm text-gray-600">document.getElementById("demo-text").innerText = "New text content";</p>151 </div>152 </div>153 154 <!-- Events -->155 <div class="bg-white rounded-xl shadow-md p-8 example-card interactive">156 <div class="flex items-center mb-4">157 <div class="bg-pink-500 bg-opacity-10 p-3 rounded-full mr-4">158 <i data-feather="activity" class="text-pink-500 w-6 h-6"></i>159 </div>160 <h3 class="text-2xl font-bold text-dark">Event Handling</h3>161 </div>162 <p class="text-gray-600 mb-6">JavaScript can respond to user interactions like clicks, mouse movements, and key presses.</p>163 164 <div class="mb-6">165 <div class="flex space-x-4 mb-4">166 <button class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded">Click Me</button>167 <div class="border-2 border-gray-300 rounded-lg p-4 text-center flex-1">168 <p class="text-gray-600" id="event-status">No interaction yet</p>169 </div>170 </div>171 </div>172 173 <div class="bg-gray-100 p-4 rounded-lg">174 <p class="font-mono text-sm text-gray-600">button.addEventListener("click", () => {<br>175 statusElement.innerText = "Button clicked!";<br>176 });</p>177 </div>178 </div>179 </div>180 </section>181 <!-- Advanced Examples -->182 <section id="advanced">183 <h2 class="text-3xl font-bold mb-8 text-dark">Fortgeschrittene Beispiele</h2>184<div class="grid md:grid-cols-2 gap-8">185 <!-- Fetch API -->186 <div class="bg-white rounded-xl shadow-md p-8 example-card">187 <div class="flex items-center mb-4">188 <div class="bg-indigo-500 bg-opacity-10 p-3 rounded-full mr-4">189 <i data-feather="download" class="text-indigo-500 w-6 h-6"></i>190 </div>191 <h3 class="text-2xl font-bold text-dark">Fetch API</h3>192 </div>193 <p class="text-gray-600 mb-6">JavaScript can fetch data from APIs and update the page without reloading.</p>194 195 <div class="mb-6">196 <div class="bg-gray-800 text-green-400 p-4 rounded-lg mb-4">197 <pre><code>fetch('https://api.example.com/data')198 .then(response => response.json())199 .then(data => displayData(data));</code></pre>200 </div>201 <div class="border-2 border-dashed border-gray-300 p-4 rounded-lg">202 <div class="animate-pulse">203 <div class="h-4 bg-gray-200 rounded mb-2 w-3/4"></div>204 <div class="h-4 bg-gray-200 rounded mb-2 w-1/2"></div>205 <div class="h-4 bg-gray-200 rounded w-5/6"></div>206 </div>207 </div>208 </div>209 </div>210 211 <!-- Async/Await -->212 <div class="bg-white rounded-xl shadow-md p-8 example-card">213 <div class="flex items-center mb-4">214 <div class="bg-yellow-500 bg-opacity-10 p-3 rounded-full mr-4">215 <i data-feather="clock" class="text-yellow-500 w-6 h-6"></i>216 </div>217 <h3 class="text-2xl font-bold text-dark">Async/Await</h3>218 </div>219 <p class="text-gray-600 mb-6">Modern syntax for working with asynchronous operations in a more readable way.</p>220 221 <div class="bg-gray-800 text-green-400 p-4 rounded-lg">222 <pre><code>async function fetchData() {223 try {224 const response = await fetch(url);225 const data = await response.json();226 return data;227 } catch (error) {228 console.error(error);229 }230}</code></pre>231 </div>232 </div>233 </div>234 </section>235 </main>236 237 <footer class="bg-dark text-white py-12">238 <div class="container mx-auto px-6">239 <div class="grid md:grid-cols-3 gap-8">240 <div>241 <h3 class="text-xl font-bold mb-4">JSNoJS</h3>242 <p class="text-gray-400">Learning JavaScript concepts without writing a single line of JavaScript code.</p>243 </div>244 <div>245 <h3 class="text-xl font-bold mb-4">Quick Links</h3>246 <ul class="space-y-2">247 <li><a href="/tutorials.html" class="text-gray-400 hover:text-white">Tutorials</a></li>248 <li><a href="/examples.html" class="text-gray-400 hover:text-white">Examples</a></li>249 <li><a href="/frameworks.html" class="text-gray-400 hover:text-white">Frameworks</a></li>250 </ul>251 </div>252 <div>253 <h3 class="text-xl font-bold mb-4">Connect</h3>254 <div class="flex space-x-4">255 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>256 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>257 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>258 </div>259 </div>260 </div>261 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">262 <p>© 2023 JSNoJS. All rights reserved. No JavaScript was harmed in the making of this website.</p>263 </div>264 </div>265 </footer>266 267 <script>268 feather.replace();269 </script>270</body>271</html>272