Please align new tasks to the left under the form in the to-do list

Question

Please align new tasks to the left under the form in the to-do list

My current project involves creating a to-do list using jQuery and centering everything on the page with text-align: center in the CSS file. However, I am facing an issue with left-aligning newly added list items below the form.

The JavaScript section of my code is provided below (I suspect this is where modifications need to be made), but you can also check out my CodePen for the HTML and CSS files.

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // Appends specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // Clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() prevents default event from occurring, e.stopPropagation() prevents event from bubbling up, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

javascript jquery html css

Answer 1

Answer №1

Here is a simple snippet to achieve the desired alignment:

.item {
  text-align: left;
}

This code snippet demonstrates how it works:

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // appends specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() stops default event, e.stopPropagation() blocks event bubbling, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  color: #666;
  background: linear-gradient(to left, #DA4453, #89216B);
}

.container {
  padding: 30px;
  padding-top: 10px;
  width: 300px;
  margin: 0 auto;
  margin-top: 40px;
  background: white;
  border-radius: 5px;
}

form {
  display: inline-block;
}

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 15em;
  color: #666;
}

.button {
  display: inline-block;
  box-shadow: inset 0px 1px 0 0 #fff;
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  background-color: #c00;
  font-size: 0.7em;
  font-family: Arial;
  font-weight: bold;
  border-radius: 0.33em;
  padding: 0.5em 0.9em;
  text-shadow: 0 1px #fff;
  text-align: center;
}

.button:hover {
  cursor: pointer;
  opacity: .8;
}

.item {
  text-align: left;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="stylesheet.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <h2>To Do</h2>
    <form name="checkListForm">
      <input type="text" name="checkListItem" />
    </form>
    <div class="button">Add</div>
    <br>
    <div class="list"></div>
  </div>
</body>

</html>

To add some margin-top to the first item, consider using the :first-of-type pseudo-class:

.item:first-of-type {
  margin-top: 20px;
}

This addition can be demonstrated below:

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // appends specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() stops default event, e.stopPropagation() blocks event bubbling, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  color: #666;
  background: linear-gradient(to left, #DA4453, #89216B);
}

.container {
  padding: 30px;
  padding-top: 10px;
  width: 300px;
  margin: 0 auto;
  margin-top: 40px;
  background: white;
  border-radius: 5px;
}

form {
  display: inline-block;
}

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 15em;
  color: #666;
}

.button {
  display: inline-block;
  box-shadow: inset 0px 1px 0 0 #fff;
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  background-color: #c00;
  font-size: 0.7em;
  font-family: Arial;
  font-weight: bold;
  border-radius: 0.33em;
  padding: 0.5em 0.9em;
  text-shadow: 0 1px #fff;
  text-align: center;
}

.button:hover {
  cursor: pointer;
  opacity: .8;
}

.item {
  text-align: left;
}

.item:first-of-type {
  margin-top: 20px;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="stylesheet.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <h2>To Do</h2>
    <form name="checkListForm">
      <input type="text" name="checkListItem" />
    </form>
    <div class="button">Add</div>
    <br>
    <div class="list"></div>
  </div>
</body>

</html>

Answer 2

Here is a simple snippet to achieve the desired alignment:

.item {
  text-align: left;
}

This code snippet demonstrates how it works:

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // appends specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() stops default event, e.stopPropagation() blocks event bubbling, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  color: #666;
  background: linear-gradient(to left, #DA4453, #89216B);
}

.container {
  padding: 30px;
  padding-top: 10px;
  width: 300px;
  margin: 0 auto;
  margin-top: 40px;
  background: white;
  border-radius: 5px;
}

form {
  display: inline-block;
}

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 15em;
  color: #666;
}

.button {
  display: inline-block;
  box-shadow: inset 0px 1px 0 0 #fff;
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  background-color: #c00;
  font-size: 0.7em;
  font-family: Arial;
  font-weight: bold;
  border-radius: 0.33em;
  padding: 0.5em 0.9em;
  text-shadow: 0 1px #fff;
  text-align: center;
}

.button:hover {
  cursor: pointer;
  opacity: .8;
}

