Susheel4115 · Susheel4115 · Dec 2, 2021 · Mar 29, 2022 · Mar 29, 2022 · Mar 30, 2022
diff --git a/Assignment-1/code/index.html b/Assignment-1/code/index.html
@@ -1,5 +1,40 @@
 <!DOCTYPE html>
 <html>
+<<<<<<< HEAD
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Designing Web App using HTML/CSS/REACT</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      //React Code here
+      ReactDOM.render(
+        <div>
+          <div className="yellow">
+            <div className="yellow1"></div>
+            <div className="yellow2"></div>
+          </div>
+          <div className="magneta">
+            <div className="magneta1"></div>
+          </div>
+          <div className="blue">
+            <div className="blue1"></div>
+            <div className="blue2"></div>
+            <div className="blue3"></div>
+          </div>
+        </div>,
+        document.getElementById("root")
+      );
+    </script>
+    <!--
+=======
 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width">
@@ -18,6 +53,7 @@
 
 </script>
 <!--
+>>>>>>> bb3b9b24fead2028ec87f951fc5d3316841702b0
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
      Read this section for a production-ready setup with JSX:
@@ -27,5 +63,10 @@
      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
+<<<<<<< HEAD
+  </body>
+</html>
+=======
 </body>
-</html>
+</html>
+>>>>>>> bb3b9b24fead2028ec87f951fc5d3316841702b0
diff --git a/Assignment-1/code/style.css b/Assignment-1/code/style.css
@@ -1 +1,92 @@
+<<<<<<< HEAD
+* {
+  box-sizing: border-box;
+}
+.yellow {
+  display: flex;
+  flex-direction: row;
+  font-size: 30px;
+}
 
+.yellow1,
+.yellow2 {
+  background-color: #ecec09;
+  padding: 10px;
+  flex: 50%;
+  margin: 1rem;
+  height: 9rem;
+}
+
+.magneta {
+  display: flex;
+  flex-direction: row;
+}
+
+.magneta1 {
+  background-color: #ff00ff;
+  padding: 10px;
+  flex: 100%;
+  margin: 1rem;
+  height: 9rem;
+}
+
+.blue {
+  display: flex;
+  flex-direction: row;
+}
+
+.blue1,
+.blue2,
+.blue3 {
+  background-color: #b0c4de;
+  padding: 10px;
+  flex: 100%;
+  margin: 1rem;
+  height: 9rem;
+}
+
+@media (max-width: 1024px) {
+  .yellow {
+    flex-direction: row;
+  }
+}
+@media (max-width: 768px) {
+  .yellow {
+    flex-direction: row;
+    height: 10rem;
+  }
+
+  .magneta1 {
+    margin: 1rem;
+    height: 10rem;
+  }
+  .blue {
+    flex-direction: column;
+    height: 12rem;
+  }
+
+  .blue3 {
+    display: none;
+  }
+}
+
+@media (max-width: 320px) {
+  .yellow {
+    flex-direction: column;
+    height: 9rem;
+  }
+  .blue {
+    flex-direction: column;
+    height: 9rem;
+  }
+  .blue1,
+  .blue2 {
+    flex-direction: column;
+  }
+  .blue3 {
+    display: none;
+  }
+}
+=======
+
+>>>>>>> bb3b9b24fead2028ec87f951fc5d3316841702b0
diff --git a/Assignment-2/code/my-app/package.json b/Assignment-2/code/my-app/package.json
@@ -19,12 +19,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
+
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/Assignment-2/code/my-app/src/App.css b/Assignment-2/code/my-app/src/App.css
@@ -1,38 +1,42 @@
-.App {
-  text-align: center;
+.container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 4rem;
+  margin-left: 32rem;
+  width: 300px;
+  height: 500px;
+  padding: 15px;
+  background-color: rgb(227, 233, 231);
+  box-shadow: 10px 10px 5px rgb(179, 197, 202);
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.image1 {
+  height: 10rem;
+  width: 10rem;
+  border-radius: 10%;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.name {
+  color: rgb(62, 188, 238);
+  font-weight: bold;
+  font-size: 3rem;
+  margin-top: -0.5rem;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.location {
+  margin-top: -2.6rem;
+  color: grey;
 }
-
-.App-link {
-  color: #61dafb;
+.realloc,
+.blood,
+.employeeage {
+  margin-top: -0.5rem;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.bloodgroup,
+.age {
+  margin-top: -0.5rem;
+  color: grey;
 }
diff --git a/Assignment-2/code/my-app/src/App.js b/Assignment-2/code/my-app/src/App.js
@@ -1,18 +1,21 @@
-import logo from './logo.svg';
-import './App.css';
-
-
+import "./App.css";
 
 function App(props) {
- const {employee}=props;
-
-return(
-  <div className="container">
-  {/* Start your React code here */}
-</div>
-)
-}
-
+  const { employee } = props;
 
+  return (
+    <div className="container">
+      {/* Start your React code here */}
+      <img className="image1" src={employee.profileImg} />
+      <p className="name">{employee.name}</p>
+      <p className="location">Location</p>
+      <p className="realloc">{employee.location}</p>
+      <p className="bloodgroup">Blood group</p>
+      <p className="blood">{employee.bloodGroup}</p>
+      <p className="age">Age</p>
+      <p className="employeeage">{employee.age}</p>
+    </div>
+  );
+}
 
 export default App;
diff --git a/Assignment-2/code/my-app/src/components/Image.js b/Assignment-2/code/my-app/src/components/Image.js
@@ -0,0 +1 @@
+
diff --git a/Assignment-2/code/my-app/src/index.js b/Assignment-2/code/my-app/src/index.js
@@ -1,26 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
 const employee = {
-  name: 'Tom',
-  location: 'New York',
-  bloodGroup: 'B+',
+  name: "Tom",
+  location: "New York",
+  bloodGroup: "B+",
   age: 28,
-  profileImg: 'https://www.w3schools.com/howto/img_avatar.png'
-       }
+  profileImg: "https://www.w3schools.com/howto/img_avatar.png",
+};
 
 ReactDOM.render(
   <React.StrictMode>
     <App employee={employee} />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
-
-// 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/Assignment-2/code/my-app/src/reportWebVitals.js b/Assignment-2/code/my-app/src/reportWebVitals.js