ColmanDevClubORG · OriDahariGit · Dec 8, 2024 · Dec 8, 2024 · Dec 8, 2024 · Dec 8, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-# Avoid accidental upload of the Sketch and Figma design files
+git revert HEAD# Avoid accidental upload of the Sketch and Figma design files
 #####################################################
 ## Please do not remove lines 5 and 6 - thanks! 🙂 ##
 #####################################################
@@ -13,4 +13,7 @@
 
 # Avoid your project being littered with annoying .DS_Store files!
 .DS_Store
-.prettierignore
+.prettierignore
+
+# Developement Mode Components
+./docs
diff --git a/index.html b/index.html
@@ -1,39 +1,106 @@
 <!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>
-</head>
-<body>
-
-  Bill
-
-  Select Tip %
-  5%
-  10%
-  15%
-  25%
-  50%
-  Custom
-
-  Number of People
-
-  Tip Amount
-  / person
-
-  Total
-  / person
-
-  Reset
-</body>
-</html>
+<html lang="en" >
+
+    <head>
+        <!-- Meta Settings -->
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <!-- -- Dependencies -- -->
+        <!-- Style -->
+        <link rel="stylesheet" href="styles/style.css" />
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+
+        <!-- Tab Bar Box Styling -->
+        <link rel="icon" type="image/png" href="./public/images/favicon-32x32.png" sizes="32x32">
+        <title>Frontend Mentor | Tip Calculator App</title>
+
+    </head>
+
+    <body>
+        <!-- Title -->
+        <h1 class="--gray-cyan"> 
+            SPLI<br>
+            TTER
+        </h1>
+
+        <div id="app" class="flex"> <!-- App Frame -->
+            <!-- Left Panel - Form to Fill -->
+            <div class="flex--inline --col --corner-15" > <!-- Form Panel -->
+                <div class="flex--inline --col"> <!-- Form Field: Bill Amount -->
+                    <p class="m-txt --gray-cyan">Bill</p>
+
+                    <div class="input-wrapper"> <!-- [text-input + icon] wrapper -->
+                        <img src="public/images/icon-dollar.svg" alt="Dollar Sign" />
+
+                        <input type="number" id="bill-input" class="box--input l-txt" value=0 placeholder="..." min=0 />
+                    </div>
+                </div>
+
+                <div class="flex--inline --col"> <!-- Form Field: Tip Selection -->
+                    <p class="m-txt --gray-cyan">Select Tip %</p>
+
+                    <div class="grid--inline l-txt"> <!-- Tip Selection Grid -->
+                        <button type="button" id="b1" value=5 class="btn option --bg-primary l-txt"> 
+                            5%
+                        </button>
+                        <button type="button" id="b2" value=10 class="btn option --bg-primary l-txt"> 
+                            10%
+                        </button>
+                        <button type="button" id="b3" value=15 class="btn option --bg-primary l-txt --bg-selected"> 
+                            15%
+                        </button>
+
+                        <button type="button" id="b4" value=20 class="btn option --bg-primary l-txt"> 
+                            20%
+                        </button>
+                        <button type="button" id="b5" value=50 class="btn option --bg-primary l-txt"> 
+                            50%
+                        </button>
+                        <input type="number" id="custom-tip" class="btn option l-txt" placeholder="Custom" min=0 /> 
+                    </div>
+                </div>
+
+                <div class="flex--inline --col"> <!-- Form Field: Num of People -->
+                    <p class="m-txt --gray-cyan">Num of People</p>
+
+                    <div class="input-wrapper"> <!-- [text-input + icon] wrapper -->
+                        <img src="public/images/icon-person.svg" alt="Person Icon" />
+                        <input type="number" id="people-count" class="l-txt" value=1 placeholder="..." min=1 />
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Panel - Calculation Results -->
+            <div class="flex--inline --col --corner-15 --bg-primary --space-between --block-padding">
+                <div class="flex--inline --col res-info-wrapper"> <!-- Results Dislpay-->
+                    <!-- Result Row 1: tip amount -->
+                    <div class="flex--inline res-info-wrapper">
+                        <p class="m-txt">Tip Amount <br>
+                            <span class="s-txt --dark-gray-cyan">/person</span>
+                        </p>
+                        <p id="tip-amount" class="xl-txt">00.00</p>
+                    </div>
+
+                    <!-- Result Row 2: total amount -->
+                    <div class="flex--inline res-info-wrapper">
+                        <p class="m-txt">Total Amount <br>
+                            <span class="s-txt --dark-gray-cyan">/person</span>
+                        </p>
+                        <p id="total-amount" class="xl-txt">00.00</p>
+                    </div>
+                </div>  
+                <button type="button" id="reset-btn" class="btn --bg-selected l-txt">Reset</button>
+            </div>
+        </div>
+
+        <script src="src/script.js" defer></script>
+        <!-- <script src="src/index.js"></script> -->
+
+    </body>
+
+</html>
diff --git a/README.md → public/docs/README.md b/README.md → public/docs/README.md
diff --git a/style-guide.md → public/docs/style-guide.md b/style-guide.md → public/docs/style-guide.md
diff --git a/public/fonts/Space_Mono/OFL.txt b/public/fonts/Space_Mono/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2016 Google Inc. All Rights Reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/fonts/Space_Mono/SpaceMono-Bold.ttf b/public/fonts/Space_Mono/SpaceMono-Bold.ttf
diff --git a/public/fonts/Space_Mono/SpaceMono-BoldItalic.ttf b/public/fonts/Space_Mono/SpaceMono-BoldItalic.ttf
diff --git a/public/fonts/Space_Mono/SpaceMono-Italic.ttf b/public/fonts/Space_Mono/SpaceMono-Italic.ttf
diff --git a/public/fonts/Space_Mono/SpaceMono-Regular.ttf b/public/fonts/Space_Mono/SpaceMono-Regular.ttf
diff --git a/images/favicon-32x32.png → public/images/favicon-32x32.png b/images/favicon-32x32.png → public/images/favicon-32x32.png
diff --git a/images/icon-dollar.svg → public/images/icon-dollar.svg b/images/icon-dollar.svg → public/images/icon-dollar.svg
diff --git a/images/icon-person.svg → public/images/icon-person.svg b/images/icon-person.svg → public/images/icon-person.svg
diff --git a/images/logo.svg → public/images/logo.svg b/images/logo.svg → public/images/logo.svg
diff --git a/src/script.js b/src/script.js
@@ -0,0 +1,74 @@
+"use strict";
+
+// Elements Selection
+const bill = document.getElementById("bill-input");
+const peopleNum = document.getElementById("people-count");
+const tipAmount = document.getElementById("tip-amount");
+const totalAmount = document.getElementById("total-amount");
+const resetButton = document.getElementById("reset-btn");
+const customTip = document.getElementById("custom-tip");
+const buttons = document.querySelectorAll(".option");
+
+const getBillVal = () => {
+    return parseFloat(bill.value);
+};
+
+const getTipVal = () => {
+    let selected = undefined;
+    buttons.forEach(button => {
+        if (button.classList.contains('--bg-selected')) {
+            selected = button;
+        }
+    })
+    return parseFloat(selected.value);
+}
+
+customTip.addEventListener('input', (event) => {
+    updateDashboard();
+})
+
+const getPeopleNum = () => {
+    return parseFloat(peopleNum.value);
+}
+
+
+const onTipSelection = (event) => {
+    const selected = event.target;
+    buttons.forEach(button => {
+        button.classList.remove('--bg-selected');
+    });
+    selected.classList.add('--bg-selected');
+
+    if (selected.id != 'custom-tip') {
+        updateDashboard();        
+    }
+}
+
+const updateDashboard = () => {
+    const tipPrecent = (getTipVal() / 100);
+    const billTip = (getBillVal() * tipPrecent)
+    tipAmount.innerHTML = (billTip / getPeopleNum()).toFixed(2);
+    totalAmount.innerHTML = ((getBillVal() + billTip) / getPeopleNum()).toFixed(2);
+};
+
+buttons.forEach(button => {
+    button.addEventListener('click', onTipSelection);
+})
+
+bill.addEventListener('input', (event) => {
+    updateDashboard();
+})
+
+peopleNum.addEventListener('input', (event) => {
+    updateDashboard();
+})
+
+resetButton.addEventListener('click', () => {
+    bill.value = 0;
+    peopleNum.value = 1;
+    buttons.forEach(button => {
+        button.classList.remove('--bg-selected');
+    })
+    customTip.value = null;
+})
+