Browse Source

add calc

master
Jakub Škrabánek 2 months ago
parent
commit
b548dc0dfc
  1. 70
      19_calc/calc_ez.html
  2. 4085
      19_calc/css/bootstrap-grid.css
  3. 1
      19_calc/css/bootstrap-grid.css.map
  4. 6
      19_calc/css/bootstrap-grid.min.css
  5. 1
      19_calc/css/bootstrap-grid.min.css.map
  6. 4084
      19_calc/css/bootstrap-grid.rtl.css
  7. 1
      19_calc/css/bootstrap-grid.rtl.css.map
  8. 6
      19_calc/css/bootstrap-grid.rtl.min.css
  9. 1
      19_calc/css/bootstrap-grid.rtl.min.css.map
  10. 597
      19_calc/css/bootstrap-reboot.css
  11. 1
      19_calc/css/bootstrap-reboot.css.map
  12. 6
      19_calc/css/bootstrap-reboot.min.css
  13. 1
      19_calc/css/bootstrap-reboot.min.css.map
  14. 594
      19_calc/css/bootstrap-reboot.rtl.css
  15. 1
      19_calc/css/bootstrap-reboot.rtl.css.map
  16. 6
      19_calc/css/bootstrap-reboot.rtl.min.css
  17. 1
      19_calc/css/bootstrap-reboot.rtl.min.css.map
  18. 5402
      19_calc/css/bootstrap-utilities.css
  19. 1
      19_calc/css/bootstrap-utilities.css.map
  20. 6
      19_calc/css/bootstrap-utilities.min.css
  21. 1
      19_calc/css/bootstrap-utilities.min.css.map
  22. 5393
      19_calc/css/bootstrap-utilities.rtl.css
  23. 1
      19_calc/css/bootstrap-utilities.rtl.css.map
  24. 6
      19_calc/css/bootstrap-utilities.rtl.min.css
  25. 1
      19_calc/css/bootstrap-utilities.rtl.min.css.map
  26. 12057
      19_calc/css/bootstrap.css
  27. 1
      19_calc/css/bootstrap.css.map
  28. 6
      19_calc/css/bootstrap.min.css
  29. 1
      19_calc/css/bootstrap.min.css.map
  30. 12030
      19_calc/css/bootstrap.rtl.css
  31. 1
      19_calc/css/bootstrap.rtl.css.map
  32. 6
      19_calc/css/bootstrap.rtl.min.css
  33. 1
      19_calc/css/bootstrap.rtl.min.css.map
  34. 61
      19_calc/index.html
  35. 6314
      19_calc/js/bootstrap.bundle.js
  36. 1
      19_calc/js/bootstrap.bundle.js.map
  37. 7
      19_calc/js/bootstrap.bundle.min.js
  38. 1
      19_calc/js/bootstrap.bundle.min.js.map
  39. 4447
      19_calc/js/bootstrap.esm.js
  40. 1
      19_calc/js/bootstrap.esm.js.map
  41. 7
      19_calc/js/bootstrap.esm.min.js
  42. 1
      19_calc/js/bootstrap.esm.min.js.map
  43. 4494
      19_calc/js/bootstrap.js
  44. 1
      19_calc/js/bootstrap.js.map
  45. 7
      19_calc/js/bootstrap.min.js
  46. 1
      19_calc/js/bootstrap.min.js.map
  47. 80
      19_calc/js/calculator.js

