Skip to content

Commit ac381ef

Browse files
ajay-dhangarajay-dhangar
committed
added HTML 5 content
1 parent 79e154f commit ac381ef

30 files changed

+845
-2
lines changed

‎docs/_scripts/MyFirstHTML5Audio.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
3+
const MyFirstHTML5Audio = () => {
4+
return (
5+
<div>
6+
<h1>My First HTML5 Audio</h1>
7+
<audio controls>
8+
<source src="/audio/audio.mp3" type="audio/mp3" />
9+
Your browser does not support the audio tag.
10+
</audio>
11+
</div>
12+
);
13+
};
14+
15+
export default MyFirstHTML5Audio;

‎docs/_scripts/MyFirstHTML5Canvas.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useEffect } from 'react';
2+
3+
const MyFirstHTML5Canvas = () => {
4+
useEffect(() => {
5+
const canvas = document.getElementById('myCanvas');
6+
if (canvas) {
7+
const ctx = canvas.getContext('2d');
8+
ctx.fillStyle = 'lightblue';
9+
ctx.fillRect(0, 0, 200, 100);
10+
ctx.fillStyle = 'black';
11+
ctx.font = '20px Arial';
12+
ctx.fillText('Hello Canvas', 50, 50);
13+
}
14+
}, []);
15+
16+
return (
17+
<div>
18+
<h1>My First HTML5 Canvas</h1>
19+
<canvas id="myCanvas" width="200" height="100"></canvas>
20+
</div>
21+
);
22+
};
23+
24+
export default MyFirstHTML5Canvas;

‎docs/_scripts/MyFirstHTML5Form.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
3+
const MyFirstHTML5Form = () => {
4+
return (
5+
<div>
6+
<h1>Contact Us</h1>
7+
<form>
8+
<label htmlFor="name">Name:</label>
9+
<input type="text" id="name" name="name" required />
10+
11+
<label htmlFor="email">Email:</label>
12+
<input type="email" id="email" name="email" required />
13+
14+
<label htmlFor="phone">Phone:</label>
15+
<input type="tel" id="phone" name="phone" />
16+
17+
<label htmlFor="message">Message:</label>
18+
<textarea id="message" name="message" required></textarea>
19+
20+
<input type="submit" value="Submit" />
21+
</form>
22+
</div>
23+
);
24+
};
25+
26+
export default MyFirstHTML5Form;

‎docs/_scripts/MyFirstHTML5Page.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
3+
const MyFirstHTML5Page = () => {
4+
return (
5+
<div>
6+
<header>
7+
<h1>Welcome to My Website</h1>
8+
<nav>
9+
<ul>
10+
<li><a href="#">Home</a></li>
11+
<li><a href="#">About</a></li>
12+
<li><a href="#">Contact</a></li>
13+
</ul>
14+
</nav>
15+
</header>
16+
<main>
17+
<article>
18+
<h2>My First Blog Post</h2>
19+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
20+
</article>
21+
<section>
22+
<h2>About Me</h2>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
24+
</section>
25+
<aside>
26+
<h3>Related Links</h3>
27+
<ul>
28+
<li><a href="#">Link 1</a></li>
29+
<li><a href="#">Link 2</a></li>
30+
<li><a href="#">Link 3</a></li>
31+
</ul>
32+
</aside>
33+
</main>
34+
<footer>
35+
<p>&copy; 2021 My Website. All rights reserved.</p>
36+
</footer>
37+
</div>
38+
);
39+
};
40+
41+
export default MyFirstHTML5Page;

‎docs/_scripts/MyFirstHTML5Video.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
3+
const MyFirstHTML5Video = () => {
4+
return (
5+
<div>
6+
<h1>My First HTML5 Video</h1>
7+
<video controls style={{ width: '100%' }}>
8+
<source src="/videos/video-1.mp4" type="video/mp4" />
9+
Your browser does not support the video tag.
10+
</video>
11+
</div>
12+
);
13+
};
14+
15+
export default MyFirstHTML5Video;

