├── Screenshot_2.png ├── assets ├── dollar.png ├── logo.png └── user.png ├── index.html ├── script.js └── style.css /Screenshot_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/Screenshot_2.png -------------------------------------------------------------------------------- /assets/dollar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/assets/dollar.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/assets/logo.png -------------------------------------------------------------------------------- /assets/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielss97/tip-calculator/551aab7f6f2a1fd504f5510319170ac530f9abbf/assets/user.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tip Calculator 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 | Select Tip % 34 |
35 | 36 | 37 | 38 | 39 | 40 | 46 |
47 |
48 | 49 |
50 |
51 |
52 | Tip Amount 53 | / person 54 |
55 | $4.27 56 |
57 |
58 |
59 | Total 60 | / person 61 |
62 | $32.79 63 |
64 | 65 |
66 |
67 |
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector("#form") 2 | 3 | form.addEventListener("submit", (e) => { 4 | e.preventDefault() 5 | }) -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"); 2 | 3 | :root { 4 | --title-text-color: #5e7a7d; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | font-family: "Space Mono", monospace; 12 | font-weight: 700; 13 | color: var(--title-text-color); 14 | } 15 | 16 | body { 17 | background-color: aquamarine; 18 | min-height: 100vh; 19 | } 20 | 21 | .container { 22 | display: flex; 23 | flex-direction: column; 24 | } 25 | 26 | .container-title-wrapper { 27 | text-align: center; 28 | padding: 50px 144px; 29 | } 30 | 31 | .tip { 32 | border-radius: 25px 25px 0 0; 33 | background-color: white; 34 | padding: 2rem; 35 | } 36 | .tip__form { 37 | display: flex; 38 | flex-direction: column; 39 | row-gap: 2rem; 40 | } 41 | 42 | .tip__wrapper { 43 | display: flex; 44 | flex-direction: column; 45 | row-gap: 6px; 46 | } 47 | 48 | .tip__bill { 49 | } 50 | .tip__icon-wrapper { 51 | position: relative; 52 | } 53 | 54 | .tip__payout { 55 | width: 100%; 56 | border: 2px solid transparent; 57 | background-color: #f3f9fa; 58 | color: #00474b; 59 | font-size: 1.5rem; 60 | border-radius: 5px; 61 | text-align: right; 62 | padding: 0.5rem 1rem; 63 | } 64 | 65 | .tip__payout:focus, 66 | .tip__people:focus, 67 | .tip__custom:focus { 68 | border: 2px solid #26c2ae; 69 | outline: none; 70 | } 71 | 72 | .tip__dollar, 73 | .tip__user { 74 | position: absolute; 75 | top: 18px; 76 | left: 18px; 77 | } 78 | .tip__people { 79 | width: 100%; 80 | border: 2px solid transparent; 81 | background-color: #f3f9fa; 82 | color: #00474b; 83 | font-size: 1.5rem; 84 | border-radius: 5px; 85 | text-align: right; 86 | padding: 0.5rem 1rem; 87 | } 88 | 89 | .tip__select { 90 | } 91 | .tip__percentage-wrapper { 92 | display: flex; 93 | flex-wrap: wrap; 94 | gap: 1rem; 95 | } 96 | .tip__percentage { 97 | width: 45%; 98 | border: none; 99 | border-radius: 5px; 100 | font-size: 1.5rem; 101 | padding: .5rem 1rem; 102 | color: white; 103 | background-color: #00474b; 104 | 105 | } 106 | 107 | .tip__percentage:focus { 108 | background-color: #26c2ae; 109 | color: #00474b; 110 | border: none; 111 | outline: none; 112 | 113 | } 114 | 115 | .tip__custom { 116 | width: 45%; 117 | text-align: right; 118 | font-size: 1.5rem; 119 | border-radius: 5px; 120 | outline: none; 121 | border: 2px solid transparent; 122 | background-color: #f3f9fa; 123 | padding-right: 10px; 124 | } 125 | 126 | .tip__custom::placeholder { 127 | color: #547878; 128 | } 129 | .tip__wrapper-footer { 130 | background-color: #00474b; 131 | padding: 2rem 1rem; 132 | border-radius: 15px; 133 | display: flex; 134 | flex-direction: column; 135 | row-gap: 1.5rem; 136 | } 137 | 138 | .tip__amount-total { 139 | display: flex; 140 | justify-content: space-between; 141 | align-items: center; 142 | } 143 | 144 | .tip__person { 145 | display: flex; 146 | flex-direction: column; 147 | } 148 | 149 | .tip__person span:first-child { 150 | color: #f3f9fa; 151 | } 152 | 153 | .tip__person:last-child { 154 | font-size: 0.8rem; 155 | color: #7F9D9F; 156 | } 157 | .tip__result { 158 | font-size: 2rem; 159 | color: #26c2ae; 160 | } 161 | .tip__reset { 162 | background-color: #26c2ae; 163 | color: #00474b; 164 | border: none; 165 | border-radius: 5px; 166 | padding: 0.7rem 2rem; 167 | font-size: 1.25rem; 168 | margin-top: 1rem; 169 | } 170 | --------------------------------------------------------------------------------