added challenges

RanitManik · May 15, 2024 · 2aca56a · 2aca56a
1 parent c59562c
commit 2aca56a
Show file tree

Hide file tree

Showing 18 changed files with 1,180 additions and 0 deletions.
diff --git a/FrontendMentor30—tip-calculator-app/design/active-states.jpg b/FrontendMentor30—tip-calculator-app/design/active-states.jpg
diff --git a/FrontendMentor30—tip-calculator-app/design/desktop-design-empty.jpg b/FrontendMentor30—tip-calculator-app/design/desktop-design-empty.jpg
diff --git a/FrontendMentor30—tip-calculator-app/design/desktop-design.jpg b/FrontendMentor30—tip-calculator-app/design/desktop-design.jpg
diff --git a/FrontendMentor30—tip-calculator-app/design/desktop-preview.jpg b/FrontendMentor30—tip-calculator-app/design/desktop-preview.jpg
diff --git a/FrontendMentor30—tip-calculator-app/design/mobile-design.jpg b/FrontendMentor30—tip-calculator-app/design/mobile-design.jpg
diff --git a/FrontendMentor30—tip-calculator-app/design/style-guide.md b/FrontendMentor30—tip-calculator-app/design/style-guide.md
@@ -0,0 +1,38 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
+
+## 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
+
+> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.
diff --git a/FrontendMentor30—tip-calculator-app/images/favicon-32x32.png b/FrontendMentor30—tip-calculator-app/images/favicon-32x32.png
diff --git a/FrontendMentor30—tip-calculator-app/images/icon-dollar.svg b/FrontendMentor30—tip-calculator-app/images/icon-dollar.svg
diff --git a/FrontendMentor30—tip-calculator-app/images/icon-person.svg b/FrontendMentor30—tip-calculator-app/images/icon-person.svg
diff --git a/FrontendMentor30—tip-calculator-app/images/logo.svg b/FrontendMentor30—tip-calculator-app/images/logo.svg
diff --git a/FrontendMentor30—tip-calculator-app/index.html b/FrontendMentor30—tip-calculator-app/index.html
@@ -0,0 +1,104 @@
+<!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="stylesheet" href="./src/output.css" />
+    <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"
+    />
+  </head>
+  <body
+    class="grid min-h-screen place-items-center content-center gap-10 bg-neutral-lightGrayishCyan p-4 font-mono text-neutral-darkGrayishCyan"
+  >
+    <header>
+      <h1 class="font-mono text-form-input tracking-[0.5rem]">
+        SPLI<br />TTER
+      </h1>
+    </header>
+    <main class="grid gap-10 rounded-3xl bg-neutral-white p-10 md:grid-cols-2">
+      <div class="grid gap-8">
+        <div>
+          <label class="legacyLabel" for="bill">Bill</label>
+          <input
+            class="legacyInput"
+            min="1"
+            max="100000"
+            type="number"
+            id="bill"
+            name="bill"
+            placeholder="0"
+          />
+        </div>
+
+        <div>
+          <p class="mb-2">Select Tip %</p>
+          <div class="grid grid-cols-3 gap-2 lg:gap-3">
+            <button value="5" class="tip-percent-btn">5%</button>
+            <button value="10" class="tip-percent-btn">10%</button>
+            <button value="15" class="tip-percent-btn">15%</button>
+            <button value="25" class="tip-percent-btn">25%</button>
+            <button value="50" class="tip-percent-btn">50%</button>
+            <label>
+              <input
+                id="tipInput"
+                class="tipInput"
+                min="1"
+                max="100"
+                placeholder="Custom"
+                type="number"
+              />
+            </label>
+          </div>
+        </div>
+        <div>
+          <label class="legacyLabel" for="people">Number of People</label>
+          <input
+            class="legacyInput"
+            min="1"
+            max="100000"
+            type="number"
+            id="people"
+            name="people"
+            placeholder="0"
+          />
+        </div>
+      </div>
+      <div
+        class="flex flex-col content-start gap-6 rounded-xl bg-neutral-veryDarkCyan p-8"
+      >
+        <div class="flex items-center justify-between gap-12 sm:gap-20 ">
+          <p class="text-sm text-neutral-white">
+            Tip Amount
+            <span class="block text-xs text-neutral-grayishCyan">/ person</span>
+          </p>
+          <p class="text-[1.5rem] sm:text-[2.25rem] text-primary-cyan">$<span>0.00</span></p>
+        </div>
+        <div class="flex items-center justify-between gap-12 sm:gap-20 ">
+          <p class="text-sm text-neutral-white">
+            Total
+            <span class="block text-xs text-neutral-grayishCyan">/ person</span>
+          </p>
+          <p class="text-[1.5rem] sm:text-[2.25rem] text-primary-cyan">$<span>0.00</span></p>
+        </div>
+        <button
+          class="mt-auto rounded bg-primary-cyan/20 p-2 text-neutral-veryDarkCyan"
+        >
+          Reset
+        </button>
+      </div>
+    </main>
+
+    <script src="./src/script.js"></script>
+  </body>
+</html>
diff --git a/FrontendMentor30—tip-calculator-app/package.json b/FrontendMentor30—tip-calculator-app/package.json
@@ -0,0 +1,15 @@
+{
+  "scripts": {
+    "start": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
+  },
+  "devDependencies": {
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.3"
+  },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
+  }
+}
diff --git a/FrontendMentor30—tip-calculator-app/src/input.css b/FrontendMentor30—tip-calculator-app/src/input.css
@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Chrome, Safari, Edge, Opera */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+#bill {
+  background-image: url("../images/icon-dollar.svg");
+  background-repeat: no-repeat;
+  background-position: 1rem center;
+  background-size: 10px;
+}
+
+#people {
+  background-image: url("../images/icon-person.svg");
+  background-repeat: no-repeat;
+  background-position: 1rem center;
+  background-size: 10px;
+}
+
+#tipInput::placeholder {
+  text-align: center;
+  color: hsl(186, 14%, 43%);
+}
+
+.legacyLabel {
+  @apply mb-2 block;
+}
+
+.legacyInput {
+  @apply block w-full rounded bg-neutral-veryLightGrayishCyan py-2 pl-10 pr-4 text-right  tracking-widest text-neutral-veryDarkCyan caret-primary-cyan outline outline-transparent invalid:outline-red-400 focus:border-none focus:outline-primary-cyan invalid:focus:outline-red-600;
+}
+
+.tip-percent-btn {
+  @apply rounded bg-neutral-veryDarkCyan px-4 py-2 text-neutral-veryLightGrayishCyan hover:bg-primary-cyan/50 hover:text-neutral-veryDarkCyan focus-visible:bg-primary-cyan focus-visible:text-neutral-veryDarkCyan focus-visible:outline-neutral-veryDarkCyan;
+}
+
+.tip-percent-btn-active {
+  @apply bg-primary-cyan text-neutral-veryDarkCyan;
+}
+
+.tipInput {
+  @apply w-full rounded bg-neutral-veryLightGrayishCyan px-4 py-2 text-right tracking-widest  text-neutral-veryDarkCyan caret-primary-cyan outline outline-transparent invalid:outline-red-600 focus:border-none focus:outline-primary-cyan invalid:focus:outline-red-600;
+}