Adds a simple layout

2 files changed, 24 insertions, 8 deletions

diff --git a/README.md b/README.md
index 9625e27..c4ff9ec 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,15 @@
+# Genpass
+
+Just a simple page for generating password.
+
+## Why reactjs or cljs
+
+For the the size of the project it would not need any type of js script library, vanilla javascript would suffice.
+But I build this also to learn a little bit more more cljs and get to know a bit more how it works and how difficult it is to be deployed.
+Also this page does not have any sort of ad/tracker, and the footprint for the lib plus cljs is quite small.
+With help github pages it will run faster the most sites out there. 
+ 
+
 
 ### Development mode
 To start the Figwheel compiler, navigate to the project folder and run the following command in the terminal:
diff --git a/src/genpass/core.cljs b/src/genpass/core.cljs
index e6b33ca..c65714f 100644
--- a/src/genpass/core.cljs
+++ b/src/genpass/core.cljs
@@ -1,15 +1,19 @@
 (ns genpass.core
-    (:require
-      [reagent.core :as r]))
+  (:require
+    [reagent.core :as r]
+    [genpass.gen :refer [genpwd]]))
 
-;; -------------------------
-;; Views
+(def password (r/atom (genpwd)))
 
 (defn home-page []
-  [:div [:h2 "Welcome to Reagent"]])
-
-;; -------------------------
-;; Initialize app
+  [:div.columns>div.column
+   [:div.field>div.control>input.input.is-primary
+    {:type  "text"
+     :value @password}]
+   [:div.field>div.control>input.button.is-primary
+    {:value    "Generate"
+     :type "button"
+     :on-click #(reset! password (genpwd))}]])
 
 (defn mount-root []
   (r/render [home-page] (.getElementById js/document "app")))