# Wingspan <img style="width: 500px;" src="https://hackmd.io/_uploads/BymFssWuh.png" /> --- ## Scrum Facilitator- Zak - the usual - **1** total standups - and oh i sometimes updated GH project board  --- ## QA- Beth 🐩 Husky 🇬🇷 Cypress  --- ## UX- Cameo - wrangled with Styled Components - FONTS - why!? - tool tip hovering & conditional css ♥️ --- ## DevOps- Taha 🫥 - Removed Vercel after day one <div style="width:100%;height:0;padding-bottom:183%;position:relative;"><iframe src="https://giphy.com/embed/Kxy2YUDnDrvdxVsVb8" width="30%" height="30%" style="position:absolute;" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div> --- ## Code Snippet- Zak ```css const StyledHeader = styled.header` display: flex; justify-content: space-between; align-items: center; height: 200px; background-color: #b9d4c7; background-image: linear-gradient(to right, #b9d4c7, #5372a0); `; ``` --- ### Code Snippet- Beth Add bird to bird cage ```javascript= const [birdcage, setBirdcage] = useState([]); const handleAdd = (bird, quant) => { setBirdcage((prevCage) => { const birdInCage = prevCage.find((b) => b.id === bird.id); if (birdInCage) { return prevCage.map((b) => b.id === bird.id ? { ...b, quantity: b.quantity + quant } : b ); } else { return [...prevCage, { ...bird, quantity: quant }]; } }); }; ``` --- ```handleAdd``` is passed as a prop to ```<BirdCard/>``` --- ## Code Snippet- Cameo ``` javascript useEffect(() => { const storedCage = JSON.parse(window.localStorage.getItem("birdcage")); setBirdcage(storedCage ? storedCage : []); }, []); useEffect(() => { window.localStorage.setItem("birdcage", JSON.stringify(birdcage)); }, [birdcage]); useEffect(() => { setTotalBirdCount(() => { return birdcage.reduce((total, bird) => { return total + bird.quantity; }, 0); }); }, [birdcage]); ``` --- ## Code Snippet- Taha ```javascript const [selectedHabitat, setSelectedHabitat] = useState(null); const allHabitats = allBirdsData .flatMap((bird) => bird.habitat.split(", ")); const uniqueHabitats = [...new Set(allHabitats)] .filter((habitat) => habitat !== "forest, grassland, wetland"); ``` --- ## KSBs - K3 The roles and responsibilities of the project life-cycle within your organisation, and your role - S2 Develop effective user interfaces - S5 Conduct a range of test types - B4 Works collaboratively with a wide range of people in different roles, internally and externally, with a positive attitude to inclusion & diversity --- ## Demo