.item {
  text-align: left;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="stylesheet.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <h2>To Do</h2>
    <form name="checkListForm">
      <input type="text" name="checkListItem" />
    </form>
    <div class="button">Add</div>
    <br>
    <div class="list"></div>
  </div>
</body>

</html>

To add some margin-top to the first item, consider using the :first-of-type pseudo-class:

.item:first-of-type {
  margin-top: 20px;
}

This addition can be demonstrated below:

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // appends specified element as last child of target element
    $('.list').append('<div class="item">' + toAdd + '</div>');
    // clears input box after clicking 'add'
    $('input[name=checkListItem]').val('');
  });

  $('input[name=checkListItem]').keypress(function(e) {
    if (e.which == 13) {
      $('.button').click();
      // e.preventDefault() stops default event, e.stopPropagation() blocks event bubbling, and return false does both
      return false;
    }
  });

  $(document).on('click', '.item', function() {
    $(this).remove();
  });
});

body {
  text-align: center;
  background: #dfdfdf;
  font-family: Helvetica;
  color: #666;
  background: linear-gradient(to left, #DA4453, #89216B);
}

.container {
  padding: 30px;
  padding-top: 10px;
  width: 300px;
  margin: 0 auto;
  margin-top: 40px;
  background: white;
  border-radius: 5px;
}

form {
  display: inline-block;
}

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 15em;
  color: #666;
}

.button {
  display: inline-block;
  box-shadow: inset 0px 1px 0 0 #fff;
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  background-color: #c00;
  font-size: 0.7em;
  font-family: Arial;
  font-weight: bold;
  border-radius: 0.33em;
  padding: 0.5em 0.9em;
  text-shadow: 0 1px #fff;
  text-align: center;
}

.button:hover {
  cursor: pointer;
  opacity: .8;
}

.item {
  text-align: left;
}

.item:first-of-type {
  margin-top: 20px;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="stylesheet.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <h2>To Do</h2>
    <form name="checkListForm">
      <input type="text" name="checkListItem" />
    </form>
    <div class="button">Add</div>
    <br>
    <div class="list"></div>
  </div>
</body>

</html>

Answer 3

Answer №2

After incorporating this CSS code into your project, it effectively resolved the issue:

.items { 
  text-align: center;
  margin-left: 20px;
}

You have the flexibility to adjust the margin to meet your specific needs.

Answer 4

After incorporating this CSS code into your project, it effectively resolved the issue:

.items { 
  text-align: center;
  margin-left: 20px;
}

You have the flexibility to adjust the margin to meet your specific needs.

Answer 5

Answer №3

To align text to the left in a list, you can utilize the following CSS code:

.list { text-align: left; }

Answer 6

To align text to the left in a list, you can utilize the following CSS code:

.list { text-align: left; }

Please align new tasks to the left under the form in the to-do list

Answer №1

Answer №2

Answer №3

Similar questions

Managing the grouping of values from an HTML form by key becomes a challenge when input fields can be dynamically added or removed

Could someone clarify why EventEmitter leads to issues with global variables?

HTML5 coding can be enhanced by applying unique CSS rules for alignment purposes

I am encountering unexpected issues with the functionality of img srcset and sizes

Transfer a term to a different division - JavaScript Object Model

Copy and paste content from Outlook, Word, or any Office software directly into the embedded browser

The hidden inner div fades away within the confines of a trapezoid-shaped container

Ways to show text on a donut chart when hovering with the mouse

Reset all divs to their default state except for the one that is currently active using jQuery

Create a basic cache within an AngularJS service to store data retrieved from HTTP requests, ensuring that the cache returns an object

Vue 3 + Vite: The router path was not found

Mastering special characters in JavaScript: The usage of the "/" character

Implementing phone verification code delivery using ReactJS and Twilio client: Step-by-step guide

Tips for preserving CSS styling following a hover event

Progressing with Jquery AJAX sequentially

Utilize Javascript to acquire the AspNet.ApplicationCookie

What is the best approach for optimizing CSS changes across multiple pages in WordPress?

Having difficulty converting the navbar into a horizontal layout

The json_decode function is returning a NULL value even though the input JSON

Error: Attempting to access the 'filter' property of an undefined value is not permitted in React. This issue has caused an undefined error