WP

WP-Recall

Yworld Prime Designer
Дополнение к PrimeForum

WP

WP-Recall

Yworld PF Motivation
Дополнение к PrimeForum

WP

WP-Recall

Prime Yworld PRO
Дополнение к PrimeForum

Список Todo с использованием jQuery и Bootstrap 4

Простой Todo лист на Bootstrap 4 и jQuery будет полезен при ведении небольших задач, но достаточно прост и удобен в использовании и реализации.
Собственно вот все, что необходимо для этого.

HTML

<!-- Nav -->
<nav class="navbar navbar-inverse">
  <div class='container'>
    <span class="navbar-brand">Todos</span>
  </div>
</nav>

<!-- Main -->
<div class="main container rounded p-3 mt-3">
  <form class="form-group mb-5">
    <input type="text" id="input" class="form-control mb-2" placeholder="What do you want to do?">
    <label for="#input"><em>Press <code>Return</code> to save</em></label>
  </form>
  <div class="cards">
    <div class="card">
      <div class="card-block">
        <button id="delete" type="button" class="btn btn-link float-right">❌</button>
        <button id="done" type="button" class="btn btn-link float-right mr-3">✔️</button>
        <p class="card-title lead">Learn React</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <button id="delete" type="button" class="btn btn-link float-right">❌</button>
        <button id="done" type="button" class="btn btn-link float-right mr-3">✔️</button>
        <del><p class="card-title lead">Write HTML in my JavaScript</p></del>
      </div>
    </div>
  </div>
</div>
<footer class="footer">
  <div class="container">
      <a href="" onclick="localStorage.removeItem('cards')">🔴 Reset</a>
  </div>
</footer>

CSS

html {
  position: relative;
  min-height: 100vh;
  font-size: 16px;
}

body {
  height: 100%;
  margin-bottom: 60px;
  background: linear-gradient(to bottom, #8e9eab, #eef2f3);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body > .container {
  padding-top: 60px;
}

.navbar-brand {
  font-size: 2rem;
}

.main {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid whitesmoke;
}

input[type="text"] {
  font-size: 1.25rem;
  height: 3rem;
}

input[type="text"]:focus {
  border-color: gray;
}

label {
  color: white;
}

.card {
  background: whitesmoke;
}

.card {
 transition: border-color ease-in-out 150ms;
}

.card:hover {
  border: 1px solid gray;
}

.btn-link {
  transition: all 200ms ease-in-out;
}

.btn-link:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, .75);
  cursor: pointer;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.footer .container a {
  color: red;
  transition: all 200ms ease-in-out;
}

.footer .container a:hover {
  text-decoration: none;
  color: rgba(255, 0, 0, 0.75);
}

JS

// Remove the default cards if cards are present in the localStorage object
if (localStorage.cards) {
  $('.cards').children().remove();
  $('.cards').append(JSON.parse(localStorage.getItem('cards')));
}

// Delete the existing cards and add the new cards
// Simpler than pushing/splicing an array
const setStorage = () => {
  localStorage.removeItem('cards');
  localStorage.setItem('cards', JSON.stringify($('.cards').html()));
};

// Wrap or unwrap the card title in del tags for a strikeout effect
$('.cards').on('click', '#done', () => {
  if ($(event.target).next().is($('del'))) {
    $(event.target).next().children().unwrap();
    setStorage();
  } else {
    $(event.target).next().wrap('<del></del>');
    setStorage();
  }
});

// Delete the selected card and update localStorage
$('.cards').on('click', '#delete', () => {
  $(event.target).offsetParent().remove();
  setStorage();
});

// Append new card on submit and update localStorage
$('form').on('submit', (event) => {
  event.preventDefault();
  const title = $('input').val();
  const card = `
    <div class="card">
      <div class="card-block">
        <button id="done" type="button" class="btn btn-link float-right">❌</button>
        <button id="delete" type="button" class="btn btn-link float-right mr-3">✔️</button>
        <p class="card-title lead">${title}</p>
      </div>
    </div>
  `;
  $('.cards').append(card);
  // Reset the form input field
  $('form').trigger('reset');
  setStorage();
});

К сожалению живой пример достаточно затруднительно мне тут показать, так как будут некоторые конфликты с установленным тут на сайте, придется скрином.
Bootstrap 4 TODO

Автор этого варианта Todo – Adam Fields

5

Автор публикации: Игорь logo

111 публикаций 100500 Идей :)

Весь спектр SEO услуг, реклама, продвижение в социальных сетях. Изготовление сайтов.

Обратится в PM Отзывы Подписаться

Ответить