From b1d7a80defa11739e9989e9b849a6b0ff229e843 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 22 Aug 2023 16:39:22 +0700
Subject: [PATCH 1/3] Implement login and register page

---
 javascript-practice/package-lock.json         | 153 +++++++++++++++++-
 javascript-practice/package.json              |   1 +
 javascript-practice/src/login.html            |  44 +++++
 javascript-practice/src/register.html         |  51 ++++++
 javascript-practice/src/styles/_main.scss     |  16 +-
 .../src/styles/abstracts/_variables.scss      |   5 +
 .../src/styles/bases/_base.scss               |  46 +++++-
 .../src/styles/bases/_typography.scss         |   5 +
 .../src/styles/pages/_login-register.scss     |  76 +++++++++
 9 files changed, 393 insertions(+), 4 deletions(-)
 create mode 100644 javascript-practice/src/login.html
 create mode 100644 javascript-practice/src/register.html
 create mode 100644 javascript-practice/src/styles/pages/_login-register.scss

diff --git a/javascript-practice/package-lock.json b/javascript-practice/package-lock.json
index 26a5320..2cf23a4 100644
--- a/javascript-practice/package-lock.json
+++ b/javascript-practice/package-lock.json
@@ -13,6 +13,7 @@
         "regenerator-runtime": "^0.14.0"
       },
       "devDependencies": {
+        "@parcel/transformer-sass": "^2.9.3",
         "parcel": "^2.9.3"
       }
     },
@@ -1494,6 +1495,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/transformer-sass": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.9.3.tgz",
+      "integrity": "sha512-i9abj9bKg3xCHghJyTM3rUVxIEn9n1Rl+DFdpyNAD8VZ52COfOshFDQOWNuhU1hEnJOFYCjnfcO0HRTsg3dWmg==",
+      "dev": true,
+      "dependencies": {
+        "@parcel/plugin": "2.9.3",
+        "@parcel/source-map": "^2.1.1",
+        "sass": "^1.38.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0",
+        "parcel": "^2.9.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/transformer-svg": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.9.3.tgz",
@@ -2045,6 +2065,19 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2060,6 +2093,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -2155,6 +2197,33 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -2523,6 +2592,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/get-port": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.2.0.tgz",
@@ -2532,6 +2615,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/globals": {
       "version": "13.21.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
@@ -2622,6 +2717,12 @@
         "entities": "^3.0.1"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2644,6 +2745,18 @@
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "dev": true
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3068,6 +3181,15 @@
       "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -3251,6 +3373,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
@@ -3285,6 +3419,23 @@
         }
       ]
     },
