all the extras for starting project

udacity · Jul 10, 2019 · ed2b1cc · ed2b1cc
1 parent a316651
commit ed2b1cc
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
- "start": "node src/server.js"
+ "start": "node src/server/index.js"
  },
  "keywords": [],
  "author": "",

diff --git a/src/client/js/formHandler.js b/src/client/js/formHandler.js
@@ -0,0 +1,14 @@
+function handleSubmit(event) {
+ event.preventDefault()
+
+ // check what text was put into the form field
+ let formText = document.getElementById('name').value
+ checkForName(formText)
+
+ console.log("::: Form Submitted :::")
+ fetch('http:https://localhost:8080/test')
+ .then(res => res.json())
+ .then(function(res) {
+ document.getElementById('results').innerHTML = res.message
+ })
+}
diff --git a/src/client/js/interaction.js b/src/client/js/interaction.js
diff --git a/src/client/js/nameChecker.js b/src/client/js/nameChecker.js
@@ -0,0 +1,14 @@
+function checkForName(inputText) {
+ console.log("::: Running checkForName :::", inputText);
+ let names = [
+ "Picard",
+ "Janeway",
+ "Kirk",
+ "Archer",
+ "Georgiou"
+ ]
+
+ if(names.includes(inputText)) {
+ alert("Welcome, Captain!")
+ }
+}
diff --git a/src/client/styles/base.css b/src/client/styles/base.css
@@ -0,0 +1,14 @@
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+main {
+ flex: 2;
+}
+
+section {
+ max-width: 800px;
+ margin: 50px auto;
+}
diff --git a/src/client/styles/footer.css b/src/client/styles/footer.css
diff --git a/src/client/styles/form.css b/src/client/styles/form.css
@@ -0,0 +1,12 @@
+form {
+ border: 1px solid #545454;
+ border-radius: 3px;
+ padding: 40px;
+}
+
+input {
+ padding: 5px 20px;
+ width: 100%;
+ line-height: 16px;
+ margin: 10px 0;
+}
diff --git a/src/client/styles/header.css b/src/client/styles/header.css
@@ -0,0 +1,5 @@
+header {
+ display: flex;
+ justify-content: space-between;
+ padding: 10px 40px;
+}
diff --git a/src/client/styles/resets.css b/src/client/styles/resets.css
@@ -0,0 +1,55 @@
+/* http:https://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+* {
+ box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+ul {
+ list-style-type: none;
+}
diff --git a/src/client/views/index.html b/src/client/views/index.html
@@ -3,22 +3,43 @@
  <head>
  <meta charset="utf-8">
  <title>Test</title>
- <script type="text/javascript" src="/index.js"></script>
+ <script type="text/javascript" src="/js/nameChecker.js"></script>
+ <script type="text/javascript" src="/js/formHandler.js"></script>
+ <link rel="stylesheet" href="/styles/resets.css">
+ <link rel="stylesheet" href="/styles/base.css">
+ <link rel="stylesheet" href="/styles/header.css">
+ <link rel="stylesheet" href="/styles/form.css">
+ <link rel="stylesheet" href="/styles/footer.css">
  </head>
+
  <body>
- <main>
- <form class="" action="index.html" method="post" onsubmit="return handleSubmit(event)">
- <input type="text" name="input" value="" onblur="onBlur()">
- <input type="submit" name="" value="submit" onclick="return handleSubmit(event)" onsubmit="return handleSubmit(event)">
- </form>
 
- <section id="results">
+ <header>
+ <div class="">
+ Logo
+ </div>
+ <div class="">
+ navigation
+ </div>
+ </header>
 
+ <main>
+ <section>
+ <form class="" onsubmit="return handleSubmit(event)">
+ <input id="name" type="text" name="input" value="" onblur="onBlur()" placeholder="Name">
+ <input type="submit" name="" value="submit" onclick="return handleSubmit(event)" onsubmit="return handleSubmit(event)">
+ </form>
+ <section>
+
+ <section>
+ <strong>Form Results:</strong>
+ <div id="results"></div>
  </section>
  </main>
 
  <footer>
  <p>This is a footer</p>
  </footer>
+
  </body>
 </html>
diff --git a/src/server/index.js b/src/server/index.js
@@ -1,23 +1,22 @@
+var path = require('path')
 const express = require('express')
+const mockAPIResponse = require('./mockAPI.js')
 
 const app = express()
-app.use(express.static('src/public'));
 
-var json = {
- 'title': 'test json response',
- 'message': 'this is a message',
- 'time': 'now'
-}
+app.use(express.static('src/client'))
 
-app.get('/', function (req, res) {
- res.sendFile('/views/index.html', { root: __dirname });
-})
+console.log(__dirname)
 
-app.get('/test', function (req, res) {
- res.send(json);
+app.get('/', function (req, res) {
+ res.sendFile('/client/views/index.html', { root: __dirname + '/..' })
 })
 
 // designates what port the app will listen to for incoming requests
-app.listen(3000, function () {
+app.listen(8080, function () {
  console.log('Example app listening on port 3000!')
 })
+
+app.get('/test', function (req, res) {
+ res.send(mockAPIResponse)
+})
diff --git a/src/server/mockAPI.js b/src/server/mockAPI.js
@@ -0,0 +1,7 @@
+let json = {
+ 'title': 'test json response',
+ 'message': 'this is a message',
+ 'time': 'now'
+}
+
+module.exports = json