Add footer and clean up, looking good

src/App.css

@@ -189,4 +189,21 @@ body {
     cursor: pointer;
     background: none;
     font-size: 1rem;
+}
+
+footer {
+    position: fixed;
+    bottom: 5px;
+    left: 20%;
+    right: 20%;
+    text-align: center;
+}
+
+.footerText {
+    font-family: monospace;
+}
+
+footer a {
+    text-decoration: none;
+    color: #9a5a89;
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Todo } from './TodoItem';
 import { TodoList } from './TodoList';
 import { sampleTodos } from './data';
@@ -43,6 +43,10 @@ function App() {
     return (
         <div className="app" data-width={dimensions.width}>
             <TodoList todos={todos} name={todoName} onNameChange={setTodoName} setTodos={setTodos} />
+            <footer>
+                <div className='footerText'>🌱 Inspired by the <a href='https://github.com/ngthing/toododo' target='blank'>Internet</a>.
+                    Made by <a href='https://justthinguyen.com' target='blank'>Thi Nguyen</a>. Thanks for stopping by and have a beautiful day! 🌱</div>
+            </footer>
         </div >
     );
 }

src/TodoItem.tsx

@@ -32,7 +32,7 @@ const todoTextareaHeight = (content: string): number => {
     // it works! muahaha - why these formula and numbers - no comment. 
     // but 25px is the min width i want to set.
     const x = 25 + Math.floor(content.length * 12 / window.innerWidth) * 25;
-    console.log([window.innerWidth, content.length, x])
+    // console.log([window.innerWidth, content.length, x])
     return x;
 }