-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (71 loc) · 4.46 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Tip calculator app</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header role="banner" class="centered-div"><h1><img src="./images/logo.svg" id="logo" alt="logo-for-calculator" /></h1></header>
<main class="main">
<section class="left-part">
<div class="left-part-one">
<p>Bill</p>
<div class="input-container">
<img src="./images/icon-dollar.svg" id="logodollar" alt="logo-for-dollar" />
<input type="number" name="number" class="flexible-input" id="input1" placeholder="0">
</div>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="11" height="17"><path fill="#9EBBBD" d="M6.016 16.328v-1.464c1.232-.08 2.22-.444 2.964-1.092.744-.648 1.116-1.508 1.116-2.58v-.144c0-.992-.348-1.772-1.044-2.34-.696-.568-1.708-.932-3.036-1.092V4.184c.56.144 1.012.4 1.356.768.344.368.516.816.516 1.344v.288h1.824v-.432c0-.448-.088-.876-.264-1.284a3.783 3.783 0 00-.744-1.116A4.251 4.251 0 007.54 2.9a5.324 5.324 0 00-1.524-.492V.872H4.288V2.36a5.532 5.532 0 00-1.416.324c-.448.168-.84.392-1.176.672-.336.28-.604.616-.804 1.008-.2.392-.3.844-.3 1.356v.144c0 .96.316 1.708.948 2.244.632.536 1.548.884 2.748 1.044v3.912c-.704-.16-1.248-.472-1.632-.936-.384-.464-.576-1.08-.576-1.848v-.288H.256v.576c0 .464.08.924.24 1.38.16.456.404.88.732 1.272.328.392.744.728 1.248 1.008s1.108.476 1.812.588v1.512h1.728zM4.288 7.424c-.688-.128-1.164-.332-1.428-.612-.264-.28-.396-.644-.396-1.092 0-.464.176-.832.528-1.104.352-.272.784-.448 1.296-.528v3.336zm1.728 5.712V9.344c.768.128 1.328.328 1.68.6.352.272.528.688.528 1.248 0 .544-.196.984-.588 1.32-.392.336-.932.544-1.62.624z"/></svg> -->
</div>
<div class="left-part-two">
<p>Select Tip %</p>
<div class="btn">
<button class="btnx" type="button" onclick="calculatePercentage(5)">5%</button>
<button class="btnx" type="button" onclick="calculatePercentage(10)">10%</button>
<button class="btnx" type="button" onclick="calculatePercentage(15)">15%</button>
<button class="btnx" type="button" onclick="calculatePercentage(20)">20%</button>
<button class="btnx" type="button" onclick="calculatePercentage(50)">50%</button>
<button class="btnx1" type="button" id="btnToggle" onmouseover="convertToInput()" onmouseout="convertToButton()">Custom</button>
<!-- <input class="inputx1" type="text" id="inputToggle" onmouseover="convertToInput()" onmouseout="convertToButton()"> -->
<input class="inputx1" type="number" id="inputToggle" onchange="hasInputValue = false" placeholder="0">
</div>
</div>
<div class="left-part-three">
<span>Number of People</span>
<span class="error-message">can't be zero</span>
<img src="./images/icon-person.svg" id="logoperson" alt="logo-for-person" />
<input type="number" name="number" class="flexible-input-person" id="numberInput" placeholder="0">
</div>
</section>
<section class="right-part">
<div class="right-part-one">
<div style="padding:4px; padding-left: 10px;">
<p style="font-size:20px; margin: 0; padding-bottom: 0px;">Tip Amount</p>
<p style="font-size:12px; margin: 0;">/person</p>
</div>
<div id="tipAmountPerPerson" style="text-align: center; color:rgb(16, 214, 194); font-size: 1.5rem;">$0.00</div>
</div>
<div class="right-part-two">
<div style="padding:2px; padding-left: 10px;">
<p style="font-size:20px; margin: 0; padding-bottom: 0px;">Total</p>
<p style="font-size:12px; margin: 0;">/person</p>
</div>
<div id="totalAmountPerPerson" style="text-align: center; color: rgb(16, 214, 194); font-size: 1.5rem; padding-right: 10px;">$0.00</div>
</div>
<div> <button class="btn-reset" onclick="resetValues()">RESET</button></div>
</section>
</main>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">SAURAV KUMAR SONU</a>.
</footer>
<script src="index.js"></script>
</body>
</html>