Hugging Face's logo

Spaces:
mvbhr
/
juros-comparados
Running

App Files Community
mvbhr commited on
Commit
231045a
·
verified ·
1 Parent(s): fe30280

criar uma calculadora de juros simples e composto para comparação

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +428 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Juros Comparados
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Juros Comparados 💰
3
+ colorFrom: red
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,429 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calculadora de Juros Simples e Composto</title>
7
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💰</text></svg>">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ },
29
+ secondary: {
30
+ 50: '#f5f3ff',
31
+ 100: '#ede9fe',
32
+ 200: '#ddd6fe',
33
+ 300: '#c4b5fd',
34
+ 400: '#a78bfa',
35
+ 500: '#8b5cf6',
36
+ 600: '#7c3aed',
37
+ 700: '#6d28d9',
38
+ 800: '#5b21b6',
39
+ 900: '#4c1d95',
40
+ }
41
+ },
42
+ fontFamily: {
43
+ 'sans': ['Inter', 'sans-serif']
44
+ }
45
+ }
46
+ }
47
+ }
48
+ </script>
49
+ <style>
50
+ .result-card {
51
+ transition: all 0.3s ease;
52
+ }
53
+ .result-card:hover {
54
+ transform: translateY(-5px);
55
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
56
+ }
57
+ .comparison-bar {
58
+ transition: width 1s ease-in-out;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-sans">
63
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
64
+ <!-- Header -->
65
+ <header class="text-center mb-12">
66
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Calculadora de Juros <span class="text-primary-600">Simples</span> e <span class="text-secondary-600">Composto</span></h1>
67
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Compare o crescimento do seu investimento com diferentes tipos de juros e tome decisões financeiras mais inteligentes</p>
68
+ </header>
69
+
70
+ <!-- Calculator Section -->
71
+ <div class="bg-white rounded-2xl shadow-xl p-6 mb-12">
72
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
73
+ <!-- Input Form -->
74
+ <div>
75
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Parâmetros do Investimento</h2>
76
+ <form id="calculatorForm" class="space-y-6">
77
+ <div>
78
+ <label class="block text-gray-700 font-medium mb-2" for="principal">Valor Inicial (R$)</label>
79
+ <input type="number" id="principal" min="0" step="0.01" value="1000" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
80
+ </div>
81
+
82
+ <div>
83
+ <label class="block text-gray-700 font-medium mb-2" for="rate">Taxa de Juros (% ao ano)</label>
84
+ <input type="number" id="rate" min="0" step="0.01" value="10" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
85
+ </div>
86
+
87
+ <div>
88
+ <label class="block text-gray-700 font-medium mb-2" for="time">Período (anos)</label>
89
+ <input type="number" id="time" min="1" step="1" value="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
90
+ </div>
91
+
92
+ <div>
93
+ <label class="block text-gray-700 font-medium mb-2" for="contribution">Aporte Mensal (R$)</label>
94
+ <input type="number" id="contribution" min="0" step="0.01" value="100" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
95
+ </div>
96
+
97
+ <button type="submit" class="w-full bg-gradient-to-r from-primary-600 to-secondary-600 text-white font-bold py-3 px-4 rounded-lg hover:from-primary-700 hover:to-secondary-700 transition-all duration-300 transform hover:-translate-y-1 shadow-lg">
98
+ Calcular Comparação
99
+ </button>
100
+ </form>
101
+ </div>
102
+
103
+ <!-- Results -->
104
+ <div>
105
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Resultados da Comparação</h2>
106
+ <div class="space-y-6">
107
+ <!-- Simple Interest Result -->
108
+ <div id="simpleResult" class="result-card bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-6">
109
+ <div class="flex items-center mb-4">
110
+ <div class="bg-blue-500 p-2 rounded-lg mr-4">
111
+ <i data-feather="trending-up" class="text-white"></i>
112
+ </div>
113
+ <h3 class="text-xl font-bold text-gray-800">Juros Simples</h3>
114
+ </div>
115
+ <div class="space-y-3">
116
+ <p class="text-gray-700">Montante Final: <span id="simpleAmount" class="font-bold text-blue-700">R$ 0,00</span></p>
117
+ <p class="text-gray-700">Total de Juros: <span id="simpleInterest" class="font-bold text-blue-700">R$ 0,00</span></p>
118
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4">
119
+ <div id="simpleBar" class="comparison-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Compound Interest Result -->
125
+ <div id="compoundResult" class="result-card bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-xl p-6">
126
+ <div class="flex items-center mb-4">
127
+ <div class="bg-purple-500 p-2 rounded-lg mr-4">
128
+ <i data-feather="bar-chart-2" class="text-white"></i>
129
+ </div>
130
+ <h3 class="text-xl font-bold text-gray-800">Juros Compostos</h3>
131
+ </div>
132
+ <div class="space-y-3">
133
+ <p class="text-gray-700">Montante Final: <span id="compoundAmount" class="font-bold text-purple-700">R$ 0,00</span></p>
134
+ <p class="text-gray-700">Total de Juros: <span id="compoundInterest" class="font-bold text-purple-700">R$ 0,00</span></p>
135
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4">
136
+ <div id="compoundBar" class="comparison-bar bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Difference -->
142
+ <div id="differenceResult" class="result-card bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-6">
143
+ <div class="flex items-center mb-4">
144
+ <div class="bg-green-500 p-2 rounded-lg mr-4">
145
+ <i data-feather="dollar-sign" class="text-white"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold text-gray-800">Diferença</h3>
148
+ </div>
149
+ <p class="text-gray-700">Juros compostos rendem <span id="differenceAmount" class="font-bold text-green-700">R$ 0,00</span> a mais que juros simples</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Chart Section -->
157
+ <div class="bg-white rounded-2xl shadow-xl p-6 mb-12">
158
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Evolução do Investimento</h2>
159
+ <canvas id="comparisonChart" height="100"></canvas>
160
+ </div>
161
+
162
+ <!-- Explanation Section -->
163
+ <div class="bg-white rounded-2xl shadow-xl p-6">
164
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Diferença entre Juros Simples e Compostos</h2>
165
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
166
+ <div>
167
+ <h3 class="text-xl font-semibold text-primary-600 mb-3">Juros Simples</h3>
168
+ <p class="text-gray-700 mb-4">Nos juros simples, a taxa de juros incide apenas sobre o capital inicial. O valor dos juros é constante ao longo do tempo.</p>
169
+ <p class="text-gray-700">Fórmula: <span class="font-mono bg-gray-100 p-1 rounded">M = C × (1 + i × t)</span></p>
170
+ <ul class="mt-4 space-y-2 text-gray-700">
171
+ <li class="flex items-start">
172
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
173
+ <span>Crescimento linear</span>
174
+ </li>
175
+ <li class="flex items-start">
176
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
177
+ <span>Mais vantajoso para curto prazo</span>
178
+ </li>
179
+ <li class="flex items-start">
180
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
181
+ <span>Fácil de calcular</span>
182
+ </li>
183
+ </ul>
184
+ </div>
185
+ <div>
186
+ <h3 class="text-xl font-semibold text-secondary-600 mb-3">Juros Compostos</h3>
187
+ <p class="text-gray-700 mb-4">Nos juros compostos, a taxa de juros incide sobre o capital inicial e também sobre os juros acumulados em períodos anteriores. É o chamado "juro sobre juro".</p>
188
+ <p class="text-gray-700">Fórmula: <span class="font-mono bg-gray-100 p-1 rounded">M = C × (1 + i)<sup>t</sup></span></p>
189
+ <ul class="mt-4 space-y-2 text-gray-700">
190
+ <li class="flex items-start">
191
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
192
+ <span>Crescimento exponencial</span>
193
+ </li>
194
+ <li class="flex items-start">
195
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
196
+ <span>Mais vantajoso para longo prazo</span>
197
+ </li>
198
+ <li class="flex items-start">
199
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
200
+ <span>Potencializa ganhos com o tempo</span>
201
+ </li>
202
+ </ul>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <footer class="py-8 text-center text-gray-600">
209
+ <p>© 2023 Juros Comparados - Ferramenta para comparação de juros simples e compostos</p>
210
+ </footer>
211
+
212
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
213
+ <script>
214
+ // Initialize feather icons
215
+ feather.replace();
216
+
217
+ // Get DOM elements
218
+ const calculatorForm = document.getElementById('calculatorForm');
219
+ const simpleAmountEl = document.getElementById('simpleAmount');
220
+ const simpleInterestEl = document.getElementById('simpleInterest');
221
+ const compoundAmountEl = document.getElementById('compoundAmount');
222
+ const compoundInterestEl = document.getElementById('compoundInterest');
223
+ const differenceAmountEl = document.getElementById('differenceAmount');
224
+ const simpleBarEl = document.getElementById('simpleBar');
225
+ const compoundBarEl = document.getElementById('compoundBar');
226
+
227
+ // Chart initialization
228
+ const ctx = document.getElementById('comparisonChart').getContext('2d');
229
+ let comparisonChart = new Chart(ctx, {
230
+ type: 'line',
231
+ data: {
232
+ labels: [],
233
+ datasets: [
234
+ {
235
+ label: 'Juros Simples',
236
+ data: [],
237
+ borderColor: '#3b82f6',
238
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
239
+ borderWidth: 3,
240
+ fill: true,
241
+ tension: 0.4
242
+ },
243
+ {
244
+ label: 'Juros Compostos',
245
+ data: [],
246
+ borderColor: '#8b5cf6',
247
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
248
+ borderWidth: 3,
249
+ fill: true,
250
+ tension: 0.4
251
+ }
252
+ ]
253
+ },
254
+ options: {
255
+ responsive: true,
256
+ plugins: {
257
+ legend: {
258
+ position: 'top',
259
+ },
260
+ tooltip: {
261
+ mode: 'index',
262
+ intersect: false
263
+ }
264
+ },
265
+ scales: {
266
+ y: {
267
+ beginAtZero: true,
268
+ grid: {
269
+ color: 'rgba(0, 0, 0, 0.05)'
270
+ }
271
+ },
272
+ x: {
273
+ grid: {
274
+ display: false
275
+ }
276
+ }
277
+ }
278
+ }
279
+ });
280
+
281
+ // Calculate simple interest
282
+ function calculateSimpleInterest(principal, rate, time, contribution) {
283
+ // Convert rate from percentage to decimal
284
+ rate = rate / 100;
285
+
286
+ // Total contributions
287
+ const totalContributions = contribution * 12 * time;
288
+
289
+ // Simple interest calculation
290
+ const interest = principal * rate * time;
291
+
292
+ // Final amount
293
+ const amount = principal + interest + totalContributions;
294
+
295
+ return {
296
+ amount: amount,
297
+ interest: interest,
298
+ contributions: totalContributions
299
+ };
300
+ }
301
+
302
+ // Calculate compound interest
303
+ function calculateCompoundInterest(principal, rate, time, contribution) {
304
+ // Convert rate from percentage to decimal
305
+ rate = rate / 100;
306
+
307
+ // Monthly rate
308
+ const monthlyRate = rate / 12;
309
+
310
+ // Future value of initial principal
311
+ let futureValue = principal * Math.pow(1 + rate, time);
312
+
313
+ // Future value of monthly contributions
314
+ if (monthlyRate > 0) {
315
+ const contributionFutureValue = contribution *
316
+ (Math.pow(1 + monthlyRate, 12 * time) - 1) / monthlyRate;
317
+ futureValue += contributionFutureValue;
318
+ } else {
319
+ futureValue += contribution * 12 * time;
320
+ }
321
+
322
+ // Total interest
323
+ const totalContributions = contribution * 12 * time;
324
+ const interest = futureValue - principal - totalContributions;
325
+
326
+ return {
327
+ amount: futureValue,
328
+ interest: interest,
329
+ contributions: totalContributions
330
+ };
331
+ }
332
+
333
+ // Format currency
334
+ function formatCurrency(value) {
335
+ return new Intl.NumberFormat('pt-BR', {
336
+ style: 'currency',
337
+ currency: 'BRL'
338
+ }).format(value);
339
+ }
340
+
341
+ // Update chart data
342
+ function updateChart(principal, rate, time, contribution) {
343
+ // Convert rate from percentage to decimal
344
+ rate = rate / 100;
345
+ const monthlyRate = rate / 12;
346
+
347
+ // Generate data for each year
348
+ const labels = [];
349
+ const simpleData = [];
350
+ const compoundData = [];
351
+
352
+ let simpleAmount = principal;
353
+ let compoundAmount = principal;
354
+
355
+ // Initial values
356
+ labels.push(0);
357
+ simpleData.push(principal);
358
+ compoundData.push(principal);
359
+
360
+ // Calculate for each year
361
+ for (let year = 1; year <= time; year++) {
362
+ labels.push(year);
363
+
364
+ // Simple interest
365
+ const simpleInterest = principal * rate * year;
366
+ const simpleTotalContributions = contribution * 12 * year;
367
+ simpleAmount = principal + simpleInterest + simpleTotalContributions;
368
+ simpleData.push(simpleAmount);
369
+
370
+ // Compound interest
371
+ compoundAmount = principal * Math.pow(1 + rate, year);
372
+ const contributionFutureValue = contribution *
373
+ (Math.pow(1 + monthlyRate, 12 * year) - 1) / monthlyRate;
374
+ compoundAmount += contributionFutureValue;
375
+ compoundData.push(compoundAmount);
376
+ }
377
+
378
+ // Update chart
379
+ comparisonChart.data.labels = labels;
380
+ comparisonChart.data.datasets[0].data = simpleData;
381
+ comparisonChart.data.datasets[1].data = compoundData;
382
+ comparisonChart.update();
383
+ }
384
+
385
+ // Handle form submission
386
+ calculatorForm.addEventListener('submit', function(e) {
387
+ e.preventDefault();
388
+
389
+ // Get input values
390
+ const principal = parseFloat(document.getElementById('principal').value);
391
+ const rate = parseFloat(document.getElementById('rate').value);
392
+ const time = parseInt(document.getElementById('time').value);
393
+ const contribution = parseFloat(document.getElementById('contribution').value);
394
+
395
+ // Validate inputs
396
+ if (isNaN(principal) || isNaN(rate) || isNaN(time) || isNaN(contribution) ||
397
+ principal < 0 || rate < 0 || time <= 0 || contribution < 0) {
398
+ alert('Por favor, insira valores válidos em todos os campos.');
399
+ return;
400
+ }
401
+
402
+ // Calculate results
403
+ const simpleResult = calculateSimpleInterest(principal, rate, time, contribution);
404
+ const compoundResult = calculateCompoundInterest(principal, rate, time, contribution);
405
+ const difference = compoundResult.amount - simpleResult.amount;
406
+
407
+ // Update UI
408
+ simpleAmountEl.textContent = formatCurrency(simpleResult.amount);
409
+ simpleInterestEl.textContent = formatCurrency(simpleResult.interest);
410
+ compoundAmountEl.textContent = formatCurrency(compoundResult.amount);
411
+ compoundInterestEl.textContent = formatCurrency(compoundResult.interest);
412
+ differenceAmountEl.textContent = formatCurrency(difference);
413
+
414
+ // Update progress bars
415
+ const maxAmount = Math.max(simpleResult.amount, compoundResult.amount);
416
+ simpleBarEl.style.width = `${(simpleResult.amount / maxAmount) * 100}%`;
417
+ compoundBarEl.style.width = `${(compoundResult.amount / maxAmount) * 100}%`;
418
+
419
+ // Update chart
420
+ updateChart(principal, rate, time, contribution);
421
+ });
422
+
423
+ // Initialize with default values
424
+ document.addEventListener('DOMContentLoaded', function() {
425
+ calculatorForm.dispatchEvent(new Event('submit'));
426
+ });
427
+ </script>
428
+ </body>
429
  </html>