From b3a71c27e4c01eb5e9859a5af8ef25eebda4f6de Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 12:04:45 -0700
Subject: [PATCH 01/10] add tailwind directives to css file

---
 src/assets/css/styles.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index 117dc1a..ba6a8ef 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 *,
 *::before,
 *::after {

From ec90e69f01c4ca3af995e0afd01bacb29e313af2 Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 12:13:57 -0700
Subject: [PATCH 02/10] add vscode dependencies to project

---
 .vscode/settings.json |  11 +
 package.json          |   2 +-
 public/styles.css     | 596 ++++++++++++++++++++++++++++++++++++++++++
 src/index.html        |   8 +-
 4 files changed, 615 insertions(+), 2 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 public/styles.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..22f5708
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "[markdown]": {
+    "editor.fontSize": 14,
+    "editor.lineHeight": 26,
+    "editor.wordWrap": "wordWrapColumn",
+    "editor.wordWrapColumn": 64,
+    "editor.lineNumbers": "on",
+    "editor.quickSuggestions": false,
+    "editor.minimap.enabled": false
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3a03800..26317c5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "[![made-with-javascript](https://img.shields.io/badge/Made%20with-JavaScript-1f425f.svg)](https://www.javascript.com) [![Maintenance](https://img.shields.io/badge/Maintained%3F-no-red.svg)](https://bitbucket.org/lbesson/ansi-colors)",
   "main": "tailwind.config.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build-css" : "tailwindcss build src/assets/css/styles.css -o public/styles.css "
   },
   "keywords": [],
   "author": "",
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..33399c9
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,596 @@
+/*
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  max-width: 100%;
+  font-family: 'inter', 'Karla', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  background-color: #1f2937;
+  color: #d5d4d8;
+}
+
+.wrapper {
+  min-width:auto;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  margin: auto;
+}
+
+hr {
+  background-color: #57625c;
+  color:#414954;
+  border-style: solid;
+  border-width: 1px;
+  margin-top: .5em;
+  margin-bottom: 1.5em;
+}
+
+#generate-passwords {
+  background-color: #50b879;
+  color: #ffffff;
+  border-radius: .3em;
+  border: none;
+  padding: .5em;
+  font-size: 1rem;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+#header-line-two {
+  color: #4ADF86;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  -moz-column-gap: 2em;
+       column-gap: 2em;
+}
+
+.password-field {
+  display: inline-block;
+  background-color: #273549;
+  color: #55f991;
+  border-radius: .25em;
+  text-align: center;
+  padding: .25em;
+  flex-grow: 1;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 8606560..b82a996 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF=8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>passwordGenerator</title>
-    <link href="assets/css/styles.css" rel='stylesheet' type='text/css'>
+    <link href="public/styles.css" rel='stylesheet' type='text/css'>
   </head>
   
   <div><!-- content wrapper -->
@@ -36,7 +36,13 @@ <h1>
     <main>
       <h2>Generate two unique passwords with one click</h2>
 
+<div>
+  <!-- cards go here-->
+</div>
 
+<div>
+  <div><span>child of div</span></div>
+</div>
 
       <div class="wrapper"> 
         <header>

From 369edafe41dc81ea7871ef39004815b800419a6e Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 12:41:16 -0700
Subject: [PATCH 03/10] change global font size

---
 {src => public}/index.html | 17 +++++++++--------
 public/styles.css          |  8 --------
 src/assets/css/styles.css  |  8 --------
 3 files changed, 9 insertions(+), 24 deletions(-)
 rename {src => public}/index.html (87%)

diff --git a/src/index.html b/public/index.html
similarity index 87%
rename from src/index.html
rename to public/index.html
index b82a996..2ff0b5b 100644
--- a/src/index.html
+++ b/public/index.html
@@ -4,14 +4,16 @@
     <meta charset="UTF=8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>passwordGenerator</title>
-    <link href="public/styles.css" rel='stylesheet' type='text/css'>
+    <link href="styles.css" rel='stylesheet' type='text/css'>
   </head>
   
+  <body class="text-base">
+
   <div><!-- content wrapper -->
     <div>
       <nav>
         <div>
-          <h1>
+          <h1 class="text-xl">
             <a href="/">Password Generator</a>
           </h1>
         </div>
@@ -57,11 +59,10 @@ <h1 id="header-line-one">Generate a
           <div id="password-two" class="password-field"> - </div>
         </div>
       </div>   
+    </main>
+  </div>
+</div>
 
-</main></div>
-
-    </div>
-
-    <script src="assets/js/scripts.js"></script>
-  </body>
+<script src="assets/js/scripts.js"></script>
+</body>
 </html>
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 33399c9..fae1d8a 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -534,14 +534,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  max-width: 100%;
-  font-family: 'inter', 'Karla', Tahoma, Geneva, Verdana, sans-serif;
-}
-
 body {
   background-color: #1f2937;
   color: #d5d4d8;
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index ba6a8ef..ebd1c71 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -2,13 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-    max-width: 100%;
-    font-family: 'inter', 'Karla', Tahoma, Geneva, Verdana, sans-serif;
-}
 
 body {
     background-color: #1f2937;
@@ -36,7 +29,6 @@ hr {
     border-radius: .3em;
     border: none;
     padding: .5em;
-    font-size: 1rem;
     margin-top: 1em;
     margin-bottom: 1em;
 }

From 065338504ec92baa5a305ecc9fabef41b3e5bc21 Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 13:44:06 -0700
Subject: [PATCH 04/10] change location of index.html

---
 public/index.html         | 101 ++++++++++++++++++--------------------
 public/styles.css         |  49 ++++++++++++++----
 src/assets/css/styles.css |   9 +---
 tailwind.config.js        |   4 +-
 4 files changed, 91 insertions(+), 72 deletions(-)

diff --git a/public/index.html b/public/index.html
index 2ff0b5b..756a6d2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-< lang="en">
   <head>
     <meta charset="UTF=8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,61 +6,59 @@
     <link href="styles.css" rel='stylesheet' type='text/css'>
   </head>
   
-  <body class="text-base">
+  <body class="text-base text-slate-300 ">
+    <div><!-- content wrapper -->
 
-  <div><!-- content wrapper -->
-    <div>
-      <nav>
-        <div>
-          <h1 class="text-xl">
-            <a href="/">Password Generator</a>
-          </h1>
-        </div>
-        <ul>
-          <li>
-            <a href="#">
-              <span>Home</span>
-            </a>
+      <div>
+        <nav>
+          <div>
+            <h1 class="text-xl text-green-500">
+              <a href="/">Password Generator</a>
+            </h1>
+          </div>
+          <ul>
+            <li>
+              <a href="#">
+                <span>Home</span>
+              </a>
+            </li>
+              <a href="#">
+                <span>about</span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span>contact</span>
+              </a>
           </li>
-            <a href="#">
-              <span>about</span>
-            </a>
-          </li>
-          <li>
-            <a href="#">
-              <span>contact</span>
-            </a>
-        </li>
-        </ul>
-      </nav>
-    </div><!-- END NAV -->
-    <main>
-      <h2>Generate two unique passwords with one click</h2>
-
-<div>
-  <!-- cards go here-->
-</div>
+          </ul>
+        </nav>
+      </div><!-- END NAV -->
 
-<div>
-  <div><span>child of div</span></div>
-</div>
-
-      <div class="wrapper"> 
-        <header>
-          <h1 id="header-line-one">Generate a
-          <br/> <strong id="header-line-two">Random Password</strong></h1>
-          <p>Never use an insecure password ever again</p>
-        </header>
-        <button id="generate-passwords">Generate passwords</button>
-        <hr>
-        <div class="flex">
-          <div id="password-one" class="password-field"> - </div>
-          <div id="password-two" class="password-field"> - </div>
+      <main>
+        <h2>Generate two unique passwords with one click</h2>
+        <div><!-- cards go here-->
+        </div>
+        <div>
+          <div><span>child of div</span></div>
         </div>
-      </div>   
-    </main>
-  </div>
-</div>
+        <div class="wrapper"> 
+          <header>
+            <h1 id="header-line-one">Generate a
+              <br/>
+              <strong id="header-line-two" class="text-green-400 ">Random Password</strong>
+            </h1>
+            <p>Never use an insecure password ever again</p>
+          </header>
+          <button id="generate-passwords" class="bg-green-500 text-zinc-50">Generate passwords</button>
+          <hr class=" text-zinc-50 ">
+          <div class="flex" class="text-green-500">
+            <div id="password-one" class="password-field"> - </div>
+            <div id="password-two" class="password-field"> - </div>
+          </div>
+        </div>   
+      </main>
+    </div>
 
 <script src="assets/js/scripts.js"></script>
 </body>
diff --git a/public/styles.css b/public/styles.css
index fae1d8a..9cc4a6f 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -534,9 +534,47 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.flex {
+  display: flex;
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+.text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
+.text-zinc-50 {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity));
+}
+
 body {
   background-color: #1f2937;
-  color: #d5d4d8;
 }
 
 .wrapper {
@@ -547,8 +585,6 @@ body {
 }
 
 hr {
-  background-color: #57625c;
-  color:#414954;
   border-style: solid;
   border-width: 1px;
   margin-top: .5em;
@@ -556,20 +592,13 @@ hr {
 }
 
 #generate-passwords {
-  background-color: #50b879;
-  color: #ffffff;
   border-radius: .3em;
   border: none;
   padding: .5em;
-  font-size: 1rem;
   margin-top: 1em;
   margin-bottom: 1em;
 }
 
-#header-line-two {
-  color: #4ADF86;
-}
-
 .flex {
   display: flex;
   justify-content: space-between;
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index ebd1c71..ef77801 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -5,7 +5,6 @@
 
 body {
     background-color: #1f2937;
-    color: #d5d4d8;
 }
 
 .wrapper {
@@ -15,8 +14,6 @@ body {
 }
 
 hr {
-    background-color: #57625c;
-    color:#414954;
     border-style: solid;
     border-width: 1px;
     margin-top: .5em;
@@ -24,8 +21,6 @@ hr {
 } 
 
 #generate-passwords { 
-    background-color: #50b879;
-    color: #ffffff;
     border-radius: .3em;
     border: none;
     padding: .5em;
@@ -34,9 +29,7 @@ hr {
 }
 
 
-#header-line-two {
-    color: #4ADF86;
-}
+
 
 .flex {
     display: flex;
diff --git a/tailwind.config.js b/tailwind.config.js
index d8b9f4e..4b6fa5e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './assets/js/scripts.js', 
-    './index.html'
+    './src/assets/js/scripts.js', 
+    './public/index.html'
   ],
 
   theme: {

From 12d6177101f598485abc36153bee4b9de7d22af5 Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 13:45:02 -0700
Subject: [PATCH 05/10] update script to reflect new location of src files

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 26317c5..8b08b2e 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "[![made-with-javascript](https://img.shields.io/badge/Made%20with-JavaScript-1f425f.svg)](https://www.javascript.com) [![Maintenance](https://img.shields.io/badge/Maintained%3F-no-red.svg)](https://bitbucket.org/lbesson/ansi-colors)",
   "main": "tailwind.config.js",
   "scripts": {
-    "build-css" : "tailwindcss build src/assets/css/styles.css -o public/styles.css "
+    "build-css" : "tailwindcss build -i src/assets/css/styles.css -o public/styles.css "
   },
   "keywords": [],
   "author": "",

From 5ea6d2c83cd3fe9b5d8ba606f8137c067789a009 Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 13:53:34 -0700
Subject: [PATCH 06/10] add hover functionality to password generation button

---
 public/index.html | 2 +-
 public/styles.css | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 756a6d2..fb149cc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -50,7 +50,7 @@ <h1 id="header-line-one">Generate a
             </h1>
             <p>Never use an insecure password ever again</p>
           </header>
-          <button id="generate-passwords" class="bg-green-500 text-zinc-50">Generate passwords</button>
+          <button id="generate-passwords" class="bg-green-500 text-zinc-50 font-semibold hover:text-fuchsia-300">Generate passwords</button>
           <hr class=" text-zinc-50 ">
           <div class="flex" class="text-green-500">
             <div id="password-one" class="password-field"> - </div>
diff --git a/public/styles.css b/public/styles.css
index 9cc4a6f..203e897 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -553,6 +553,10 @@ video {
   line-height: 1.75rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .text-green-400 {
   --tw-text-opacity: 1;
   color: rgb(74 222 128 / var(--tw-text-opacity));
@@ -614,4 +618,9 @@ hr {
   text-align: center;
   padding: .25em;
   flex-grow: 1;
+}
+
+.hover\:text-fuchsia-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(240 171 252 / var(--tw-text-opacity));
 }
\ No newline at end of file

From e526376f8d5ad104f2f880e224e0906a489c5edf Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 15:17:28 -0700
Subject: [PATCH 07/10] update #what i learned

---
 readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.md b/readme.md
index 45674c2..c70a211 100644
--- a/readme.md
+++ b/readme.md
@@ -20,7 +20,7 @@ This is a learning repository where I can test and use new technologies before m
 
 ## What I learned
 
-TBD
+Tailwind is a great tool. Most of the colors I used in my passwordGenerator project were able to be ported over with no issue. The one color I was unable to replicate did not create any problems as I had thought it would. Tailwind allows you to add in arbritrary background colors with '<bg-[#1f2937]'
 
 ### V2 What I would do in the futute
 

From e2baf7eeb5e4498d6d4fc7ff982a202d58ede06d Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 15:19:19 -0700
Subject: [PATCH 08/10] update styling for generated password area

---
 public/index.html         | 10 +++---
 public/styles.css         | 66 ++++++++++++++++++++++++---------------
 src/assets/css/styles.css | 22 -------------
 3 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/public/index.html b/public/index.html
index fb149cc..275abfa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
     <link href="styles.css" rel='stylesheet' type='text/css'>
   </head>
   
-  <body class="text-base text-slate-300 ">
+  <body class="text-base text-slate-300 bg-[#1f2937]">
     <div><!-- content wrapper -->
 
       <div>
@@ -50,11 +50,11 @@ <h1 id="header-line-one">Generate a
             </h1>
             <p>Never use an insecure password ever again</p>
           </header>
-          <button id="generate-passwords" class="bg-green-500 text-zinc-50 font-semibold hover:text-fuchsia-300">Generate passwords</button>
+          <button id="generate-passwords" class="bg-green-500 text-zinc-50 font-semibold hover:bg-green-600">Generate passwords</button>
           <hr class=" text-zinc-50 ">
-          <div class="flex" class="text-green-500">
-            <div id="password-one" class="password-field"> - </div>
-            <div id="password-two" class="password-field"> - </div>
+          <div class="flex flex-row space-x-4 place-content-center text-green-500 font-semibold">
+            <div id="password-one" class="w-full bg-slate-50/75 rounded-md text-center"> - </div>
+            <div id="password-two" class="w-full bg-slate-50/75 rounded-md text-center"> - </div>
           </div>
         </div>   
       </main>
diff --git a/public/styles.css b/public/styles.css
index 203e897..b68dd4f 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -538,11 +538,46 @@ video {
   display: flex;
 }
 
+.w-full {
+  width: 100%;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.place-content-center {
+  place-content: center;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.bg-\[\#1f2937\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
+.bg-slate-50\/75 {
+  background-color: rgb(248 250 252 / 0.75);
+}
+
+.text-center {
+  text-align: center;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -553,8 +588,8 @@ video {
   line-height: 1.75rem;
 }
 
-.font-bold {
-  font-weight: 700;
+.font-semibold {
+  font-weight: 600;
 }
 
 .text-green-400 {
@@ -577,10 +612,6 @@ video {
   color: rgb(250 250 250 / var(--tw-text-opacity));
 }
 
-body {
-  background-color: #1f2937;
-}
-
 .wrapper {
   min-width:auto;
   max-width: -moz-fit-content;
@@ -603,24 +634,7 @@ hr {
   margin-bottom: 1em;
 }
 
-.flex {
-  display: flex;
-  justify-content: space-between;
-  -moz-column-gap: 2em;
-       column-gap: 2em;
-}
-
-.password-field {
-  display: inline-block;
-  background-color: #273549;
-  color: #55f991;
-  border-radius: .25em;
-  text-align: center;
-  padding: .25em;
-  flex-grow: 1;
+.hover\:bg-green-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
-
-.hover\:text-fuchsia-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(240 171 252 / var(--tw-text-opacity));
-}
\ No newline at end of file
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index ef77801..2c3e55a 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -3,9 +3,6 @@
 @tailwind utilities;
 
 
-body {
-    background-color: #1f2937;
-}
 
 .wrapper {
     min-width:auto;
@@ -27,22 +24,3 @@ hr {
     margin-top: 1em;
     margin-bottom: 1em;
 }
-
-
-
-
-.flex {
-    display: flex;
-    justify-content: space-between;
-    column-gap: 2em;
-}
-
-.password-field {
-    display: inline-block;
-    background-color: #273549;
-    color: #55f991;
-    border-radius: .25em;
-    text-align: center;
-    padding: .25em;
-    flex-grow: 1;
-}
\ No newline at end of file

From f7eb57f7835357e6f671521086f0031295507877 Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Mon, 24 Jul 2023 19:39:50 -0700
Subject: [PATCH 09/10] move styles from styles.css to index.html

---
 src/assets/css/styles.css | 25 +------------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index 2c3e55a..bd6213e 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -1,26 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-
-
-.wrapper {
-    min-width:auto;
-    max-width: fit-content;
-    margin: auto;
-}
-
-hr {
-    border-style: solid;
-    border-width: 1px;
-    margin-top: .5em;
-    margin-bottom: 1.5em;
-} 
-
-#generate-passwords { 
-    border-radius: .3em;
-    border: none;
-    padding: .5em;
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
+@tailwind utilities;
\ No newline at end of file

From 0b11744959013874a9d5a4711924e1661ab1bd2a Mon Sep 17 00:00:00 2001
From: Zoe Sullivan <zoetsullivan@gmail.com>
Date: Sun, 6 Aug 2023 16:36:55 -0700
Subject: [PATCH 10/10] update

---
 package.json              |  4 +--
 public/index.html         | 16 +++++----
 public/styles.css         | 69 +++++++++++++++++++++++++--------------
 src/assets/css/styles.css |  2 +-
 4 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 8b08b2e..430b924 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,8 @@
   "scripts": {
     "build-css" : "tailwindcss build -i src/assets/css/styles.css -o public/styles.css "
   },
-  "keywords": [],
-  "author": "",
+  "keywords": [ ],
+  "author": "zothsu",
   "license": "ISC",
   "devDependencies": {
     "prettier": "^3.0.0",
diff --git a/public/index.html b/public/index.html
index 275abfa..e7fd40c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -42,17 +42,21 @@ <h2>Generate two unique passwords with one click</h2>
         <div>
           <div><span>child of div</span></div>
         </div>
-        <div class="wrapper"> 
+        <div class=" max-w-fit m-auto "> 
           <header>
-            <h1 id="header-line-one">Generate a
+            <h1 id="header-line-one" class="text-xl">Generate a
               <br/>
               <strong id="header-line-two" class="text-green-400 ">Random Password</strong>
             </h1>
-            <p>Never use an insecure password ever again</p>
+            <p class="text-center sm:text-left ">Never use an insecure password ever again</p>
           </header>
-          <button id="generate-passwords" class="bg-green-500 text-zinc-50 font-semibold hover:bg-green-600">Generate passwords</button>
-          <hr class=" text-zinc-50 ">
-          <div class="flex flex-row space-x-4 place-content-center text-green-500 font-semibold">
+          <div class="flex">
+            <button 
+            id="generate-passwords" 
+            class="bg-green-500 text-zinc-50 font-semibold hover:bg-green-600 rounded-lg text-center m-2 p-2">Generate passwords</button>
+          </div>
+          <hr class=" text-zinc-50 mt-0.5 mb-1.5">
+          <div class="flex flex-row space-x-4 justify-between text-green-500 font-semibold">
             <div id="password-one" class="w-full bg-slate-50/75 rounded-md text-center"> - </div>
             <div id="password-two" class="w-full bg-slate-50/75 rounded-md text-center"> - </div>
           </div>
diff --git a/public/styles.css b/public/styles.css
index b68dd4f..b8c0488 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -534,6 +534,30 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
+
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .flex {
   display: flex;
 }
@@ -542,12 +566,17 @@ video {
   width: 100%;
 }
 
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
 .flex-row {
   flex-direction: row;
 }
 
-.place-content-center {
-  place-content: center;
+.justify-between {
+  justify-content: space-between;
 }
 
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
@@ -556,6 +585,10 @@ video {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -574,6 +607,10 @@ video {
   background-color: rgb(248 250 252 / 0.75);
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -612,29 +649,13 @@ video {
   color: rgb(250 250 250 / var(--tw-text-opacity));
 }
 
-.wrapper {
-  min-width:auto;
-  max-width: -moz-fit-content;
-  max-width: fit-content;
-  margin: auto;
-}
-
-hr {
-  border-style: solid;
-  border-width: 1px;
-  margin-top: .5em;
-  margin-bottom: 1.5em;
-}
-
-#generate-passwords {
-  border-radius: .3em;
-  border: none;
-  padding: .5em;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
 .hover\:bg-green-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
+
+@media (min-width: 640px) {
+  .sm\:text-left {
+    text-align: left;
+  }
+}
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index bd6213e..b5c61c9 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;