kgd-05-eclipse-fox · torianyap · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020 · Oct 26, 2020
diff --git a/README.md b/README.md
diff --git a/client/.firebaserc b/client/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "fancy-to-do-5ee22"
+  }
+}
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,66 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
diff --git a/client/firebase.json b/client/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": ".",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/client/functions.js b/client/functions.js
@@ -0,0 +1,48 @@
+function formatDate(date) {
+    var d = new Date(date),
+        month = '' + (d.getMonth() + 1),
+        day = '' + d.getDate(),
+        year = d.getFullYear();
+
+    if (month.length < 2) 
+        month = '0' + month;
+    if (day.length < 2) 
+        day = '0' + day;
+
+    return [year, month, day].join('-');
+}
+
+function convertTemp (temp) {
+    const celcius = (+temp-273.15).toFixed(1)
+    return `${celcius}°C`
+}
+
+function source(description) {
+    description = description.toLowerCase()
+    let source
+    console.log(description)
+    switch (description) {
+        case "thunderstorm":
+            source = "https://www.flaticon.com/svg/static/icons/svg/222/222506.svg"
+            break;
+        case "mist":
+            source = "https://www.flaticon.com/svg/static/icons/svg/414/414927.svg"
+            break;
+        case "clouds":
+            source = "https://www.flaticon.com/svg/static/icons/svg/414/414927.svg"
+            break;
+        case "sunny":
+            source = "https://www.flaticon.com/svg/static/icons/svg/2917/2917242.svg"
+            break;
+        case "clear":
+            source = "https://www.flaticon.com/svg/static/icons/svg/2917/2917242.svg"
+            break;
+        case "windy":
+            source = "https://www.flaticon.com/svg/static/icons/svg/2917/2917242.svg"
+            break;
+        case "rain" :
+            source = "https://www.flaticon.com/svg/static/icons/svg/414/414974.svg"
+            break;
+    }
+    return source
+}
diff --git a/client/index.html b/client/index.html
@@ -1,11 +1,184 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <meta name="google-signin-client_id"
+    content="1010406052991-eci8se8f8d240ilstq09dektdqpmniuf.apps.googleusercontent.com">
+
+  <!-- FONT -->
+  <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@500;600&display=swap" rel="stylesheet">
+
+  <!-- bootstrap -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+
+  <link rel="stylesheet" href="style.css">
+
+  <title>Fancy ToDo</title>
 </head>
+
 <body>
