'Goal: make a daily calendar that takes text input. How can I use Jquery/Javascript to utilize functional textboxes and a save button?

I need to create a calendar with 9am - 5pm time slots in which I can save tasks for each hour that will still be present when I reload the page. My current thought process:

  • Build the layout with HTML (including the 8 time slots and save button)
  • Utilize jquery/Javascript to make the textboxes able to take text and make the save button functional to store the inputted text in local storage

Issues: I can see the save button is functional by console.log but the text only updates in the console after I reload the page not when I click the button. Only the text from the first hour time slot gets logged to the console even though I can see the save button for the other hours is functional (in terms of console.log('hello')

Should I be trying to store all the text input into an array?

I am very new to web development so I am sorry if my code has terrible mistakes.

// Declare variables
var saveButton = document.querySelector('.btn')
var input = $('.input').val()
console.log(input)


// Assign saveTasks function to button
$('.btn').click(function () {
 saveTasks()
 console.log('hello')
})

// saveTasks function
function saveTasks() {
 localStorage.setItem("task", JSON.stringify(input))
}
<!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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <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="./assets/css/style.css" />
    <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 id="calendar">
      <ul >
       <li><div class="time">9:00AM</div>
         <input class="input" type="text" value="" placeholder="Event"></input>
         <input type="button" value="Save" class="btn"></input>
        </li>
        <li><div class="time">9:00AM</div>
          <input class="input" type="text" value="" placeholder="Event"></input>
          <input type="button" value="Save" class="btn"></input>
         </li>
        

      
      </ul>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="./assets/js/script.js"></script>
  </body>
</html>
javascripthtmljquery


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions