Skip to content

Commit 92c3ceb

Browse files
lazaromxlazaromx
committed
feat: Getting data from a form on another page
0 parents  commit 92c3ceb

File tree

10 files changed

+484
-0
lines changed

10 files changed

+484
-0
lines changed

‎.gitignore‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# TypeScript v1 declaration files
45+
typings/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
78+
# Next.js build output
79+
.next
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
85+
# Gatsby files
86+
.cache/
87+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88+
# https://nextjs.org/blog/next-9-1#public-directory-support
89+
# public
90+
91+
# vuepress build output
92+
.vuepress/dist
93+
94+
# Serverless directories
95+
.serverless/
96+
97+
# FuseBox cache
98+
.fusebox/
99+
100+
# DynamoDB Local files
101+
.dynamodb/
102+
103+
# TernJS port file
104+
.tern-port

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# estudos

‎adiciona.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-Br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Adicionar Jogador</title>
8+
9+
</head>
10+
<body>
11+
<h1>Adicionar Jogador</h1>
12+
<form id="form-adiciona" action="index.html" method="get">
13+
<input type="text" name="nome" id="form-nome" placeholder="Insira o nome" required>
14+
<input type="number" step="0.01" name="altura" id="form-altura" placeholder="Insira a altura" required>
15+
<input type="number" name="peso" id="form-peso" placeholder="Insira o peso" required>
16+
<input type="number" name="idade" id="form-idade" placeholder="Insira a idade" required>
17+
18+
<button type="submit" id="button-add">adiciona</button>
19+
</form>
20+
21+
22+
</body>
23+
</html>

‎code/app.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
interface IPlayer {
2+
name: string;
3+
heigth: number;
4+
weigth: number;
5+
age: number;
6+
}
7+
// const player1: Player = {
8+
// name: 'John',
9+
// height: 180,
10+
// weight: 75,
11+
// age: 19
12+
// }
13+
14+
// function obtemPlayerForm(form: any) {
15+
// let player: IPlayer = {
16+
// name: form.nome.value,
17+
// heigth: form.altura.value,
18+
// weigth: form.peso.value,
19+
// age: form.idade.value,
20+
// };
21+
22+
// return player;
23+
// }
24+
25+
function obtemPlayer(params:any){
26+
const player: IPlayer = {
27+
name: params['nome'].replaceAll('+', ' '),
28+
heigth: params['altura'],
29+
weigth: params['peso'],
30+
age: params['idade'],
31+
}
32+
33+
return player;
34+
}
35+
36+
function addTd(dado: string, classe: string) {
37+
const td = document.createElement("td");
38+
39+
td.textContent = dado;
40+
td.classList.add(classe);
41+
42+
return td;
43+
}
44+
45+
function addTr(jogador: IPlayer) {
46+
console.log(jogador)
47+
const nomeTd = addTd(jogador.name, "info-nome");
48+
const alturaTd = addTd(jogador.heigth.toString(), "info-altura");
49+
const pesoTd = addTd(jogador.weigth.toString(), "info-peso");
50+
const idadeTd = addTd(jogador.age.toString(), "info-idade");
51+
52+
let linha = document.createElement("tr");
53+
linha.classList.add("jogador");
54+
linha.append(nomeTd, alturaTd, pesoTd, idadeTd);
55+
56+
return linha;
57+
}
58+
59+
function addPLayerTabela(jogador: IPlayer) {
60+
let jogadorTr = addTr(jogador);
61+
let tabela = document.querySelector(".tabela-jogador");
62+
tabela?.appendChild(jogadorTr);
63+
64+
return jogadorTr;
65+
}
66+
67+
// const button = document.querySelector("#button-add");
68+
// button?.addEventListener("submit", event => {
69+
// event.preventDefault();
70+
71+
// let form:any = document.querySelector("#form-adiciona");
72+
73+
// let player = obtemPlayer(form);
74+
75+
// addPLayerTabela(player);
76+
77+
// form.reset();
78+
79+
// });
80+
81+
function getURLParameters() {
82+
var params:Record<string, string> ={};
83+
var parts = window.location.search.substring(1).split('&');
84+
for (var i = 0; i < parts.length; i++) {
85+
var pair = parts[i].split('=');
86+
var key = decodeURIComponent(pair[0]);
87+
var value = decodeURIComponent(pair[1]);
88+
params[key]=value;
89+
}
90+
return params;
91+
}