-
+
+  <!-- NAV -->
+  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <a class="navbar-brand text-light">FancyToDo</a>
+    <div class="collapse navbar-collapse">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a href="#" class="navbar-brand" id="nav-register">Register</a>
+        </li>
+        <li class="nav-item active">
+          <a href="#" class="navbar-brand" id="nav-login">Login</a>
+        </li>
+        <li class="nav-item" id="nav-name"></li>
+        <li class="nav-item active">
+          <a href="#" class="navbar-brand text-danger" id="nav-logout">Logout</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <!-- END NAV -->
+
+  <!-- REGISTER -->
+  <section class="container-xl text-center" id="register">
+    <form class="form-signin bg-light shadow-lg rounded text-dark" onsubmit="register(event)">
+      <h1 class="h3 mb-3 font-weight-normal">Register</h1>
+
+      <label for="register-email">Email</label>
+      <input type="email" id="register-email" placeholder="[email protected]" class="form-control" required=""
+        autofocus="">
+      <br>
+      <label for="register-pwd">Password</label>
+      <input type="password" id="register-pwd" required="" class="form-control" required="">
+
+      <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
+      <br>
+      <div class="checkbox mb-3">
+        <p>Already have an acount ? <br>
+          <a href="#" id="login-sc">Login</a> here
+        </p>
+      </div>
+      <br>
+      <!-- Google Sign In Button -->
+      <div class="g-signin2" data-onsuccess="onSignIn"></div>
+
+    </form>
+  </section>
+  <!-- END REGISTER -->
+
+  <!-- LOGIN -->
+  <section class="container-xl text-center" id="login">
+    <form class="form-signin bg-light rounded shadow-lg text-dark" onsubmit="login(event)">
+      <h1 class="h3 mb-3 font-weight-normal">Login</h1>
+
+      <label for="login-email">Email</label>
+      <input type="email" id="login-email" placeholder="[email protected]" class="form-control" required="" autofocus="">
+      <br>
+      <label for="login-pwd">Password</label>
+      <input type="password" id="login-pwd" required="" class="form-control" required="">
+      <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
+      <br>
+      <div class="checkbox mb-3">
+        <p>Don't have an acount ? <br>
+          <a href="#" id="register-sc">Register</a> here
+        </p>
+      </div>
+      <br>
+      <!-- Google Sign In Button -->
+      <div class="g-signin2" data-onsuccess="onSignIn"></div>
+    </form>
+  </section>
+  <!-- END LOGIN -->
+
+  <!-- CONTENT -->
+  <section id="content" style="width: 100%; height: 100%" class="container-fluid">
+    <div id="home" style="margin-top:50px;" class="container-xl">
+      <h1 class="text-center"><b>Here Are Your Todos</b></h1>
+      <br>
+      <button class="btn btn-outline-primary" id="addTodo">Add A New Task</button>
+      <br> <br>
+      <section>
+        <div id="todos" class="row row-cols-2"></div>
+      </section>
+
+      <br>
+      <!-- ADD TODO -->
+      <section id="form-addToDo" class="container">
+        <div class="row justify-content-center mt-5 ">
+          <div class="col-4">
+            <div class="shadow-lg p-5 mb-5 bg-white rounded">
+              <h5 class="mb-4"><b>Add a new task</b></h5>
+              <form onsubmit="addTodo()">
+                <div class="form-group">
+                  <label for="add_title">Title</label>
+                  <input type="text" id="add_title" class="form-control" placeholder="Board Meeting" required>
+                </div>
+                <div class="form-group">
+                  <label for="add_description">Description</label>
+                  <input type="text" id="add_description" class="form-control" placeholder="Insert Desciption here"
+                    required>
+                </div>
+                <div class="form-group">
+                  <label for="add_due_date">Due Date</label>
+                  <input type="date" id="add_due_date" class="form-control" required>
+                  <i>due date must be greater than today</i>
+                </div> <br> <br>
+                <button type="submit" class="btn btn-outline-success">Add Task</button>
+              </form> <br>
+              <button class="btn btn-outline-primary back-btn">Back</button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- END ADD TODO -->
+
+      <!-- UPDATE TODO -->
+      <section id="form-updateTodo" class="container">
+        <div class="row justify-content-center mt-5 ">
+          <div class="col-4">
+            <div class="shadow-lg p-5 mb-5 bg-white rounded">
+              <h5 class="mb-4"><b>Edit task</b></h5>
+              <form onsubmit="updateToDo()">
+                <div class="form-group">
+                  <label for="edit_title">Title</label>
+                  <input type="text" id="edit_title" class="form-control" required>
+                </div>
+                <div class="form-group">
+                  <label for="edit_description">Description</label>
+                  <input type="text" id="edit_description" class="form-control" required>
+                </div>
+                <div class="form-group">
+                  <label for="edit_due_date">Due Date</label>
+                  <input type="date" id="edit_due_date" class="form-control" required>
+                  <i>due date must be greater than today</i>
+                </div> <br> <br>
+                <button type="submit" class="btn btn-outline-success">Edit Task</button>
+              </form> <br>
+              <button class="btn btn-outline-primary back-btn">Back</button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- END UPDATE TODO -->
+
+      <!-- WEATHER -->
+      <div class="container-lg card p-5 mb-5 shadow-lg" style="width: 350px; height: 400px; float: left;" id="weather"></div>
+    </div>
+
+  </section>
+
+  <!-- ajax -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <!-- sweet alert -->
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
+  <!-- google sign in -->
+  <script src="https://apis.google.com/js/platform.js" async defer></script>
+  <!-- scripts -->
+  <script src="functions.js"></script>
+  <script src="index.js"></script>
+
 </body>
+
 </html>