Skip to content

Commit

Permalink
[CLJS] tutorial-06
Browse files Browse the repository at this point in the history
  • Loading branch information
@frozar
frozar committed Sep 27, 2019
1 parent a9b6b00 commit 98e8f79
Show file tree
Hide file tree
Showing 8 changed files with 331 additions and 0 deletions.
5 changes: 5 additions & 0 deletions cljs/modern-cljs/tutorial-06/boot.properties
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#http://boot-clj.com
#Tue Sep 24 14:00:00 CEST 2019
BOOT_CLOJURE_NAME=org.clojure/clojure
BOOT_CLOJURE_VERSION=1.8.0
BOOT_VERSION=2.8.3
33 changes: 33 additions & 0 deletions cljs/modern-cljs/tutorial-06/build.boot
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
(set-env!
:source-paths #{"src/cljs"}
:resource-paths #{"html"}

:dependencies '[[org.clojure/clojure "1.8.0"] ;; add CLJ
[org.clojure/clojurescript "1.10.520"] ;; add CLJS
[adzerk/boot-cljs "2.1.5"]
[pandeiro/boot-http "0.8.3"] ;; add http dependency
[adzerk/boot-reload "0.6.0"] ;; add boot-reload
[adzerk/boot-cljs-repl "0.4.0"]
;; Dependancies for boot-cljs-repl
[cider/piggieback "0.3.9"]
[weasel "0.7.0"]
[nrepl "0.4.5"]
[org.clojars.magomimmo/domina "2.0.0-SNAPSHOT"]
])

