Starter code for forms demo in HTML

mikeckennedy · mikeckennedy · commit 77282ae6878e · 2019-03-17T10:32:35.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -167,3 +167,4 @@ days/050-responder/.idea/encodings.xml
 days/097-100-docker/.idea/encodings.xml
 days/097-100-docker/.idea/webResources.xml
 yahoo_clone.iml
+signup.iml
diff --git a/days/005-008-html5/demos/signup/.idea/encodings.xml b/days/005-008-html5/demos/signup/.idea/encodings.xml
diff --git a/days/005-008-html5/demos/signup/extras/form.css b/days/005-008-html5/demos/signup/extras/form.css
@@ -0,0 +1,55 @@
+
+form input, form select {
+
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+}
+
+form input::placeholder {
+    color: #6c757d;
+    opacity: 1;
+}
+
+button {
+    display: inline-block;
+    font-weight: 400;
+    color: #212529;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+
+button {
+
+    color: #fff;
+    background-color: #28a745;
+    border-color: #28a745;
+
+}
diff --git a/days/005-008-html5/demos/signup/extras/form_hook.js b/days/005-008-html5/demos/signup/extras/form_hook.js
@@ -0,0 +1,19 @@
+$(document).ready(function () {
+
+    $("form").submit(function (e) {
+        e.preventDefault()
+
+        const $inputs = $('form :input');
+
+        let values = {}
+        $inputs.each(function () {
+            if (this.name) {
+                values[this.name] = $(this).val();
+            }
+        })
+
+        alert(JSON.stringify(values, null, 2))
+
+        return false
+    })
+})
diff --git a/days/005-008-html5/demos/signup/extras/site.css b/days/005-008-html5/demos/signup/extras/site.css
@@ -0,0 +1,32 @@
+
+form {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 350px;
+    background-color: white;
+    padding: 20px;
+    padding-right: 30px;
+    border-radius: 10px;
+}
+
+form > * {
+    margin: 10px;
+}
+
+form > div {
+    text-align: right;
+    margin-right: -10px;
+}
+
+body {
+    background-color: #84cbff;
+}
+
+h1 {
+    color: white;
+    text-align: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    font-size: 64px;
+    font-weight: lighter;
+}
diff --git a/days/005-008-html5/demos/signup/index.html b/days/005-008-html5/demos/signup/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sign up for FoxRem</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="extras/form.css">
+    <link rel="stylesheet" href="extras/site.css">
+
+</head>
+<body>
+
+<!-- sign up form here ... -->
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script src="extras/form_hook.js"></script>
+</body>
+</html>