‎docs/_scripts/MyFirstHTML5WebStorageEx1.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { useState } from 'react';
2+
3+
const MyFirstHTML5WebStorageEx1 = () => {
4+
const [output, setOutput] = useState('');
5+
6+
const saveData = () => {
7+
localStorage.setItem('name', 'John Doe');
8+
localStorage.setItem('email', 'john@example.com');
9+
};
10+
11+
const retrieveData = () => {
12+
const name = localStorage.getItem('name');
13+
const email = localStorage.getItem('email');
14+
setOutput(`Name: ${name}, Email: ${email}`);
15+
};
16+
17+
return (
18+
<div>
19+
<h1>My First Web Storage Example</h1>
20+
<button onClick={saveData}>Save Data</button>
21+
<button onClick={retrieveData}>Retrieve Data</button>
22+
<p>{output}</p>
23+
</div>
24+
);
25+
};
26+
27+
export default MyFirstHTML5WebStorageEx1;

‎docs/_scripts/MyFirstHTML5WebStorageEx2.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { useState } from 'react';
2+
3+
const MyFirstHTML5WebStorageEx2 = () => {
4+
const [output, setOutput] = useState('');
5+
6+
const saveData = () => {
7+
sessionStorage.setItem('name', 'Jane Doe');
8+
sessionStorage.setItem('email', 'jane@example.com');
9+
};
10+
11+
const retrieveData = () => {
12+
const name = sessionStorage.getItem('name');
13+
const email = sessionStorage.getItem('email');
14+
setOutput(`Name: ${name}, Email: ${email}`);
15+
};
16+
17+
return (
18+
<div>
19+
<h1>My First Web Storage Example</h1>
20+
<button onClick={saveData}>Save Data</button>
21+
<button onClick={retrieveData}>Retrieve Data</button>
22+
<p>{output}</p>
23+
</div>
24+
);
25+
};
26+
27+
export default MyFirstHTML5WebStorageEx2;

‎docs/_scripts/MyFirstHTML5WebStorageEx3.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useState } from 'react';
2+
3+
const MyFirstHTML5WebStorageEx3 = () => {
4+
const [output, setOutput] = useState('');
5+
6+
const getLocation = () => {
7+
if (navigator.geolocation) {
8+
navigator.geolocation.getCurrentPosition(showPosition, showError);
9+
} else {
10+
setOutput('Geolocation is not supported by this browser.');
11+
}
12+
};
13+
14+
const showPosition = (position) => {
15+
const latitude = position.coords.latitude;
16+
const longitude = position.coords.longitude;
17+
setOutput(`Latitude: ${latitude}, Longitude: ${longitude}`);
18+
};
19+
20+
const showError = (error) => {
21+
setOutput(`Error: ${error.message}`);
22+
};
23+
24+
return (
25+
<div>
26+
<h1>My First Geolocation Example</h1>
27+
<button onClick={getLocation}>Get Location</button>
28+
<p>{output}</p>
29+
</div>
30+
);
31+
};
32+
33+
export default MyFirstHTML5WebStorageEx3;

‎docs/_scripts/MyFirstHTML5WebStorageEx4.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { useState } from 'react';
2+
3+
const MyFirstHTML5WebStorageEx4 = () => {
4+
const [location, setLocation] = useState(null);
5+
const [error, setError] = useState(null);
6+
const [watchId, setWatchId] = useState(null);
7+
8+
const startTracking = () => {
9+
if (navigator.geolocation) {
10+
const id = navigator.geolocation.watchPosition(
11+
(position) => showPosition(position),
12+
(error) => showError(error)
13+
);
14+
setWatchId(id);
15+
} else {
16+
setError('Geolocation is not supported by this browser.');
17+
}
18+
};
19+
20+
const stopTracking = () => {
21+
if (watchId) {
22+
navigator.geolocation.clearWatch(watchId);
23+
setWatchId(null);
24+
setLocation(null);
25+
setError(null);
26+
}
27+
};
28+
29+
const showPosition = (position) => {
30+
const { latitude, longitude } = position.coords;
31+
setLocation(`Latitude: ${latitude}, Longitude: ${longitude}`);
32+
};
33+
34+
const showError = (error) => {
35+
setError(`Error: ${error.message}`);
36+
};
37+
38+
return (
39+
<div>
40+
<h1>My First Geolocation Example</h1>
41+
<button onClick={startTracking}>Start Tracking</button>
42+
<button onClick={stopTracking}>Stop Tracking</button>
43+
<p>{location ? location : error}</p>
44+
</div>
45+
);
46+
};
47+
48+
export default MyFirstHTML5WebStorageEx4;

‎docs/html-5/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "👩🏻‍💻 HTML 5",
3+
"position": 5,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Learn the basics of HTML5 and how to create a simple webpage."
7+
}
8+
}

0 commit comments

Comments
 (0)