feat: cleanup 2

DrxcoDev · Feb 16, 2024 · 371dacd · 371dacd
1 parent 4a56fa4
commit 371dacd
Show file tree

Hide file tree

Showing 47 changed files with 238 additions and 500 deletions.
diff --git a/input-01/eye-off.svg → input-01/assets/eye-off.svg b/input-01/eye-off.svg → input-01/assets/eye-off.svg
diff --git a/input-01/eye.svg → input-01/assets/eye.svg b/input-01/eye.svg → input-01/assets/eye.svg
diff --git a/input-01/material-ui.html → input-01/index.html b/input-01/material-ui.html → input-01/index.html
@@ -9,7 +9,7 @@
  <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=Poppins&display=swap"
+ href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
  rel="stylesheet"
  >
  <link rel="stylesheet" href="style.css">
@@ -33,7 +33,7 @@
  <img
  alt="Eye Icon"
  title="Eye Icon"
- src="eye.svg"
+ src="assets/eye.svg"
  class="input__icon"
  >
  </div>

diff --git a/input-01/script.js b/input-01/script.js
@@ -8,9 +8,9 @@ inputIcon.addEventListener("click", (e) => {
  inputIcon.setAttribute(
  'src', 
  input.getAttribute('type') === 'password' ?
- 'eye-off.svg'
+ 'assets/eye-off.svg'
  :
- 'eye.svg'
+ 'assets/eye.svg'
  );
 
  input.setAttribute(

diff --git a/input-01/style.css b/input-01/style.css
@@ -1,18 +1,15 @@
-
-@import url(https://fonts.googleapis.com/css?family=Roboto);
-
-html {
- font-family: 'Roboto', sans-serif;
- font-size: 14px;
-}
-
 :root {
  --primary: #007FFF;
  --secondary: #6F7E8C;
  --hover: #F5F5F5;
  --text: #212121;
 }
 
+body {
+ font-family: 'Roboto', sans-serif;
+ font-size: 14px;
+}
+
 * {
  margin: 0;
  padding: 0;
@@ -21,9 +18,9 @@ html {
 
 .box {
  background-color: white;
- padding: 24px;
- padding-top: 12px;
- border-radius: 16px;
+ padding: 1.5rem;
+ padding-top: 0.75rem;
+ border-radius: 1rem;
 }
 
 .box h2 {
@@ -44,17 +41,17 @@ html {
 
 .input__wrapper {
  position: relative;
- padding: 15px 0 0;
+ padding: 1rem 0 0;
 }
 
 .input__field {
  border: 0;
  border-bottom: 2px solid var(--secondary);
  outline: 0;
- font-size: 16px;
+ font-size: 1rem;
  color: var(--text);
- padding: 4px 0px;
- padding-right: 32px;
+ padding: 0.25rem 0px;
+ padding-right: 2rem;
 
  background: transparent;
  transition: border-color 0.2s;
@@ -65,19 +62,19 @@ html {
 }
 
 .input__field:placeholder-shown ~ .input__label {
- font-size: 16px;
+ font-size: 1rem;
  cursor: text;
  color: var(--secondary);
- top: 20px;
+ top: 1.25rem;
 }
 
 label,
 .input__field:focus ~ .input__label {
  position: absolute;
  top: 0;
  display: block;
- font-size: 14px;
- left: -1px;
+ font-size: 0.875rem;
+ left: -0.0625rem;
  color: var(--secondary);
  transition: 0.3s;
 }
@@ -92,11 +89,11 @@ label,
 
 .input__icon {
  position: absolute;
- right: -14px;
- bottom: -11px;
- width: 26px;
- height: 26px;
- padding: 2px;
+ right: -0.875rem;
+ bottom: -0.6875rem;
+ width: 1.625rem;
+ height: 1.625rem;
+ padding: 0.125rem;
  transform: translate(-50%,-50%);
  transform-origin: center;
  cursor: pointer;

diff --git a/input-02/eye-off.svg → input-02/assets/eye-off.svg b/input-02/eye-off.svg → input-02/assets/eye-off.svg
diff --git a/input-02/eye.svg → input-02/assets/eye.svg b/input-02/eye.svg → input-02/assets/eye.svg
diff --git a/input-02/material-ui.html → input-02/index.html b/input-02/material-ui.html → input-02/index.html
@@ -6,6 +6,10 @@
  <meta charset="UTF-8">
  <title>Material UI Input</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <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=Roboto&display=swap" 
+ rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
@@ -32,7 +36,7 @@
  <img
  alt="Eye Icon"
  title="Eye Icon"
- src="eye.svg"
+ src="assets/eye.svg"
  class="input__icon"
  >
  </div>

diff --git a/input-02/script.js b/input-02/script.js
@@ -8,9 +8,9 @@ inputIcon.addEventListener("click", (e) => {
  inputIcon.setAttribute(
  'src', 
  input.getAttribute('type') === 'password' ?
- 'eye-off.svg'
+ 'assets/eye-off.svg'
  :
- 'eye.svg'
+ 'assets/eye.svg'
  );
 
  input.setAttribute(

diff --git a/input-02/style.css b/input-02/style.css
@@ -1,17 +1,18 @@
 
 @import url("https://fonts.googleapis.com/css?family=Roboto");
 
-html {
- font-family: 'Roboto', sans-serif;
- font-size: 16px;
-}
 
 :root {
  --primary: #007FFF;
  --secondary: #6F7E8C;
  --text: #212121;
 }
 
+body {
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+}
+
 * {
  margin: 0;
  padding: 0;
@@ -20,11 +21,11 @@ html {
 
 .box {
  background-color: white;
- padding: 24px;
+ padding: 1.5rem;
  max-width: fit-content;
  width: 100%;
- padding-top: 12px;
- border-radius: 16px;
+ padding-top: 0.75rem;
+ border-radius: 1rem;
 }
 
 .box h2 {
@@ -45,16 +46,16 @@ html {
 
 .input__wrapper {
  position: relative;
- padding: 15px 0 0;
+ padding: 1rem 0 0;
 }
 
 .input__field {
  border: 1px solid var(--secondary);
  font-size: 1rem;
- border-radius: 8px;
+ border-radius: 0.5rem;
  color: var(--text);
- padding: 8px;
- padding-right: 32px;
+ padding: 0.5rem;
+ padding-right: 2rem;
  background: transparent;
  transition: border-color 0.2s;
 }
@@ -67,19 +68,19 @@ html {
  font-size: 1rem;
  cursor: text;
  color: var(--secondary);
- top: 24px;
+ top: 1.5rem;
 }
 
 
 label,
 .input__field:focus ~ .input__label {
  position: absolute;
- top: 6px;
- padding: 0 4px;
+ top: 0.375rem;
+ padding: 0 0.25rem;
  background-color: white;
  display: block;
- font-size: 14px;
- left: 8px;
+ font-size: 0.875rem;
+ left: 0.5rem;
  color: var(--secondary);
  transition: 0.3s;
 }
@@ -95,10 +96,10 @@ label,
 
 .input__icon {
  position: absolute;
- right: -10px;
- bottom: -10px;
- width: 28px;
- height: 28px;
+ right: -0.625rem;
+ bottom: -0.625rem;
+ width: 1.75rem;
+ height: 1.75rem;
  transform: translate(-50%,-50%);
  transform-origin: center;
  cursor: pointer;

diff --git a/input-03/eye-off.svg → input-03/assets/eye-off.svg b/input-03/eye-off.svg → input-03/assets/eye-off.svg
diff --git a/input-03/eye.svg → input-03/assets/eye.svg b/input-03/eye.svg → input-03/assets/eye.svg
diff --git a/input-03/index.html b/input-03/index.html
@@ -32,7 +32,7 @@
  </label>
  <img 
  alt="Eye Icon" title="Eye Icon" 
- src="eye.svg" class="input__icon"
+ src="assets/eye.svg" class="input__icon"
  >
  </div>
  </div>

diff --git a/input-03/script.js b/input-03/script.js
@@ -8,9 +8,9 @@ inputIcon.addEventListener("click", (e) => {
  inputIcon.setAttribute(
  'src', 
  input.getAttribute('type') === 'password' ?
- 'eye-off.svg'
+ 'assets/eye-off.svg'
  :
- 'eye.svg'
+ 'assets/eye.svg'
  );
 
  input.setAttribute(

diff --git a/input-03/style.css b/input-03/style.css
@@ -16,20 +16,20 @@
 body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
- display: flex;
  background-color: var(--background);
+ display: flex;
  justify-content: center;
  align-items: center;
 }
 
 .box {
- background-color: var(
+ background: var(
  --box-background);
- padding: 24px;
+ padding: 1.5rem;
  max-width: fit-content;
  width: 100%;
- padding-top: 12px;
- border-radius: 16px;
+ padding-top: 0.75rem;
+ border-radius: 1rem;
 }
 
 .box h2 {
@@ -40,18 +40,18 @@ body {
 
 .input__wrapper {
  position: relative;
- padding: 15px 0 0;
+ padding: 1rem 0 0;
 }
 
 .input__field {
  outline: 1.5px solid var(
  --secondary);
  font-size: 1rem;
- border-radius: 8px;
+ border-radius: 0.5rem;
  color: var(--secondary);
- padding: 8px;
+ padding: 0.5rem;
  border: none;
- padding-right: 32px;
+ padding-right: 2rem;
  background: transparent;
  transition: all 0.2s;
 }
@@ -65,19 +65,19 @@ body {
  font-size: 1rem;
  cursor: text;
  color: var(--secondary);
- top: 24px;
+ top: 1.5rem;
 }
 
 label,
 .input__field:focus~.input__label {
  position: absolute;
- top: 6px;
- padding: 0 4px;
+ top: 0.375rem;
+ padding: 0 0.25rem;
  background-color: var(
  --box-background);
  display: block;
- font-size: 14px;
- left: 8px;
+ font-size: 0.875rem;
+ left: 0.5rem;
  color: var(--secondary);
  transition: 0.3s;
 }
@@ -92,10 +92,10 @@ label,
 
 .input__icon {
  position: absolute;
- right: -10px;
- bottom: -10px;
- width: 28px;
- height: 28px;
+ right: -0.625rem;
+ bottom: -0.625rem;
+ width: 1.75rem;
+ height: 1.75rem;
  transform: translate(-50%, -50%);
  transform-origin: center;
  cursor: pointer;

diff --git a/input-04/eye-off.svg → input-04/assets/eye-off.svg b/input-04/eye-off.svg → input-04/assets/eye-off.svg
diff --git a/input-04/eye.svg → input-04/assets/eye.svg b/input-04/eye.svg → input-04/assets/eye.svg
diff --git a/input-04/my-input.html b/input-04/my-input.html
@@ -19,7 +19,7 @@
  <label for="password" class="input__label">
  Password
  </label>
- <img alt="Eye Icon" title="Eye Icon" src="eye.svg" class="input__icon">
+ <img alt="Eye Icon" title="Eye Icon" src="assets/eye.svg" class="input__icon">
  </div>
  </form>
  <script src="script.js"></script>

diff --git a/input-04/script.js b/input-04/script.js
@@ -8,9 +8,9 @@ inputIcon.addEventListener("click", (e) => {
  inputIcon.setAttribute(
  'src', 
  input.getAttribute('type') === 'password' ?
- 'eye-off.svg'
+ 'assets/eye-off.svg'
  :
- 'eye.svg'
+ 'assets/eye.svg'
  );
 
  input.setAttribute(