URL Status Checker
URL Status Checker
Python code on a Blogger website
To run your Python code on a Blogger website, you'll need to translate the functionality into web technologies that are compatible with the platform, such as HTML, CSS, and JavaScript.
Since Blogger doesn't support server-side Python execution directly, you can achieve similar functionality with JavaScript on the client side.
HTML Structure
Create a basic HTML structure where users can upload a CSV file and get the status codes of the URLs contained in it:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Status Checker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>URL Status Checker</h1>
<input type="file" id="fileInput" accept=".csv">
<button onclick="processFile()">Check Status</button>
<div id="results"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS Styling
Create a `styles.css` file to style the page:
```css
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
input[type="file"] {
margin-right: 10px;
}
button {
padding: 10px 15px;
font-size: 16px;
}
#results {
margin-top: 20px;
}
```
JavaScript Functionality
Create a `script.js` file to handle the CSV file and fetch URL statuses:
```javascript
function processFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
alert('Please upload a CSV file.');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const csvData = event.target.result;
const urls = parseCSV(csvData);
checkURLs(urls);
};
reader.readAsText(file);
}
function parseCSV(csvData) {
const lines = csvData.split('\n');
return lines.map(line => line.trim()).filter(line => line !== '');
}
function checkURLs(urls) {
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = ''; // Clear previous results
urls.forEach(url => {
fetch(url)
.then(response => {
const status = response.status;
resultsDiv.innerHTML += `<p>${url}: ${status}</p>`;
})
.catch(error => {
resultsDiv.innerHTML += `<p>${url}: Error</p>`;
});
});
}
```
Explanation
- **HTML**: Contains an input for file upload and a button to trigger the status check. Results are displayed in a `div`.
- **CSS**: Provides basic styling to improve the appearance.
- **JavaScript**:
- **`processFile`**: Reads the CSV file and parses URLs.
- **`parseCSV`**: Converts CSV content into an array of URLs.
- **`checkURLs`**: Uses the Fetch API to check the status of each URL and displays the results.
How to Implement
1. **Upload the HTML and CSS** files to your Blogger site using the "Layout" section or by embedding them in a custom HTML widget.
2. **Include the JavaScript** in a `<script>` tag directly within the HTML or link it as an external file.
Conclusion
This solution will work within the constraints of a Blogger site and allows for the URL checking functionality without needing server-side execution.