diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 252ff26..f490470 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -1,18 +1,18 @@ // ReviewCard.js class ReviewCard extends HTMLElement { - // Called once when document.createElement('review-card') is called, or - // the element is written into the DOM directly as - constructor() { - super(); + // Called once when document.createElement('review-card') is called, or + // the element is written into the DOM directly as + constructor() { + super(); - let shadowEl = this.attachShadow({mode:'open'}); + let shadowEl = this.attachShadow({mode:"open"}); - let articleEl = document.createElement('article'); + let articleEl = document.createElement("article"); - let styleEl = document.createElement('style'); - styleEl.textContent = ` + let styleEl = document.createElement("style"); + styleEl.textContent = ` * { font-family: sans-serif; margin: 0; @@ -82,17 +82,17 @@ class ReviewCard extends HTMLElement { font-size: 12px; } `; - articleEl.append(styleEl); - shadowEl.append(articleEl); - this.shadowEl = shadowEl; - //attach event listener to each recipe-card - this.addEventListener('click', (event) => { - console.log(event.target); - console.log(event.target.data); - //Option 1: sending current data to second html page using localStorage (could also just store index) - sessionStorage.setItem('current', JSON.stringify(event.target.data)); - window.location.assign("./ReviewDetails.html"); - /* + articleEl.append(styleEl); + shadowEl.append(articleEl); + this.shadowEl = shadowEl; + //attach event listener to each recipe-card + this.addEventListener("click", (event) => { + console.log(event.target); + console.log(event.target.data); + //Option 1: sending current data to second html page using localStorage (could also just store index) + sessionStorage.setItem("current", JSON.stringify(event.target.data)); + window.location.assign("./ReviewDetails.html"); + /* //Option 2: sending current data to second html page using string query w/ url (currently not storing value) let reviewFields = window.location.search.slice(1).split("&"); for(let i = 0; i < reviewFields.length; i++) { @@ -103,10 +103,10 @@ class ReviewCard extends HTMLElement { console.log(value); // What you want to do with name and value... }*/ - }); - } + }); + } - /** + /** * Called when the .data property is set on this element. * * For Example: @@ -125,29 +125,29 @@ class ReviewCard extends HTMLElement { * "tags": string array * } */ - set data(data) { - // If nothing was passed in, return - if (!data) return; + set data(data) { + // If nothing was passed in, return + if (!data) return; - // Select the
we added to the Shadow DOM in the constructor - let articleEl = this.shadowEl.querySelector('article'); + // Select the
we added to the Shadow DOM in the constructor + let articleEl = this.shadowEl.querySelector("article"); - // setting the article elements for the review card + // setting the article elements for the review card - //image setup - let mealImg = document.createElement('img'); - mealImg.setAttribute('id', 'a-mealImg'); - mealImg.setAttribute('src',data['mealImg']); - mealImg.setAttribute('alt',data['imgAlt']); + //image setup + let mealImg = document.createElement("img"); + mealImg.setAttribute("id", "a-mealImg"); + mealImg.setAttribute("src",data["mealImg"]); + mealImg.setAttribute("alt",data["imgAlt"]); - //meal name setup - let mealLabel = document.createElement('label'); - mealLabel.setAttribute('id', 'a-mealName'); - mealLabel.setAttribute('class','meal-name'); - mealLabel.innerHTML = data['mealName']; + //meal name setup + let mealLabel = document.createElement("label"); + mealLabel.setAttribute("id", "a-mealName"); + mealLabel.setAttribute("class","meal-name"); + mealLabel.innerHTML = data["mealName"]; - //restaurant name setup -/* + //restaurant name setup + /* //review page link //giving it functionality to save the review card's info to session storage for loading the review page let reviewLink = document.createElement('a'); @@ -167,53 +167,53 @@ class ReviewCard extends HTMLElement { sessionStorage.setItem('currReview', JSON.stringify(currReview)); }); */ - let restaurantLabel = document.createElement('label'); - restaurantLabel.setAttribute('id', 'a-restaurant'); - restaurantLabel.setAttribute('class','restaurant-name'); - restaurantLabel.innerHTML = data['restaurant']; + let restaurantLabel = document.createElement("label"); + restaurantLabel.setAttribute("id", "a-restaurant"); + restaurantLabel.setAttribute("class","restaurant-name"); + restaurantLabel.innerHTML = data["restaurant"]; - //comment section setup (display set to none) - let comments = document.createElement('p'); - comments.setAttribute('id', 'a-comments'); - comments.style.display = 'none'; - comments.innerText = data['comments']; + //comment section setup (display set to none) + let comments = document.createElement("p"); + comments.setAttribute("id", "a-comments"); + comments.style.display = "none"; + comments.innerText = data["comments"]; - //other info: rating - let ratingDiv = document.createElement('div'); - ratingDiv.setAttribute('class', 'rating'); - let starsImg = document.createElement('img'); - starsImg.setAttribute('id', 'a-rating'); - starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg'); - starsImg.setAttribute('alt', data['rating'] +' stars'); - starsImg.setAttribute('num', data['rating']); - ratingDiv.append(starsImg); + //other info: rating + let ratingDiv = document.createElement("div"); + ratingDiv.setAttribute("class", "rating"); + let starsImg = document.createElement("img"); + starsImg.setAttribute("id", "a-rating"); + starsImg.setAttribute("src", "./source/assets/images/icons/"+data["rating"]+"-star.svg"); + starsImg.setAttribute("alt", data["rating"] +" stars"); + starsImg.setAttribute("num", data["rating"]); + ratingDiv.append(starsImg); - //added tags - let tagContainer = document.createElement('div'); - tagContainer.setAttribute('class', 'tag-container'); - tagContainer.setAttribute('id', 'a-tags'); - tagContainer.setAttribute('list', data['tags']); - if(data['tags']){ - for (let i = 0; i < data['tags'].length; i++) { - let newTag = document.createElement('label'); - newTag.setAttribute('class','tag'); - newTag.innerHTML = data['tags'][i] + " "; - tagContainer.append(newTag); - } - } + //added tags + let tagContainer = document.createElement("div"); + tagContainer.setAttribute("class", "tag-container"); + tagContainer.setAttribute("id", "a-tags"); + tagContainer.setAttribute("list", data["tags"]); + if(data["tags"]){ + for (let i = 0; i < data["tags"].length; i++) { + let newTag = document.createElement("label"); + newTag.setAttribute("class","tag"); + newTag.innerHTML = data["tags"][i] + " "; + tagContainer.append(newTag); + } + } - articleEl.append(mealImg); - articleEl.append(mealLabel); - //articleEl.append(reviewLink) - articleEl.append(restaurantLabel); - articleEl.append(ratingDiv); - articleEl.append(tagContainer); - articleEl.append(comments); + articleEl.append(mealImg); + articleEl.append(mealLabel); + //articleEl.append(reviewLink) + articleEl.append(restaurantLabel); + articleEl.append(ratingDiv); + articleEl.append(tagContainer); + articleEl.append(comments); - } + } - /** + /** * Called when getting the .data property of this element. * * For Example: @@ -232,39 +232,39 @@ class ReviewCard extends HTMLElement { * "tags": string array * } */ - get data() { + get data() { - let dataContainer = {}; + let dataContainer = {}; - // getting the article elements for the review card + // getting the article elements for the review card - //get image - let mealImg = this.shadowEl.getElementById('a-mealImg'); - dataContainer['mealImg'] = mealImg.getAttribute('src'); - dataContainer['imgAlt'] = mealImg.getAttribute('alt'); + //get image + let mealImg = this.shadowEl.getElementById("a-mealImg"); + dataContainer["mealImg"] = mealImg.getAttribute("src"); + dataContainer["imgAlt"] = mealImg.getAttribute("alt"); - //get meal name - let mealLabel = this.shadowEl.getElementById('a-mealName'); - dataContainer['mealName'] = mealLabel.innerHTML; + //get meal name + let mealLabel = this.shadowEl.getElementById("a-mealName"); + dataContainer["mealName"] = mealLabel.innerHTML; - //get comment section - let comments = this.shadowEl.getElementById('a-comments'); - console.log(comments); - dataContainer['comments'] = comments.innerText; + //get comment section + let comments = this.shadowEl.getElementById("a-comments"); + console.log(comments); + dataContainer["comments"] = comments.innerText; - //get other info: rating - let starsImg = this.shadowEl.getElementById('a-rating'); - dataContainer['rating'] = starsImg.getAttribute('num'); + //get other info: rating + let starsImg = this.shadowEl.getElementById("a-rating"); + dataContainer["rating"] = starsImg.getAttribute("num"); - //get restaurant name - let restaurantLabel = this.shadowEl.getElementById('a-restaurant'); - dataContainer['restaurant'] = restaurantLabel.innerHTML; + //get restaurant name + let restaurantLabel = this.shadowEl.getElementById("a-restaurant"); + dataContainer["restaurant"] = restaurantLabel.innerHTML; - //get tags - let tagContainer = this.shadowEl.getElementById('a-tags'); - dataContainer['tags'] = tagContainer.getAttribute('list').split(","); + //get tags + let tagContainer = this.shadowEl.getElementById("a-tags"); + dataContainer["tags"] = tagContainer.getAttribute("list").split(","); - return dataContainer; - } + return dataContainer; + } } -customElements.define('review-card', ReviewCard); +customElements.define("review-card", ReviewCard); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index a072e9f..189637b 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -1,127 +1,125 @@ //reviewDetails.js -import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js'; +import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js"; // Run the init() function when the page has loaded -window.addEventListener('DOMContentLoaded', init); +window.addEventListener("DOMContentLoaded", init); function init(){ - let main = document.querySelector('main'); - let reviews = getReviewsFromStorage(); - setupDelete(); - setupUpdate(); + setupDelete(); + setupUpdate(); } function setupDelete(){ - let deleteBtn = document.getElementById('delete'); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem('current')); - deleteBtn.addEventListener('click', function(){ - if(window.confirm("Are you sure you want to delete this entry?")){ - //delete function - if(current){ - console.log(current); - for(let i = 0; i < reviews.length; i++){ - console.log(reviews[i]); - if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){ - console.log("match found"); - reviews.splice(i,1); - saveReviewsToStorage(reviews); - sessionStorage.removeItem('current'); - window.location.assign("./index.html"); - break; - } - }; - } - } - }); + let deleteBtn = document.getElementById("delete"); + let reviews = getReviewsFromStorage(); + let current = JSON.parse(sessionStorage.getItem("current")); + deleteBtn.addEventListener("click", function(){ + if(window.confirm("Are you sure you want to delete this entry?")){ + //delete function + if(current){ + console.log(current); + for(let i = 0; i < reviews.length; i++){ + console.log(reviews[i]); + if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){ + console.log("match found"); + reviews.splice(i,1); + saveReviewsToStorage(reviews); + sessionStorage.removeItem("current"); + window.location.assign("./index.html"); + break; + } + } + } + } + }); } function setupUpdate(){ - let updateBtn = document.getElementById('update'); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem('current')); - let form = document.getElementById('update-food-entry'); - updateBtn.addEventListener('click', function(){ - //update function - if(current){ - console.log(current); - form.style.display = 'block'; - let tagContainer = document.getElementById('tag-container-form'); - console.log(document.querySelectorAll('#update-food-entry input')); + let updateBtn = document.getElementById("update"); + let reviews = getReviewsFromStorage(); + let current = JSON.parse(sessionStorage.getItem("current")); + let form = document.getElementById("update-food-entry"); + updateBtn.addEventListener("click", function(){ + //update function + if(current){ + console.log(current); + form.style.display = "block"; + let tagContainer = document.getElementById("tag-container-form"); + console.log(document.querySelectorAll("#update-food-entry input")); - //Set value of each input element to current's values - document.getElementById('mealImg').defaultValue = current['mealImg']; - document.getElementById('imgAlt').defaultValue = current['imgAlt']; - document.getElementById('mealName').defaultValue = current['mealName']; - document.getElementById('comments').textContent = current['comments']; - document.getElementById('rating-' + `${current['rating']}`).checked = true; - document.getElementById('restaurant').defaultValue = current['restaurant']; + //Set value of each input element to current's values + document.getElementById("mealImg").defaultValue = current["mealImg"]; + document.getElementById("imgAlt").defaultValue = current["imgAlt"]; + document.getElementById("mealName").defaultValue = current["mealName"]; + document.getElementById("comments").textContent = current["comments"]; + document.getElementById("rating-" + `${current["rating"]}`).checked = true; + document.getElementById("restaurant").defaultValue = current["restaurant"]; - if(current['tags']){ - for (let i = 0; i < current['tags'].length; i++) { - let newTag = document.createElement('label'); - newTag.setAttribute('class','tag'); - newTag.innerHTML = current['tags'][i] + " "; - newTag.addEventListener('click',()=> { - tagContainer.removeChild(newTag); - }); - tagContainer.append(newTag); - } - } + if(current["tags"]){ + for (let i = 0; i < current["tags"].length; i++) { + let newTag = document.createElement("label"); + newTag.setAttribute("class","tag"); + newTag.innerHTML = current["tags"][i] + " "; + newTag.addEventListener("click",()=> { + tagContainer.removeChild(newTag); + }); + tagContainer.append(newTag); + } + } - //Take formdata values as newData when submit - form.addEventListener('submit', function(){ - /* + //Take formdata values as newData when submit + form.addEventListener("submit", function(){ + /* * User submits the form for their review. * We create reviewCard and put in storage */ - let formData = new FormData(form); - let newData = {}; - for (let [key, value] of formData) { - console.log(`${key}`); - console.log(`${value}`); - if (`${key}` !== "tag-form") { - newData[`${key}`] = `${value}`; - } - } - newData['tags'] = []; + let formData = new FormData(form); + let newData = {}; + for (let [key, value] of formData) { + console.log(`${key}`); + console.log(`${value}`); + if (`${key}` !== "tag-form") { + newData[`${key}`] = `${value}`; + } + } + newData["tags"] = []; - let tags = document.querySelectorAll('.tag'); - for(let i = 0; i < tags.length; i ++) { - newData['tags'].push(tags[i].innerHTML); - tagContainer.removeChild(tags[i]); - } + let tags = document.querySelectorAll(".tag"); + for(let i = 0; i < tags.length; i ++) { + newData["tags"].push(tags[i].innerHTML); + tagContainer.removeChild(tags[i]); + } - for(let i = 0; i < reviews.length; i++){ - console.log(reviews[i]); - if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){ - console.log("match found"); - reviews.splice(i,1,newData); - saveReviewsToStorage(reviews); - sessionStorage.setItem('current', JSON.stringify(newData)); - break; - } - }; + for(let i = 0; i < reviews.length; i++){ + console.log(reviews[i]); + if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){ + console.log("match found"); + reviews.splice(i,1,newData); + saveReviewsToStorage(reviews); + sessionStorage.setItem("current", JSON.stringify(newData)); + break; + } + } - form.style.display = 'none'; + form.style.display = "none"; - }); + }); - let tagAddBtn = document.getElementById('tagAdd'); - tagAddBtn.addEventListener('click', ()=> { - let tagField = document.getElementById('tag-form'); - if (tagField.value.length > 0) { - let tagLabel = document.createElement('label'); - tagLabel.innerHTML = tagField.value; - tagLabel.setAttribute('class','tag'); - tagLabel.addEventListener('click',()=> { - tagContainer.removeChild(tagLabel); - }); + let tagAddBtn = document.getElementById("tagAdd"); + tagAddBtn.addEventListener("click", ()=> { + let tagField = document.getElementById("tag-form"); + if (tagField.value.length > 0) { + let tagLabel = document.createElement("label"); + tagLabel.innerHTML = tagField.value; + tagLabel.setAttribute("class","tag"); + tagLabel.addEventListener("click",()=> { + tagContainer.removeChild(tagLabel); + }); - tagContainer.append(tagLabel); - tagField.value = ''; - } - }); - } - }); + tagContainer.append(tagLabel); + tagField.value = ""; + } + }); + } + }); } diff --git a/source/assets/scripts/ReviewPage.js b/source/assets/scripts/ReviewPage.js index 2ff8d70..89cd440 100644 --- a/source/assets/scripts/ReviewPage.js +++ b/source/assets/scripts/ReviewPage.js @@ -1,13 +1,13 @@ // Run the init() function when the page has loaded -window.addEventListener('DOMContentLoaded', init); +window.addEventListener("DOMContentLoaded", init); function init() { - let result = sessionStorage.getItem('currReview') + let result = sessionStorage.getItem("currReview"); - let main = document.querySelector('main'); + let main = document.querySelector("main"); - main.innerHTML = result - let p = document.createElement('p') - p.innerHTML = JSON.parse(result)['comments'] - main.append(p) + main.innerHTML = result; + let p = document.createElement("p"); + p.innerHTML = JSON.parse(result)["comments"]; + main.append(p); } diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js index eab3ded..48fc891 100644 --- a/source/assets/scripts/localStorage.js +++ b/source/assets/scripts/localStorage.js @@ -2,7 +2,7 @@ * @returns {Array} An array of reviews found in localStorage */ export function getReviewsFromStorage() { - let result = JSON.parse(localStorage.getItem('reviews')) + let result = JSON.parse(localStorage.getItem("reviews")); if (result) { return result; } @@ -15,5 +15,5 @@ export function getReviewsFromStorage() { * @param {Array} reviews An array of reviews */ export function saveReviewsToStorage(reviews) { - localStorage.setItem('reviews', JSON.stringify(reviews)); + localStorage.setItem("reviews", JSON.stringify(reviews)); } diff --git a/source/assets/scripts/localStorage.test.js b/source/assets/scripts/localStorage.test.js index 9bf3c5f..bcb8300 100644 --- a/source/assets/scripts/localStorage.test.js +++ b/source/assets/scripts/localStorage.test.js @@ -1,4 +1,4 @@ -import {strict as assert} from "node:assert" +import {strict as assert} from "node:assert"; import {describe, it, beforeEach} from "mocha"; import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js"; @@ -40,7 +40,7 @@ describe("test app localStorage interaction", () => { "rating": i, "tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`] } - ) + ); saveReviewsToStorage(reviews); assert.deepEqual(getReviewsFromStorage(), reviews); } diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index e7f81f2..66aee13 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -1,29 +1,29 @@ // main.js -import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js'; +import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js"; // Run the init() function when the page has loaded -window.addEventListener('DOMContentLoaded', init); +window.addEventListener("DOMContentLoaded", init); function init() { - // Get the reviews from localStorage - let reviews = getReviewsFromStorage(); - // Add each reviews to the
element - addReviewsToDocument(reviews); - // Add the event listeners to the form elements - initFormHandler(); + // Get the reviews from localStorage + let reviews = getReviewsFromStorage(); + // Add each reviews to the
element + addReviewsToDocument(reviews); + // Add the event listeners to the form elements + initFormHandler(); } /** * @param {Array} reviews An array of reviews */ function addReviewsToDocument(reviews) { - let mainEl = document.querySelector('main'); - reviews.forEach(review => { - let newReview = document.createElement('review-card'); - newReview.data = review; - //TODO: want to append it to whatever the box is in layout - mainEl.append(newReview); - }); + let mainEl = document.querySelector("main"); + reviews.forEach(review => { + let newReview = document.createElement("review-card"); + newReview.data = review; + //TODO: want to append it to whatever the box is in layout + mainEl.append(newReview); + }); } @@ -33,86 +33,86 @@ function addReviewsToDocument(reviews) { */ function initFormHandler() { - //btn to create form (could be its own function?) - let createBtn = document.getElementById('create'); - createBtn.addEventListener('click', function(){ - window.location.assign('./CreatePage.html'); - }); + //btn to create form (could be its own function?) + let createBtn = document.getElementById("create"); + createBtn.addEventListener("click", function(){ + window.location.assign("./CreatePage.html"); + }); - //accessing form components - let tagContainer = document.getElementById('tag-container-form'); - let form = document.querySelector('form'); + //accessing form components + let tagContainer = document.getElementById("tag-container-form"); + let form = document.querySelector("form"); - form.addEventListener('submit', function(){ - /* + form.addEventListener("submit", function(){ + /* * User submits the form for their review. * We create reviewCard and put in storage */ - let formData = new FormData(form); - let reviewObject = {}; - for (let [key, value] of formData) { - console.log(`${key}`); - console.log(`${value}`); - if (`${key}` !== "tag-form") { - reviewObject[`${key}`] = `${value}`; - } - } - reviewObject['tags'] = []; + let formData = new FormData(form); + let reviewObject = {}; + for (let [key, value] of formData) { + console.log(`${key}`); + console.log(`${value}`); + if (`${key}` !== "tag-form") { + reviewObject[`${key}`] = `${value}`; + } + } + reviewObject["tags"] = []; - let tags = document.querySelectorAll('.tag'); - for(let i = 0; i < tags.length; i ++) { - reviewObject['tags'].push(tags[i].innerHTML); - tagContainer.removeChild(tags[i]); - } + let tags = document.querySelectorAll(".tag"); + for(let i = 0; i < tags.length; i ++) { + reviewObject["tags"].push(tags[i].innerHTML); + tagContainer.removeChild(tags[i]); + } - let newReview = document.createElement('review-card'); - newReview.data = reviewObject; + let newReview = document.createElement("review-card"); + newReview.data = reviewObject; - //TODO: want to append it to whatever the box is in layout - let mainEl = document.querySelector('main'); - mainEl.append(newReview); + //TODO: want to append it to whatever the box is in layout + let mainEl = document.querySelector("main"); + mainEl.append(newReview); - let storedReviews = getReviewsFromStorage(); - storedReviews.push(reviewObject); - saveReviewsToStorage(storedReviews); - document.getElementById("new-food-entry").reset(); - }); + let storedReviews = getReviewsFromStorage(); + storedReviews.push(reviewObject); + saveReviewsToStorage(storedReviews); + document.getElementById("new-food-entry").reset(); + }); - // DEV-MODE: for testing purposes - let clearBtn = document.querySelector('.danger'); - clearBtn.addEventListener('click', function() { - localStorage.clear(); - let mainEl = document.querySelector('main'); - while (mainEl.firstChild) { - mainEl.removeChild(mainEl.firstChild); - } - let deleteTags = document.querySelectorAll('.tag'); - for(let i = 0; i < deleteTags.length; i ++) { - tagContainer.removeChild(deleteTags[i]); - } + // DEV-MODE: for testing purposes + let clearBtn = document.querySelector(".danger"); + clearBtn.addEventListener("click", function() { + localStorage.clear(); + let mainEl = document.querySelector("main"); + while (mainEl.firstChild) { + mainEl.removeChild(mainEl.firstChild); + } + let deleteTags = document.querySelectorAll(".tag"); + for(let i = 0; i < deleteTags.length; i ++) { + tagContainer.removeChild(deleteTags[i]); + } - //clears reviews AS WELL as resets form - document.getElementById("new-food-entry").reset(); + //clears reviews AS WELL as resets form + document.getElementById("new-food-entry").reset(); - }); + }); - let tagAddBtn = document.getElementById('tagAdd'); - tagAddBtn.addEventListener('click', ()=> { - let tagField = document.getElementById('tag-form'); - if (tagField.value.length > 0) { - let tagLabel = document.createElement('label'); - tagLabel.innerHTML = tagField.value; - tagLabel.setAttribute('class','tag'); - tagLabel.addEventListener('click',()=> { - tagContainer.removeChild(tagLabel); - }); + let tagAddBtn = document.getElementById("tagAdd"); + tagAddBtn.addEventListener("click", ()=> { + let tagField = document.getElementById("tag-form"); + if (tagField.value.length > 0) { + let tagLabel = document.createElement("label"); + tagLabel.innerHTML = tagField.value; + tagLabel.setAttribute("class","tag"); + tagLabel.addEventListener("click",()=> { + tagContainer.removeChild(tagLabel); + }); - tagContainer.append(tagLabel); - tagField.value = ''; + tagContainer.append(tagLabel); + tagField.value = ""; - } - }); + } + }); }