CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
RobC
RobC

Reputation: 147

Text box to display updated text and save on button click

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.

Am I able to achieve this with just HTML or will I need to implement JS to make this work?

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;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="libs/moment.min.js"></script>  
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>

  <div class="container">

    <!-- Timeblocks go here -->
   
    <!-- 9am -->
   <div class="row">
      <div class='col-2 hour'> 9am
      </div>
      <div class="col-8 description red border-bottom">
        <input class="border-0 form-control textarea bg-transparent" type="text" placeholder="Default input">
      </div>
      <div class="col-2 saveBtn">
        <button type="submit" class="btn btn-primary mb-2">Save</button>
     </div>
    </div>
 
 


    <!-- 10am -->
    <div class="row">
        <div class='col-2 hour'> 10am
        </div>
        <div class="col-8 description red">
        </div>
        <div class="col-2 saveBtn">
        </div>
      </div>

      <!-- 11am -->
    <div class="row">
        <div class='col-2 hour'> 11am
        </div>
        <div class="col-8 description red">
        </div>
        <div class="col-2 saveBtn">
        </div>
      </div>
    
      <!-- 12am -->
      <div class="row">
          <div class='col-2 hour'> 12pm
          </div>
          <div class="col-8 description red">
          </div>
          <div class="col-2 saveBtn">
          </div>
        </div>
      
    <!-- 1pm -->
    <div class="row">
        <div class='col-2 hour'> 1pm
        </div>
        <div class="col-8 description red">
        </div>
        <div class="col-2 saveBtn">
        </div>
      </div>
    
      <!-- 2pm -->
      <div class="row">
          <div class='col-2 hour'> 2pm
          </div>
          <div class="col-8 description red">
          </div>
          <div class="col-2 saveBtn">
          </div>
        </div>
  
        <!-- 3pm -->
      <div class="row">
          <div class='col-2 hour'> 3pm
          </div>
          <div class="col-8 description red">
          </div>
          <div class="col-2 saveBtn">
          </div>
        </div>
      
        <!-- 4pm -->
        <div class="row">
            <div class='col-2 hour'> 4pm
            </div>
            <div class="col-8 description red">
            </div>
            <div class="col-2 saveBtn">
            </div>
          </div>

           <!-- 5pm -->
        <div class="row">
            <div class='col-2 hour'> 5pm
            </div>
            <div class="col-8 description red">
            </div>
            <div class="col-2 saveBtn">
            </div>
          </div>


</body>

</html>

Upvotes: 1

Views: 967

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Demo: jsFiddle DEMO

HTML

All the HTML you need

<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>

JavaScript

We'll use Window.localStorage to save the data so that the user can exit or refresh the page.

Create a 24h to AM/PM converter:

const ampm = h => (h%12||12)+(h<12?'AM':'PM');

Use Window.localStorage to read (and store) your LS Object in the Browser memory.

const LS = JSON.parse(localStorage.scheduler||'{}'); // String is now an Object

Create and store the HTML template as JS String

const template_schedule = h => `<div class="Schedule">
    <div class="Schedule-time">${ampm(h)}</div>
    <textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
    <div class="Schedule-save">SAVE</div>
  </div>`;

and append that string into the DOM using Element.insertAdjacentHTML given a start from and end to hour:

for (let h=from; h<=to; h++) {
  EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}

Now the fun part.
Save on textarea blur!
The textarea can be blurred by clicking outside of the textarea - on the "SAVE" element or anywhere else. So it'll work in every case. (Show the transparent "SAVE" text by using CSS :focus and the adjacend sibling combinator +)

const save = ev => {
  const h = ev.target.getAttribute('data-h');  // Get the hour
  LS[h] = ev.target.value;                     // Update Object 
  localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};

EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
  el.addEventListener('blur', save);
});

Live example:

Since StackOverflow sandboxes the live-snippet iframe and the localStorage will not work - head to this jsFiddle DEMO

And here's the SO-Snippet for completeness sake:

const from = 9;   // use 24h format here
const to   = 17;  // use 24h format here

// Use window.localStorage to retrieve and store your data object as string
const LS = JSON.parse(localStorage.scheduler||'{}'); // now an Object

const EL_scheduler = document.querySelector('.Scheduler');

const ampm = h => (h%12||12)+(h<12?'AM':'PM');

const template_schedule = h => `<div class="Schedule">
    <div class="Schedule-time">${ampm(h)}</div>
    <textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
    <div class="Schedule-save">SAVE</div>
  </div>`;

// Populate Scheduler
for (let h=from; h<=to; h++) {
  EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h))
}

// Logic to save the data:
// On textarea blur Event - save the data by reading the data-h value
const save = ev => {
  const h = ev.target.getAttribute('data-h');  // Get the hour
  LS[h] = ev.target.value;                     // Update Object 
  localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};

EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
  el.addEventListener('blur', save);
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;}

body {font: 16px/1.4 sans-serif; color:#555;}
h1, h3 {text-align:center; font-weight:300;}

.Scheduler {
  width: calc(100% - 40px);
  max-width: 500px;
  margin: 1em auto;
}
.Schedule {
  border-top: 1px dashed #aaa;
  display: flex;
  padding: 2px 0;
}
.Schedule > *{
  padding: 0.5em 0.8em;
}
.Schedule-time {
  width: 70px;
  text-align: right;
}
.Schedule-desc {
  flex: 1;
  font: inherit;
  min-height: 70px;
  resize: vertical;
  background: #eee;
  border: none;
  border-right: 1px solid #555;
}
.Schedule-desc:focus {
  outline: none;
  background: #cbe8ef;
}
.Schedule-desc:focus+.Schedule-save{
  color: #fff; /* Show the SAVE text on textarea :focus */
}
.Schedule-save {
  color: transparent;
  background: #06AED5;
  border-radius: 0 1em 1em 0;
  display: flex;
  align-items: center;
  user-select: none;
}
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>

Upvotes: 2

Related Questions