Digital Solutions

Random Numbers

randoms.html

<!DOCTYPE html>
<html>
	<head>
		<title>Random Numbers</title>
		<link rel="stylesheet" type="text/css" href="randoms.css">
	</head>
	<body>
		<div id="wrapper">
		  <div id="layout">
			<div id="top">
				<input type="button" onclick="generate()" value="Generate"> Dice Roller
			</div>
			<div id="left"><span id="display"></span></div>
			<div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut finibus sapien. Aliquam sit amet quam sit amet sapien tempor euismod et ut lorem. Nam facilisis elit at urna rutrum ultricies.</div>
			<div id="bottom">Copyright &copy; Symbol</div>
		  </div>
		</div>
		<script src="randoms.js"></script>
	</body>
</html>

randoms.css

#wrapper{
    width: 60vw;
    margin: 0 auto;
}

#layout{
    display: grid;
    grid-template-areas:
        'top top top top'
        'left right right right'
        'bottom bottom bottom bottom';
}
    
@media screen and (max-width: 640px) {
    #layout{
        display: grid;
        grid-template-areas:
            'top'
            'left'
            'right'
            'bottom';
    }
}
    
#top{
    background-color: thistle;
    grid-area: top;
}

#left{
    font-family: Consolas, monospace;
    background-color: tomato;
    grid-area: left;
    min-width: 25vw;
}

#right{
    background-color: bisque;
    grid-area: right;
    min-width: 25vw;
}

#bottom{
    background-color: deeppink;
    grid-area: bottom;
}

randoms.js

function generate(){
    output = "";
    output = output.concat("random(): " + 
                           Math.random() + "<br>");
    output = output.concat("floor(random()): " + 
                           Math.floor(Math.random()) + "<br>");
    output = output.concat("floor(random() * 6): " + 
                           Math.floor(Math.random() * 6) + "<br>");
    output = output.concat("floor((random() * 6) + 1): " + 
                           Math.floor((Math.random() * 6) + 1) + "<br>");
    document.getElementById("display").innerHTML = output;
}

This uses CSS Grid for layout. in the past we would have to use a framework (e.g. Bootstrap or Foundation) or lots of calculations to create a responsive / adapative site. Try resizing the browser. The max-width: 640px media query on screens means that any size below that will change the layout of the grid. Question - can you reorder the grid layout in the CSS? e.g. put the bottom at the top, and vice-versa? Try.
Change CSS colours
What is difference between floor and ceil in JS? Explain.
Can you turn this example into a web page that asks me a random maths question, e.g. what is 2 + 4? Give me an input text field to type my answer in, and use if statements to check if my guess is correct.
What is vw and vh a measure of in CSS? investigate.