added HTML 5 content

Author: ajay-dhangar

docs/_scripts/MyFirstHTML5Audio.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const MyFirstHTML5Audio = () => {
+    return (
+        <div>
+            <h1>My First HTML5 Audio</h1>
+            <audio controls>
+                <source src="/audio/audio.mp3" type="audio/mp3" />
+                Your browser does not support the audio tag.
+            </audio>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Audio;

docs/_scripts/MyFirstHTML5Canvas.js

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+const MyFirstHTML5Canvas = () => {
+    useEffect(() => {
+        const canvas = document.getElementById('myCanvas');
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = 'lightblue';
+            ctx.fillRect(0, 0, 200, 100);
+            ctx.fillStyle = 'black';
+            ctx.font = '20px Arial';
+            ctx.fillText('Hello Canvas', 50, 50);
+        }
+    }, []);
+
+    return (
+        <div>
+            <h1>My First HTML5 Canvas</h1>
+            <canvas id="myCanvas" width="200" height="100"></canvas>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Canvas;

docs/_scripts/MyFirstHTML5Form.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const MyFirstHTML5Form = () => {
+    return (
+        <div>
+            <h1>Contact Us</h1>
+            <form>
+                <label htmlFor="name">Name:</label>
+                <input type="text" id="name" name="name" required />
+
+                <label htmlFor="email">Email:</label>
+                <input type="email" id="email" name="email" required />
+
+                <label htmlFor="phone">Phone:</label>
+                <input type="tel" id="phone" name="phone" />
+
+                <label htmlFor="message">Message:</label>
+                <textarea id="message" name="message" required></textarea>
+
+                <input type="submit" value="Submit" />
+            </form>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Form;

docs/_scripts/MyFirstHTML5Page.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const MyFirstHTML5Page = () => {
+    return (
+        <div>
+            <header>
+                <h1>Welcome to My Website</h1>
+                <nav>
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Contact</a></li>
+                    </ul>
+                </nav>
+            </header>
+            <main>
+                <article>
+                    <h2>My First Blog Post</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </article>
+                <section>
+                    <h2>About Me</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </section>
+                <aside>
+                    <h3>Related Links</h3>
+                    <ul>
+                        <li><a href="#">Link 1</a></li>
+                        <li><a href="#">Link 2</a></li>
+                        <li><a href="#">Link 3</a></li>
+                    </ul>
+                </aside>
+            </main>
+            <footer>
+                <p>&copy; 2021 My Website. All rights reserved.</p>
+            </footer>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Page;

docs/_scripts/MyFirstHTML5Video.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const MyFirstHTML5Video = () => {
+    return (
+        <div>
+            <h1>My First HTML5 Video</h1>
+            <video controls style={{ width: '100%' }}>
+                <source src="/videos/video-1.mp4" type="video/mp4" />
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    );
+};
+
+export default MyFirstHTML5Video;

docs/_scripts/MyFirstHTML5WebStorageEx1.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx1 = () => {
+    const [output, setOutput] = useState('');
+
+    const saveData = () => {
+        localStorage.setItem('name', 'John Doe');
+        localStorage.setItem('email', '[email protected]');
+    };
+
+    const retrieveData = () => {
+        const name = localStorage.getItem('name');
+        const email = localStorage.getItem('email');
+        setOutput(`Name: ${name}, Email: ${email}`);
+    };
+
+    return (
+        <div>
+            <h1>My First Web Storage Example</h1>
+            <button onClick={saveData}>Save Data</button>
+            <button onClick={retrieveData}>Retrieve Data</button>
+            <p>{output}</p>
+        </div>
+    );
+};
+
+export default MyFirstHTML5WebStorageEx1;

docs/_scripts/MyFirstHTML5WebStorageEx2.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx2 = () => {
+    const [output, setOutput] = useState('');
+
+    const saveData = () => {
+        sessionStorage.setItem('name', 'Jane Doe');
+        sessionStorage.setItem('email', '[email protected]');
+    };
+
+    const retrieveData = () => {
+        const name = sessionStorage.getItem('name');
+        const email = sessionStorage.getItem('email');
+        setOutput(`Name: ${name}, Email: ${email}`);
+    };
+
+    return (
+        <div>
+            <h1>My First Web Storage Example</h1>
+            <button onClick={saveData}>Save Data</button>
+            <button onClick={retrieveData}>Retrieve Data</button>
+            <p>{output}</p>
+        </div>
+    );
+};
+
+export default MyFirstHTML5WebStorageEx2;

docs/_scripts/MyFirstHTML5WebStorageEx3.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx3 = () => {
+    const [output, setOutput] = useState('');
+
+    const getLocation = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(showPosition, showError);
+        } else {
+            setOutput('Geolocation is not supported by this browser.');
+        }
+    };
+
+    const showPosition = (position) => {
+        const latitude = position.coords.latitude;
+        const longitude = position.coords.longitude;
+        setOutput(`Latitude: ${latitude}, Longitude: ${longitude}`);
+    };
+
+    const showError = (error) => {
+        setOutput(`Error: ${error.message}`);
+    };
+
+    return (
+        <div>
+            <h1>My First Geolocation Example</h1>
+            <button onClick={getLocation}>Get Location</button>
+            <p>{output}</p>
+        </div>
+    );
+};
+
+export default MyFirstHTML5WebStorageEx3;

docs/_scripts/MyFirstHTML5WebStorageEx4.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+const MyFirstHTML5WebStorageEx4 = () => {
+  const [location, setLocation] = useState(null);
+  const [error, setError] = useState(null);
+  const [watchId, setWatchId] = useState(null);
+
+  const startTracking = () => {
+    if (navigator.geolocation) {
+      const id = navigator.geolocation.watchPosition(
+        (position) => showPosition(position),
+        (error) => showError(error)
+      );
+      setWatchId(id);
+    } else {
+      setError('Geolocation is not supported by this browser.');
+    }
+  };
+
+  const stopTracking = () => {
+    if (watchId) {
+      navigator.geolocation.clearWatch(watchId);
+      setWatchId(null);
+      setLocation(null);
+      setError(null);
+    }
+  };
+
+  const showPosition = (position) => {
+    const { latitude, longitude } = position.coords;
+    setLocation(`Latitude: ${latitude}, Longitude: ${longitude}`);
+  };
+
+  const showError = (error) => {
+    setError(`Error: ${error.message}`);
+  };
+
+  return (
+    <div>
+      <h1>My First Geolocation Example</h1>
+      <button onClick={startTracking}>Start Tracking</button>
+      <button onClick={stopTracking}>Stop Tracking</button>
+      <p>{location ? location : error}</p>
+    </div>
+  );
+};
+
+export default MyFirstHTML5WebStorageEx4;

docs/html-5/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "👩🏻‍💻 HTML 5",
+  "position": 5,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn the basics of HTML5 and how to create a simple webpage."
+  }
+}