EsteveSegura/tips.html

## tips.html
<!DOCTYPE html>
<html lang="es">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
     <title>neighborhoodSign</title>
     <style>
          @font-face {
               font-family: "OldSans";
               src: url("http://serverFonts.com/fonts/OldSansBlack.ttf");
          }

          body {
               font-size: 30px;
          }

          .hide {
               visibility: hidden;
          }

          .show {
               visibility: visible;
          }

          .tip-box {
               font-family: "OldSans";
               background: rgba(0, 0, 0, .8);
               color: #b6b6b4;
               display: inline-block;
               padding: 0.7em 1em;
          }

          .content {
               display: inline-block;
          }
     </style>
</head>
<body>

     <div id="el" class="tip-box hide">
          <div class="cotent"></div>
     </div>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script>
          let socket = io.connect();
          let card = $("#el")

          //Receiving the message and adding it to our HTML
          socket.on('message', (body) => {
               body.body.data.map((field) => {
                    if(field.name == 'tips-showTip'){
                         card.html(field.data)
                         runMessage()
                    }
               })
          })

          //Function to show and hide our message.
          function runMessage() {
               card.removeClass('hide')
               card.addClass('show')
               setTimeout(() => {
                    card.removeClass('show')
                    card.addClass('hide')
               }, 5000);
          }
     </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="es">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
	<title>neighborhoodSign</title>
	<style>
	@font-face {
	font-family: "OldSans";
	src: url("http://serverFonts.com/fonts/OldSansBlack.ttf");
	}

	body {
	font-size: 30px;
	}

	.hide {
	visibility: hidden;
	}

	.show {
	visibility: visible;
	}

	.tip-box {
	font-family: "OldSans";
	background: rgba(0, 0, 0, .8);
	color: #b6b6b4;
	display: inline-block;
	padding: 0.7em 1em;
	}

	.content {
	display: inline-block;
	}
	</style>
	</head>
	<body>

	<div id="el" class="tip-box hide">
	<div class="cotent"></div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script>
	let socket = io.connect();
	let card = $("#el")

	//Receiving the message and adding it to our HTML
	socket.on('message', (body) => {
	body.body.data.map((field) => {
	if(field.name == 'tips-showTip'){
	card.html(field.data)
	runMessage()
	}
	})
	})

	//Function to show and hide our message.
	function runMessage() {
	card.removeClass('hide')
	card.addClass('show')
	setTimeout(() => {
	card.removeClass('show')
	card.addClass('hide')
	}, 5000);
	}
	</script>
	</body>
	</html>