title: Text box to display updated text and save on button click
body: <p>I am trying to set-up this daily scheduler. I am working on the 9am slot. What I want to happen is for the person to click on the box to the right of the time, make a text input, and click the save button to save the text and display it in that time slot. </p>
  
  <p>Am I able to achieve this with just HTML or will I need to implement JS to make this work?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1;
  }
  
  textarea{
    background: transparent;
    border: none;
    resize: none;
    color: #000000;
    border-left: 1px solid black;
    padding: 10px;
  }
  
  .jumbotron {
    text-align: center;
    background-color: transparent;
    color: black;
    border-radius: 0;
    border-bottom: 10px solid black;
  }
  
  .description{
    white-space: pre-wrap;
  }
  
  .time-block{
    text-align: center;
    border-radius: 15px;
  }
  
  .row {
    white-space: pre-wrap;
    height: 80px;
    border-top: 1px solid white;;
  }
  
  .hour {
    background-color: #ffffff;
    color: #000000;
    border-top: 1px dashed #000000;
  }
  
  .past {
    background-color: #d3d3d3;
    color: white;
  }
  
  .present {
    background-color: #ff6961;
    color: white;
  }
  
  .future {
    background-color: #77dd77;
    color: white;
  }
  
  .saveBtn {
    border-left: 1px solid black;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #06AED5;
    color: white;
  }
  
  .saveBtn i:hover {
    font-size: 20px;
    transition: all .3s ease-in-out;
  }
  
  .gray {
    background-color: gray;
  }
  .red {
    background-color: red;
  
  }
  .green{
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" /&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap" rel="stylesheet" /&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="libs/moment.min.js"&gt;&lt;/script&gt;  
    &lt;title&gt;Work Day Scheduler&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header class="jumbotron"&gt;
      &lt;h1 class="display-3"&gt;Work Day Scheduler&lt;/h1&gt;
      &lt;p class="lead"&gt;A simple calendar app for scheduling your work day&lt;/p&gt;
      &lt;p id="currentDay" class="lead"&gt;&lt;/p&gt;
    &lt;/header&gt;
  
    &lt;div class="container"&gt;
  
      &lt;!-- Timeblocks go here --&gt;
     
      &lt;!-- 9am --&gt;
     &lt;div class="row"&gt;
        &lt;div class='col-2 hour'&gt; 9am
        &lt;/div&gt;
        &lt;div class="col-8 description red border-bottom"&gt;
          &lt;input class="border-0 form-control textarea bg-transparent" type="text" placeholder="Default input"&gt;
        &lt;/div&gt;
        &lt;div class="col-2 saveBtn"&gt;
          &lt;button type="submit" class="btn btn-primary mb-2"&gt;Save&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
   
   
  
  
      &lt;!-- 10am --&gt;
      &lt;div class="row"&gt;
          &lt;div class='col-2 hour'&gt; 10am
          &lt;/div&gt;
          &lt;div class="col-8 description red"&gt;
          &lt;/div&gt;
          &lt;div class="col-2 saveBtn"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!-- 11am --&gt;
      &lt;div class="row"&gt;
          &lt;div class='col-2 hour'&gt; 11am
          &lt;/div&gt;
          &lt;div class="col-8 description red"&gt;
          &lt;/div&gt;
          &lt;div class="col-2 saveBtn"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;!-- 12am --&gt;
        &lt;div class="row"&gt;
            &lt;div class='col-2 hour'&gt; 12pm
            &lt;/div&gt;
            &lt;div class="col-8 description red"&gt;
            &lt;/div&gt;
            &lt;div class="col-2 saveBtn"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        
      &lt;!-- 1pm --&gt;
      &lt;div class="row"&gt;
          &lt;div class='col-2 hour'&gt; 1pm
          &lt;/div&gt;
          &lt;div class="col-8 description red"&gt;
          &lt;/div&gt;
          &lt;div class="col-2 saveBtn"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;!-- 2pm --&gt;
        &lt;div class="row"&gt;
            &lt;div class='col-2 hour'&gt; 2pm
            &lt;/div&gt;
            &lt;div class="col-8 description red"&gt;
            &lt;/div&gt;
            &lt;div class="col-2 saveBtn"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
    
          &lt;!-- 3pm --&gt;
        &lt;div class="row"&gt;
            &lt;div class='col-2 hour'&gt; 3pm
            &lt;/div&gt;
            &lt;div class="col-8 description red"&gt;
            &lt;/div&gt;
            &lt;div class="col-2 saveBtn"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        
          &lt;!-- 4pm --&gt;
          &lt;div class="row"&gt;
              &lt;div class='col-2 hour'&gt; 4pm
              &lt;/div&gt;
              &lt;div class="col-8 description red"&gt;
              &lt;/div&gt;
              &lt;div class="col-2 saveBtn"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
             &lt;!-- 5pm --&gt;
          &lt;div class="row"&gt;
              &lt;div class='col-2 hour'&gt; 5pm
              &lt;/div&gt;
              &lt;div class="col-8 description red"&gt;
              &lt;/div&gt;
              &lt;div class="col-2 saveBtn"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>