-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path+page.svelte
96 lines (84 loc) · 2.81 KB
/
+page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<svelte:head>
<title>Formulário</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<section>
<h1>Formulário Svelte - 1º projeto</h1>
<p>Preencha os dados abaixo:</p>
</section>
<body>
<form METHOD='post' id="myForm">
<label for="nome">Nome: </label>
<input type="text" id="nome" name="nome"><br><br>
<p>Gênero:</p>
<input type="radio" id="masculino" name="gênero" value="Masculino">
<label for="masculino">Masculino</label>
<input type="radio" id="feminino" name="gênero" value="Feminino">
<label for="feminino">Feminino</label><br><br>
<label for="nascimento">Data de nascimento: </label>
<input type="date" id="nascimento" name="nascimento" min="1930-01-01" max="2016-12-30"><br><br>
<button type="button" id="saveButton">Salvar</button>
<button type="button" id="loadButton">Carregar json</button>
<div id="dataContainer"></div>
</form>
<script>
document.getElementById('saveButton').addEventListener('click', function() {
var form = document.getElementById('myForm');
var formData = new FormData(form);
var jsonObject = {};
for (const [key, value] of formData.entries()) {
jsonObject[key] = value;
}
var jsonString = JSON.stringify(jsonObject);
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonString));
element.setAttribute('download', 'data.json');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
});
//it doesn't work - function for reading data
document.getElementById('loadButton').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'C:\Users\Downloads\data.json', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
showData(data);
}
};
xhr.send();
});
function showData(data) {
var container = document.getElementById('dataContainer');
container.innerHTML = '';
for (var key in data) {
if (data.hasOwnProperty(key)) {
var value = data[key];
var paragraph = document.createElement('p');
paragraph.textContent = key + ': ' + value;
container.appendChild(paragraph);
}
}
}
</script>
<p>Agradecemos sua participação!</p>
</body>
<style>
h1 {
padding-block: 1em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style:oblique;
font-size: 1.5em;
background-color: rgb(123, 184, 234);
}
* {
text-align: center;
justify-content:center;
color:black;
font-family:'Times New Roman', Times, serif;
font-size: 1.1em;
}
</style>