Skip to content

Commit 877c662

Browse files
umar-sofyrusumar-sofyrus
committed
basic website
0 parents  commit 877c662

8 files changed

Lines changed: 316 additions & 0 deletions

‎README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Testing Website Project
2+
3+
## Overview
4+
This project is a simple testing website that demonstrates the use of HTML elements such as iframes, select boxes, input fields, and buttons. It serves as a platform for experimenting with user interactions and displaying dynamic content based on those interactions.
5+
6+
## Project Structure
7+
The project consists of the following files:
8+
9+
- **index.html**: The homepage of the website. It contains links to other HTML files, including those with nested iframes and simple iframes. It also includes basic elements like select boxes, input fields, and buttons, along with functionality to display text based on user interactions.
10+
11+
- **iframe_page.html**: This page features nested iframes. Each iframe contains select elements with multiple options, input fields, and hoverable buttons. When a user selects an option or enters text, a line of text appears to indicate the selection or input.
12+
13+
- **simple_page.html**: This page contains simple iframes and similar features as the iframe_page.html, including select boxes, input fields, and hoverable buttons. It also displays text based on user interactions without using nested iframes.
14+
15+
## Usage
16+
1. Open `index.html` in a web browser to access the homepage.
17+
2. Click on the links to navigate to `iframe_page.html` or `simple_page.html`.
18+
3. Interact with the elements on each page to see how the text updates based on your selections or inputs.
19+
20+
## Features
21+
- Nested and simple iframes
22+
- Select boxes with multiple options
23+
- Input fields for user text entry
24+
- Hoverable buttons that enhance user experience
25+
- Dynamic text display based on user interactions
26+
27+
Feel free to explore and modify the code to better understand how these elements work together!

