diff --git a/solutions/day-5/src/App.css b/solutions/day-5/src/App.css new file mode 100644 index 0000000..9889721 --- /dev/null +++ b/solutions/day-5/src/App.css @@ -0,0 +1,181 @@ +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Montserrat:wght@100&family=Poppins:wght@300&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #c2e6f467; +} + +h2 { + text-transform: capitalize; +} + +.App, +.techCard { + flex-direction: column; + align-items: center; + justify-content: center; +} + +.App { + width: 100%; + display: flex; + padding: 16px 32px; + gap: 3em; +} + +.techCard { + background-color: #fff; + width: 80%; + border-radius: 15px; + padding: 32px; + height: 80vh; +} + +.tech, +.techCard { + display: flex; + gap: 2em; +} + +.sub h2 { + margin-bottom: 2rem; +} + +.card, +.sub { + display: flex; + width: 80%; +} + +.sub { + background-color: #c2e6f4; + height: 80vh; + justify-content: center; + align-items: center; + padding: 32px; + border-radius: .7em; + font-weight: 600; + text-align: center; +} + +.sub button, +.sub input { + height: 2.2rem; + border: 0; + outline: 0; + border-radius: 5px; +} + +.sub input { + width: 15rem; + margin: 2em .3em; + padding-left: 8px; +} + +.sub button { + background-color: #f37575; + color: #fff; + width: 20rem; +} + +.sub p { + font-size: 14px; + font-weight: 500; + margin: 1em; +} + +.card { + flex-direction: column; + justify-content: left; + align-items: flex-start center; + text-align: left; + padding: 32px 16px 10px; + margin: 10px auto; + background-color: #fff; + border-radius: 15px; +} + +.card .person { + width: 150px; + border-radius: 50%; +} + +.card .icon { + width: 1em; + align-items: center; +} + +.details h2, +.skills h2, +.sub h2 { + text-transform: uppercase; +} + +.skills h2 { + font-size: 18px; +} + +.details h2 { + font-size: 14px; + font-weight: 400; +} + +.details { + margin-top: 1em; + display: flex; + align-items: center; + gap: .3rem; +} + +.card p { + text-transform: capitalize; + font-size: 12px; + margin: 2em 0; +} + +.skills h2 { + margin-bottom: 1em; +} + +.card .skill { + background-color: #2acece; + outline: 0; + border: 0; + border-radius: 5px; + margin: 5px; + padding: 4px 8px; + color: #fff; +} + +.colorGen { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.color{ + display: flex; + justify-content: center; + align-items: center; + height: 50px; + width: 80%; + color: #fff; +} +.colorGen button { + background-color: #f37575; + color: #fff; + width: 10rem; + padding: 8px 32px; + outline: none; + border: none; + font-size: 20px; + border-radius: 10px; + +} \ No newline at end of file diff --git a/solutions/day-5/src/App.js b/solutions/day-5/src/App.js new file mode 100644 index 0000000..200c496 --- /dev/null +++ b/solutions/day-5/src/App.js @@ -0,0 +1,29 @@ +import './App.css'; +import ImgComp from './components/imgComp'; +import SubComp from './components/subComp'; +import UserCard from './components/userCardComp'; +import ColorGen from './components/colorGenComp'; +import person from './images/person.jpg'; +import pichtml from './images/htmlpng.png'; +import piccss from './images/csspng.png'; +import picjs from './images/jspng.png'; +import picreact from './images/reactpng.png'; + + +function App() { + return ( +
+ + + + +
+ ); +} + +export default App; diff --git a/solutions/day-5/src/App.test.js b/solutions/day-5/src/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/solutions/day-5/src/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/solutions/day-5/src/components/README.md b/solutions/day-5/src/components/README.md new file mode 100644 index 0000000..9c1cce4 --- /dev/null +++ b/solutions/day-5/src/components/README.md @@ -0,0 +1 @@ +// I DO NOT KNOW WHAT I AM DONING WRONG IN MY CODE. BUT ICAN'T SEE THE CHANGE OF BACKGROUND COLOR AFTER GIVING THE HEIGHT AND WIDTH TO THE COLOR CONTAINER \ No newline at end of file diff --git a/solutions/day-5/src/components/colorGenComp.js b/solutions/day-5/src/components/colorGenComp.js new file mode 100644 index 0000000..cc1b826 --- /dev/null +++ b/solutions/day-5/src/components/colorGenComp.js @@ -0,0 +1,27 @@ +import React from "react"; + +export default function ColorGen(props) { + // let numColor = prompt('Enter the number of colors you want:', 0); + let arr = Array(props.numColor).fill(0); + + let hexcolor = () => { + let color = ''; + let str = '0123456789abcdef'; + for (let i = 0; i < 6; i++) { + let hex = Math.floor(Math.random() * str.length ); + color += str[hex]; + } + return '#' + color; + } + + let sixColor = arr.map((i) =>
+

