week10 hw

Lidemy · Nov 11, 2018 · 7a5ab6b · 7a5ab6b
1 parent 4c9a5e5
commit 7a5ab6b
Show file tree

Hide file tree

Showing 31 changed files with 21,480 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 node_modules/
-/homeworks/week8/hw2/funciton/conn.php
+/homeworks/week8/hw2/function/conn.php
 /homeworks/week8/hw3/conn.php
 conn.php
 .DS_Store
+node_modules
diff --git a/homeworks/week10/hw1/build/main.css b/homeworks/week10/hw1/build/main.css
diff --git a/homeworks/week10/hw1/build/main.js b/homeworks/week10/hw1/build/main.js
diff --git a/homeworks/week10/hw1/index.html b/homeworks/week10/hw1/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>FutianShen Week4 hw2</title>
+    <link rel="stylesheet" href="build/normalize.css">
+    <link rel="stylesheet" href="build/main.css">
+    <script src="build/main.js"></script>
+    <style>
+        .alert {
+            background-color: #ffebee;
+            color: rgb(216, 66, 56);
+        }
+        .alertChecked {
+            background-color: #ffebee;
+            color: rgb(216, 66, 56);
+        }
+    </style>
+</head>
+<body>
+    <div class="banner"></div>
+    <div class="sheet container">
+        <div class="sheet__info">
+            <h1>程式導師實驗計畫第二期報名表單</h1>
+            <p>詳情請參考：<a href="https://medium.com/@hulitw/mentor-program-b5f96ae1eed1 ">https://medium.com/@hulitw/mentor-program-b5f96ae1eed1 </a></p>
+            <p>記得填完表單之後還要寫信報名才算成功，兩者缺一不可！</p>
+            <p class="notice">必填</p>
+        </div>
+        <form class="sheet__main">
+            <!-- 第一題 -->
+            <div class="block">
+                <h2 class='notice'>電子郵件地址</h2> 
+                <input  class='important' type="email" placeholder="您的電子郵件" >
+                <div class="alert"></div>
+            </div>
+            <!-- 第二題 -->
+            <div class="block">
+                <h2 class='notice'>暱稱</h2>
+                <p>該怎麼稱呼你</p>
+                <input class='important' type="text" placeholder="您的回答" >
+                <div class="alert"></div>
+            </div>
+            <!-- 第三題 -->
+            <div class="block">
+                <h2 class='notice'>報名類型</h2>
+                <!-- label 有兩種用法 --> <!-- 為什麽用 label 包起來之後 就會出現問題 推測跟 DOM 指令有關。 -->
+                <input id="junior" type="radio" name="classType" class="iptChecked" ><label for=junior>從零到一基礎班（一個月後開始收保證金 3000，淘汰不退還，結業後兩個月內找到工作付一個月半薪水，沒工作不用付）</label>
+                <input id="senior" type="radio" name="classType" class="iptChecked" ><label for=senior>在職工程師加強班（一個月後開始收保證金 3000，兩個月時收學費 30000，被淘汰不退還）</label>
+                <div class="alert"></div>
+            </div>
+            <!-- 第四題 -->
+            <div class="block">
+                <h2 class='notice'>現在的職業</h2>
+                <p>範例：學生、前端工程師、待業中、業務</p>
+                <input class='important' type="text" placeholder="您的回答" >
+                <div class="alert"></div>
+            </div>
+            <!-- 第五題 -->
+            <div class="block">
+                <h2 class='notice'>是否有程式相關背景？</h2>
+                <p>範例：無、高中時候學過C++、學過一點網頁前端、目前在資策會上課...</p>
+                <textarea class='important' name="comments" placeholder="您的回答" style="width:500px;" ></textarea>
+                <div class="alert"></div>
+            </div>
+            <!-- 第六題 -->
+            <div class="block">
+                <h2>其他</h2>
+                <p>任何你想說的</p>
+                <input class='unimportant' type="text" placeholder="您的回答" style="width:500px;">
+            </div>
+            <!-- 提交 -->
+            <div class="block">
+                <input type="submit" name="goodbye" value="提交">
+                <p class='under_button'>請勿利用 Google 表單送出密碼。</p>
+            </div>
+        </form>
+    </div>
+    <footer class="footer">
+        <div class="footer__copyright">
+            <p class="footer__content">Google 並未認可或建立這項內容。</p>
+            <a href="#">檢舉濫用情形</a> - 
+            <a href="#">服務條款</a> -
+            <a href="#">其他條款</a>
+        </div>
+        <div id="logo">Google 表單</div>
+    </footer>
+</body>
+</html>
diff --git a/homeworks/week10/hw1/src/gulpfile.js b/homeworks/week10/hw1/src/gulpfile.js
@@ -0,0 +1,25 @@
+const gulp = require('gulp')
+
+const stylus = require('gulp-stylus')
+const minifycss = require('gulp-csso')
+gulp.task('css', () => {
+  return gulp.src('stylus/*.styl') 
+  .pipe(stylus({
+    compress: true
+  }))
+  .pipe(minifycss())
+  .pipe(gulp.dest('../build'))
+})
+
+const babel = require('gulp-babel')
+const minifyjs = require('gulp-jsmin')
+gulp.task('js', () => {
+  return gulp.src('js/*.js')
+  .pipe(babel({
+    presets: ['@babel/env']
+  }))
+  .pipe(minifyjs())
+  .pipe(gulp.dest('../build')) 
+})
+
+gulp.task('default', ['css','js'])
diff --git a/homeworks/week10/hw1/src/js/main.js b/homeworks/week10/hw1/src/js/main.js
@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', function () { /* Content Loaded 要大寫 */
+    document.querySelector('form').addEventListener('submit' , e => { /* 為什麼需要使用 e 還是搞不懂 */
+        let checker = 0
+        /* 取得文字題答案 */
+        let ipt = document.querySelectorAll('.important') // array
+        let questions = ipt.length
+        console.log(ipt)
+        for (let i=0; i<questions ; i++) {
+            if (ipt[i].value==='') {  
+                alertOn(ipt[i])
+            } else {
+                alertOff(ipt[i])
+                checker += 1
+            }
+        }
+
+        /* 取得選擇題答案 */
+        let classType = document.querySelectorAll('[name=classType]') 
+        questions += 1
+        console.log(classType)
+        if (classType[0].checked===classType[1].checked) {
+            alertOn(classType[0])
+        } else {
+            alertOff(classType[0])
+            checker += 1
+        }
+        /* stop default action */
+        if (checker!==questions) e.preventDefault()
+
+        /* 繳交成功輸出結果 */
+        let unipt = document.querySelector('.unimportant')
+        if (checker===questions) {
+            /* '' 用ES6語法改寫  `` */
+            console.log('電子郵件：' + ipt[0].value)
+            console.log('暱稱：' + ipt[1].value)
+
+            if (classType[0].checked===true) console.log('報名類型：工程師培養班')
+            else console.log('報名類型：業餘班')
+
+            console.log('現在的職業：' + ipt[2].value)
+            console.log('相關背景：' + ipt[3].value)
+            console.log('其他：' + unipt.value) 
+            alert('success')
+        }
+    })
+    function alertOn(a) {
+        a.parentNode.querySelector('.alert').innerText ='這是必填問題'
+        a.style.borderBottom = '1px solid rgb(216, 66, 56)'
+        a.style.background = '#ffebee'
+        a.parentNode.style.backgroundColor ='#ffebee'
+    }
+    function alertOff(a) {
+        a.parentNode.querySelector('.alert').innerText =''
+        a.style.borderBottom = '1px solid #ddd'
+        a.style.background = 'white'
+        a.parentNode.style.backgroundColor = 'white'
+    }
+})