review about lesson_1

src/components/animalFacts.js

@@ -0,0 +1,51 @@
+import { animals } from '../js/animals'
+import React from 'react';
+
+const title = '';
+const showBackground = true;
+const background = (
+  <img 
+    className="background"
+    alt="ocean"
+    src="/images/ocean.jpg"
+  />
+);
+const images = [];
+
+for (const animal in animals) {
+  images.push(
+    <img
+      key={animal}
+      className="animal"
+      alt={animal}
+      src={animals[animal].image}
+      aria-label={animal}
+      role="button"
+      onClick={displayFact}
+    />
+  );
+}
+
+function displayFact(e) {
+  const animalName = e.target.alt;
+  const facts = animals[animalName].facts;
+  const randomIndex = Math.floor(Math.random() * facts.length);
+  const funFact = facts[randomIndex];
+
+  const factElement = document.getElementById('fact');
+  factElement.innerHTML = funFact;
+}
+
+const animalFacts = (
+  <div>
+    <h1>{title || 'Click an animal for a fun fact'}</h1>
+    {showBackground && background}
+    <div className="animals">
+      {images}     
+    </div>
+     <p id="fact"></p>
+  </div>    
+);
+
+
+export default animalFacts;

src/css/styles.css

@@ -0,0 +1,63 @@
+div {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+}
+
+.background {
+	position: absolute;
+	margin-top: 80px;
+	width: 95%;
+	z-index: 1
+}
+
+#fact {
+	display: flex;
+	justify-content: center;
+  position: fixed;
+	margin-top: 100px;
+	width: 90%;
+	font-size: 3vw;
+	z-index: 2;
+}
+
+.animals {
+	display: flex;
+	flex-direction: row;
+	position: fixed;
+	width: 85%;
+	margin-top: 240px;
+	z-index: 2
+}
+
+.animal {
+	width: 33.3%;
+}
+
+@media only screen and (max-width: 670px) {
+	.animals {
+		margin-top: 180px;
+	}
+
+  h1 {
+    font-size: 24px;
+  }
+}
+
+@media only screen and (max-width: 390px) {
+	.animals {
+		margin-top: 150px;
+	}
+}
+
+@media only screen and (max-width: 300px) {
+	.animals {
+		margin-top: 130px;
+	}
+}
+
+@media only screen and (max-width: 200px) {
+	.animals {
+		margin-top: 120px;
+	}
+}

src/index.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import './css/styles.css';
+import animalFacts from './components/animalFacts';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    {animalFacts}
   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();

src/js/animals.js

@@ -0,0 +1,14 @@
+export const animals = {
+  dolphin: {
+    image: '/images/dolphin.jpg',
+    facts: ['Dolphins have been shown to give distinct names to each other!', 'Dolphins are known to display their own culture!', 'Dolphins have two stomachs!']
+  },
+  lobster: {
+    image: '/images/lobster.jpg',
+    facts: ['Lobsters taste with their legs!', 'Lobsters chew with their stomachs!', 'Lobsters can live as long as 100 years.']
+  },
+  starfish: {
+    image: '/images/starfish.jpg',
+    facts: ['Starfish can have up to 40 arms!', 'Starfish have no brain and no blood!', 'Starfish can regenerate their own arms!']
+  }
+};