Merge pull request 4GeeksAcademy#90 from dsilva06/01.3-building-a-layout

01.3 building a layout

Author: tommygonzaleza

exercises/01.3-building-a-layout/README.md

@@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=5Z12IWd4CI8"
 
 Let's practice a little bit more about using JSX for creating HTML.
 
-Now we have another object that is just a bit more complex than the last one.
+Now we have another object that's a bit more complex than the last one.
 
 Are you ready? 😃
 

exercises/01.3-building-a-layout/app.jsx

@@ -12,8 +12,9 @@ const data = {
 },
 };
 
-let content = <img src={data.image} />;
-
+let content = (
+<img src={data.image} />
+);
 /**
  * define the variable 'content' here and fill it with the
  * needed code to render the bootstrap card

exercises/01.3-building-a-layout/solution.hide.jsx

@@ -0,0 +1,32 @@
+import React from "react"; //Main React.js library
+import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
+
+const data = {
+image: "../../.learn/assets/Dylan.png?raw=true",
+cardTitle: "Bob Dylan",
+cardDescription:
+"Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter, author, and artist who has been an influential figure in popular music and culture for more than five decades.",
+button: {
+url: "https://en.wikipedia.org/wiki/Bob_Dylan",
+label: "Go to wikipedia",
+},
+};
+
+let content = (
+<div className="card m-5">
+<img alt="Card image cap" src={data.image} className="card-img-top" />
+<div className="card-body">
+<h5 className="card-title">{data.cardTitle}</h5>
+<p className="card-text">{data.cardDescription}</p>
+<a href={data.button.url} className="btn btn-primary">
+{data.button.label}
+</a>
+</div>
+</div>
+);
+/**
+ * define the variable 'content' here and fill it with the
+ * needed code to render the bootstrap card
+ **/
+
+ReactDOM.render(content, document.querySelector("#myDiv"));