Scribd
Upload
9 views

Hands On Lab

Uploaded by

Canal Maluco
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Hands On Lab

Uploaded by

Canal Maluco
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HANDS ON

Entre em cmd (prompt de comando)


Verifique se tem a pasta TEMP
-- cd c:\TEMP
c:\TEMP>
-- node -v # verificar se o node.js está instalado e a versão dele
-- npm -v # verificar se o npm está instalado e a versão dele
crie um diretorio de projeto como my-webapp
-- mkdir my-webapp
-- cd my-webapp
inicialize o projeto
-- npm init -y
instale o Express (para o servidor)
-- npm install express

Criar o front-end
Crie a pasta public
-- mkdir public
Crie o arquivo index.html (dentro da pasta public), usando as linhas a seguir
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Enter Your Details</h1>
<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>

<button type="submit">Submit</button>
</form>

<p id="responseMessage"></p>

<script src="script.js"></script>
</body>
</html>
Crie o arquivo css (styles.css dentro da pasta public)

body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

input {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #218838;
}

#responseMessage {
margin-top: 20px;
font-weight: bold;
}
Crie o script.js (dentro da pasta public)

document.getElementById('userForm').addEventListener('submit', async
function(event) {
event.preventDefault();

const name = document.getElementById('name').value;


const email = document.getElementById('email').value;
const age = document.getElementById('age').value;

const response = await fetch('/submit', {


method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, email, age }),
});

const data = await response.json();


document.getElementById('responseMessage').textContent = data.message;
});
Crie o server.js (na pasta raiz – my-webapp)

const express = require('express');


const app = express();
const PORT = 3000;

// Serve static files from the 'public' folder


app.use(express.static('public'));

// Parse JSON bodies (as sent by the front-end)


app.use(express.json());

// Handle form submission


app.post('/submit', (req, res) => {
const { name, email, age } = req.body;
const message = `Welcome ${name}, your email is ${email} and you are ${age}
years old.`;
res.json({ message });
});

// Start the server


app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Inicia o servidor
-- node server.js

Chama a página no navegador


-- http://localhost:3000

You might also like