Welcome to the web scripting thread! In this thread, we will cover some practical examples and tips for web scripting using HTML, CSS, and JavaScript. Feel free to ask questions and share your own scripts and insights. Let's start with a basic example that demonstrates the use of HTML and CSS to create a simple webpage.
Example 1: Simple HTML and CSS Script
Let's start with a basic example that demonstrates the use of HTML and CSS to create a simple webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Webpage</h1>
<p>This is a simple HTML and CSS example.</p>
</div>
</body>
</html>
Example 2: Basic JavaScript Interaction
Now, let's add some interactivity to our webpage using JavaScript. The following example will display an alert when the user clicks a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Interactive Webpage</h1>
<button onclick="showAlert()">Click Me</button>
</div>
<script>
function showAlert() {
alert('Button was clicked!');
}
</script>
</body>
</html>
Example 3: Fetching Data from an API
In this example, we will fetch data from a public API and display it on the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Data Fetch</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
#data {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Fetch Data from API</h1>
<button onclick="fetchData()">Get Data</button>
<div id="data"></div>
</div>
<script>
function fetchData() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
document.getElementById('data').innerText = JSON.stringify(data, null, 2);
})
.catch(error => console.error('Error fetching data:', error));
}
</script>
</body>
</html>
Conclusion
Web scripting can greatly enhance the interactivity and functionality of your webpages. By combining HTML, CSS, and JavaScript, you can create engaging and dynamic web experiences. Feel free to modify and expand upon these examples to suit your needs. If you have any questions or additional scripts to share, please post them in this thread!
Happy coding!