+    "node_modules/sass": {
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -3314,8 +3465,6 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
diff --git a/javascript-practice/package.json b/javascript-practice/package.json
index 1c0459e..02280b6 100644
--- a/javascript-practice/package.json
+++ b/javascript-practice/package.json
@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@parcel/transformer-sass": "^2.9.3",
     "parcel": "^2.9.3"
   },
   "dependencies": {
diff --git a/javascript-practice/src/login.html b/javascript-practice/src/login.html
new file mode 100644
index 0000000..6ed7df8
--- /dev/null
+++ b/javascript-practice/src/login.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles/_main.scss" />
+    <title>Login - Money Lover</title>
+  </head>
+  <body>
+    <!-- <div class="loader"></div> -->
+    <div class="background">
+      <div class="wrapper">
+        <img class="logo-web" src="./assets/images/logo.svg" alt="Logo web" />
+        <!-- Log in form -->
+        <form action="#" class="form" method="post">
+          <div class="form__container">
+            <h1 class="form__title">Log In</h1>
+            <p class="form__description">Using Money Lover account</p>
+            <input
+              type="email"
+              class="form__input"
+              placeholder="Email"
+              name="email"
+              required
+            />
+            <input
+              type="password"
+              name="password"
+              class="form__input"
+              placeholder="Password"
+              required
+            />
+            <button type="submit" class="form__submit-btn">Login</button>
+            <p class="form__redirect-signup-text">
+              Don't have an account?
+              <a href="/register" class="form__link">Register</a>
+            </p>
+          </div>
+        </form>
+        <!-- End form -->
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/javascript-practice/src/register.html b/javascript-practice/src/register.html
new file mode 100644
index 0000000..e431bce
--- /dev/null
+++ b/javascript-practice/src/register.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles/_main.scss" />
+    <title>Register - Money Lover</title>
+  </head>
+  <body>
+    <!-- <div class="loader"></div> -->
+    <div class="background">
+      <div class="wrapper">
+        <img class="logo-web" src="./assets/images/logo.svg" alt="Logo web" />
+        <!-- Register form -->
+        <form action="#" class="form" method="post">
+          <div class="form__container">
+            <h1 class="form__title">Register</h1>
+            <p class="form__description">Using Money Lover account</p>
+            <input
+              type="email"
+              class="form__input"
+              placeholder="Email"
+              name="email"
+              required
+            />
+            <input
+              type="password"
+              name="password"
+              class="form__input"
+              placeholder="Password"
+              required
+            />
+            <input
+              type="password"
+              name="password_confirm"
+              class="form__input"
+              placeholder="Confirm Password"
+              required
+            />
+            <button type="submit" class="form__submit-btn">Register</button>
+            <p class="form__redirect-signup-text">
+              Have you an account?
+              <a href="/login" class="form__link">Sign in</a>
+            </p>
+          </div>
+        </form>
+        <!-- End form -->
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/javascript-practice/src/styles/_main.scss b/javascript-practice/src/styles/_main.scss
index 70b786d..4e524fb 100644
--- a/javascript-practice/src/styles/_main.scss
+++ b/javascript-practice/src/styles/_main.scss
@@ -1 +1,15 @@
-// TODO
+// Abstracts
+@import './abstracts/mixin';
+@import './abstracts/variables';
+
+// Bases
+@import './bases/base';
+@import './bases/reset';
+@import './bases/typography';
+
+// Layouts
+@import './layouts/header';
+@import './layouts/nav';
+
+// Pages
+@import './pages/login-register';
diff --git a/javascript-practice/src/styles/abstracts/_variables.scss b/javascript-practice/src/styles/abstracts/_variables.scss
index 2747838..144a5b8 100644
--- a/javascript-practice/src/styles/abstracts/_variables.scss
+++ b/javascript-practice/src/styles/abstracts/_variables.scss
@@ -1,12 +1,17 @@
 $primary-font: 'Roboto';
 
 // Color
+$light-primary-color: #00bc2a;
 $primary-color: #2db84c;
+$dark-primary-color: #009421;
 $primary-text-color: #000;
 $secondary-text-color: #0000008a;
 $secondary-light-text-color: #00000042;
 $receive-money-color: #e51c23;
 $deducted-money-color: #039be5;
+$color-background-input: #f5f5f5;
+$gray: #dddddd;
+$white: #ffffff;
 
 // Font size
 $fs-2x-sm: 11px;
diff --git a/javascript-practice/src/styles/bases/_base.scss b/javascript-practice/src/styles/bases/_base.scss
index 70b786d..d558546 100644
--- a/javascript-practice/src/styles/bases/_base.scss
+++ b/javascript-practice/src/styles/bases/_base.scss
@@ -1 +1,45 @@
-// TODO
+%margin-inline-auto {
+  margin-inline: auto;
+}
+
+%rounded {
+  border-radius: 10px;
+}
+
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #00000066;
+  z-index: 1;
+  transition: opacity 0.75s, visibility 0.75s;
+
+  &--hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &::after {
+    content: '';
+    width: 75px;
+    height: 75px;
+    border: 10px solid $gray;
+    border-top-color: $primary-color;
+    border-radius: 50%;
+    animation: loading 0.75s ease infinite;
+  }
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0turn);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
diff --git a/javascript-practice/src/styles/bases/_typography.scss b/javascript-practice/src/styles/bases/_typography.scss
index 3a01a73..2c464d6 100644
--- a/javascript-practice/src/styles/bases/_typography.scss
+++ b/javascript-practice/src/styles/bases/_typography.scss
@@ -26,3 +26,8 @@ $font-path: '../assets/fonts';
 
   font-display: swap;
 }
