first commit

Author: UrkeNzY

.gitignore

@@ -0,0 +1,16 @@
+# Avoid accidental upload of the Sketch and Figma design files
+#####################################################
+## Please do not remove lines 5 and 6 - thanks! 🙂 ##
+#####################################################
+*.sketch
+*.fig
+
+# Avoid accidental XD upload if you convert the design file
+###############################################
+## Please do not remove line 12 - thanks! 🙂 ##
+###############################################
+*.xd
+
+# Avoid your project being littered with annoying .DS_Store files!
+.DS_Store
+.prettierignore

README.md

@@ -0,0 +1,35 @@
+# Frontend Mentor - Tip calculator app solution
+
+This is a solution to the [Tip calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
+
+### The challenge
+
+Users should be able to:
+
+- View the optimal layout for the app depending on their device's screen size
+- See hover states for all interactive elements on the page
+- Calculate the correct tip and total cost of the bill per person
+
+### What I learned
+
+I learned how to style placeholders and add images as backgrounds.
+
+```css
+::placeholder {
+  color: hsl(184, 14%, 56%);
+}
+
+ol li #custom-tip::placeholder {
+  color: hsl(186, 14%, 43%);
+  font-size: 1.375rem;
+  position: absolute;
+  top: 0.3125rem;
+  left: 0.625rem;
+}
+
+#left-section input {
+  background-image: url("images/icon-dollar.svg");
+}
+```
+
+

app.js

@@ -0,0 +1,150 @@
+const billInputField = document.getElementById("bill-amount");
+const billWarning = document.getElementById("bill-warning");
+
+const tipAmountElements = document.querySelectorAll(".tip-percentage");
+const tipAmountCustom = document.querySelector("#tip-custom input");
+
+const peopleInputField = document.getElementById("people-number");
+const peopleWarning = document.getElementById("people-warning");
+
+const tipAmountResult = document.querySelector("#tip-amount p");
+const totalAmountResult = document.querySelector("#total-amount p");
+
+const resetButton = document.querySelector("button");
+
+let bill = 0;
+let people = 0;
+let tipPercent = 0;
+
+let tipAmount = 0;
+let totalAmount = 0;
+
+function getInput(event) {
+  let inputValue = event.target.value;
+  return inputValue;
+}
+
+function getClickedButtonValue(event) {
+  let buttonValue;
+  let tipString = event.target.textContent;
+
+  event.target.classList.add("selected");
+
+  deselectButtons();
+  resetCustomTipField();
+
+  buttonValue = +tipString.slice(0, tipString.indexOf("$"));
+  return buttonValue;
+}
+
+function deselectButtons() {
+  for (const tipAmountElement of tipAmountElements) {
+    if (tipAmountElement !== event.target) {
+      tipAmountElement.classList.remove("selected");
+    }
+  }
+}
+
+function resetCustomTipField() {
+  tipAmountCustom.value = '';
+}
+
+billInputField.addEventListener("keyup", getInput);
+
+billInputField.addEventListener("focusout", updateBillValue);
+billInputField.addEventListener("keyup", updateBillValue);
+
+function updateBillValue() {
+  bill = getInput(event);
+
+  if (bill == 0 || bill === "") {
+    billWarning.textContent = "Can't be zero";
+    billInputField.classList.add("warning");
+  } else {
+    billWarning.textContent = "";
+    billInputField.classList.remove("warning");
+  }
+
+  calculateMoney();
+}
+
+peopleInputField.addEventListener("click", getInput);
+
+peopleInputField.addEventListener("focusout", updatePeopleNumber);
+peopleInputField.addEventListener("keyup", updatePeopleNumber);
+
+function updatePeopleNumber() {
+  people = getInput(event);
+
+  if (people == 0 || people === "") {
+    peopleWarning.textContent = "Can't be zero";
+    peopleInputField.classList.add("warning");
+  } else {
+    peopleWarning.textContent = "";
+    peopleInputField.classList.remove("warning");
+  }
+
+  calculateMoney();
+}
+
+for (const tipAmountElement of tipAmountElements) {
+  tipAmountElement.addEventListener("click", getClickedButtonValue);
+  tipAmountElement.addEventListener("click", updateTipValue);
+}
+
+function updateTipValue() {
+  tipPercent = getClickedButtonValue(event) / 100;
+  calculateMoney();
+}
+
+tipAmountCustom.addEventListener("keyup", getInput);
+tipAmountCustom.addEventListener("keyup", updateCustomTipValue);
+tipAmountCustom.addEventListener("focus", deselectButtons);
+
+function updateCustomTipValue() {
+  tipPercent = getInput(event) / 100;
+  calculateMoney();
+}
+
+resetButton.addEventListener("click", resetValues);
+
+function resetValues() {
+  billInputField.value = "";
+  tipAmountCustom.value = "";
+  peopleInputField.value = "";
+
+  bill = 0;
+  people = 0;
+  tipPercent = 0;
+
+  tipAmount = 0;
+  totalAmount = 0;
+
+  deselectButtons();
+
+  updateInterface();
+}
+
+function calculateMoney() {
+  tipAmount = (bill * tipPercent) / people;
+  tipAmount = +tipAmount.toFixed(2);
+
+  totalAmount = (bill / people) + tipAmount;
+  totalAmount = +totalAmount.toFixed(2);
+
+  updateInterface();
+}
+
+function updateInterface() {
+  if (isNaN(tipAmount) || !isFinite(tipAmount)) {
+    return;
+  } else {
+    tipAmountResult.textContent = "$" + tipAmount;
+  }
+
+  if (isNaN(totalAmount) || !isFinite(totalAmount)) {
+    return;
+  } else {
+    totalAmountResult.textContent = "$" + totalAmount;
+  }
+}

design/active-states.jpg

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./images/favicon-32x32.png"
+    />
+    <title>Frontend Mentor | Tip calculator app</title>
+    <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:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="app.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <img id="logo-image" src="images/logo.svg" alt="splitter logo" />
+      <div id="calculator">
+        <div id="left-section">
+          <div id="bill-label">
+            <label for="bill-amount">Bill</label>
+            <p id="bill-warning"></p>
+          </div>
+          <input
+            type="number"
+            id="bill-amount"
+            name="bill-amount"
+            placeholder="0"
+          />
+          <div id="tip-select">
+            <p>Select Tip %</p>
+            <ol>
+              <li class="tip-percentage">5%</li>
+              <li class="tip-percentage">10%</li>
+              <li class="tip-percentage">15%</li>
+              <li class="tip-percentage">25%</li>
+              <li class="tip-percentage">50%</li>
+              <li id="tip-custom">
+                <input
+                  type="number"
+                  id="custom-tip"
+                  name="custom-tip"
+                  placeholder="Custom"
+                />
+              </li>
+            </ol>
+          </div>
+
+          <div id="people-number-select">
+            <div id="people-label">
+              <label for="people-number">Number of People</label>
+              <p id="people-warning"></p>
+            </div>
+            <input
+              type="number"
+              id="people-number"
+              name="people-number"
+              placeholder="0"
+            />
+          </div>
+        </div>
+
+        <div id="right-section">
+          <div id="tip">
+            <div id="tip-text">
+              <p>Tip Amount</p>
+              <p>/ person</p>
+            </div>
+            <div id="tip-amount">
+              <p>$0.00</p>
+            </div>
+          </div>
+          <div id="total">
+            <div id="total-text">
+              <p>Total</p>
+              <p>/ person</p>
+            </div>
+            <div id="total-amount">
+              <p>$0.00</p>
+            </div>
+          </div>
+          <button>Reset</button>
+        </div>
+      </div>
+    </main>
+
+    <div class="attribution">
+      Challenge by
+      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
+        >Frontend Mentor</a
+      >. Coded by
+      <a href="https://www.frontendmentor.io/profile/UrkeNzY">UrkeNzY</a>.
+    </div>
+  </body>
+</html>

design/desktop-design-completed.jpg

@@ -0,0 +1,34 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+### Primary
+
+- Strong cyan: hsl(172, 67%, 45%)
+
+### Neutral
+
+- Very dark cyan: hsl(183, 100%, 15%)
+- Dark grayish cyan: hsl(186, 14%, 43%)
+- Grayish cyan: hsl(184, 14%, 56%)
+- Light grayish cyan: hsl(185, 41%, 84%)
+- Very light grayish cyan: hsl(189, 41%, 97%)
+- White: hsl(0, 0%, 100%)
+
+## Typography
+
+### Body Copy
+
+- Font size (form inputs): 24px
+
+### Font
+
+- Family: [Space Mono](https://fonts.google.com/specimen/Space+Mono)
+- Weights: 700