(require '[adzerk.boot-cljs :refer [cljs]]
'[pandeiro.boot-http :refer [serve]] ;; make serve task visible
'[adzerk.boot-reload :refer [reload]] ;; make reload visible
'[adzerk.boot-cljs-repl :refer [cljs-repl start-repl]]) ;; make cljs-repl visible

;; define dev task as composition of subtasks
(deftask dev
"Launch Immediate Feedback Development Environment"
[]
(comp
(serve :dir "target")
(watch)
(reload)
(cljs-repl) ;; before cljs task
(cljs)
(target :dir #{"target"})))
10 changes: 10 additions & 0 deletions cljs/modern-cljs/tutorial-06/cmd.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
terminal 1:
boot dev

terminal 2:
boot repl -c
boot.user=> (start-repl)
cljs.user=> (require '[domina.core :refer [by-id value set-value!]])
cljs.user=> (js/alert "Hello, ClojureScript")
cljs.user=> :cljs/quit
boot.user=> (quit)
148 changes: 148 additions & 0 deletions cljs/modern-cljs/tutorial-06/html/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
/* From: http://www.assemblesoft.com/examples/form/simpleform.html */
* {margin:0; padding:0;}

html {
font: 90%/1.3 arial,sans-serif;
padding:1em;
background:#B9C2CC;
}
form {
background:#fff;
padding:1em;
border:1px solid #eee;
}

fieldset div {
margin:0.3em 0;
clear:both;
}

form {
margin:1em;
width:15em;
}

label {
float:none;
width:12em;
display:block;
clear:both;
}

legend {
color:#0b77b7;
font-size:1.4em;
}
legend span {
width:10em;
text-align:right;
}
input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 1em arial, sans-serif;
display:block;
float:left;
}
input:hover, input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
}
fieldset {
border:1px solid #ddd;
padding:0 0.5em 0.5em;
}
.date input {
background-image:url(../gfx/calendar-small.gif);
background-repeat:no-repeat;
background-position:100% 50%;
}

.date fieldset label {
float:none;
display:block;
text-align:left;
width:auto;
}
.date fieldset div {
float:left;
clear:none;
margin-right:0.2em;
}
.radio, .date {
position:relative;
}
.radio fieldset, .date fieldset {
border:none;
width:auto;
padding:1px 0 0 11em;
}
.radio legend, .date legend {
font-size:1em;
color:#000;
}
.radio legend span, .date legend span {
position:absolute;
left:0;
top:0.3em;
width:10em;
display:block;
}
.radio label, .radio input {
vertical-align:middle;
display:inline;
float:none;
width:auto;
background:none;
border:none;
}
.radio div {
float:left;
white-space:nowrap;
clear:none;
}

.email {
width:14em;
}

input.default {
color:#bbb;
}

#submit {
margin:1em;
width:69px;
height:26px;
overflow:hidden;
border:0;
display:block;
cursor:pointer !important;
}
#submit:hover {
background-position:0 -26px;
}

.error {
color: #FF1400;
}
/*
:invalid {
color:red;
}
*/
/*
input[type=checkbox], input[type=radio] { visibility: hidden; width:0; height:0; padding:0; margin:0; }
input[type=checkbox] + label, input[type=radio] + label { padding-left:18px; }
input[type=checkbox] + label{ background: url(../gfx/check_radio.png) 0 0 no-repeat; }
input[type=checkbox]:focus + label{ background-position: 0 -16px; }
input[type=checkbox] + label:hover{ background-position: 0 -32px; }
input[type=checkbox]:checked + label{ background-position: 0 -48px; }
input[type=radio] + label{ background: url(../gfx/check_radio.png) 0 -64px no-repeat; }
input[type=radio]:focus + label{ background-position: 0 -80px; }
input[type=radio] + label:hover{ background-position: 0 -96px; }
input[type=radio]:checked + label{ background-position: 0 -112px; }
*/
24 changes: 24 additions & 0 deletions cljs/modern-cljs/tutorial-06/html/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Script 2.2 - login.html -->
<form action="login.php" method="post" id="loginForm" novalidate>
<fieldset>
<legend>Login</legend>
<div><label for="email">Email Address</label><input type="email" name="email" id="email" required></div>
<div><label for="password">Password</label><input type="password" name="password" id="password" required></div>
<div><label for="submit"></label><input type="submit" value="Login &rarr;" id="submit"></div>
</fieldset>
</form>
<script src="main.js"></script>
<script>modern_cljs.login.init()</script>
</body>
</html>
64 changes: 64 additions & 0 deletions cljs/modern-cljs/tutorial-06/html/shopping.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shopping Calculator</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- shopping.html -->
<form action="" method="post" id="shoppingForm" novalidate>
<legend> Shopping Calculator</legend>
<fieldset>
<div>
<label for="quantity">Quantity</label>
<input type="number"
name="quantity"
id="quantity"
value="1"
min="1" required>
</div>
<div>
<label for="price">Price Per Unit</label>
<input type="text"
name="price"
id="price"
value="1.00"
required>
</div>
<div>
<label for="tax">Tax Rate (%)</label>
<input type="text"
name="tax"
id="tax"
value="0.0"
required>
</div>
<div>
<label for="discount">Discount</label>
<input type="text"
name="discount"
id="discount"
value="0.00" required>
</div>
<div>
<label for="total">Total</label>
<input type="text"
name="total"
id="total"
value="0.00">
</div>
<div>
<input type="submit"
value="Calculate"
id="submit">
</div>
</fieldset>
</form>
<script src="main.js"></script>
<script>modern_cljs.shopping.init()</script>
</body>
</html>
26 changes: 26 additions & 0 deletions cljs/modern-cljs/tutorial-06/src/cljs/modern_cljs/login.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
(ns modern-cljs.login
(:require [domina.core :refer [by-id value set-value!]]))

;; define the function to be attached to form submission event
(defn validate-form []
;; get email and password element from their ids in the HTML form
(if (and (> (count (value (by-id "email"))) 0)
(> (count (value (by-id "password"))) 0))
true
(do (js/alert "Please, complete the form!")
false)))

;; define the function to attach validate-form to onsubmit event of
;; the form
(defn ^:export init []
;; verify that js/document exists and that it has a getElementById
;; property
(if (and js/document
(.-getElementById js/document))
;; get loginForm by element id and set its onsubmit property to
;; our validate-form function
(let [login-form (.getElementById js/document "loginForm")]
(set! (.-onsubmit login-form) validate-form))))

;; ;; initialize the HTML page in unobtrusive way
;; (set! (.-onload js/window) init)
21 changes: 21 additions & 0 deletions cljs/modern-cljs/tutorial-06/src/cljs/modern_cljs/shopping.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
(ns modern-cljs.shopping
(:require [domina.core :refer [by-id value set-value!]]))

(defn calculate []
(let [quantity (value (by-id "quantity"))
price (value (by-id "price"))
tax (value (by-id "tax"))
discount (value (by-id "discount"))]
(set-value! (by-id "total") (-> (* quantity price)
(* (+ 1 (/ tax 100)))
(- discount)
(.toFixed 2)))
false))

(defn ^:export init []
(if (and js/document
(.-getElementById js/document))
(let [the-form (by-id "shoppingForm")]
(set! (.-onsubmit the-form) calculate))))

;; (set! (.-onload js/window) init)

0 comments on commit 98e8f79

Please sign in to comment.