Added files manually from Glitch

The service for exporting projects from Glitch wasn't working so I copied files manually.
LMOlivera · Apr 17, 2019 · 0ad16e4 · 0ad16e4
1 parent 62f2b37
commit 0ad16e4
Show file tree

Hide file tree

Showing 7 changed files with 349 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "time-till-endgame",
+  "version": "v1.0.0",
+  "dependencies": {
+    "create-react-app": "^2.1.8",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "react-scripts": "0.9.5"
+  },
+  "engines": {
+    "node": "8.x"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "license": "MIT"
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="https://cdn.glitch.com/05772acb-e20d-4cb2-b545-a61ab6a2a14c%2FIcons8-Windows-8-Cinema-Avengers.ico?1555445551418">
+    <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">    
+    <title>Time till Endgame</title>    
+  </head>
+  <body>
+    <div id="app">
+      <header>
+        <img src="https://fontmeme.net/permalink/190417/7b4a9a7c20d7b7b7b22e455a7a0d3544.png" alt="Time till Endgame banner" border="0">
+      </header>    
+      <div id="background-container">
+        <div id="container"></div>
+      </div>
+    </div>    
+  </body>
+</html>
diff --git a/public/style.txt b/public/style.txt
@@ -0,0 +1,88 @@
+/*Don't change*/
+body, html {
+  height: 100%;
+  font-family: 'Audiowide', cursive;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  background-image: url("https://cdn.glitch.com/05772acb-e20d-4cb2-b545-a61ab6a2a14c%2Favengers-infinity-war-2018-4k-cq.jpg?1555512583330");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+#app {
+  padding-top: 1vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+header {
+  text-align: center;
+}
+header img{
+  width: auto;
+}
+
+#background-container {
+  background-color: rgba(0,0,0,.6);
+  align-self: center;
+  margin-top: 3vw;
+  width: 45%;
+  border-radius: 10px;
+}
+
+#container {
+  color: white;
+  padding: 20px;
+  padding-top: 30px;
+  border-radius: 10px;
+  text-align: center;
+}
+
+#date, #time{
+  width: 150px;
+  color: red;
+}
+
+#btn{
+  padding: 25px;
+  border: 0;
+  border-radius: 10px;
+  background-color: rgba(80,80,80,.6);
+}
+
+#btn:hover{
+  background-color: rgba(150,150,150,.8);
+}
+
+
+
+#btn text{
+  font-family: 'Audiowide', cursive;  
+  color: white;
+}
+
+@media(max-width: 700px){
+  #background-container {
+    width: 80%;
+  }
+}
+
+
+@media(max-width: 700px){
+  body, html{
+    background-image: url("https://cdn.glitch.com/05772acb-e20d-4cb2-b545-a61ab6a2a14c%2Favengers_4___endgame__2019__poster_by_midiya42_dch7nw5-pre.jpg?1555527763108");
+  }
+
+  #background-container {
+    width: 80%;
+  }
+  header img{
+    width: 80%
+  }
+}
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import Timer from './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: '',
+      timeValue: '00:00'
+    };  
+    setInterval(()=>{
+      this.setState({today: new Date()})
+    }, 1000);
+  }
+
+  updateDateInputValue(txt){
+    this.setState({
+      dateValue: txt.target.value
+    });    
+  }
+
+  updateTimeInputValue(txt){
+    this.setState({
+      timeValue: txt.target.value
+    });    
+  }
+
+  render(){
+  return(
+    <div id="timer">      
+      <p>
+        Today is: {this.state.today.toLocaleString()}
+        <br/><br/>
+        Endgame's Premiere is on: {this.state.premiere.toLocaleString()}
+      </p>
+      <p>
+        Insert the day you are watching Endgame: <input
+                                                   type="date"
+                                                   id="date"
+                                                   value={this.state.dateValue}
+                                                   max="2019-12-31"
+                                                   min="2019-04-17"
+                                                   onChange={(txt) => this.updateDateInputValue(txt)}
+                                                   placeholder="yyyy-mm-dd"/>
+        <br/><br/>
+        And the time: <input
+                        type="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}/>
+      </p>  
+    </div>
+  )
+  }
+}
+
+export default App;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+/*
+ * To do:
+ * - Refactor.
+ */
+
+ReactDOM.render(<App/>, document.getElementById('container'))
diff --git a/src/timer-component.js b/src/timer-component.js
@@ -0,0 +1,127 @@
+import React from 'react';
+
+class Timer 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
+    }    
+  }
+
+  //When the input boxes' content change, hides the result to prevent errors
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.dateInput !== this.props.dateInput || prevProps.timeInput !== this.props.timeInput){
+      this.setState({show: false});
+    }
+  }
+
+  loop(){
+    this.calculate(()=>{},this.setState({
+      show: "true"
+    }));
+  }
+
+  calculate(){
+    try{
+      var inp = this.props.dateInput;//
+      var d = new Date(inp.toLocaleString());
+      d.setDate(d.getDate() + 1);
+      d.setHours(0);
+
+      //*******Date*******
+      // get total seconds between the times
+      var delta = Math.abs(this.props.today - d) / 1000;
+
+      var days = Math.floor(delta / 86400);
+      delta -= days * 86400;
+
+      var hours = Math.floor(delta / 3600) % 24;
+      delta -= hours * 3600;
+
+      var minutes = Math.floor(delta / 60) % 60;
+      delta -= minutes * 60;
+
+      var seconds = parseInt((delta % 60),10);
+
+      //*******Time*******
+      inp = this.props.timeInput;
+      console.log(inp);
+      if(inp == NaN){
+        throw "Incorrect input"; 
+      }
+
+      //Take out numbers from time
+      var flag = false;
+      var extraMins = 0;
+      var extraHours = 0;
+      for(var i = 0; i<inp.length; i++){
+        if (inp[i] != ":"){
+          if (flag == false){
+            if(i==0){
+              extraHours += (10 * parseInt(inp[i]));
+            }else{
+              extraHours += parseInt(inp[i]);
+            }
+          }else{
+            if(inp[i] == inp[inp.length-1]){
+              extraMins += parseInt(inp[i]);
+            }else{
+              extraMins += (10 * parseInt(inp[i]));
+            }              
+          }
+        }else{
+          flag = true;
+        }        
+      }
+
+      hours+=extraHours;
+      minutes+=extraMins;
+
+      if (minutes>59){
+        hours+=1;
+        minutes-=60;
+      }
+
+      if (hours>23){
+        days += 1;
+        hours -= 24;
+      }
+      if (isNaN(minutes) || isNaN(hours)){
+        throw "Incorrect output";
+      }
+      this.setState({
+        days: days,
+        hours: hours,
+        minutes: minutes,
+        seconds: seconds
+      });
+    }catch(e){
+      this.setState({
+        show: false
+      });
+    }
+
+  }
+
+  render(){
+    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>;
+    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 : ''}
+      </div>        
+    );
+  }
+}
+
+export default Timer;
diff --git a/watch.json b/watch.json
@@ -0,0 +1,19 @@
+{
+  "install": {
+    "include": [
+      "^package\\.json$",
+      "^\\.env$"
+    ]
+  },
+  "restart": {
+    "exclude": [
+      "^public/",
+      "^dist/",
+      "^build/"
+    ],
+    "include": [
+      "\\.json"
+    ]
+  },
+  "throttle": 100
+}