70
19_calc/calc_ez.html

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulačka</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.calculator {
border: 1px solid #aaa;
border-radius: 10px;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-3 text-center">Kalkulačka EZ, která není dokonalá</h1>
<div class="justify-content-center">
<div class="calculator">
<input type="text" id="display" class="form-control form-control-lg" readonly>
<!-- div.row*4>div.col-md-3*4>button.btn.btn-outline-dark -->
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('7')">7</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('8')">8</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('9')">9</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator" onclick="addText('/')">/</button></div>
</div>
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('4')">4</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('5')">5</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('6')">6</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator" onclick="addText('*')">*</button></div>
</div>
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('1')">1</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('2')">2</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('3')">3</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator" onclick="addText('-')">-</button></div>
</div>
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number" onclick="addText('0')">0</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 decimal" onclick="addText('.')">.</button></div>
<div class="col-md-3"><button class="btn btn-success w-100" id="equals" onclick="calculate()">=</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator" onclick="addText('+')">+</button></div>
</div>
<div class="row my-2">
<div class="col-md-12"><button class="btn btn-outline-danger w-100" id="clear">C</button></div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
<script>
function addText(txt) {
document.getElementById("display").value += txt;
}
function calculate() {
document.getElementById("display").value = eval(document.getElementById("display").value);
}
</script>
</body>
</html>

4085
19_calc/css/bootstrap-grid.css

File diff suppressed because it is too large

1
19_calc/css/bootstrap-grid.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap-grid.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap-grid.min.css.map

File diff suppressed because one or more lines are too long

4084
19_calc/css/bootstrap-grid.rtl.css

File diff suppressed because it is too large

1
19_calc/css/bootstrap-grid.rtl.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap-grid.rtl.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap-grid.rtl.min.css.map

File diff suppressed because one or more lines are too long

597
19_calc/css/bootstrap-reboot.css

@ -0,0 +1,597 @@
/*!
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root,
[data-bs-theme=light] {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-secondary-color-rgb: 33, 37, 41;
--bs-secondary-bg: #e9ecef;
--bs-secondary-bg-rgb: 233, 236, 239;
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
--bs-tertiary-color-rgb: 33, 37, 41;
--bs-tertiary-bg: #f8f9fa;
--bs-tertiary-bg-rgb: 248, 249, 250;
--bs-heading-color: inherit;
--bs-link-color: #0d6efd;
--bs-link-color-rgb: 13, 110, 253;
--bs-link-decoration: underline;
--bs-link-hover-color: #0a58ca;
--bs-link-hover-color-rgb: 10, 88, 202;
--bs-code-color: #d63384;
--bs-highlight-color: #212529;
--bs-highlight-bg: #fff3cd;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
--bs-form-valid-color: #198754;
--bs-form-valid-border-color: #198754;
--bs-form-invalid-color: #dc3545;
--bs-form-invalid-border-color: #dc3545;
}
[data-bs-theme=dark] {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: #6ea8fe;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #031633;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #084298;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #6ea8fe;
--bs-link-hover-color: #8bb9fe;
--bs-link-color-rgb: 110, 168, 254;
--bs-link-hover-color-rgb: 139, 185, 254;
--bs-code-color: #e685b5;
--bs-highlight-color: #dee2e6;
--bs-highlight-bg: #664d03;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: #75b798;
--bs-form-valid-border-color: #75b798;
--bs-form-invalid-color: #ea868f;
--bs-form-invalid-border-color: #ea868f;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
margin: 1rem 0;
color: inherit;
border: 0;
border-top: var(--bs-border-width) solid;
opacity: 0.25;
}
h6, h5, h4, h3, h2, h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
color: var(--bs-heading-color);
}
h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
h1 {
font-size: 2.5rem;
}
}
h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
h2 {
font-size: 2rem;
}
}
h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
h3 {
font-size: 1.75rem;
}
}
h4 {
font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
h4 {
font-size: 1.5rem;
}
}
h5 {
font-size: 1.25rem;
}
h6 {
font-size: 1rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul {
padding-left: 2rem;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 0.875em;
}
mark {
padding: 0.1875em;
color: var(--bs-highlight-color);
background-color: var(--bs-highlight-bg);
}
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
text-decoration: underline;
}
a:hover {
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}
pre,
code,
kbd,
samp {
font-family: var(--bs-font-monospace);
font-size: 1em;
}
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
font-size: 0.875em;
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
}
code {
font-size: 0.875em;
color: var(--bs-code-color);
word-wrap: break-word;
}
a > code {
color: inherit;
}
kbd {
padding: 0.1875rem 0.375rem;
font-size: 0.875em;
color: var(--bs-body-bg);
background-color: var(--bs-body-color);
border-radius: 0.25rem;
}
kbd kbd {
padding: 0;
font-size: 1em;
}
figure {
margin: 0 0 1rem;
}
img,
svg {
vertical-align: middle;
}
table {
caption-side: bottom;
border-collapse: collapse;
}
caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: var(--bs-secondary-color);
text-align: left;
}
th {
text-align: inherit;
text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
label {
display: inline-block;
}
button {
border-radius: 0;
}
button:focus:not(:focus-visible) {
outline: 0;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
select {
text-transform: none;
}
[role=button] {
cursor: pointer;
}
select {
word-wrap: normal;
}
select:disabled {
opacity: 1;
}
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
display: none !important;
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer;
}
::-moz-focus-inner {
padding: 0;
border-style: none;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
float: left;
width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: calc(1.275rem + 0.3vw);
line-height: inherit;
}
@media (min-width: 1200px) {
legend {
font-size: 1.5rem;
}
}
legend + * {
clear: left;
}
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
}
::-webkit-inner-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
padding: 0;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
::file-selector-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
iframe {
border: 0;
}
summary {
display: list-item;
cursor: pointer;
}
progress {
vertical-align: baseline;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

1
19_calc/css/bootstrap-reboot.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap-reboot.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap-reboot.min.css.map

File diff suppressed because one or more lines are too long

594
19_calc/css/bootstrap-reboot.rtl.css

@ -0,0 +1,594 @@
/*!
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root,
[data-bs-theme=light] {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-secondary-color-rgb: 33, 37, 41;
--bs-secondary-bg: #e9ecef;
--bs-secondary-bg-rgb: 233, 236, 239;
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
--bs-tertiary-color-rgb: 33, 37, 41;
--bs-tertiary-bg: #f8f9fa;
--bs-tertiary-bg-rgb: 248, 249, 250;
--bs-heading-color: inherit;
--bs-link-color: #0d6efd;
--bs-link-color-rgb: 13, 110, 253;
--bs-link-decoration: underline;
--bs-link-hover-color: #0a58ca;
--bs-link-hover-color-rgb: 10, 88, 202;
--bs-code-color: #d63384;
--bs-highlight-color: #212529;
--bs-highlight-bg: #fff3cd;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
--bs-form-valid-color: #198754;
--bs-form-valid-border-color: #198754;
--bs-form-invalid-color: #dc3545;
--bs-form-invalid-border-color: #dc3545;
}
[data-bs-theme=dark] {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: #6ea8fe;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #031633;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #084298;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #6ea8fe;
--bs-link-hover-color: #8bb9fe;
--bs-link-color-rgb: 110, 168, 254;
--bs-link-hover-color-rgb: 139, 185, 254;
--bs-code-color: #e685b5;
--bs-highlight-color: #dee2e6;
--bs-highlight-bg: #664d03;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: #75b798;
--bs-form-valid-border-color: #75b798;
--bs-form-invalid-color: #ea868f;
--bs-form-invalid-border-color: #ea868f;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
margin: 1rem 0;
color: inherit;
border: 0;
border-top: var(--bs-border-width) solid;
opacity: 0.25;
}
h6, h5, h4, h3, h2, h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
color: var(--bs-heading-color);
}
h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
h1 {
font-size: 2.5rem;
}
}
h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
h2 {
font-size: 2rem;
}
}
h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
h3 {
font-size: 1.75rem;
}
}
h4 {
font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
h4 {
font-size: 1.5rem;
}
}
h5 {
font-size: 1.25rem;
}
h6 {
font-size: 1rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul {
padding-right: 2rem;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: 0.5rem;
margin-right: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 0.875em;
}
mark {
padding: 0.1875em;
color: var(--bs-highlight-color);
background-color: var(--bs-highlight-bg);
}
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
text-decoration: underline;
}
a:hover {
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}
pre,
code,
kbd,
samp {
font-family: var(--bs-font-monospace);
font-size: 1em;
}
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
font-size: 0.875em;
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
}
code {
font-size: 0.875em;
color: var(--bs-code-color);
word-wrap: break-word;
}
a > code {
color: inherit;
}
kbd {
padding: 0.1875rem 0.375rem;
font-size: 0.875em;
color: var(--bs-body-bg);
background-color: var(--bs-body-color);
border-radius: 0.25rem;
}
kbd kbd {
padding: 0;
font-size: 1em;
}
figure {
margin: 0 0 1rem;
}
img,
svg {
vertical-align: middle;
}
table {
caption-side: bottom;
border-collapse: collapse;
}
caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: var(--bs-secondary-color);
text-align: right;
}
th {
text-align: inherit;
text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
label {
display: inline-block;
}
button {
border-radius: 0;
}
button:focus:not(:focus-visible) {
outline: 0;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
select {
text-transform: none;
}
[role=button] {
cursor: pointer;
}
select {
word-wrap: normal;
}
select:disabled {
opacity: 1;
}
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
display: none !important;
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer;
}
::-moz-focus-inner {
padding: 0;
border-style: none;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
float: right;
width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: calc(1.275rem + 0.3vw);
line-height: inherit;
}
@media (min-width: 1200px) {
legend {
font-size: 1.5rem;
}
}
legend + * {
clear: right;
}
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
}
::-webkit-inner-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
padding: 0;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
::file-selector-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
iframe {
border: 0;
}
summary {
display: list-item;
cursor: pointer;
}
progress {
vertical-align: baseline;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */

1
19_calc/css/bootstrap-reboot.rtl.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap-reboot.rtl.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap-reboot.rtl.min.css.map

File diff suppressed because one or more lines are too long

5402
19_calc/css/bootstrap-utilities.css

File diff suppressed because it is too large

1
19_calc/css/bootstrap-utilities.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap-utilities.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap-utilities.min.css.map

File diff suppressed because one or more lines are too long

5393
19_calc/css/bootstrap-utilities.rtl.css

File diff suppressed because it is too large

1
19_calc/css/bootstrap-utilities.rtl.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap-utilities.rtl.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap-utilities.rtl.min.css.map

File diff suppressed because one or more lines are too long

12057
19_calc/css/bootstrap.css

File diff suppressed because it is too large

1
19_calc/css/bootstrap.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap.min.css.map

File diff suppressed because one or more lines are too long

12030
19_calc/css/bootstrap.rtl.css

File diff suppressed because it is too large

1
19_calc/css/bootstrap.rtl.css.map

File diff suppressed because one or more lines are too long

6
19_calc/css/bootstrap.rtl.min.css

File diff suppressed because one or more lines are too long

1
19_calc/css/bootstrap.rtl.min.css.map

File diff suppressed because one or more lines are too long

61
19_calc/index.html

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulačka</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.calculator {
border: 1px solid #aaa;
border-radius: 10px;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-3 text-center">Kalkulačka</h1>
<div class="justify-content-center">
<div class="calculator">
<input type="text" id="display" class="form-control form-control-lg" readonly>
<!-- div.row*4>div.col-md-3*4>button.btn.btn-outline-dark -->
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">7</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">8</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">9</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator">/</button></div>
</div>
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">4</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">5</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">6</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator">*</button></div>
</div>
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">1</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">2</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">3</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator">-</button></div>
</div>
<div class="row my-2">
<div class="col-md-3"><button class="btn btn-outline-dark w-100 number">0</button></div>
<div class="col-md-3"><button class="btn btn-outline-dark w-100 decimal">.</button></div>
<div class="col-md-3"><button class="btn btn-success w-100" id="equals">=</button></div>
<div class="col-md-3"><button class="btn btn-primary w-100 operator">+</button></div>
</div>
<div class="row my-2">
<div class="col-md-12"><button class="btn btn-outline-danger w-100" id="clear">C</button></div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/calculator.js"></script>
</body>
</html>

6314
19_calc/js/bootstrap.bundle.js

File diff suppressed because it is too large

1
19_calc/js/bootstrap.bundle.js.map

File diff suppressed because one or more lines are too long

7
19_calc/js/bootstrap.bundle.min.js

File diff suppressed because one or more lines are too long

1
19_calc/js/bootstrap.bundle.min.js.map

File diff suppressed because one or more lines are too long

4447
19_calc/js/bootstrap.esm.js

File diff suppressed because it is too large

1
19_calc/js/bootstrap.esm.js.map

File diff suppressed because one or more lines are too long

7
19_calc/js/bootstrap.esm.min.js

File diff suppressed because one or more lines are too long

1
19_calc/js/bootstrap.esm.min.js.map

File diff suppressed because one or more lines are too long

4494
19_calc/js/bootstrap.js

File diff suppressed because it is too large

1
19_calc/js/bootstrap.js.map

File diff suppressed because one or more lines are too long

7
19_calc/js/bootstrap.min.js

File diff suppressed because one or more lines are too long

1
19_calc/js/bootstrap.min.js.map

File diff suppressed because one or more lines are too long

80
19_calc/js/calculator.js

@ -0,0 +1,80 @@
const display = document.getElementById("display");
const numbers = document.querySelectorAll(".number");
const operators = document.querySelectorAll(".operator");
const equals = document.getElementById("equals");
const clear = document.getElementById("clear");
const decimal = document.querySelector(".decimal");
let currentInput = "";
let firstOperand = null;
let operator = null;
numbers.forEach( number=> {
number.addEventListener("click", () => {
currentInput += number.textContent;
display.value = currentInput;
})
})
decimal.addEventListener("click", () => {
if(!currentInput.includes(".")) {
currentInput += ".";
display.value = currentInput;
}
})
operators.forEach(op => {
op.addEventListener("click", () => {
if(currentInput !== "") {
if(firstOperand === null){
firstOperand = parseFloat(currentInput);
} else {
calculate();
firstOperand = parseFloat(currentInput);
}
operator = op.textContent;
currentInput = "";
}
})
})
function calculate() {
const secondOperand = parseFloat(currentInput);
let result;
switch(operator) {
case "+":
result = firstOperand + secondOperand;
break;
case "-":
result = firstOperand - secondOperand;
break;
case "*":
result = firstOperand * secondOperand;
break;
case "/":
if(secondOperand == 0) {
result = "Nelze dělit nulou";
} else {
result = firstOperand / secondOperand;
}
break;
}
currentInput = result.toString();
display.value = currentInput;
}
equals.addEventListener("click", () => {
if(firstOperand !== null && operator !== null
&& currentInput !== null) {
calculate();
firstOperand = null;
operator = null;
}
})
clear.addEventListener("click", () => {
currentInput = "";
operator = null;
firstOperand = null;
display.value = "";
})
Loading…
Cancel
Save