{ hexcolor()}

+
); + // console.log(hexcolor()); + + return ( +
+ {sixColor} +
+ ) +} \ No newline at end of file diff --git a/solutions/day-5/src/components/imgComp.js b/solutions/day-5/src/components/imgComp.js new file mode 100644 index 0000000..eb6d186 --- /dev/null +++ b/solutions/day-5/src/components/imgComp.js @@ -0,0 +1,17 @@ +import React from "react"; +let head =

front end technologies

+ + +export default function ImgComp(props){ + return ( +
+ {head} +
+ html + css + js + react +
+
+ ) +} \ No newline at end of file diff --git a/solutions/day-5/src/components/subComp.js b/solutions/day-5/src/components/subComp.js new file mode 100644 index 0000000..91a735f --- /dev/null +++ b/solutions/day-5/src/components/subComp.js @@ -0,0 +1,18 @@ +import React from "react"; + +export default function SubComp() { + return ( +
+
+

subscribe

+

Sign up with your eamil address to receive news and updates

+
+ + + +
+ +
+
+ ) +} \ No newline at end of file diff --git a/solutions/day-5/src/components/userCardComp.js b/solutions/day-5/src/components/userCardComp.js new file mode 100644 index 0000000..ef4114e --- /dev/null +++ b/solutions/day-5/src/components/userCardComp.js @@ -0,0 +1,22 @@ +import React from "react"; + +let skillset = ['HTML', 'CSS', 'Sass', 'JS', 'React', 'Node', 'MongoDB', 'Python', 'Flask', 'Django', 'NumPy', 'Pandas', 'Data Analysis', 'MYSQL', 'GraphQL', 'D3.js', 'Gatsby', 'Docker', 'Heroku', 'Git']; +let skills = skillset.map((skill) => ) + +export default function UserCard(props) { + return ( +
+ person +
+

asabeneh yeatayeh

+ icon +
+

senior developer, finland

+
+

skills

+ {skills} +
+

joined on aug 30, 2020

+
+ ) +} \ No newline at end of file diff --git a/solutions/day-5/src/images/csspng.png b/solutions/day-5/src/images/csspng.png new file mode 100644 index 0000000..7967464 Binary files /dev/null and b/solutions/day-5/src/images/csspng.png differ diff --git a/solutions/day-5/src/images/htmlpng.png b/solutions/day-5/src/images/htmlpng.png new file mode 100644 index 0000000..edb7c75 Binary files /dev/null and b/solutions/day-5/src/images/htmlpng.png differ diff --git a/solutions/day-5/src/images/jspng.png b/solutions/day-5/src/images/jspng.png new file mode 100644 index 0000000..5e2b825 Binary files /dev/null and b/solutions/day-5/src/images/jspng.png differ diff --git a/solutions/day-5/src/images/person.jpg b/solutions/day-5/src/images/person.jpg new file mode 100644 index 0000000..62ce6be Binary files /dev/null and b/solutions/day-5/src/images/person.jpg differ diff --git a/solutions/day-5/src/images/reactpng.png b/solutions/day-5/src/images/reactpng.png new file mode 100644 index 0000000..076d40b Binary files /dev/null and b/solutions/day-5/src/images/reactpng.png differ diff --git a/solutions/day-5/src/index.css b/solutions/day-5/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/solutions/day-5/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/solutions/day-5/src/index.js b/solutions/day-5/src/index.js new file mode 100644 index 0000000..d563c0f --- /dev/null +++ b/solutions/day-5/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); + +// 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(); diff --git a/solutions/day-5/src/logo.svg b/solutions/day-5/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/solutions/day-5/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/solutions/day-5/src/reportWebVitals.js b/solutions/day-5/src/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/solutions/day-5/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/solutions/day-5/src/setupTests.js b/solutions/day-5/src/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/solutions/day-5/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom';