For this class, you will be enhancing your Gallery Of Horns to allow users to click on an image and display it as a modal.
Time Estimate
For each feature, estimate the time it will take, and record your start and finish times:
Stretch Goal: Fuzzy search
Overview Read the challenge overview.
Video Watch the class video.
Demonstration Explore the sample problems.
Challenges Navigate to the javascript folder within your data-structures-and-algorithms repository.
git checkout -b filter.npm run get-challenge 03.npm test 03.Submission When all tests pass, create a PR from your branch to the main branch.
xs, s, md, lg represent the number of columns displayed on various screen sizes.filter runs on an array, returning a new array based on a specified condition.forEach, map, and filter on an array of numbers and an array of objects.Example:
let arr = [1, 2, 3, 4, 5, 6];
let family = [
{
name: "John",
species: "Person"
},
{
name: "Rosie",
species: "Dog",
},
{
name: "Geno",
species: "Dog"
}
]
function addThemUp(value, idx) {
console.log(value);
return value * idx;
}
// forEach just runs for each element
let forEachArray = arr.forEach(addThemUp)
console.log('forEach', forEachArray);
// map runs for each element, creates
// a new array based on what's returned
// always the same size as the original
let mappedArray = arr.map(addThemUp);
console.log('Mapped', mappedArray);
// filter runs for each element, creates
// a new array based on what's returned
// based on a condition
let filterArray = family.filter((value, idx) => {
if (value.species === "Person") { return true; }
});
console.log("Filtered", filterArray);
useState hook for form input.Example:
function ResponsiveAutoExample() {
const [name, setName] = useState('');
function handleChange(event) {
let search = event.target.value;
setName(search);
let names = ["John", "Cathy", "Zach", "Allie"];
let found = names.filter( (value) => {
return value === search;
})
console.log(found);
}
return (
<>
<h1>Welcome, {name}</h1>
<input onChange={handleChange} />
<Container>
<Row>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
<Col sm={3}>sm=4</Col>
</Row>
</Container>
</>
);
}
export default ResponsiveAutoExample;
haveBirthday passed from parent to child.Example:
// Parameters:
// Name - String
function sayHello(name) {
console.log(`Hello, ${name}!`);
}
function sayHey(name) {
console.log(`Hey there, ${name}`);
}
// Parameters:
// person - String
// greetingFunction - Function
// Functions can be passed in as arguments, which means
// they are "1st Class Citizens"
function greet(person, greetingFunction) {
greetingFunction(person);
}
greet("John", sayHello);
greet("Cathy", sayHey);
/*
what actually happens in react...
1. const content = App();
1. props = { name:"Zach", age:25,
handleBirthday: haveBirthday }
2. const childContent = Child( props );
3. Child will return that div
4. App will return the div it got from Child
2. Append content to div with id of "root"
function App() {
function haveBirthday() {
console.log("hooray");
}
return (
<Child name="Zach", age=25, handleBirthday={haveBirthday} />
);
}
function Child(props) {
props.handleBirthday();
return (
<div>{props.name}</div>
)
}
*/
App.jsx:
import { useState } from 'react'
import Header from './components/Header.jsx';
import Footer from './components/Footer.jsx';
import People from './components/People.jsx';
import database from './assets/family.json';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
const [people, setPeople] = useState(database);
function voteFor(person) {
console.log('People', people);
// Iterate the people array and find "person"
let newPeople = people.map( (obj, idx) => {
// Increase their vote count
if( obj.name === person ) {
obj.votes++;
return obj;
}
return obj;
});
console.log("newPeople", newPeople);
// Update State
setPeople(newPeople);
console.log(people);
}
return (
<main>
<Header title="Our Family!" members={people.length} />
<People list={people} handleVote={voteFor} />
<Footer content="Copyright 2023: John and the 301's" />
</main>
)
}
export default App;
People.jsx:
import React from 'react';
import Person from './Person.jsx';
function People(props) {
return (
<>
{props.list.map( (person,index) =>
<Person
key={index}
name={person.name}
hair={person.hair}
votes={person.votes}
handleVote={props.handleVote}
/>
)}
</>
)
}
export default People;
Person.jsx:
import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
function Person( props ) {
function vote() {
// Call a method in the parent that does the voting...
props.handleVote(props.name);
}
return (
<Card style=>
<Card.Img variant="top" src="https://placehold.co/100x100" />
<Card.Body>
<Card.Title>{props.name}</Card.Title>
<Card.Text>
Votes: {props.votes}
</Card.Text>
<Button onClick={vote} variant="primary">Vote for {props.name}</Button>
</Card.Body>
</Card>
);
}
export default Person;
Statement on why this topic matters as it relates to what I’m studying in this module:
The spread operator and passing functions between components are essential for precise state management.
.map() return?
.map() function.keykey?
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4];
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { bar: 'baz', y: 13 };
const combinedObject = { ...obj1, ...obj2 };
increment function in the parent component where the state is located, which is used to update the state.props.method.this.props.method to call the method and trigger actions like updating the state in the parent component.Retrospectives are a critical part of Agile, and typically take the form of meetings held by a team at the end of a sprint cycle. To get us acclimated to that process, we will use the format of a retrospectives to guide today’s reflection.
This article gives a nice overview to the role of retrospectives.
Thinking about each of your assignments for the day, reflect on:
Almost 2/3rds of the population will avoid having to publicly speak. So how do you overcome the fear and step into your personal and professional growth?
Here are two articles that will help you understand the science behind the fear and approaches to take when feeling anxious about presenting:
Conquering Stage Fright The Science Behind Public Speaking
Assignment
Write about two things that you will implement to improve your anxiety when giving a presentation.
I will prepare my material in advance and practice out loud but
I should also understand that too much practice can still be harmful and give up trying to be perfect and know that what I have is enough and that it is ok to make mistakes.