‎iframe_page.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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>Iframe Page</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 20px;
11+
}
12+
iframe {
13+
width: 100%;
14+
height: 200px;
15+
border: 1px solid #ccc;
16+
margin-bottom: 20px;
17+
}
18+
button:hover {
19+
background-color: #f0f0f0;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
25+
<h1>Nested Iframes Page</h1>
26+
27+
<iframe src="nested_iframe_1.html"></iframe>
28+
<iframe src="nested_iframe_2.html"></iframe>
29+
30+
<script>
31+
function displayText(id, text) {
32+
document.getElementById(id).innerText = text;
33+
}
34+
</script>
35+
36+
</body>
37+
</html>

‎index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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>Testing Website</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 20px;
11+
}
12+
a {
13+
display: block;
14+
margin: 10px 0;
15+
text-decoration: none;
16+
color: blue;
17+
}
18+
button:hover {
19+
background-color: lightgray;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<h1>Welcome to the Testing Website</h1>
25+
<p>Select a page to explore:</p>
26+
<a href="iframe_page.html">Nested Iframes Page</a>
27+
<a href="simple_page.html">Simple Iframes Page</a>
28+
29+
<h2>Interactive Elements</h2>
30+
<label for="selectBox">Choose an option:</label>
31+
<select id="selectBox" onchange="displaySelection()">
32+
<option value="">--Select an option--</option>
33+
<option value="Option 1">Option 1</option>
34+
<option value="Option 2">Option 2</option>
35+
<option value="Option 3">Option 3</option>
36+
</select>
37+
<p id="selectionText"></p>
38+
39+
<label for="inputField">Enter some text:</label>
40+
<input type="text" id="inputField" oninput="displayInput()" />
41+
<p id="inputText"></p>
42+
43+
<script>
44+
function displaySelection() {
45+
const selectBox = document.getElementById('selectBox');
46+
const selectionText = document.getElementById('selectionText');
47+
selectionText.textContent = 'You selected: ' + selectBox.value;
48+
}
49+
50+
function displayInput() {
51+
const inputField = document.getElementById('inputField');
52+
const inputText = document.getElementById('inputText');
53+
inputText.textContent = 'You entered: ' + inputField.value;
54+
}
55+
</script>
56+
</body>
57+
</html>

‎nested_iframe_1.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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>Nested Iframe 1</title>
7+
<style>
8+
body { font-family: Arial, sans-serif; margin: 10px; }
9+
button:hover { background-color: #f0f0f0; }
10+
</style>
11+
</head>
12+
<body>
13+
<h2>Nested Iframe 1</h2>
14+
<label for="selectBox1">Choose an option:</label>
15+
<select id="selectBox1" onchange="displaySelection()">
16+
<option value="">--Select an option--</option>
17+
<option value="Option 1">Option 1</option>
18+
<option value="Option 2">Option 2</option>
19+
<option value="Option 3">Option 3</option>
20+
</select>
21+
<p id="selectionText1"></p>
22+
23+
<label for="inputField1">Enter some text:</label>
24+
<input type="text" id="inputField1" oninput="displayInput()" />
25+
<p id="inputText1"></p>
26+
27+
<button onclick="alert('Button in Nested Iframe 1 clicked!')">Hoverable Button</button>
28+
29+
<script>
30+
function displaySelection() {
31+
const selectBox = document.getElementById('selectBox1');
32+
const selectionText = document.getElementById('selectionText1');
33+
selectionText.textContent = 'You selected: ' + selectBox.value;
34+
}
35+
function displayInput() {
36+
const inputField = document.getElementById('inputField1');
37+
const inputText = document.getElementById('inputText1');
38+
inputText.textContent = 'You entered: ' + inputField.value;
39+
}
40+
</script>
41+
</body>
42+
</html>

‎nested_iframe_2.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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>Nested Iframe 2</title>
7+
<style>
8+
body { font-family: Arial, sans-serif; margin: 10px; }
9+
button:hover { background-color: #f0f0f0; }
10+
</style>
11+
</head>
12+
<body>
13+
<h2>Nested Iframe 2</h2>
14+
<label for="selectBox2">Choose an option:</label>
15+
<select id="selectBox2" onchange="displaySelection()">
16+
<option value="">--Select an option--</option>
17+
<option value="Option 1">Option 1</option>
18+
<option value="Option 2">Option 2</option>
19+
<option value="Option 3">Option 3</option>
20+
</select>
21+
<p id="selectionText2"></p>
22+
23+
<label for="inputField2">Enter some text:</label>
24+
<input type="text" id="inputField2" oninput="displayInput()" />
25+
<p id="inputText2"></p>
26+
27+
<button onclick="alert('Button in Nested Iframe 2 clicked!')">Hoverable Button</button>
28+
29+
<script>
30+
function displaySelection() {
31+
const selectBox = document.getElementById('selectBox2');
32+
const selectionText = document.getElementById('selectionText2');
33+
selectionText.textContent = 'You selected: ' + selectBox.value;
34+
}
35+
function displayInput() {
36+
const inputField = document.getElementById('inputField2');
37+
const inputText = document.getElementById('inputText2');
38+
inputText.textContent = 'You entered: ' + inputField.value;
39+
}
40+
</script>
41+
</body>
42+
</html>

‎simple_page.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>Simple Page</title>
7+
<style>
8+
.hover-button {
9+
padding: 10px 15px;
10+
background-color: #007BFF;
11+
color: white;
12+
border: none;
13+
cursor: pointer;
14+
transition: background-color 0.3s;
15+
}
16+
.hover-button:hover {
17+
background-color: #0056b3;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<h1>Simple Page</h1>
23+
<h2>Select an option:</h2>
24+
<select id="simpleSelect" onchange="displaySelection()">
25+
<option value="">--Select an option--</option>
26+
<option value="Option 1">Option 1</option>
27+
<option value="Option 2">Option 2</option>
28+
<option value="Option 3">Option 3</option>
29+
</select>
30+
<p id="selectionText"></p>
31+
32+
<h2>Input your text:</h2>
33+
<input type="text" id="textInput" oninput="displayInput()" placeholder="Type something...">
34+
<p id="inputText"></p>
35+
36+
<h2>Hoverable Button:</h2>
37+
<button class="hover-button" onclick="alert('Button Clicked!')">Hover over me!</button>
38+
39+
<script>
40+
function displaySelection() {
41+
const select = document.getElementById('simpleSelect');
42+
const selectionText = document.getElementById('selectionText');
43+
selectionText.textContent = 'You selected: ' + select.value;
44+
}
45+
46+
function displayInput() {
47+
const input = document.getElementById('textInput');
48+
const inputText = document.getElementById('inputText');
49+
inputText.textContent = 'You entered: ' + input.value;
50+
}
51+
</script>
52+
</body>
53+
</html>

‎single_iframe.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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>Single Iframe Page</title>
7+
<style>
8+
body { font-family: Arial, sans-serif; margin: 20px; }
9+
iframe { width: 100%; height: 250px; border: 1px solid #ccc; }
10+
</style>
11+
</head>
12+
<body>
13+
<h1>Single Iframe Page</h1>
14+
<iframe src="single_iframe_content.html"></iframe>
15+
</body>
16+
</html>

‎single_iframe_content.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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>Single Iframe Content</title>
7+
<style>
8+
body { font-family: Arial, sans-serif; margin: 10px; }
9+
button:hover { background-color: #f0f0f0; }
10+
</style>
11+
</head>
12+
<body>
13+
<h2>Single Iframe Content</h2>
14+
<label for="selectBoxS">Choose an option:</label>
15+
<select id="selectBoxS" onchange="displaySelection()">
16+
<option value="">--Select an option--</option>
17+
<option value="Option 1">Option 1</option>
18+
<option value="Option 2">Option 2</option>
19+
<option value="Option 3">Option 3</option>
20+
</select>
21+
<p id="selectionTextS"></p>
22+
23+
<label for="inputFieldS">Enter some text:</label>
24+
<input type="text" id="inputFieldS" oninput="displayInput()" />
25+
<p id="inputTextS"></p>
26+
27+
<button onclick="alert('Button in Single Iframe clicked!')">Hoverable Button</button>
28+
29+
<script>
30+
function displaySelection() {
31+
const selectBox = document.getElementById('selectBoxS');
32+
const selectionText = document.getElementById('selectionTextS');
33+
selectionText.textContent = 'You selected: ' + selectBox.value;
34+
}
35+
function displayInput() {
36+
const inputField = document.getElementById('inputFieldS');
37+
const inputText = document.getElementById('inputTextS');
38+
inputText.textContent = 'You entered: ' + inputField.value;
39+
}
40+
</script>
41+
</body>
42+
</html>

0 commit comments

Comments
 (0)