human (Oct 17, 2024, 07:03 AM)
Build an artifact - no react - that accepts YAML code in a textarea and updates a JSON pretty printed pre tag below every time that textarea is changed or onkeyup or has stuff posted into it
assistant (Oct 17, 2024, 07:03 AM)
Certainly! I'll create an HTML artifact with JavaScript that accepts YAML code in a textarea and updates a JSON pretty-printed pre tag below it every time the textarea content changes. This will use the js-yaml library to parse YAML and convert it to JSON.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YAML to JSON Converter</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
textarea, pre {
width: 100%;
min-height: 200px;
margin-bottom: 20px;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ddd;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>YAML to JSON Converter</h1>
<textarea id="yamlInput" placeholder="Enter your YAML here..."></textarea>
<h2>JSON Output:</h2>
<pre id="jsonOutput"></pre>
<script>
const yamlInput = document.getElementById('yamlInput');
const jsonOutput = document.getElementById('jsonOutput');
function updateJSON() {
try {
const yamlText = yamlInput.value;
const jsonObj = jsyaml.load(yamlText);
const jsonText = JSON.stringify(jsonObj, null, 2);
jsonOutput.textContent = jsonText;
} catch (error) {
jsonOutput.textContent = `Error: ${error.message}`;
}
}
yamlInput.addEventListener('input', updateJSON);
updateJSON(); // Initial call to populate on page load
</script>
</body>
</html>
I've created an HTML artifact that includes a YAML to JSON converter. Here's a breakdown of the key components:
- HTML structure: It includes a textarea for YAML input and a pre tag for JSON output.
- CSS: Basic styling to make the interface user-friendly.
- JavaScript:
- Uses the js-yaml library (loaded from CDN) to parse YAML.
- Converts the parsed YAML to JSON and pretty-prints it.
- Updates the JSON output whenever the textarea content changes.
To use this converter:
- Enter or paste your YAML code into the textarea.
- The JSON equivalent will automatically appear in the output section below.
- If there's an error in the YAML, an error message will be displayed instead.
This artifact provides a simple, interactive way to convert YAML to JSON in real-time. You can modify or extend it as needed. Let me know if you want any changes or have any questions!
human (Oct 17, 2024, 07:05 AM)
Make it more mobile friendly including font size 16px on inputs
assistant (Oct 17, 2024, 07:05 AM)
Certainly! I'll update the artifact to make it more mobile-friendly, including increasing the font size to 16px for inputs. I'll also add some responsive design elements to ensure it looks good on both desktop and mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YAML to JSON Converter</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
h2 {
font-size: 20px;
margin-top: 20px;
}
textarea, pre {
width: 100%;
min-height: 200px;
margin-bottom: 20px;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
}
textarea {
resize: vertical;
}
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
textarea, pre {
min-height: 150px;
}
}
</style>
</head>
<body>
<h1>YAML to JSON Converter</h1>
<textarea id="yamlInput" placeholder="Enter your YAML here..."></textarea>
<h2>JSON Output:</h2>
<pre id="jsonOutput"></pre>
<script>
const yamlInput = document.getElementById('yamlInput');
const jsonOutput = document.getElementById('jsonOutput');
function updateJSON() {
try {
const yamlText = yamlInput.value;
const jsonObj = jsyaml.load(yamlText);
const jsonText = JSON.stringify(jsonObj, null, 2);
jsonOutput.textContent = jsonText;
} catch (error) {
jsonOutput.textContent = `Error: ${error.message}`;
}
}
yamlInput.addEventListener('input', updateJSON);
updateJSON(); // Initial call to populate on page load
</script>
</body>
</html>
I've updated the YAML to JSON converter to make it more mobile-friendly. Here are the key changes:
-
Font size:
- Set the base font size to 16px for better readability on mobile devices.
- Increased the font size for the textarea and pre elements to 16px.
-
Responsive design:
- Added a media query for screens smaller than 600px wide.
- Adjusted padding, font sizes, and minimum heights for smaller screens.
-
Layout improvements:
- Used
box-sizing: border-box
to include padding in the width calculations. - Made the textarea vertically resizable.
- Improved the pre element's wrapping and overflow behavior for long lines of JSON.
- Used
-
General styling:
- Adjusted line height for better readability.
- Fine-tuned margins and paddings for a cleaner look.
These changes will make the converter more usable on mobile devices while maintaining its functionality on desktop. The larger font size on inputs will improve readability and reduce the need for zooming on mobile devices.
Is there anything else you'd like me to adjust or add to make it even more mobile-friendly?