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 © Symbol</div> </div> </div> <script src="randoms.js"></script> </body> </html>
#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; }
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; }
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.floor
and ceil
in JS? Explain.if
statements to check if my guess is correct.vw
and vh
a measure of in CSS? investigate.