🛀🙋 Updated with Glitch

LMOlivera · Apr 22, 2019 · 24387a6 · 24387a6
1 parent 6af6592
commit 24387a6
Show file tree

Hide file tree

Showing 20 changed files with 12,158 additions and 110 deletions.
diff --git a/.glitch-assets b/.glitch-assets
@@ -0,0 +1,14 @@
+{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
+{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
+{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
+{"name":"starter-react.png","date":"2017-12-13T14:21:20.291Z","url":"https://cdn.glitch.com/71d3e262-edb4-456f-8703-48a1247b894f%2Fstarter-react.png","type":"image/png","size":108071,"imageWidth":387,"imageHeight":169,"thumbnail":"https://cdn.glitch.com/71d3e262-edb4-456f-8703-48a1247b894f%2Fthumbnails%2Fstarter-react.png","thumbnailWidth":330,"thumbnailHeight":145,"dominantColor":"rgb(52,52,60)","uuid":"iilXVUDtxDgRIifb"}
+{"uuid":"adSBq97hhhpFNUnb","deleted":true}
+{"uuid":"adSBq97hhhpFNUnc","deleted":true}
+{"uuid":"iilXVUDtxDgRIifb","deleted":true}
+{"name":"4a905860-4fd6-4385-918e-5fa73018d40b_Icons8-Windows-8-Cinema-Avengers.ico","date":"2019-04-18T15:06:10.912Z","url":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2F4a905860-4fd6-4385-918e-5fa73018d40b_Icons8-Windows-8-Cinema-Avengers.ico","type":"image/x-icon","size":166561,"imageWidth":256,"imageHeight":256,"thumbnail":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2F4a905860-4fd6-4385-918e-5fa73018d40b_Icons8-Windows-8-Cinema-Avengers.ico","thumbnailWidth":256,"thumbnailHeight":256,"uuid":"MBNbpSMjtEroboKj"}
+{"name":"4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-poster-square-crop.jpg","date":"2019-04-18T15:06:11.179Z","url":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2F4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-poster-square-crop.jpg","type":"image/jpeg","size":237226,"imageWidth":940,"imageHeight":905,"thumbnail":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2Fthumbnails%2F4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-poster-square-crop.jpg","thumbnailWidth":330,"thumbnailHeight":318,"uuid":"PlmnEDDMcS5N1rAD"}
+{"name":"05772acb-e20d-4cb2-b545-a61ab6a2a14c_avengers-infinity-war-2018-4k-cq.jpg","date":"2019-04-18T15:06:11.684Z","url":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2F05772acb-e20d-4cb2-b545-a61ab6a2a14c_avengers-infinity-war-2018-4k-cq.jpg","type":"image/jpeg","size":703272,"imageWidth":3217,"imageHeight":1350,"thumbnail":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2Fthumbnails%2F05772acb-e20d-4cb2-b545-a61ab6a2a14c_avengers-infinity-war-2018-4k-cq.jpg","thumbnailWidth":330,"thumbnailHeight":139,"uuid":"Ytk7rVryWQTQWt4T"}
+{"name":"4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-china-poster-top.jpg","date":"2019-04-18T15:06:11.725Z","url":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2F4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-china-poster-top.jpg","type":"image/jpeg","size":781485,"imageWidth":1200,"imageHeight":675,"thumbnail":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2Fthumbnails%2F4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-china-poster-top.jpg","thumbnailWidth":330,"thumbnailHeight":186,"uuid":"420Czqhd439umNeK"}
+{"name":"4a905860-4fd6-4385-918e-5fa73018d40b_heres-an-official-avengers-endgame-promo-photo-featuring-the-team-in-their-new-costumes1.png","date":"2019-04-18T15:06:11.848Z","url":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2F4a905860-4fd6-4385-918e-5fa73018d40b_heres-an-official-avengers-endgame-promo-photo-featuring-the-team-in-their-new-costumes1.png","type":"image/png","size":2155881,"imageWidth":1490,"imageHeight":902,"thumbnail":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2Fthumbnails%2F4a905860-4fd6-4385-918e-5fa73018d40b_heres-an-official-avengers-endgame-promo-photo-featuring-the-team-in-their-new-costumes1.png","thumbnailWidth":330,"thumbnailHeight":200,"uuid":"IcTEvMYseNs6wZv5"}
+{"uuid":"420Czqhd439umNeK","deleted":true}
+{"name":"4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-china-poster-top.jpg","date":"2019-04-18T15:37:15.474Z","url":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2F4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-china-poster-top.jpg","type":"image/jpeg","size":781485,"imageWidth":1200,"imageHeight":675,"thumbnail":"https://cdn.glitch.com/da665bf4-399a-4ab1-bf4f-fb0bd1f26e32%2Fthumbnails%2F4a905860-4fd6-4385-918e-5fa73018d40b_avengers-endgame-china-poster-top.jpg","thumbnailWidth":330,"thumbnailHeight":186,"uuid":"RRPFeRfj3XmbtAIK"}
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-- Copyright (c) 2019 Lucas Olivera
+Copyright (c) 2019 Lucas Olivera
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
diff --git a/app/component/app.jsx b/app/component/app.jsx
@@ -0,0 +1,71 @@
+const React = require('react');
+const Timer = require('./timer-component');
+
+class App extends React.Component{
+  constructor(props){
+    super(props)
+    this.state = {
+      today: new Date(),
+      premiere: new Date(2019,3,24,23,59,0,0),
+      dateValue: '',
+      dateBackup: '',
+      timeValue: '00:00',
+      timeBackup: '',
+      hide: false
+    };  
+    setInterval(()=>{
+      this.setState({today: new Date()})
+    }, 1000);
+  }
+
+  updateDateInputValue(txt){
+    this.setState({
+      dateValue: txt.target.value
+    });    
+  }
+
+  updateTimeInputValue(txt){
+    this.setState({
+      timeValue: txt.target.value
+    });
+  }
+
+  render(){
+    //if(){
+    //}else{
+    //}
+    return(
+      <div id="timer">
+        <p>
+          Today is: {this.state.today.toLocaleString()}
+          <br/><br/>
+          Endgame's Premiere is on: {this.state.premiere.toLocaleString()}
+        </p>
+        <p>
+          <form action="/success" method="POST">
+            Insert the day you are watching Endgame: <input
+                                                     type="date"
+                                                     name="date"
+                                                     id="date"
+                                                     value={this.state.dateValue}
+                                                     max="2019-08-31"
+                                                     min="2019-04-24"
+                                                     onChange={(txt) => this.updateDateInputValue(txt)}
+                                                     placeholder="yyyy-mm-dd"/>
+            <br/><br/>
+            And the time: <input
+                          type="time"
+                          name="time"
+                          id="time"
+                          value={this.state.timeValue}
+                          onChange={(txt) => this.updateTimeInputValue(txt)}
+                          placeholder="hh:mm"/>
+            <br/><br/>
+            <Timer dateInput={this.state.dateValue} timeInput={this.state.timeValue} today={this.state.today} hideTimer={this.state.hideTimer}/>
+          </form>
+        </p>  
+      </div>
+    )
+  }
+}
+module.exports = App;
diff --git a/app/component/input-name.jsx b/app/component/input-name.jsx
@@ -0,0 +1,52 @@
+const React = require('react');
+
+class InputName extends React.Component{
+  constructor(props){
+    super(props); 
+    //var calculateLoop = setInterval(()=>{this.calculate()},1000);
+    this.state={
+      show: false,
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      //calculateLoop: calculateLoop,
+      name: ""
+    }    
+  }
+
+  updateTimeInputValue(txt){
+    this.setState({
+      name: txt.target.value
+    });    
+  }
+
+  redirectBeware(){
+    window.location = "/bewareof?name=" + this.state.name
+                      + "&time=" + this.props.timeInput
+                      + "&date=" + this.props.dateInput
+                      ;
+  }
+  redirectSuccess(){
+    window.location = "/success?name=" + this.state.name
+                      + "&days=" + this.props.days
+                      + "&hours=" + this.props.hours
+                      + "&minutes=" + this.props.minutes
+                      + "&seconds=" + this.props.seconds
+                      + "&time=" + this.props.timeInput
+                      + "&date=" + this.props.dateInput;
+  }
+
+  render(){
+    return(
+      <p>
+        Tell everybody you are going to watch Endgame!
+        <br/><br/>
+        <input id="importantName" type="text" onChange={(txt)=>this.updateTimeInputValue(txt)} name="name" value={this.state.name} required placeholder="Enter your name..." />  <button type="button" className="btn-share" onClick={()=>this.redirectSuccess()}>Submit</button> or <button type="button" className="btn-share" onClick={()=>this.redirectBeware()}> Tell me who can spoil me</button>
+      </p>
+    )  
+  }
+
+}
+
+module.exports = InputName;
diff --git a/src/timer-component.js → app/component/timer-component.jsx b/src/timer-component.js → app/component/timer-component.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+const React = require('react');
+const InputName = require('./input-name');
 
 class Timer extends React.Component{
   constructor(props){
@@ -10,6 +11,7 @@ class Timer extends React.Component{
       hours: 0,
       minutes: 0,
       seconds: 0,
+      date: "",
       calculateLoop: calculateLoop
     }    
   }
@@ -51,7 +53,6 @@ class Timer extends React.Component{
 
       //*******Time*******
       inp = this.props.timeInput;
-      console.log(inp);
       if(inp == NaN){
         throw "Incorrect input"; 
       }
@@ -99,7 +100,8 @@ class Timer extends React.Component{
         days: days,
         hours: hours,
         minutes: minutes,
-        seconds: seconds
+        seconds: seconds,
+        date: d.toLocaleString()
       });
     }catch(e){
       this.setState({
@@ -113,15 +115,16 @@ class Timer extends React.Component{
     const timer = <p>You will have to wait <b>{this.state.days} days and {(this.state.hours <= 9) ? "0" : ''}{this.state.hours}
                                               :{(this.state.minutes <= 9) ? "0" : ''}{this.state.minutes}
                                               :{(this.state.seconds <= 9) ? "0" : ''}{this.state.seconds} </b>
-                  to watch Endgame.</p>;
+                  to watch Endgame.
+            <InputName days={this.state.days} hours={this.state.hours} minutes={this.state.minutes} seconds={this.state.seconds} dateInput={this.props.dateInput} timeInput={this.props.timeInput}/>
+          </p>;
     return(
       <div>
-        <center><button id="btn" onClick={() => this.loop()}><text>How much do I have to wait?</text></button></center>
-        <br/><br/>
-        {this.state.show ? timer : ''}
+        <center><button className="btn" type="button" onClick={() => this.loop()}><text>How much do I have to wait?</text></button></center>        
+        {this.state.show ? timer : ''}        
       </div>        
     );
   }
 }
 
-export default Timer;
+module.exports = Timer;
diff --git a/app/index.jsx b/app/index.jsx
@@ -0,0 +1,10 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const App = require('./component/app');
+
+/*
+ * To do:
+ * - Refactor.
+ */
+
+ReactDOM.render(<App/>, document.getElementById('container'))