+
+* {
+  font-family: $primary-font, sans-serif;
+  font-size: $fs-sm;
+}
diff --git a/javascript-practice/src/styles/pages/_login-register.scss b/javascript-practice/src/styles/pages/_login-register.scss
new file mode 100644
index 0000000..30e4e02
--- /dev/null
+++ b/javascript-practice/src/styles/pages/_login-register.scss
@@ -0,0 +1,76 @@
+.background {
+  height: 100vh;
+  background: linear-gradient(#00710f 314px, #ebebeb -100%);
+}
+
+.wrapper {
+  @extend %margin-inline-auto;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+
+.logo-web {
+  padding-top: 54px;
+}
+
+.form {
+  @extend %margin-inline-auto;
+
+  margin-top: 34px;
+  padding-top: 34px;
+  padding-bottom: 40px;
+  background-color: $white;
+  width: 670px;
+  border-radius: 20px;
+
+  &__container {
+    @extend %margin-inline-auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: 19px;
+    width: 280px;
+  }
+
+  &__title {
+    color: $primary-text-color;
+    font-size: $fs-2x-lg;
+    font-weight: 700;
+    line-height: 48px;
+  }
+
+  &__description {
+    margin-top: 15px;
+    color: $secondary-text-color;
+    font-size: $fs-md;
+    line-height: 24px;
+  }
+
+  &__input {
+    @extend %rounded;
+
+    font-size: $fs-md;
+    height: 52px;
+    border: 2px solid $color-background-input;
+    background-color: $color-background-input;
+    padding-inline: 14px;
+  }
+
+  &__submit-btn {
+    @extend %rounded;
+
+    border: none;
+    background: $light-primary-color;
+    color: $white;
+    height: 36px;
+    margin-top: 30px;
+  }
+
+  &__link {
+    color: $primary-color;
+  }
+}

From dafb4c9060c8df650949fb888fedad723243a9e4 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 22 Aug 2023 16:59:21 +0700
Subject: [PATCH 2/3] Update structure code

---
 javascript-practice/package.json                  | 4 ++--
 javascript-practice/src/{ => pages}/index.html    | 0
 javascript-practice/src/{ => pages}/login.html    | 4 ++--
 javascript-practice/src/{ => pages}/register.html | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename javascript-practice/src/{ => pages}/index.html (100%)
 rename javascript-practice/src/{ => pages}/login.html (90%)
 rename javascript-practice/src/{ => pages}/register.html (91%)

diff --git a/javascript-practice/package.json b/javascript-practice/package.json
index 02280b6..66bab07 100644
--- a/javascript-practice/package.json
+++ b/javascript-practice/package.json
@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "description": "loi-phan-internship",
   "scripts": {
-    "start": "parcel ./src/*.html --no-cache --no-source-maps",
-    "build": "rm -rf build && rm -rf .parcel-cache && parcel build ./src/*.html --no-cache --no-source-maps --dist-dir dist"
+    "start": "parcel ./src/pages/*.html --no-cache --no-source-maps",
+    "build": "rm -rf build && rm -rf .parcel-cache && parcel build ./src/pages/*.html --no-cache --no-source-maps --dist-dir dist"
   },
   "author": "",
   "license": "ISC",
diff --git a/javascript-practice/src/index.html b/javascript-practice/src/pages/index.html
similarity index 100%
rename from javascript-practice/src/index.html
rename to javascript-practice/src/pages/index.html
diff --git a/javascript-practice/src/login.html b/javascript-practice/src/pages/login.html
similarity index 90%
rename from javascript-practice/src/login.html
rename to javascript-practice/src/pages/login.html
index 6ed7df8..9458b53 100644
--- a/javascript-practice/src/login.html
+++ b/javascript-practice/src/pages/login.html
@@ -3,14 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./styles/_main.scss" />
+    <link rel="stylesheet" href="../styles/_main.scss" />
     <title>Login - Money Lover</title>
   </head>
   <body>
     <!-- <div class="loader"></div> -->
     <div class="background">
       <div class="wrapper">
-        <img class="logo-web" src="./assets/images/logo.svg" alt="Logo web" />
+        <img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" />
         <!-- Log in form -->
         <form action="#" class="form" method="post">
           <div class="form__container">
diff --git a/javascript-practice/src/register.html b/javascript-practice/src/pages/register.html
similarity index 91%
rename from javascript-practice/src/register.html
rename to javascript-practice/src/pages/register.html
index e431bce..1d45234 100644
--- a/javascript-practice/src/register.html
+++ b/javascript-practice/src/pages/register.html
@@ -3,14 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./styles/_main.scss" />
+    <link rel="stylesheet" href="../styles/_main.scss" />
     <title>Register - Money Lover</title>
   </head>
   <body>
     <!-- <div class="loader"></div> -->
     <div class="background">
       <div class="wrapper">
-        <img class="logo-web" src="./assets/images/logo.svg" alt="Logo web" />
+        <img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" />
         <!-- Register form -->
         <form action="#" class="form" method="post">
           <div class="form__container">

From cda4735ac36ca4288205a77e4101e52a7cdb7b6a Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Wed, 23 Aug 2023 10:32:45 +0700
Subject: [PATCH 3/3] Fix naming variable, structure and create placeholder
 file

---
 javascript-practice/src/pages/login.html      |  2 +-
 javascript-practice/src/styles/_main.scss     |  4 ++
 .../src/styles/abstracts/_variables.scss      |  2 +-
 .../src/styles/bases/_base.scss               | 46 +------------------
 .../src/styles/bases/_placeholder.scss        |  7 +++
 .../src/styles/components/_loader.scss        | 39 ++++++++++++++++
 .../src/styles/pages/_login-register.scss     |  4 +-
 7 files changed, 55 insertions(+), 49 deletions(-)
 create mode 100644 javascript-practice/src/styles/bases/_placeholder.scss
 create mode 100644 javascript-practice/src/styles/components/_loader.scss

diff --git a/javascript-practice/src/pages/login.html b/javascript-practice/src/pages/login.html
index 9458b53..06bcb74 100644
--- a/javascript-practice/src/pages/login.html
+++ b/javascript-practice/src/pages/login.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/javascript-practice/src/styles/_main.scss b/javascript-practice/src/styles/_main.scss
index 4e524fb..f5b1f5c 100644
--- a/javascript-practice/src/styles/_main.scss
+++ b/javascript-practice/src/styles/_main.scss
@@ -4,9 +4,13 @@
 
 // Bases
 @import './bases/base';
+@import './bases/placeholder';
 @import './bases/reset';
 @import './bases/typography';
 
+// Components
+@import './components/loader';
+
 // Layouts
 @import './layouts/header';
 @import './layouts/nav';
diff --git a/javascript-practice/src/styles/abstracts/_variables.scss b/javascript-practice/src/styles/abstracts/_variables.scss
index 144a5b8..272030d 100644
--- a/javascript-practice/src/styles/abstracts/_variables.scss
+++ b/javascript-practice/src/styles/abstracts/_variables.scss
@@ -9,7 +9,7 @@ $secondary-text-color: #0000008a;
 $secondary-light-text-color: #00000042;
 $receive-money-color: #e51c23;
 $deducted-money-color: #039be5;
-$color-background-input: #f5f5f5;
+$background-input-color: #f5f5f5;
 $gray: #dddddd;
 $white: #ffffff;
 
diff --git a/javascript-practice/src/styles/bases/_base.scss b/javascript-practice/src/styles/bases/_base.scss
index d558546..70b786d 100644
--- a/javascript-practice/src/styles/bases/_base.scss
+++ b/javascript-practice/src/styles/bases/_base.scss
@@ -1,45 +1 @@
-%margin-inline-auto {
-  margin-inline: auto;
-}
-
-%rounded {
-  border-radius: 10px;
-}
-
-.loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #00000066;
-  z-index: 1;
-  transition: opacity 0.75s, visibility 0.75s;
-
-  &--hidden {
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  &::after {
-    content: '';
-    width: 75px;
-    height: 75px;
-    border: 10px solid $gray;
-    border-top-color: $primary-color;
-    border-radius: 50%;
-    animation: loading 0.75s ease infinite;
-  }
-}
-
-@keyframes loading {
-  from {
-    transform: rotate(0turn);
-  }
-  to {
-    transform: rotate(1turn);
-  }
-}
+// TODO
diff --git a/javascript-practice/src/styles/bases/_placeholder.scss b/javascript-practice/src/styles/bases/_placeholder.scss
new file mode 100644
index 0000000..0d91d28
--- /dev/null
+++ b/javascript-practice/src/styles/bases/_placeholder.scss
@@ -0,0 +1,7 @@
+%margin-inline-auto {
+  margin-inline: auto;
+}
+
+%rounded {
+  border-radius: 10px;
+}
diff --git a/javascript-practice/src/styles/components/_loader.scss b/javascript-practice/src/styles/components/_loader.scss
new file mode 100644
index 0000000..db1a55e
--- /dev/null
+++ b/javascript-practice/src/styles/components/_loader.scss
@@ -0,0 +1,39 @@
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #00000066;
+  z-index: 1;
+  transition:
+    opacity 0.75s,
+    visibility 0.75s;
+
+  &--hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &::after {
+    content: '';
+    width: 75px;
+    height: 75px;
+    border: 10px solid $gray;
+    border-top-color: $primary-color;
+    border-radius: 50%;
+    animation: loading 0.75s ease infinite;
+  }
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0turn);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
diff --git a/javascript-practice/src/styles/pages/_login-register.scss b/javascript-practice/src/styles/pages/_login-register.scss
index 30e4e02..19aecd5 100644
--- a/javascript-practice/src/styles/pages/_login-register.scss
+++ b/javascript-practice/src/styles/pages/_login-register.scss
@@ -55,8 +55,8 @@
 
     font-size: $fs-md;
     height: 52px;
-    border: 2px solid $color-background-input;
-    background-color: $color-background-input;
+    border: 2px solid $background-input-color;
+    background-color: $background-input-color;
     padding-inline: 14px;
   }