Merge 60d6b260c6 into f478ca2c9d

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 @@
         <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 @@
               <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 @@
                     <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 @@
             </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 @@
     btn.onclick = function() {
         dialog.showModal();
     }
-    
-    
     </script>
         
 </body>

inputs/index.html

@@ -27,6 +27,15 @@
         <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 @@
                 <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 @@
                 <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 @@
                 <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 @@
                         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>

map/index.html

@@ -27,6 +27,20 @@
                     <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 @@
 
             <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 @@
                 * <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 @@
                 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>