DOMParser HTML, CSS, JS from Rentry

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container d-flex justify-content-center m-2">
<div class="card">
  <div class="card-header bg-primary text-light">
    Featured
  </div>
  <div class="card-body">
    <div class="mb-3">
	  <label for="exampleFormControlTextarea1" class="form-label">HTML:</label>
	  <textarea class="form-control" id="textArea_HTML" rows="10"></textarea>
	</div>
    <div class="mb-3">
	  <label for="exampleFormControlTextarea1" class="form-label">JS:</label>
	  <textarea class="form-control" id="textArea_CSS" rows="10"></textarea>
	</div>
    <div class="mb-3">
	  <label for="exampleFormControlTextarea1" class="form-label">CSS:</label>
	  <textarea class="form-control" id="textArea_JS" rows="10"></textarea>
	</div>
  </div>
</div>
</div>

CSS

body {
}
body {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	justify-content: center;
	
	>div.container {
		width: 100%;
		& .card {
			min-width: 400px;
			width: 80%;
		}
		& .card-body textarea {
			min-width: 400px;
			width: 100%;
		}
	}	
}

JavaScript

const textArea_HTML = document.querySelector("#textArea_HTML")
const textArea_CSS = document.querySelector("#textArea_CSS")
const textArea_JS = document.querySelector("#textArea_JS")


fetch("https://rentry.co/html-css-js-test")
	.then(function (response) {
		return response.text();
	})
	.then(function (html) {
		let parser = new DOMParser();
		let doc = parser.parseFromString(html, "text/html");
		let html_code = doc.querySelector("article > div > div.codeblock:nth-child(1) td.code > .highlight > pre").textContent
		let css_code = doc.querySelector("article > div > div.codeblock:nth-child(2) td.code > .highlight > pre").textContent
		let js_code = doc.querySelector("article > div > div.codeblock:nth-child(3) td.code > .highlight > pre").textContent
		
		//console.log(html_code)
		textArea_HTML.value = html_code
		textArea_CSS.value = css_code
		textArea_JS.value = js_code
	})
	.catch(function (err) {
		console.warn("Something went wrong.", err);
	});