Reyhenry38

README.md

@@ -1,2 +1,45 @@
-# studyCompanion
-An app to help you track your study time.
+Project #1 – Group 2
+Trilogy – Full Stack Development Program
+
+University of Miami Cohort 2017
+
+Team Members
+Ashley Calixte (@Ashleycalx)
+
+Calvin Mendoza (@calvinmen1988)
+
+Ejike Onwe (@reyhenry38)
+
+Mariela Pascual (@mariela2)
+
+Study Buddy
+Project Description:
+Study Buddy is an interactive tool that allows the user to actively track study time and increase overall productively. The application will utilize an API intended to increase users’ motivation, by generating motivational quotes randomly. In each instance where the user stops the timer for the day, the session will be stored in a database.This will allow the user to actively track progress throughout the week using an integrated chart within the application. In addition to this, the user will have the ability to use their current location for traffic updates and directions to their intended facility or program location.
+
+Key Elements & Features:
+Productivity/ Focus
+
+Motivation
+
+Time Management
+
+Tracking work hours per day/week using insightful charts
+
+Traffic update from current location to class
+
+Motivation
+How to effectively track study time on a weekly bases, and increase student productively and focus. Inspired by weekly cohort survey (time spent on studying, assigments and such).
+
+Tech/framework used
+HTML, CSS, JavaScript, JQuery
+
+New Technology used
+Chart.js
+
+API Reference
+Google Maps (Current traffic updates, and direction)
+
+Motivational Quotes (Generates quotes)
+
+Copyright
+Ashley Calixte(@Ashleycalx), Calvin Mendoza(@calvinmen1988), Ejike Onwe(@reyhenry38), Mariela Pascual (@mariela) © 2017 All Rights Reserved.

assets/css/style.css

@@ -0,0 +1,164 @@
+/*-----------------------
+----- Basic Styles -----
+-------------------------*/
+body{
+	font-family: Raleway, Arial, sans-serif;
+    font-size:16px;
+    font-weight:300;
+    color:#6d6d6d;
+	overflow-x:hidden;
+}
+
+#sectionHeaders{
+	margin-top: 80px;
+	font-size: 40px;
+	font-weight:300;
+}
+/*-----------------------
+---- Header Styles ----
+-------------------------*/
+#home{
+	width: 100%;
+	height: 650px;
+	background:url('../img/header-bg.jpg') no-repeat;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	color:white;
+	border-bottom: 8px solid #dbb98f;
+}
+#headerText{
+
+	margin-top: 15%;
+	font-size:70px;
+    font-weight:500;
+}
+#quoteText{
+	margin-top: 5%;
+}
+#quote-div{
+	margin-top: 20%;
+	}
+
+#quote{
+	font-size: 30px;
+	font-style: oblique;
+}
+#quoteButton{
+	margin-top: 3%;
+	background-color: #dbb98f;
+	padding: 10px;
+	border: none;
+}
+#quoteText{
+	font-size:26px;
+    font-weight:300;
+
+}
+
+/*Quotes Style Starts here*/
+
+.quote {
+  padding: 1em 1.5em 0;
+  font-size: 2em;
+	font-weight: bold;
+	font-family: cursive;
+}
+
+.author {
+  font-size: 1.5em;
+  font-style: italic;
+}
+
+
+/*Quotes Styles Ends here*/
+
+
+/*-----------------------
+---- Timer Styles ----
+-------------------------*/
+#timerSection{
+	background-color: #fff;
+    /*box-shadow: 0 0 50px rgba(0,0,0,0.5);*/
+	width: 100%;
+	height: 800px;
+}
+
+#timer{
+	margin-top: 80px;
+	font-size: 80px;
+
+}
+
+#buttonsContainer{
+	margin: 100px 50px 0 50px;
+}
+#start{
+	height: 100px;
+	width: 100px;
+}
+#start:hover {
+	opacity: .5;
+}
+
+#pause{
+	height: 100px;
+	width: 100px;
+}
+#pause:hover {
+	opacity: .5;
+}
+
+#stop{
+	height: 100px;
+	width: 100px;
+}
+#stop:hover {
+	opacity: .5;
+}
+
+#textBtn{
+	margin: 40px 80px;
+}
+
+/*-----------------------
+---- Chart Styles ----
+-------------------------*/
+#chartSection{
+	width: 100%;
+	height: 750px;
+	background-color: #fff;
+
+}
+#chartContainer{
+	padding:50px;
+	width: 800px;
+	height:500px;
+}
+
+/*-----------------------
+---- Traffic Styles ----
+-------------------------*/
+#trafficSection{
+	width: 100%;
+	height: 600px;
+	border-top: 8px solid #dbb98f;
+	border-bottom: 8px solid #dbb98f;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+}
+
+/*-----------------------
+---- Footer Styles ----
+-------------------------*/
+
+.footer{
+	width: 100%;
+	height: 100px;
+	background-color: #334958;
+}
+
+#footer{
+	margin-top: 35px;
+}