JaySebagh - React UI Components

Project-I-Social-Card/social-card/src/App.js

@@ -1,22 +1,13 @@
 import React from 'react';
 import './App.css';
+import HeaderContainer from './components/HeaderComponents/HeaderContainer';
+import CardContainer from './components/CardComponents/CardContainer'
 
 const App = () => {
   return (
     <div>
-      <h3>Welcome to React Social Card!</h3>
-      <p>
-        Begin by exploring the `components` directory. You'll notice we have a
-        few files that we've already included in there to get you started right
-        away building components. You'll need to make sure you include your
-        components that you build in this file to watch your app come to life
-      </p>
-      <p>
-        <strong>
-          Don't forget to `default export` your components and import them here
-          inside of this file in order to make them work.
-        </strong>
-      </p>
+      <HeaderContainer />
+      <CardContainer />
     </div>
   );
 };

Project-I-Social-Card/social-card/src/components/CardComponents/Card.css

@@ -1 +1,27 @@
 /* All styles for your Card Components live here */
+
+.banner {
+    width: 575px;
+    border-radius: 5px;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.source {
+    color : lightgray;
+}
+
+.card {
+    width: 550px;
+    padding-left: 10px;
+
+}
+
+.card-container {
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    width: 575px;
+    margin-left: 60px;
+}

Project-I-Social-Card/social-card/src/components/CardComponents/CardBanner.js

@@ -1,2 +1,13 @@
 import React from 'react';
 import './Card.css';
+import banner from './banner.png'
+
+const CardBanner = () => {
+    return (
+        <div>
+            <img className="banner" src={banner} alt="Banner" />
+        </div>
+    )
+}
+
+export default CardBanner

Project-I-Social-Card/social-card/src/components/CardComponents/CardContainer.js

@@ -1,2 +1,15 @@
 import React from 'react';
 import './Card.css';
+import CardBanner from './CardBanner';
+import CardContent from './CardContent';
+
+const CardContainer = () => {
+    return (
+        <div className="card-container">
+            <CardBanner />
+            <CardContent />
+        </div>
+    )
+}
+
+export default CardContainer

Project-I-Social-Card/social-card/src/components/CardComponents/CardContent.js

@@ -1,2 +1,15 @@
 import React from 'react';
 import './Card.css';
+
+const CardContent = () => {
+    return (
+        <div className="card">
+            <p className="bold">Get Started with React</p>
+            <p>React makes it painless to create interactive UIs. Design simple views for</p>
+            <p>each state in your application.</p>
+            <p className="source">reactjs.org</p>
+        </div>
+    )
+}
+
+export default CardContent

Project-I-Social-Card/social-card/src/components/HeaderComponents/Header.css

@@ -1 +1,21 @@
 /* All styles for your header Components live here */
+.account {
+    display: flex;
+}
+
+.handle-date {
+    margin-left: 10px;
+    color: lightgray;
+}
+
+.logo {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+}
+
+.header {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}

Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContainer.js

@@ -1,2 +1,13 @@
 import React from 'react';
 import './Header.css';
+import HeaderContent from './HeaderContent';
+
+const HeaderContainer = () => {
+    return (
+        <div>
+            <HeaderContent />
+        </div>
+    )
+}
+
+export default HeaderContainer;

Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderContent.js

@@ -1,2 +1,15 @@
 import React from 'react';
 import './Header.css';
+import HeaderTitle from './HeaderTitle';
+import ImageThumbnail from './ImageThumbnail'
+
+const HeaderContent = () => {
+    return (
+        <div className="header">
+            <HeaderTitle />
+            <ImageThumbnail />
+        </div>
+    )
+}
+
+export default HeaderContent

Project-I-Social-Card/social-card/src/components/HeaderComponents/HeaderTitle.js

@@ -1,2 +1,20 @@
 import React from 'react';
 import './Header.css';
+
+const HeaderTitle = () => {
+    return (
+        <div>
+            <div className="account">
+                <p>Lambda School</p>
+                <p className="handle-date">@lambdaSchool - 26 Jan</p>
+            </div>
+            <div>
+                <p>Let's learn React by building simple interfaces with components. Don't try to</p>
+                <p>overthink it, just keep it simple and have fun. Once you feel comfortable using</p>
+                <p>components you are well on your way to mastering React!</p>
+            </div>
+        </div>
+    )
+}
+
+export default HeaderTitle

Project-I-Social-Card/social-card/src/components/HeaderComponents/ImageThumbnail.js

@@ -1,2 +1,13 @@
 import React from 'react';
 import './Header.css';
+import LambdaLogo from './LambdaLogo.png'
+
+const ImageThumbnail = () => {
+    return (
+        <div>
+            <img className="logo" src={LambdaLogo} alt="Lambda Logo" />
+        </div>
+    )
+}
+
+export default ImageThumbnail

Project-I-Social-Card/social-card/yarn.lock

@@ -3966,6 +3966,11 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
@@ -4247,6 +4252,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -5378,14 +5390,23 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0:
+prop-types@^15.5.10:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
@@ -5526,19 +5547,25 @@ react-dev-utils@^5.0.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-[email protected]:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
+react-dom@^16.4.0:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48"
+  integrity sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.13.4"
 
 react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-is@^16.8.1:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
+  integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
+
 [email protected]:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.4.tgz#d5c230e707918d6dd2d06f303b10f5222d017c88"
@@ -5584,14 +5611,15 @@ [email protected]:
   optionalDependencies:
     fsevents "^1.1.3"
 
-[email protected]:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
+react@^16.4.0:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
+  integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
   dependencies:
-    fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.0"
+    prop-types "^15.6.2"
+    scheduler "^0.13.4"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -5949,6 +5977,14 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+scheduler@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
+  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"

Project-II-Calculator/calculator/src/App.js

@@ -1,21 +1,11 @@
 import React from 'react';
 import './App.css';
+import CalculatorDisplay from './components/DisplayComponents/CalculatorDisplay'
 
 const App = () => {
   return (
     <div>
-      <h3>Welcome to React Calculator</h3>
-      <p>
-        We have given you a starter project. You'll want to build out your
-        components in their respective files, remove this code and replace it
-        with the proper components.
-      </p>
-      <p>
-        <strong>
-          Don't forget to `default export` your components and import them here
-          inside of this file in order to make them work.
-        </strong>
-      </p>
+      <CalculatorDisplay />
     </div>
   );
 };

Project-II-Calculator/calculator/src/components/ButtonComponents/ActionButton.js

@@ -1,2 +1,12 @@
 import React from 'react';
 import './Button.css';
+
+const ActionButton = props=> {
+    return (
+        <div>
+            <button className={props.buttonStyle}>{props.text}</button>
+        </div>
+    )
+}
+
+export default ActionButton

Project-II-Calculator/calculator/src/components/ButtonComponents/Button.css

@@ -0,0 +1,37 @@
+.number {
+    font-size: 40px;
+    width: 100px;
+    height: 100px;
+}
+
+.action {
+    font-size: 40px;
+    width: 300px;
+    height: 100px;
+}
+
+.symbol {
+    width: 100px;
+    height: 100px;
+    color: white;
+    background-color: maroon;
+    font-size: 40px;
+}
+
+.numrow {
+    display: flex;
+}
+
+.combine {
+    display: flex;
+}
+
+.final {
+    width: 400px;
+    margin-top: 30px;
+    display: inline-block;
+}
+
+.align {
+    text-align: center;
+}