added ui changes

- Added a delete button next to each idea instead of deleting them by
  name
- Changed Post to Think
- Added a text when there are no ideas
- Added more CSS for the create
- Added checks for denying empty fields

1 files changed, 32 insertions, 9 deletions

diff --git a/ideas.html b/ideas.html
index 89cb4bc..3b110c3 100644
--- a/ideas.html
+++ b/ideas.html
@@ -6,6 +6,9 @@
     <title>Ideas</title>
     <style>
 
+body {
+    margin-left: 1em;
+}
 .idea {
     border: solid 2px black; 
     border-radius: 5px;
@@ -41,6 +44,23 @@
 .error {
     color: red;
 }
+textarea[name="text"] {
+    border: solid 2px black;
+    border-radius: 5px;
+    margin-top: .3em;
+    margin-bottom: .3em;
+    resize: none;
+}
+h3 {
+    margin-bottom: 0;
+}
+input[type="text"]{
+    border-radius: 3px;
+    border: solid 1px black;
+}
+input[name="author"] {
+    margin-bottom: .3em;
+}
 
     </style>
 </head>
@@ -48,16 +68,13 @@
     {{ with .Error }}
     <p class="error">{{.}}</p>
     {{ end}}
+    <h3>Add an idea:</h3>
     <form action="/create/" method="post">
-        <input name="title"  type="text" placeholder="Title"></br>
-        <input name="text"   type="text" placeholder="Idea description..."></br>
-        <input name="author" type="text" placeholder="Your Name"></br>
-        <input type="submit" value="Post">
-    </form>
-    <hr>
-    <form action="/delete/" method="post">
-        <input type="text" placeholder="Title" name="title"></br>
-        <input type="submit" value="Delete">
+        <input name="title" type="text" placeholder="Title" required></br>
+        <textarea name="text" cols=50 rows=4 placeholder="Write what is in your lightbulb here." required></textarea>
+        </br>
+        <input name="author" type="text" placeholder="Your Name" required></br>
+        <input type="submit" value="Think">
     </form>
     <hr>
     <ul>
@@ -66,7 +83,13 @@
             <h2 class="title">{{.Title}}</h2>
             <p class="text">{{.Text}}</p>
             <p class="creation">by <span class="author">{{.Author}}</span> on <span class="date">{{.CreatedAt}}</span></p>
+            <form action="/delete/" method="post">
+                <input type="hidden" name="title" value="{{.Title}}">
+                <input type="submit" value="delete">
+            </form>
         </div>
+    {{ else }}
+    <p><i>No ideas here... Be the first one to think!</i></p>
     {{ end }}
     </ul>
     <!--template-->