‎index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-Br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Player-ts</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<h1>Tabela Jogadores </h1>
12+
<table class="tabela">
13+
<thead>
14+
<tr>
15+
<th>Nome</th>
16+
<th>Altura</th>
17+
<th>Peso</th>
18+
<th>Idade</th>
19+
</tr>
20+
</thead>
21+
<tbody class="tabela-jogador">
22+
<tr class="jogador">
23+
<td class="info-nome">Lázaro</td>
24+
<td class="info-altura">1.70</td>
25+
<td class="info-peso">68</td>
26+
<td class="info-idade">18</td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
31+
<button class="botao-add"><a href="adiciona.html">Adicionar Jogador</a></button>
32+
33+
<script src="prod/app.js"></script>
34+
<script>
35+
36+
37+
function exibirDados() {
38+
var params = getURLParameters();
39+
if(params){
40+
const player = obtemPlayer(params);
41+
addPLayerTabela(player)
42+
}
43+
}
44+
45+
window.onload = exibirDados;
46+
47+
// Chama a função quando a página é carregada
48+
49+
</script>
50+
</body>
51+
</html>

‎package.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "player_ts",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start":"tsc -w"
8+
},
9+
"author": "",
10+
"license": "ISC"
11+
}

‎prod/app.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
"use strict";
2+
// const player1: Player = {
3+
// name: 'John',
4+
// height: 180,
5+
// weight: 75,
6+
// age: 19
7+
// }
8+
// function obtemPlayerForm(form: any) {
9+
// let player: IPlayer = {
10+
// name: form.nome.value,
11+
// heigth: form.altura.value,
12+
// weigth: form.peso.value,
13+
// age: form.idade.value,
14+
// };
15+
// return player;
16+
// }
17+
function obtemPlayer(params) {
18+
const player = {
19+
name: params['nome'].replaceAll('+', ' '),
20+
heigth: params['altura'],
21+
weigth: params['peso'],
22+
age: params['idade'],
23+
};
24+
return player;
25+
}
26+
function addTd(dado, classe) {
27+
const td = document.createElement("td");
28+
td.textContent = dado;
29+
td.classList.add(classe);
30+
return td;
31+
}
32+
function addTr(jogador) {
33+
console.log(jogador);
34+
const nomeTd = addTd(jogador.name, "info-nome");
35+
const alturaTd = addTd(jogador.heigth.toString(), "info-altura");
36+
const pesoTd = addTd(jogador.weigth.toString(), "info-peso");
37+
const idadeTd = addTd(jogador.age.toString(), "info-idade");
38+
let linha = document.createElement("tr");
39+
linha.classList.add("jogador");
40+
linha.append(nomeTd, alturaTd, pesoTd, idadeTd);
41+
return linha;
42+
}
43+
function addPLayerTabela(jogador) {
44+
let jogadorTr = addTr(jogador);
45+
let tabela = document.querySelector(".tabela-jogador");
46+
tabela === null || tabela === void 0 ? void 0 : tabela.appendChild(jogadorTr);
47+
return jogadorTr;
48+
}
49+
// const button = document.querySelector("#button-add");
50+
// button?.addEventListener("submit", event => {
51+
// event.preventDefault();
52+
// let form:any = document.querySelector("#form-adiciona");
53+
// let player = obtemPlayer(form);
54+
// addPLayerTabela(player);
55+
// form.reset();
56+
// });
57+
function getURLParameters() {
58+
var params = {};
59+
var parts = window.location.search.substring(1).split('&');
60+
for (var i = 0; i < parts.length; i++) {
61+
var pair = parts[i].split('=');
62+
var key = decodeURIComponent(pair[0]);
63+
var value = decodeURIComponent(pair[1]);
64+
params[key] = value;
65+
}
66+
return params;
67+
}

‎style.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.tabela{
8+
margin: 20px 0;
9+
border: solid 1px black;
10+
align-items: center;
11+
/* display: flex;
12+
justify-content: center;
13+
flex-direction: column; */
14+
}
15+
16+
th, td, tr{
17+
border: 1px solid #ccc;
18+
padding: 10px;
19+
text-align: center;
20+
}
21+
22+
.botao-add a{
23+
text-decoration: none;
24+
color:#fff
25+
}
26+
27+
.botao-add{
28+
background-color: #dc143c;
29+
padding: 10px;
30+
}

0 commit comments

Comments
 (0)