Skip to content

Instantly share code, notes, and snippets.

@nb
Created December 6, 2016 15:06
Show Gist options
  • Save nb/487e5a0f1aeb4cfb319f083010681889 to your computer and use it in GitHub Desktop.
Save nb/487e5a0f1aeb4cfb319f083010681889 to your computer and use it in GitHub Desktop.
<style>
#big {
font-size: 25vw;
font-family: 'Helvetica Neue', sans-serif;
font-weight: bold;
}
#big:-webkit-full-screen {
width: 100%;
height: 100%;
margin: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<input id="text" type="text" size="40">
<button onclick="full( document.getElementById('text').value );">Set focus topic →</button>
<div id="big" onclick="unfull();">
Hola
</div>
<script>
function full( text ) {
document.getElementById( 'big' ).innerHTML = text;
document.getElementById( 'big' ).style.fontSize = ( 150 / text.length ) + 'vw';
document.getElementById( 'big' ).webkitRequestFullscreen();
}
function unfull() {
document.webkitExitFullscreen();
document.getElementById( 'text' ).focus();
}
document.getElementById( 'text' ).focus();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment