Added image based code with demo

content-editable/index.html

@@ -15,13 +15,21 @@
         <a href="../index.html" class="home">
             <img src="../home.svg" alt="home" />
         </a>
-        <h2> Shoppping List(Content Editable) </h2>
+        <h2> Shoppping List (Content Editable) </h2>
         <ul class="content-editable" contenteditable="true">
             <li> 1. Milk </li>
             <li> 2. Bread </li>
             <li> 3. Honey </li>
         </ul>
+        <br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this editable content function in a list is as below:<br>
+                    <img src="../code-example-images/content-editable.png" alt="couldn't load image"/>
+                </p>
+            </details>
     </div>
 </body>
 
-</html>
+</html>

data-attribute/index.html

@@ -35,6 +35,27 @@ <h2> Know data attribute </h2>
         <br />
 
         <p id="msg"></p>
+
+        <details>
+            <summary>see code:</summary>
+            <p>
+                The code to implement this custom script on HTML elements is as below:<br><br>
+                The code is devided in two parts: i)head, ii)body section.<br><br>
+                <ol type="i">
+                    <li>
+                        <b>Head Section</b>
+                        <br><br>
+                        <img src="../code-example-images/data-atr-head.png" alt="couldn't load image"/>
+                    </li>
+                    <br><br>
+                    <li>
+                        <b>Body Section</b>
+                        <br><br>
+                        <img src="../code-example-images/data-atr-body.png" alt="couldn't load image"/>
+                    </li>
+                </ol>
+            </p>
+        </details>
     </div>
 </body>
 

datalist/index.html

@@ -27,7 +27,15 @@ <h1>Datalist Tag</h1>
               <option value="Avacado">
             </datalist>
             <input type="submit">
-          </form>          
+        </form>
+        <br><br>
+        <details>
+            <summary>see code:</summary>
+            <p>
+                The code to implement this Datalist is as below:<br>
+                <img src="../code-example-images/datalist.png" alt="couldn't load image"/>
+            </p>
+        </details>          
     </div>
 </body>
 

details/index.html

@@ -50,6 +50,13 @@ <h1>Details Tag</h1>
                     <td>Blogger</td>
                 </tr>
             </table>
+            <br>
+            <p>
+                <b>But, How does this work?</b><br>
+                The answer to this is simple, we would use a details tag to get this.<br>
+                an example to this can be seen as below:<br><br>
+                <img src="../code-example-images/details-example.png" alt="couldn't load the image">
+            </p>
         </details>
     </div>
 </body>

dialog/index.html

@@ -29,6 +29,22 @@ <h2>I'm a Dialog</h2>
             </form>
         </dialog>  
 
+    <br><br>
+
+    <details>
+      <summary>see code:</summary>
+      <p>
+          The code to implement this Dialog is devided into two parts as below:<br>
+          The code can be split into 2 parts - i)HTML, ii)JS script. <br>
+          Code for these two parts are as follows:<br><br>
+          <b>i) HTML</b><br>
+          <img src="../code-example-images/dialog-body.png" alt="couldn't load image"/>
+          <br><br>
+          <b>ii) Script</b><br>
+          <img src="../code-example-images/dialog-script.png" alt="couldn't load image"/>
+      </p>
+    </details>  
+
     </div>
     <script>
     // Get the modal
@@ -40,8 +56,6 @@ <h2>I'm a Dialog</h2>
     btn.onclick = function() {
         dialog.showModal();
     }
-
-
     </script>
 
 </body>

inputs/index.html

@@ -27,6 +27,15 @@ <h1>All about Inputs</h1>
         <h2>Color picker</h2>
         <input type="color" onchange="showColor(event)">
         <p id="colorMe">Color Me!</p>
+        <br>
+        <details>
+            <summary>see code:</summary>
+            <p>
+                The code to implement this color picker input is as below:<br>
+                <img src="../code-example-images/inputs-cp.png" alt="couldn't load image"/>
+            </p>
+        </details>
+
 
         <div class="box">
             <h2>Required</h2>
@@ -35,15 +44,31 @@ <h2>Required</h2>
                 <input type="text" id="username1" name="username" required>
                 <input type="submit">
             </form>
+            <br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this REQUIRED input is as below:<br>
+                    <img src="../code-example-images/inputs-req.png" alt="couldn't load image"/>
+                </p>
+            </details>
         </div>
 
         <div class="box">
             <h2>Autofocus</h2>
             <form>
                 <label for="username2">Username:</label>
-                <input type="text" id="username2" name="username" required autofocus>
+                <input type="text" id="username2" name="username" autofocus>
                 <input type="submit">
             </form>
+            <br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this AUTOFOCUS input is as below:<br>
+                    <img src="../code-example-images/inputs-af.png" alt="couldn't load image"/>
+                </p>
+            </details>
         </div>
 
         <div class="box">
@@ -53,6 +78,14 @@ <h2>Placeholder</h2>
                 <input type="text" id="username3" name="username" placeholder="Enter your username">
                 <input type="submit">
             </form>
+            <br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this PLACEHOLDER input is as below:<br>
+                    <img src="../code-example-images/inputs-ph.png" alt="couldn't load image"/>
+                </p>
+            </details>
         </div>
 
         <div class="box">
@@ -62,6 +95,14 @@ <h2>E-mail</h2>
                 <input id="email" name="email" type="email" />
                 <input type="submit">
             </form>
+            <br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this EMAIL input is as below:<br>
+                    <img src="../code-example-images/inputs-eml.png" alt="couldn't load image"/>
+                </p>
+            </details>
         </div>
 
         <div class="box">
@@ -75,6 +116,14 @@ <h2>Regex validations</h2>
                         pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
                 <button type="submit"> Test </button>
             </form>
+            <br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this REGEX VALIDATION input is as below:<br>
+                    <img src="../code-example-images/inputs-reg.png" alt="couldn't load image"/>
+                </p>
+            </details>
         </div>        
     </div>
 </body>

lazy-loading/index.html

@@ -27,6 +27,15 @@ <h1>Lazy-Loading-with-html</h1>
     <img loading="lazy" src="data:image/jpeg;base64,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" width="600p" height="400" alt="lazy-load-example" />
     <img loading="lazy" src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg" width="600p" height="400" alt="lazy-load-example" />
     <img loading="lazy" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnM3iCmhNFzU34lVCThT-prsz2kapAr58s6g&usqp=CAU" width="600p" height="400" alt="lazy-load-example" />
+
+    <br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this lazy-loading function in a list is as below:<br>
+                    <img src="../code-example-images/lazy-loading.png" alt="couldn't load image"/>
+                </p>
+            </details>
     </div>
 </body>
 </html>

map/index.html

@@ -27,6 +27,20 @@ <h2> Map - Image map </h2>
                     <area shape="circle" coords="426,409,100" href="clown.htm" alt="Clown">
                 </map>
             </div>
+
+            <br><br>
+
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this map is as below:<br>
+                    <img src="../code-example-images/map.png" alt="couldn't load image"/>
+                </p><br>
+                <p>
+                    The components have their own separate html page that looks like:<br>
+                    <img src="../code-example-images/map-element.png" alt="couldn't load image"/>
+                </p>
+            </details>  
         </div>
     </body>
 </html>

mark/index.html

@@ -17,6 +17,14 @@
         </a>
         <h1>Mark something to Highlight</h1>
         <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with a HTML tag? </p>
+        <br>
+        <details>
+            <summary>see code:</summary>
+            <p>
+                The code to implement this HIGHLIGHTED content is as below:<br>
+                <img src="../code-example-images/mark.png" alt="couldn't load image"/>
+            </p>
+        </details>
     </div>
 </body>
 </html>

meter/index.html

@@ -24,6 +24,16 @@ <h2> Meter </h2>
 
             <label for="file">Downloading progress:</label>
             <progress id="file" value="32" max="100"> 32% </progress>
+
+            <br>
+
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this meter is as below:<br>
+                    <img src="../code-example-images/meter.png" alt="couldn't load image"/>
+                </p>
+            </details>  
         </div>
     </body>
 </html>

output/index.html

@@ -21,6 +21,14 @@ <h2> Let's see the Output </h2>
                 * <input type="number" id="b" value="0">
                 = <output name="x" for="a b"></output>
             </form>
+            <br><br>
+            <details>
+                <summary>see code:</summary>
+                <p>
+                    The code to implement this OUTPUT is as below:<br>
+                    <img src="../code-example-images/output.png" alt="couldn't load image"/>
+                </p>
+            </details>
         </div>
     </body>
 </html>

range/index.html

@@ -35,9 +35,18 @@ <h1>Slider</h1>
                 value=""
                 onchange="changeValue(event)"/>
         </form>
+        <br>
         <div class="range">
             <output id="output" name="result">  </output>
         </div>
+        <br>
+        <details>
+            <summary>see code:</summary>
+            <p>
+                The code to implement this slider is as below:<br>
+                <img src="../code-example-images/slider.png" alt="couldn't load image"/>
+            </p>
+        </details>  
     </div>
 </body>