Hugging Face's logo

Spaces:
jordonpeter01
/
sf-f52
Running

App Files Community
jordonpeter01 commited on
Commit
29f2934
·
verified ·
1 Parent(s): cae2d3d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +120 -29
index.html CHANGED
@@ -3,47 +3,138 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Barra de Pesquisa Estilo Google</html>
7
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
8
  <style>
9
- .container {
10
- padding: 20px;
11
- text-align: center;
12
- }
13
- #search-bar {
14
- width: 100%;
15
- padding: 15px;
16
- border: 1px solid #ddd;
17
- border-radius: 4px;
18
- font-size: 16px;
19
  }
20
  </style>
21
  </head>
22
  <body>
23
  <div class="container">
24
- <div class="row">
25
- <div class="col-md-12">
26
- <h1>Barra de Pesquisa Estilo Google</h1>
27
- <input type="text" id="search-bar" placeholder="Procure algo...">
28
- <button onclick="executeSearch()" class="btn btn-primary mt-3">Pesquisar</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  </div>
30
  </div>
31
  </div>
32
-
33
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
34
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
35
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
36
  <script>
37
- function executeSearch() {
38
- const searchBar = document.getElementById('search-bar');
39
- const searchTerm = searchBar.value;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
 
41
- if (searchTerm) {
42
- window.location.href = `https://www.google.com/search?q=${searchTerm}`;
43
- } else {
44
- alert('Digite algo na barra de pesquisa!');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  }
46
- }
47
  </script>
48
  </body>
49
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calculadora Flutuante</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
8
  <style>
9
+ .calculator {
10
+ position: fixed;
11
+ bottom: 0;
12
+ right: 0;
13
+ width: 300px;
14
+ height: 400px;
15
+ background-color: #fff;
16
+ border: 1px solid #ccc;
17
+ padding: 10px;
 
18
  }
19
  </style>
20
  </head>
21
  <body>
22
  <div class="container">
23
+ <h1>Calculadora Flutuante com Bootstrap</h1>
24
+ <p>Esta é uma calculadora foda que fica flutuando na sua tela, pronto para fazer algumas contas fodas quando você precisar.</p>
25
+ <div class="calculator">
26
+ <div class="row">
27
+ <div class="col">
28
+ <input type="text" id="display" class="form-control" placeholder="0" readonly>
29
+ </div>
30
+ </div>
31
+ <div class="row">
32
+ <div class="col-3">
33
+ <button type="button" class="btn btn-light">1</button>
34
+ </div>
35
+ <div class="col-3">
36
+ <button type="button" class="btn btn-light">2</button>
37
+ </div>
38
+ <div class="col-3">
39
+ <button type="button" class="btn btn-light">3</button>
40
+ </div>
41
+ <div class="col-3">
42
+ <button type="button" class="btn btn-primary">+</button>
43
+ </div>
44
+ </div>
45
+ <div class="row">
46
+ <div class="col-3">
47
+ <button type="button" class="btn btn-light">4</button>
48
+ </div>
49
+ <div class="col-3">
50
+ <button type="button" class="btn btn-light">5</button>
51
+ </div>
52
+ <div class="col-3">
53
+ <button type="button" class="btn btn-light">6</button>
54
+ </div>
55
+ <div class="col-3">
56
+ <button type="button" class="btn btn-primary">-</button>
57
+ </div>
58
+ </div>
59
+ <div class="row">
60
+ <div class="col-3">
61
+ <button type="button" class="btn btn-light">7</button>
62
+ </div>
63
+ <div class="col-3">
64
+ <button type="button" class="btn btn-light">8</button>
65
+ </div>
66
+ <div class="col-3">
67
+ <button type="button" class="btn btn-light">9</button>
68
+ </div>
69
+ <div class="col-3">
70
+ <button type="button" class="btn btn-primary">x</button>
71
+ </div>
72
+ </div>
73
+ <div class="row">
74
+ <div class="col-3">
75
+ <button type="button" class="btn btn-light">0</button>
76
+ </div>
77
+ <div class="col-3">
78
+ <button type="button" class="btn btn-primary">=</button>
79
+ </div>
80
+ <div class="col-3">
81
+ <button type="button" class="btn btn-light">.</button>
82
+ </div>
83
+ <div class="col-3">
84
+ <button type="button" class="btn btn-primary">/</button>
85
+ </div>
86
  </div>
87
  </div>
88
  </div>
89
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
90
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
 
 
91
  <script>
92
+ $(document).ready(function() {
93
+ let display = $('#display');
94
+ let num1, num2, operator;
95
+
96
+ $('.btn').click(function() {
97
+ if ($(this).text() == '=') {
98
+ num2 = parseFloat(display.val());
99
+ display.val((num1 || 0) + operator + num2 + ' = ' + calculate(num1, num2, operator));
100
+ num1 = null;
101
+ operator = null;
102
+ } else if ($(this).text() == 'C') {
103
+ display.val('0');
104
+ num1 = null;
105
+ num2 = null;
106
+ operator = null;
107
+ } else {
108
+ display.val(display.val() + $(this).text());
109
+ num1 = parseFloat(display.val());
110
+ }
111
 
112
+ if ($(this).text() == '+' || $(this).text() == '-' || $(this).text() == 'x' || $(this).text() == '/') {
113
+ operator = $(this).text();
114
+ num1 = parseFloat(display.val());
115
+ display.val('0');
116
+ }
117
+ });
118
+
119
+ function calculate(n1, n2, op) {
120
+ let result;
121
+ switch (op) {
122
+ case '+':
123
+ result = n1 + n2;
124
+ break;
125
+ case '-':
126
+ result = n1 - n2;
127
+ break;
128
+ case 'x':
129
+ result = n1 * n2;
130
+ break;
131
+ case '/':
132
+ result = n1 / n2;
133
+ break;
134
+ }
135
+ return result;
136
  }
137
+ });
138
  </script>
139
  </body>
140
  </html>