Intelihub · IgorSFG · Apr 29, 2022 · May 6, 2022 · May 6, 2022 · May 6, 2022
diff --git a/02_TUTORIAL/Semana 2/backend/app_21.js b/02_TUTORIAL/Semana 2/backend/app_21.js
@@ -0,0 +1,20 @@
+const http = require('http');
+const fs   = require("fs")
+const hostname = '127.0.0.1';
+const port = 3021;
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/html');
+  fs.readFile('../frontend/index.html', null, function (error, data) {
+      if (error) {
+          res.writeHead(404);
+          res.write('Whoops! File not found!');
+      } else {
+          res.write(data);
+      }
+      res.end();
+  });
+});
+server.listen(port, hostname, () => {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
diff --git a/02_TUTORIAL/Semana 2/backend/app_22.js b/02_TUTORIAL/Semana 2/backend/app_22.js
@@ -0,0 +1,11 @@
+
+const express = require('express'); 
+const app = express();
+
+const hostname = '127.0.0.1';
+const port = 3022;
+app.use(express.static("../frontend/"));
+
+app.listen(port, hostname, () => {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
diff --git a/02_TUTORIAL/Semana 2/frontend/css/estilo.css b/02_TUTORIAL/Semana 2/frontend/css/estilo.css
@@ -0,0 +1,40 @@
+@charset "utf-8";
+/* seletores padrões */
+body { 		
+    background-color:antiquewhite;
+}
+.col-6 , .col-8 {
+    min-height: 50px;
+    background-color:darkgrey;
+    border: solid 1px #000;
+}	
+.col-md-8 {
+    background-color:darksalmon;
+}
+/*imagens flexiveis*/
+img {   
+  	max-width: 100%;   
+  	height: auto;  
+} 
+
+
+/*seletores para desktops*/
+@media screen and (max-width: 1128px) {
+	body { 		
+        background-color:aquamarine;
+    }
+}
+
+/*seletores para tablets*/
+@media screen and (max-width: 768px) {
+	body { 		
+        background-color:brown;
+    }
+}
+
+/*seletores para celurares*/
+@media screen and (max-width: 520px) {
+	body { 		
+        background-color:darkkhaki;
+    }
+}
diff --git a/02_TUTORIAL/Semana 2/frontend/css/style.css b/02_TUTORIAL/Semana 2/frontend/css/style.css
@@ -0,0 +1,23 @@
+/************************************************************************************************
+ SITE WEB
+************************************************************************************************/
+
+body, html {
+	width: 100%;
+	height: 100%;
+	background-color: #F0F0F0;
+	margin: 0;
+	color: blue;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+#main {
+	max-width: 800px;
+	min-height: 100%;
+	margin: 0 auto;
+	background-color: #FFFFFF;
+	padding: 1rem;
+	text-align: center;
+}
+
+
diff --git a/02_TUTORIAL/Semana 2/frontend/css/style2.css b/02_TUTORIAL/Semana 2/frontend/css/style2.css
@@ -0,0 +1,23 @@
+/************************************************************************************************
+ SITE WEB
+************************************************************************************************/
+
+body, html {
+	width: 100%;
+	height: 100%;
+	background-color: #F0F0F0;
+	margin: 0;
+	color: rgb(0, 255, 170);
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+#main {
+	max-width: 800px;
+	min-height: 100%;
+	margin: 0 auto;
+	background-color: #FFFFFF;
+	padding: 1rem;
+	text-align: center;
+}
+
+
diff --git a/02_TUTORIAL/Semana 2/frontend/index.html b/02_TUTORIAL/Semana 2/frontend/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />	
+	<title>Etapa 1</title>
+</head>
+<body>
+	<div id="main"> Etapa 2 - Hello World 	</div>
+	<h1> Minha primeira pagina </h1>
+
+</body>
+</html>
diff --git a/02_TUTORIAL/Semana 2/frontend/index1.html b/02_TUTORIAL/Semana 2/frontend/index1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+	<title>Etapa 2</title>
+	<link rel="stylesheet" href="css/style.css" />	
+</head>
+<body>
+	<div id="main">
+		<h1> Minha primeira pagina </h1>
+
+
+	</div>
+</body>
+</html>
diff --git a/02_TUTORIAL/Semana 2/frontend/index2.html b/02_TUTORIAL/Semana 2/frontend/index2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+	<title>Etapa 2</title>
+	<link rel="stylesheet" href="css/style2.css" />	
+</head>
+<body>
+	<div id="main">
+		<h1> Minha segunda pagina </h1>
+
+
+	</div>
+</body>
+</html>
diff --git a/02_TUTORIAL/Semana 2/frontend/index3.html b/02_TUTORIAL/Semana 2/frontend/index3.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <!-- Meta tags Obrigatórias -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+	<!-- Usando o CSS próprio -->
+	<link rel="stylesheet" href="css/estilo.css">
+
+    <title>Etapa 2</title>
+  </head>
+  <body>
+
+	<div class="container">
+		<!-- Conteúdo aqui -->
+		<h1>Minha primeira página com bootstrap!</h1>
+
+		<!-- Empilhe as colunas, em dispositivos móveis, fazendo com que uma tenha largura total e a outra só metade -->
+		<div class="row">
+			<div class="col-12 col-md-8">.col-12 .col-md-8</div>
+			<div class="col-6 col-md-4">.col-6 .col-md-4</div>
+		</div>
+
+		<!-- Colunas começam com largura de 50%, em dispositivos móveis, e caem para 33.3% nos desktops -->
+		<div class="row">
+			<div class="col-6 col-md-4">.col-6 .col-md-4</div>
+			<div class="col-6 col-md-4">.col-6 .col-md-4</div>
+			<div class="col-6 col-md-4">.col-6 .col-md-4</div>
+		</div>
+
+		<!-- Colunas sempre com metade da largura disponível, em dispositivos móveis e desktop -->
+		<div class="row">
+			<div class="col-6">.col-6</div>
+			<div class="col-6">.col-6</div>
+		</div>
+	</div>
+
+
+
+    <!-- JavaScript (Opcional) -->
+    <!--  Bootstrap JS -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/02_TUTORIAL/Semana 3/backend/app_31.js b/02_TUTORIAL/Semana 3/backend/app_31.js
@@ -0,0 +1,11 @@
+
+const express = require('express'); 
+const app = express();
+
+const hostname = '127.0.0.1';
+const port = 3031;
+app.use(express.static("../frontend/"));
+
+app.listen(port, hostname, () => {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
diff --git a/02_TUTORIAL/Semana 3/frontend/index.html b/02_TUTORIAL/Semana 3/frontend/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />	
+	<title>ETAPA 3</title>
+	<link rel="stylesheet" href="style.css" />	
+	<script src="script.js"></script>
+</head>
+<body>
+	<script src="script.js"></script>
+	<div id="main">
+	<h1>ETAPA 3</h1>
+	Introdução a Javascript
+		<div id="calc" class="sections">
+			<h3>PARTE 1 - Cálculos</h3>
+			Cálculos realizados e respectivos resultados obtidos:
+		</div>
+		<button onclick="CalcAddAndShow(10, 50)" class="button-calc">Calcular 10 + 50</button>
+	</div>
+
+</body>
+</html>
diff --git a/02_TUTORIAL/Semana 3/frontend/script.js b/02_TUTORIAL/Semana 3/frontend/script.js
@@ -0,0 +1,64 @@
+/* 
+=======================
+Declaração de variáveis
+=======================
+*/
+
+var calcResDiv = "calc";
+
+/* 
+=======================
+Event Listener
+=======================
+*/
+
+/* A adição dessa função que "escuta" um evento permite que 
+   verifiquemos se a página foi carregada para só então chamar
+   a função CalcAddAndShow, pois ela só funcionará depois da 
+   criação da div de resultado, com id "result" */
+document.onreadystatechange = function () {
+    if (document.readyState == "complete") {
+        var x0 = 10;
+        var y0 = 20;
+        // Alternativa equivalente: var x0 = 10, y0 = 20;
+        CalcAddAndShow(x0, y0);
+  }
+}
+
+
+/* 
+=======================
+Funções
+======================= 
+*/
+
+/* Função que calcula uma soma e mostra a operação realizada e o resultado obtido */
+function CalcAddAndShow(x, y){
+    var op = "+";
+    var result = Calc(x, y, op);
+    ShowOp(x, y, op);
+    ShowResult(result);
+}
+
+
+/* Função que calcula uma operação entre dois números recebidos como parâmetro */
+function Calc(x, y, op){
+    var result;
+    if (op == "+") {
+        result = x + y;
+    };
+    return result;
+}
+
+
+/* Função que mostra a operação realizada */
+function ShowOp(x, y, op){
+    document.getElementById(calcResDiv).innerHTML += `<br /> ${x} ${op} ${y} = `;
+    //Alternativa: .. += "<br />" + x + " " + op + " " + y + " = "
+}
+
+
+/* Função que mostra o resultado obtido */
+function ShowResult(res){
+    document.getElementById(calcResDiv).innerHTML += res;
+}
diff --git a/02_TUTORIAL/Semana 3/frontend/style.css b/02_TUTORIAL/Semana 3/frontend/style.css
@@ -0,0 +1,51 @@
+body, html {
+	width: 100%;
+	height: 100%;
+	background-color: #acb1bf;
+	margin: 0;
+	color: #ff4645;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+h1{
+	background-color: #ff4645;
+	color: white;
+}
+
+#main {
+	max-width: 800px;
+	min-height: 100%;
+	margin: 0 auto;
+	background-color: #FFFFFF;
+	padding: 1rem;
+	text-align: center;
+}
+
+.sections{
+	padding: 3em;
+}
+
+
+#calc{
+	color: #547aa5;
+}
+
+
+button {
+	padding: 3;
+	border: none;
+	font: inherit;
+	cursor: pointer;	
+	border-radius: 5px;
+	font-weight: 500;
+	color: white;
+	width: 150px;
+  	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    			0 3px 1px -2px rgba(0, 0, 0, 0.12), 
+				0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+
+.button-calc{
+	background-color: #547aa5;
+}