# week-3-GMNO --- ## Description (Ina) A to-do-list web app that - Is easy to use - Allows you to organise your lists by adding cards for each section, i.e. shopping list, monday, morning routine --- ## Project board (James)  --- ## Project board info - Logged user stories as issues - Assigned the estimate labels on tasks - Tried to start with TDD but found it was difficult to conceptualise at this point. - To start broke down the steps into checkboxes on issue cards --- ## Original Plan (Kat)  --- - Zoom has a really cool feature called whiteboard ^ - We started with the user stories functionality then added in our own. - We wanted to create multiple todo lists for different days --- ## Accessibility - Could navigate through the page with the keyboard. We had to create an event listener for when the user was on the checkbox and enter was pressed. - We had issues with semantic HTML elements and when tested with a screen reader it wouldn't read the correct labels --- ## Testing & Functionality (James) As a team we found the TDD aproach challenging at first. We knew the features we wanted to create so we started by creating them first. After the code review sat down and implemented the TDD methods from the workshop to get a better undertanding of this aproach. This is something we should have prioritied from the start --- ```Javascript // test 2. check to see if items are checked off the list test("Checking an entry marks it as complete", t =>{ let checkbox = document.getElementsByClassName(`checkbox-${1}`); checkbox[0].checked = true; t.equal(document.querySelector(".checkbox-1").checked, true); }); ``` - test to mimic the behaviour of a user performing different actions ---  - We can check that passing a given input into our tests returns the expected output --- ## What we are proud of (Ina) - Completing the project as a team - Card Feature, can organise lists into groups - Use of JS to add the list and cards Dynamically --- ## What we struggled with (Vatsal) - Focusing on Testing - Technical errors i.e. live share not working, laptop crashing - Prioritising tasks --- ## How we could Improve (Kat) - Focus on learing odjectives - Start with just the basics and work up --- ## Personal Learning Objectives --- ## Ina - get the functionality of to-do list right - get comfortable with testing. --- - new Date() ```javascript= // Show Date const date = document.querySelector('#date'); let options = { weekday:'long', month:'short', day:'numeric'}; let today = new Date(); date.textContent = today.toLocaleDateString("en-GB", options); ``` --- ## Vatsal - Local storage saves data "forever" even if you close the browser. Session storage deletes data once the browser is closed. - Local storage API: ```javascript= localStorage.setItem("name", "Peter"); localStorage.getItem("name")); localStorage.removeItem("name"); ``` --- ### Local Storage ```javascript= addCardButton.addEventListener('click', () => { createCard(); let onCardTitle = document.querySelector(`.card_title${index}`); let cardTitleStr = onCardTitle.textContent; storeCard(cardTitleStr); cardTitle.value = ""; //cardTitle is defined globally }); ``` --- ```javascript= function storeCard(title) { cardObj = { "cardTitle": title, }; //save objects to local storage (as JSON strings) let cardInfo = "card" + index + "Info"; localStorage.setItem(cardInfo, JSON.stringify(cardObj)); test("add card title `asdf` to the local storage card Obj", t => { actual = JSON.parse(localStorage.getItem(cardInfo)).cardTitle; expected = "asdf"; t.equal(actual, expected); }); } ``` --- ## James - We used the template element which was rendered when our create card function was called. - This was done by creating a dom fragment of the template. - After cloning the template we added an event listener to then add and remove cards. ---  --- ## Kat - Work well in a project that was completely remote - Use CSS grid successfully - Understand how to use templates - get to grips with testing! - Understand what I need to do as scrum master --- ### CSS Grid ```css= .card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); grid-gap: 1.5rem; } ``` Auto-fit, it will place as many items as possible with the min value 14rem --- ## Stretch User Stories - User can Add and remove cards to organise their to-do lists (achieved) - Filter out completed to-dos from my list so that I can focus on what's left to do - Work on the local storage (started) --- ## Key Learning Takeaways - CSS Grid - TESTING TESTING TESTING!!! - Fully Remote working --- #### Any Questions? ---