New features and get-diary-word-count-script

src/App.module.css

@@ -3,11 +3,6 @@
   margin: 2rem auto;
   padding: 0 1rem;
 
-  /* display: grid; */
-  /* grid-template-columns: 256px 1fr; */
-  /* gap: 2rem; */
-  /* align-items: flex-start; */
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,9 +42,77 @@
   color: var(--gray-400);
   cursor: pointer;
   line-height: 0;
-  border-radius: 2px;
+  border-radius: 8px;
+  transition: color 0.1s;
 }
 
 .homeButton:hover {
   color: var(--ice-cold);
 }
+
+.optionInfo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.form button + button {
+  margin-left: 1rem;
+}
+
+.form button {
+  padding: 0.65rem;
+  border-radius: 8px;
+  width: 3rem;
+  height: 3rem;
+  border: solid 1px;
+  background-color: var(--gray-600);
+  color: var(--white);
+  margin-left: 1rem;
+
+  transition: color 0.1s;
+  transition: background-color 0.1s;
+}
+
+.form button:disabled {
+  background-color: var(--gray-400);
+  color: var(--black);
+  border: none;
+  border-color: --var(--gray-400);
+}
+
+.form button:enabled:hover {
+  background: var(--green-300);
+  color: var(--white);
+  cursor: pointer;
+}
+
+.form input {
+  font-size: 1.5rem;
+  width: 24vw;
+  padding: 0.75rem;
+  border-radius: 8px;
+  border: none;
+}
+
+.result {
+  flex-direction: row;
+}
+
+.result p {
+  display: inline;
+  font-size: 2rem;
+}
+
+.result .wordCount {
+
+}