gabrielfern/index.html

## index.html
<html>
  <head>
    <title>Guessing Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
      @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

      body {
        margin: 0px;
        font-family: 'Nunito', sans-serif;
        background-color: rgb(29, 30, 34);
      }

      .board {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
      }

      .square {
        height: 100px;
        width: 200px;
        background-color: #9c27b0;
        color: #fff;
        font-size: 40px;
        margin: 15px;
        border-radius: 10px;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .square:hover {
        background-color: tomato;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="board"></div>
    <script>
      setTimeout(() => {
        const length = prompt('Number of numbers?')
        const random = Math.floor(Math.random()*length) + 1
        let attempts = 0

        function guess(num) {
          attempts++
          if (num != random) alert(`TOO BAD, you got it wrong\nYou've tried ${attempts} times`)
          else alert(`GREAT, you're good\nYou've tried ${attempts} times`)
        }

        for (let i = 1; i <= length; i++) {
          elem = document.createElement('div')
          elem.innerText = i
          elem.className = 'square'
          elem.onclick = () => { guess(i) }
          document.querySelector('.board').appendChild(elem)
        }
      }, 250)
    </script>
  </body>
</html>
	<html>
	<head>
	<title>Guessing Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style>
	@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

	body {
	margin: 0px;
	font-family: 'Nunito', sans-serif;
	background-color: rgb(29, 30, 34);
	}

	.board {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	}

	.square {
	height: 100px;
	width: 200px;
	background-color: #9c27b0;
	color: #fff;
	font-size: 40px;
	margin: 15px;
	border-radius: 10px;

	display: flex;
	justify-content: center;
	align-items: center;
	}

	.square:hover {
	background-color: tomato;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="board"></div>
	<script>
	setTimeout(() => {
	const length = prompt('Number of numbers?')
	const random = Math.floor(Math.random()*length) + 1
	let attempts = 0

	function guess(num) {
	attempts++
	if (num != random) alert(`TOO BAD, you got it wrong\nYou've tried ${attempts} times`)
	else alert(`GREAT, you're good\nYou've tried ${attempts} times`)
	}

	for (let i = 1; i <= length; i++) {
	elem = document.createElement('div')
	elem.innerText = i
	elem.className = 'square'
	elem.onclick = () => { guess(i) }
	document.querySelector('.board').appendChild(elem)
	}
	}, 250)
	</script>
	</body>
	</html>