text: console.log('App.js is running...');
  
  // only render the subtitle and p tag if the subtitle actually exist - logical and operator
  // if options.length > 0 "Here are your options" else "No options"
  
  const app = {
      title: 'Indecision App',
      subTitle: 'This is some info',
      options: []
  };
  
  
  const onFormSubmit = (e) => {
      e.preventDefault();
      
      const option = e.target.elements.option.value;
  
      if (option) {
          app.options.push(option);
          e.target.elements.option.value = '';
          renderApp();
      }
  };
  
  //create all button "Remove All" button above list
  //on-click -> wipe the array -> rerender
  const removeAll = () => {
      app.options = [];
      renderApp();
  };
  
  const onMakeDecision = () => {
      const randomNum = Math.floor(Math.random() * app.options.length);
      const option = app.options[randomNum];
      alert(option);
  };
  
  const renderApp = () => {
      // Does app.subTitle exist? && Then show the paragraph. 
      const template = (
          <div>
              <h1>{app.title}</h1>
              {app.subTitle && <p>{app.subTitle}</p>}
              <p>{app.options.length > 0 ? 'here are your options' : 'No options'}</p>
              <button disabled={app.options.length === 0} onClick={onMakeDecision}>What schould I do?</button>
              <button onClick={removeAll}>Remove All</button>
              <ol>
                  {
                      app.options.map((option) => <li key={option}>{option}</li>)
                  }
              </ol>
              <form onSubmit={onFormSubmit}>
                  <input type="text" name="option"/>
                  <button>Add Option</button>
              </form>
          </div>
      );
      ReactDOM.render(template, appRoot);
  };
  
  const appRoot = document.getElementById('app');
  renderApp();
  