By the end of this module, you will create an application that displays images and information of horned animals. This application will allow you to filter the beasts by the number of horns and choose your favorite beast.
In this class, your goal is to use the JSON file provided to display the title, image, and description of each horned beast in your application.
Resources data.json
Time Estimate
For each of the features listed below, make an estimate of the time it will take you to complete the feature and record your start and finish times for that feature:
Number and name of feature:
Estimate of time needed to complete:
Start time:
Finish time:
Actual time needed to complete:
Add this information to your README.
Feature #1: Display Images
Feature #2: Allow Users to Favorite Individual Beasts
Feature 3: Bootstrap
Overview Read this overview.
Video Watch the video for this class from the demo playlist.
Demonstration Look through these sample problems.
Challenges Navigate to the javascript folder within your data-structures-and-algorithms repository.
git checkout -b map.npm run get-challenge 02.npm test 02 to execute the tests in this file for this challenge.npx jest --version in your terminal. Filename typos can make things break!npm test (without a challenge number) to run all of the tests for every code challenge file assignment during the course all at once. This can get “noisy,” but it’s an opportunity to get a view of your overall progress.Submission When you have completed the entire set of code challenges and all tests pass, create a pull request from your current branch to the main branch and merge it into main.
You will be able to see a test coverage report in GitHub on the Actions tab of your data-structures-and-algorithms repository. It should match what you saw on your terminal in the above steps. Your graders will be looking at this as well.
Submit a link to your pull request.
let numbers = [1, 2, 3, 4, 5];
// .forEach does not return anything
let forEachSquares = numbers.forEach((value, idx) => {
let s = value * value;
return s;
})
// .map returns a new array of the same size as the original array.
// That array contains whatever gets returned;
let squares = numbers.map((value, idx) => {
// An array of bunnies
return "Bunnies";
// An array of numbers based on the original array
// return value * value;
});
console.log(squares);
**Family Demo**
**main.jsx**
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
**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 people from './assets/family.json';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<main>
<Header title="Our Family!" members={people.length} />
<People list={people} />
<Footer content="Copyright 2023: John and the 301's" />
</main>
);
}
export default App;
**Header.jsx**
import React from 'react';
function Header(props) {
return (
<header>
<h1>{props.title}</h1>
<div>We have {props.members} family members for you to meet</div>
</header>
);
}
export default Header;
**People.jsx**
import React from 'react';
import Person from './Person.jsx';
function People(props) {
return (
<>
{props.list.map((person, index) => {
return <Person key={index} name={person.name} hair={person.hair} />;
})}
</>
);
}
export default People;
**PeopleClean.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} />
))}
</>
);
}
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) {
const [color, setColor] = useState("grey");
const [visible, setVisible] = useState("block");
function vote() {
setVisible("none");
}
return (
// <Card style=}>
<Card.Img variant="top" src="https://placehold.co/100x100" />
<Card.Body>
<Card.Title>{props.name}</Card.Title>
<Card.Text>
Hair Color: {props.hair}
</Card.Text>
<Button onClick={vote} variant="primary">
Vote for {props.name}
</Button>
</Card.Body>
</Card>
);
}
export default Person;
**Footer.jsx**
import React from 'react';
function Footer(props) {
return (
<footer>
<div>{props.content}</div>
</footer>
);
}
export default Footer;
Important Notes:
index.html.app.jsx.app.css from main.jsx.export default function app() or at the bottom export default app;.import userstate from react is outside vs import header from './component/header.jsx'.key={index}.Bookmark and Review
Statement on why this topic matters as it relates to what I’m studying in this module:
Understanding React’s component lifecycle and effective state management is crucial as it influences how I handle real-time data updates.
constructor, static getDerivedStateFromProps, render, componentDidMount.constructor method is called.componentDidMount, render, constructor, componentWillUnmount, React Updates
constructorrendercomponentDidMountcomponentWillUnmountReact UpdatescomponentDidMount do?
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.
What did I learn today?
Did you know that 85% of all jobs come from networking? Most jobs that are listed online are already filled through employee connections or internally with current staff. Read
Check out your local tech event calendars (GeekWire, Startup Digest, Meetup, and Eventbrite) to see where to get connected in the tech scene to generate opportunities through connections. Moreover, staying connected to the tech news/scene locally and nationally shows that you’re invested in this space and proves to the world that you are taking your career in tech seriously. Staying in the ‘know” gives you insight into who is growing or reducing their workforce, who are the influencers, and it gives you wonderful talking points with other techies while networking. Use your imagination and find a meetup that matches your interests.
Share with your classmates a list of 5 different off-campus networking opportunities that interest you. Check out what other folks found!