card.js

import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
class MyElement extends LitElement {

  static get properties() {
    return {
        title: {
            type: String
        },
        location: {
            type: String
        },
        time:{
            type: String
        }
    }
  }
  constructor(){
    super();
    this.title = "Test Title";
    this.location = "Test Location";
    this.time = "Test Time";
  }
  
  static get styles() {
    return css`
    .card{
        padding: 20px;
        box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.38);
        border-radius: 30px;
    }
    .card > .title{
        font-weight: 500;
    }
    .card > .description{
        color: #bdbdbd;
    }
    `;
  }
  render() {
    return html`
      <div class="card">
        <p class="title">${this.title}</p>
        <p class="description">${this.location}</p>
        <p class="description">${this.time}</p>
      </div>
    `;
  }
}

window.customElements.define('plan-card', MyElement);

todo-list-litElement.js

import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
import './card.js'
class MyElement extends LitElement {

  static get properties() {
    return {
      list: {
        type: Array
      },
      title: {
        type: String
      },
      location: {
        type: String
      },
      time: {
        type: String
      }
    }
  }
  constructor(){
    super();
    this.list = [];
  }
  
  static get styles() {
    return css`.list{color: red}`;
  }

  click(){
    const data = {
      title: this.title,
      location: this.location,
      time: this.time
    }
    this.list = [...this.list, data];
  }

  changeTitle(e){
    this.title = e.target.value;
  }
  
  changeLocation(e){
    this.location = e.target.value;
  }

  changeTime(e){
    this.time = e.target.value;
  }

  render() {
    return html`
      <input @change=${this.changeTitle}/>
      <input @change=${this.changeLocation}/>
      <input @change=${this.changeTime}/>
      <button @click=${this.click}>Add</button>
      ${this.list.map(
        ({title,location,time})=> html`
        <plan-card title=${title} location=${location} time=${time} />
        `
        )}
    `;
  }
}

window.customElements.define('plan-form', MyElement);