Files
  • src
    • App.js
    • App.css
    • App2.js
    • index.css
    • index.js
    • logo.svg
  • package.json
src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';



class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro" style = {{color: "#5C5"}}>
          You started, now continue.
        </p>
      <App3 />
      </div>
    );
  }
}



class App3 extends Component {
  constructor(props) {
    super (props);
    this.state = {
      count: 0,
      temp:20,
      fs : 33,  // font size
      time: Date.now(),
      ttt : new Date().toLocaleTimeString(),
      rgba : 10,
      rgbc: 10
    };
    this.increase = this.increase.bind(this);
    this.decrease = this.decrease.bind(this);
    
  }

  /* componentDidMount() {
      setInterval(() => this.setState({ time: Date.now() , count : this.state.count + 1}), 50)
 };*/

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      50
    );
  }

  
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.temperature = 15+5*(Math.sin(this.state.count * 0.002))  - 5*(Math.sin(this.state.count * 0.005))
       + 7*(Math.sin(this.state.count * 0.001));
    this.setState({
      time : Date.now(),
      count : this.state.count + 1,
      temp : this.temperature,
      rgba : this.temperature*8,
      rgbc : 265 - this.temperature*8
     // fs: this.temp 
     });
     //this.ffs();
  }

    increase(event) {this.setState({
      newtemp:30
    });};

    decrease(event) {this.setState({
      newtemp:18
    });};   

    ffs() {
      this.setState({
          
          fs: this.temp,  //font size
      })
    };

    
  render() {

    
     
    
    return (

      
      <div>
      <h2>
      Very cool. Current time: {new Date().toLocaleTimeString()}
      </h2>
      <p>
      That is {this.state.time.toLocaleString()} miliseconds since 1970.
      </p>
      <div style = {{width: 25*this.state.temp,height:10, borderRadius: 4,
    borderWidth: 5, backgroundColor:  'rgb('+this.state.rgba+', 0,'+this.state.rgbc+')'}}></div>

      {/*<p style = {{color: "blue"}}><b>Count: {this.state.count}</b></p>*/}
    
      <p style={{fontSize: this.state.temp}}><b>Temperature: {this.state.temp.toString().substring(0,4)} </b></p>
      
      <button onClick={this.increase}>Increase</button>
      <button onClick={this.decrease}>Decrease</button>
      <p> We aiming at temperature: {this.state.newtemp} </p>
      </div>
    )
  }
}

export default App;