I am working with a udemy.com video and have posted this question with no response so I am posting here to see if i can get some insight into my issue. I am using Lit-element 2.0rc and working on building a Personal phonebook app.
The scope of the project is that I have a form that can be called as a popup when the add a contact link is clicked. I have it set up with the properties for the popup and the button click is working. What is not working at the moment is the popup itself as I still have the form visible on my page and I am not sure how to make it disappear so that the form can be called through the popup property. I would like to have someone look at my code and let me know if there is anything that I need to change so that the form remains hidden until the button is clicked to bring it up as a popup here is the code I am working with
App.js
import {LitElement, html} from 'lit-element';
import SideMenu from './SideMenu.js';
import ContentArea from './ContentArea.js';
class PhoneBook extends LitElement{
constructor(){
super();
this.popupOpen = false;
}
togglePopup(){
console.log('clicked button');
console.log(this.popupOpen);
this.popupOpen = !this.popupOpen;
console.log(this.popupOpen);
this.requestUpdate();
}
render(){
return html `
<style>
.main-page{
display: grid;
grid-template-columns: 250px 1fr;
}
</style>
<div class="main-page">
<side-menu .togglePopup="${this.togglePopup}"></side-menu>
<content-area popupOpen="${this.popupOpen}" .togglePopup="${this.togglePopup}">
</content-area>
</div>
`;
}
}
customElements.define('phone-book', PhoneBook)
Sidemenu.js
import {LitElement, html} from 'lit-element'
export default class SideMenu extends LitElement{
constructor(){
super();
}
static get properties(){
return{
togglePopup: Function
}
}
render(){
return html `
<style>
@import './css/global.css';
#side-menu{
background: #323759;
height: 100vh;
padding: 50px 25px
}
.logo{
text-align:center;
}
.logo img{
width: 100px;
}
.title{
font-weight: 700;
color: #ccced7;
margin: 1rem 0;
}
#side-menu nav a {
color: #ccced7;
text-decoration: none;
text-transform: capitalize;
display: block;
padding: 10px 10px 10px 0;
}
#side-menu nav a span.icon{
padding: 10px 10px 10px 0;
}
</style>
<section id="side-menu">
<div class="logo"><img src="../images/logo.png"></div>
<div class="menu">
<div class="title">Contacts</div>
<nav>
<a href="#" @click="${this.togglePopup}"><span class="icon">+</span>Add
Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
</nav>
</div>
</section>
`;
}
}
customElements.define('side-menu', SideMenu)
contentArea.js
import {LitElement, html} from 'lit-element';
import ContactsList from '../components/ContactsList.js';
import FavoritesList from '../components/FavoritesList';
import FormPopup from '../components/FormPopup';
export default class ContentArea extends LitElement{
constructor(){
super();
}
static get properties(){
return{
popupOpen: Boolean,
togglePopup: Function
}
}
render(){
return html `
<style>
@import './css/global.css';
#content-area{
background: #fcfdff;
padding: 50px 80px;
}
</style>
<section id="content-area">
<form-popup .popupOpen="${this.popupOpen}" .togglePopup="${this.togglePopup}">
</form-popup>
<favorites-list></favorites-list>
<contacts-list></contacts-list>
</section>
`;
}
}
customElements.define('content-area', ContentArea)
Formpopup.js
import {LitElement, html} from 'lit-element'
import ContactsList from '../components/ContactsList.js'
import FavoritesList from '../components/FavoritesList'
export default class FormPopup extends LitElement{
constructor(){
super();
}
static get properties(){
return{
popupOpen: Boolean
}
}
render(){
return html `
<style>
@import './css/global.css';
.form-popup{
background: #2b304c;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
transition: all .4s ease-in-out;
opacity: 0
}
.form-popup.active{
visibility: visible;
opacity: 1;
}
form{
width: 400px;
background: white;
padding: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
h2{
font-size: 1.4rem;
font-weight: 500;
grid-column: 1/5;
}
.form-group{
padding: 0;
}
label{
font-size: .7rem;
background: white;
position: relative;
top: 7px;
display: inline-block;
}
input[type="text"]{
padding: 10px;
display: block;
width: 100%;
}
.first-name{
grid-column: 1/3;
}
.last-name{
grid-column: 3/5;
}
.address-1{
grid-column: 1/5;
}
.address-2{
grid-column: 1/5;
}
.city{
grid-column: 1/3
}
.button{
justify-self: end;
grid-column: 4/5;
}
.button button{
cursor: pointer;
padding: 10px 25px;
background: #1e5799; /* Old browsers */
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10-
25,Safari5.1-6 */
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); /* W3C, IE10+,
FF16+, Chrome26+, Opera12+, Safari7+ */
border: 1px solid rgba(0, 0, 0, .1);
color: white;
border-radius: 5px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 1)
}
.close-btn{
position: absolute;
z-index: 3;
right: 30px;
top: 0;
font-size: 2rem;
padding: 20px;
color:white;
}
.close-btn svg{
width: 24px;
height: 24px;
}
</style>
<section className="form-popup${(this.popupOpen) ? ' active' : ''}">
<form>
<div class="close-btn" @click="${this.togglePopup}"><svg
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-
prefix="fas"
data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img"
viewBox="0 0 352 512"><path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-
22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28
75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-
12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28
12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176
322.72l100.07
100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19
0-44.48L242.72 256z"/></svg></div>
<h2>Add a new contact</h2>
<div class="form-group first-name">
<label for="first_name">First Name</label>
<input type="text" name="first_name">
</div>
<div class="form-group last-name">
<label for="first_name">Last Name</label>
<input type="text" name="last_name">
</div>
<div class="form-group address-1">
<label for="first_name">Address #1</label>
<input type="text" name="address_1">
</div>
<div class="form-group address-2">
<label for="first_name">Address #2</label>
<input type="text" name="address_2">
</div>
<div class="form-group city">
<label for="first_name">City</label>
<input type="text" name="city">
</div>
<div class="form-group state">
<label for="first_name">State</label>
<input type="text" name="state">
</div>
<div class="form-group zipcode">
<label for="first_name">zipcode</label>
<input type="text" name="zipcode">
</div>
<div class="form-group button">
<button type="submit">Add</button>
</div>
</form>
</section>
`;
}
}
customElements.define('form-popup', FormPopup)
Again what is suppose to happen is the hidden form can be called by clicking the add a new contact link and that is not happening because the form it’s self is still showing on the page and not being hidden as it should be .
Thanks for any help that is given.
