lighthouse-labs · originallykevin · Sep 12, 2022 · Sep 12, 2022 · Sep 12, 2022 · Sep 12, 2022
diff --git a/README.md b/README.md
@@ -2,7 +2,30 @@
 
 Tweeter is a simple, single-page Twitter clone.
 
-This repository is the starter code for the project: Students will fork and clone this repository, then build upon it to practice their HTML, CSS, JS, jQuery and AJAX front-end skills, and their Node, Express back-end skills.
+This app was created to practice with HTML, CSS, JS, jQuery, AJAX, and front-end development skills. As well as Node and Express back-end skills.
+
+## Final Product
+
+### Sending a Tweet!
+
+!["Sending a Tweet"](https://github.com/originallykevin/tweeter/blob/master/docs/sending-tweet.gif)
+
+### Browser View
+
+!["Browser View"](https://github.com/originallykevin/tweeter/blob/master/docs/browser-view.gif)
+
+### Tablet View
+
+!["Tablet View"](https://github.com/originallykevin/tweeter/blob/master/docs/tablet-view.gif)
+
+### Page Scrolling
+
+!["Page Scrolling"](https://github.com/originallykevin/tweeter/blob/master/docs/page-scrolling.gif)
+
+### Word Counter
+
+!["Word Counter"](https://github.com/originallykevin/tweeter/blob/master/docs/error-message.gif)
+
 
 ## Getting Started
 

diff --git a/docs/browser-view.gif b/docs/browser-view.gif
diff --git a/docs/error-message.gif b/docs/error-message.gif
diff --git a/docs/page-scrolling.gif b/docs/page-scrolling.gif
diff --git a/docs/sending-tweet.gif b/docs/sending-tweet.gif
diff --git a/docs/tablet-view.gif b/docs/tablet-view.gif
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/images/Image.png b/public/images/Image.png
diff --git a/public/index.html b/public/index.html
@@ -1,29 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <!-- Meta Information -->
-    <title>Tweeter - Home Page</title>
 
-    <!-- External CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" type="text/css" />
+<head>
+  <!-- Meta Information -->
+  <title>Tweeter - Home Page</title>
 
-    <!-- App CSS -->
-    <link rel="stylesheet" href="/styles/layout.css" type="text/css" />
+  <!-- Fonts -->
+  <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=Bungee&family=Source+Sans+Pro:ital,wght@0,300;0,600;1,300;1,600&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+    integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-    <!-- External JS -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <!-- External CSS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    type="text/css" />
 
-    <!-- App JS -->
-    <script type="text/javascript" src="/scripts/client.js"></script>
-  </head>
+  <!-- App CSS -->
+  <link rel="stylesheet" href="/styles/layout.css" type="text/css" />
+  <link rel="stylesheet" href="/styles/nav.css" type="text/css" />
+  <link rel="stylesheet" href="/styles/header.css" type="text/css" />
+  <link rel="stylesheet" href="/styles/new-tweet.css" type="text/css" />
 
-  <body>
-    <!-- Top nav bar (fixed) -->
-    <nav>
-      <span>tweeter</span>
-    </nav>
+  <!-- External JS -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
-    <!-- Page-specific (main) content here -->
-    <main class="container"></main>
-  </body>
-</html>
+  <!-- External Library -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"
+    integrity="sha512-SVDh1zH5N9ChofSlNAK43lcNS7lWze6DTVx1JCXH1Tmno+0/1jMpdbR8YDgDUfcUrPp1xyE53G42GFrcM0CMVg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <!-- App JS -->
+  <script type="text/javascript" src="/scripts/client.js"></script>
+  <script type="text/javascript" src="/scripts/composer-char-counter.js"></script>
+  <script type="text/javascript" src="/scripts/composer.js"></script>
+
+  <!-- Viewport -->
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
+
+</head>
+
+<body>
+  <!-- Top nav bar (fixed) -->
+  <nav>
+    <span>tweeter</span>
+    <div class="nav-message">
+      <a><b>Write</b> a new tweet</a>
+      <div id="scroll-nav">
+        <i class="fa-solid fa-angles-down fa-sm"></i>
+      </div>
+    </div>
+  </nav>
+  <div>
+    <header class="profile">
+      <div class="avatar">
+        <img src="/images/Image.png">
+      </div>
+      <!-- <br> -->
+      <div class="name">
+        <h2>subuwu</h2>
+      </div>
+    </header>
+  </div>
+
+  <!-- Page-specific (main) content here -->
+  <main class="container">
+    <!-- Displaying Validation Errors With jQuery -->
+    <div id="error"></div>
+
+    <section class="new-tweet">
+      <form id="new-tweet">
+        <div class="tweet-form">
+          <label for="tweet-text"><b>What are you humming about?</b></label>
+          <textarea class="input" name="text" id="tweet-text"></textarea>
+        </div>
+        <div class="tweet-bar">
+          <button class="button" type="submit">Tweet</button>
+          <output class="counter" name="counter" for="tweet-text">140</output>
+        </div>
+      </form>
+    </section>
+    <section id="tweets-container">
+    </section>
+
+    <!-- new button for the bottom of page -->
+    <button id="scroll-top">
+      <i class="fa-solid fa-angles-up"></i>
+    </button>
+  </main>
+
+</body>
+
+</html>