title: REACT creating a basic application where I can set a value
body: <p>I am very new to REACT and I followed a tutorial where I create a generic app where you can increase / decrease the value.</p>
  <p>the html:</p>
  <pre><code>&lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Montserrat:400,400i,700&quot;&gt;
    &lt;!-- Code by Angela Delise  
   https://codepen.io/angeladelise/pen/zYKpRqE
   --&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>the css:</p>
  <pre><code>/*   color variables */
  $clr-negative: #ff1744;
  $clr-positive: #2abf77;
  $clr-gray100: #f0f7f8;
  $clr-gray200: #cfd8dc;
  $clr-gray300: #a7b7be;
  $clr-gray400: #6b7e86;
  $clr-gray500: #425a65;
  
  /*   border radius */
  $radius: 0.2rem;
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .app {
    font-family: Montserrat, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 100vh;
    background-color: $clr-gray100;
    color: $clr-gray500;
  }
  
  h1 {
    font-size: 6rem;
  }
  
  .button__wrapper {
    display: flex;
    gap: 1rem;
  
    &amp; &gt; * {
      border: none;
      background-color: white;
      box-shadow: 0px 0px 10px $clr-gray200;
      font-weight: bold;
      font-size: 2rem;
      color: inherit;
      border-radius: 50%;
      outline: none;
      height: 4rem;
      width: 4rem;
      cursor: pointer;
      transition: background-color 250ms ease-in-out, transform 50ms ease-in-out;
  
      &amp;:hover {
        background-color: $clr-gray200;
      }
  
      &amp;:active {
        transform: scale(0.9);
      }
  
      &amp;:focus {
        box-shadow: 0 0 0 3px $clr-gray500;
      }
    }
  }
  
  .negative {
    color: $clr-negative;
    animation: pulse 500ms ease-in-out;
  }
  
  .positive {
    color: $clr-positive;
    animation: pulse 500ms ease-in-out;
  }
  
  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }
  </code></pre>
  <p>JS:</p>
  <pre><code>const { useState } = React;
  
  function App() {
    const [count, setCount] = useState(0);
  
    return (
      &lt;div className=&quot;app&quot;&gt;
        {
          // if else statement to determine color of the counter
        }
        &lt;h1 className={count &gt; 0 ? &quot;positive&quot; : count &lt; 0 ? &quot;negative&quot; : null}&gt;
          {count}
        &lt;/h1&gt;
        &lt;div className=&quot;button__wrapper&quot;&gt;
          &lt;button onClick={() =&gt; setCount(count - 1)}&gt;-&lt;/button&gt;
          &lt;button onClick={() =&gt; setCount(count + 1)}&gt;+&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>
  <p>I modify/build from this code and add a text box where I can enter my own value from where it will start from  and then have an additional button that I can click to assign that value.</p>
  <p>I am not entirely sure on how to implement this feature</p>