Daniil Dubchenko's questions

const options = [
    {
        name: 'Приход',
        link: '/income'
    },
    {
        name: 'Расход',
        link: '/spend'
    },
    {
        name: 'Статистика',
        link: '/statistic'
    }
];

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    
    this.Router = window.ReactRouterDOM.BrowserRouter
    this.Button = window['material-ui'].Button;
    this.NavLink = window.ReactRouterDOM.NavLink;
    this.Route = window.ReactRouterDOM.Route;
  }
  
  render() {
    return (
            < this.Router >
              <div>
                              {
                    options.map((opt, i) => (
                    //Если ссылка активна, то заменить [variant="contained"] на [variant="outlined"]
                        <this.Button key={i} variant="contained" color="primary">
                            <this.NavLink to={opt.link} >{opt.name}</this.NavLink>
                        </this.Button>
                    ))
                }
                        <hr />

        <this.Route exact path="/income" component={Income} />
        <this.Route path="/spend" component={Spend} />
        <this.Route path="/statistic" component={Statistic} />
              </div>
            </ this.Router>
    )
  }
}

function Income() {
  return (
		<div>
      <h2>Income</h2>
    </div>
  );
}

function Spend() {
  return (
    <div>
      <h2>Spend</h2>
    </div>
  );
}

function Statistic() {
  return (
    <div>
      <h2>Statistic</h2>
    </div>
  );
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))

class App extends React.Component {
  constructor(props) {
    super(props)

    this.Router = window.ReactRouterDOM.BrowserRouter ;
    this.Link = window.ReactRouterDOM.Link;
    this.Route = window.ReactRouterDOM.Route;
  }
  
  render() {
    return (
 <this.Router>
      <div>
        <ul>
          <li>
            <this.Link to="/">Home</this.Link>
          </li>
          <li>
            <this.Link to="/about">About</this.Link>
          </li>
        </ul>

        <hr />

        <this.Route exact path="/" component={Home} />
        <this.Route path="/about" component={About} />
      </div>
    </this.Router>
    )
  }
}

function Home() {
  return (
		<input type="text"/>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))

const c=document.getElementById("myCanvas");
const ctx=c.getContext("2d");
ctx.strokeStyle="red";
ctx.strokeRect(20,20,150,100);
ctx.strokeStyle="gray";
ctx.strokeRect(50,50,200,200);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

form {
    width: 540px;
    max-height: 700px;
    max-width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1900;
    background-color: gray;
    padding: 25px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

textarea {
  resize:vertical;
}

<form action="">
  <input type="text">
  <textarea></textarea>
  <input type="text">
</form>

const circle = document.getElementsByTagName('circle')[0],
  animate = `<animateTransform  
          attributeName="transform" 
          type="translate" 
          values="0;460;0"
          dur="3s"
          repeatCount="indefinite"/>`;
let b = true;
setInterval(() => {
  b ? circle.innerHTML = '' : circle.innerHTML = animate;
  b = !b
}, 1000);

<svg width="500" height="500">
    <circle r="20" cy="20" cx="20" fill="#ce3400">
          <animateTransform  
          attributeName="transform" 
          type="translate" 
          values="0;460;0"
          dur="3s"
          repeatCount="indefinite"/>
    </circle>
</svg>

.dateInput-day,
.dateInput-month {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}

<form class="dateInput">
  <input type="number" class="dateInput-day">
  <input type="number" class="dateInput-month">
</form>

.card1 {
  width: 239px;
  height: 360px;
  border-radius: 10px;
  border: 2px solid rgb(42, 42, 42);
  background-color: red;
  position: relative;
  cursor: pointer;
}

.card1::before {
  content: "";
  position: absolute;
  width: 239px;
  border-radius: 10px;
  background-color: green;
}

.card1:hover::before {
  height: 360px;
}

<div class="place">
  <div class="card1"></div>
</div>