Skip to content

Instantly share code, notes, and snippets.

@anikethsaha

anikethsaha/index.html

Created June 21, 2020 11:51
Show Gist options
  • Save anikethsaha/c0dc822c1fe418ec90170137340d4113 to your computer and use it in GitHub Desktop.
Save anikethsaha/c0dc822c1fe418ec90170137340d4113 to your computer and use it in GitHub Desktop.
Download ZIP
style-perfectionist // source https://jsbin.com/xefixabepo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>style-perfectionist</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
</head>
<body>
<h3 style="text-align: center">
style-perfectionist standalone demo
</h3>
<div class="container">
<div class="row">
<div class="column column-33"></div>
<div class="column column-33">
<img src="https://raw.githubusercontent.com/anikethsaha/style-perfectionist/master/style-perfectionist-logo.JPG"/>
</div>
</div>
<div class="row">
<div class="column"> <textarea style="height: 100%;" id="input"></textarea></div>
<div class="column">
<pre id="output" >
<code >
</code>
</pre>
</div>
</div>
<div class="row">
<div class="column"><button class="button" id="run-btn">Format</button></div>
</div>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>style-perfectionist</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
</head>
<body>
<h3 style="text-align: center">
style-perfectionist standalone demo
</h3>
<div class="container">
<div class="row">
<div class="column column-33"></div>
<div class="column column-33">
<img src="https://raw.githubusercontent.com/anikethsaha/style-perfectionist/master/style-perfectionist-logo.JPG"/>
</div>
</div>
<div class="row">
<div class="column"> <textarea style="height: 100%;" id="input"></textarea></div>
<div class="column">
<pre id="output" >
<code >
</code>
</pre>
</div>
</div>
<div class="row">
<div class="column"><button class="button" id="run-btn">Format</button></div>
</div>
</div>
</body>
<script src="https://unpkg.com/style-perfectionist@1.0.0-alpha.0/dist/standalone.js"><\/script>
<script>
const inputEl = document.getElementById('input');
const runBtnEl = document.getElementById('run-btn');
runBtnEl.addEventListener("click", function(e){
const outputEl = document.getElementById('output')
try{
var res = window.stylePerfectionist.process(inputEl.value)
document.querySelector('#output > code').innerText = res.toString()
} catch(err){
outputEl.style.border = "2px solid red";
document.querySelector('#output > code').innerText = err.toString()
}
});
<\/script>
<footer style="position: fixed; bottom: 0;">Made by <a href="https://github.com/anikethsaha">Aniketh Saha</a></footer>
</html>
</script>
</body>
<script src="https://unpkg.com/style-perfectionist@1.0.0-alpha.0/dist/standalone.js"></script>
<script>
const inputEl = document.getElementById('input');
const runBtnEl = document.getElementById('run-btn');
runBtnEl.addEventListener("click", function(e){
const outputEl = document.getElementById('output')
try{
var res = window.stylePerfectionist.process(inputEl.value)
document.querySelector('#output > code').innerText = res.toString()
} catch(err){
outputEl.style.border = "2px solid red";
document.querySelector('#output > code').innerText = err.toString()
}
});
</script>
<footer style="position: fixed; bottom: 0;">Made by <a href="https://github.com/anikethsaha">Aniketh Saha</a></footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment