kezzico · March 29, 2021 22:55
diff --git a/sight-words.html b/sight-words.html
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <style>

 html, body{
 	padding: 0px; margin: 0px;

 	font-family: helvetica, sans-serif, arial;

 	overflow: hidden;
 }
 .sky {
 	position: relative;

 	background-color: #a0bbff;

 	width: 100%;

 	height: 100%;

 	padding: 3em;
 }

 .cloud {
 	display: block;

 	position: absolute;

 	background-image: url('./cloud.svg');

 	background-size: contain;

 	background-repeat: no-repeat;

 	background-position: 0px 0px;

 	padding: 1.5em 1.5em;

 	font-size: 3em;

 	font-weight: bold;

 	text-align: center;

 	opacity: 1.0;
 }

 </style>

 <script>
 setInterval(runloop, 1000);

 var bank=['bat', 'cat', 'rat', 'it', 'he', 'is', 'the', 'no', 'yes', 'cancel', 'real', 'pen', 'pet', 'men', 'how', 'now', 'wow']

 function runloop() {
 	var word = bank[ Math.floor(bank.length * Math.random()) ]
 	
 	Cloud(word)
 }

 function Cloud(word) {
 	var cloud = document.createElement('div');

 	var x = Math.random() * 60

 	var y = Math.random() * 60

 	cloud.innerText = word;

 	cloud.className = 'cloud'
 	
 	cloud.style.left = x+"%"

 	cloud.style.top = y+"%"
 	
 	document.getElementById('sky').appendChild(cloud)

 	let utterance = new SpeechSynthesisUtterance(word);

 	cloud.onclick=function() {
 		speechSynthesis.cancel();

 		speechSynthesis.speak(utterance);
 	}

 	return cloud
 }

 </script>
 </head>
 <body>
 	<div class="sky" id="sky">
 	</div>
 <script>
 </script>
 </body>
 </html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<style>

	html, body{
	padding: 0px; margin: 0px;

	font-family: helvetica, sans-serif, arial;

	overflow: hidden;
	}
	.sky {
	position: relative;

	background-color: #a0bbff;

	width: 100%;

	height: 100%;

	padding: 3em;
	}

	.cloud {
	display: block;

	position: absolute;

	background-image: url('./cloud.svg');

	background-size: contain;

	background-repeat: no-repeat;

	background-position: 0px 0px;

	padding: 1.5em 1.5em;

	font-size: 3em;

	font-weight: bold;

	text-align: center;

	opacity: 1.0;
	}

	</style>

	<script>
	setInterval(runloop, 1000);

	var bank=['bat', 'cat', 'rat', 'it', 'he', 'is', 'the', 'no', 'yes', 'cancel', 'real', 'pen', 'pet', 'men', 'how', 'now', 'wow']

	function runloop() {
	var word = bank[ Math.floor(bank.length * Math.random()) ]

	Cloud(word)
	}

	function Cloud(word) {
	var cloud = document.createElement('div');

	var x = Math.random() * 60

	var y = Math.random() * 60

	cloud.innerText = word;

	cloud.className = 'cloud'

	cloud.style.left = x+"%"

	cloud.style.top = y+"%"

	document.getElementById('sky').appendChild(cloud)

	let utterance = new SpeechSynthesisUtterance(word);

	cloud.onclick=function() {
	speechSynthesis.cancel();

	speechSynthesis.speak(utterance);
	}

	return cloud
	}

	</script>
	</head>
	<body>
	<div class="sky" id="sky">
	</div>
	<script>
	</script>
	</body>
	</html>