Solved nested

package.json

@@ -20,6 +20,7 @@
         "build": "react-scripts build",
         "test": "react-scripts test",
         "test:cov": "react-scripts test --coverage --watchAll",
+        "test:json": "react-scripts test --json --watchAll=false --outputFile jest-output.json --coverage",
         "eject": "react-scripts eject",
         "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0",
         "eslint-output": "eslint-output ./src --ext .tsx --ext .ts --max-warnings 0",

public/tasks/task-arrays.md

@@ -0,0 +1,5 @@
+# Task - Arrays
+
+Version: 0.0.1
+
+Implement functions that work with arrays immutably.

public/tasks/task-first-branch.md

@@ -0,0 +1,5 @@
+# Task - First Branch
+
+Version: 0.0.1
+
+Pass a short test to have certain text on the page.

public/tasks/task-functions.md

@@ -0,0 +1,5 @@
+# Task - Functions
+
+Version: 0.0.1
+
+Implement a bunch of functions that work on primitives.

public/tasks/task-nested.md

@@ -0,0 +1,5 @@
+# Task - Nested
+
+Version: 0.0.1
+
+Implement functions that work with nested arrays and objects immutably.

public/tasks/task-objects.md

@@ -0,0 +1,5 @@
+# Task - Objects
+
+Version: 0.0.1
+
+Implement functions that work with objects immutably.

src/App.tsx

@@ -1,16 +1,124 @@
 import React from "react";
-import "./App.css";
+import { Button, Container, Row, Col } from "react-bootstrap";
 
 function App(): React.JSX.Element {
     return (
-        <div className="App">
-            <header className="App-header">
-                UD CISC275 with React Hooks and TypeScript
+        <div
+            style={{
+                textAlign: "center",
+                fontFamily: "Arial, sans-serif",
+                padding: "20px",
+            }}
+        >
+            {/* Header */}
+            <header
+                style={{
+                    marginBottom: "20px",
+                }}
+            >
+                <h1
+                    style={{
+                        backgroundColor: "#f0a500",
+                        color: "white",
+                        fontSize: "2rem",
+                        fontWeight: "bold",
+                        padding: "20px",
+                        borderRadius: "8px",
+                        margin: 0,
+                    }}
+                >
+                    UD CISC275 with React Hooks and TypeScript
+                </h1>
             </header>
+
+            {/* Paragraphs */}
+            <p>Hello World</p>
+            <p>Created by Zahra Rezaei</p>
             <p>
                 Edit <code>src/App.tsx</code> and save. This page will
                 automatically reload.
             </p>
+
+            {/* Placeholder Image */}
+            <img
+                src="https://via.placeholder.com/300"
+                alt="Placeholder"
+                style={{
+                    maxWidth: "300px",
+                    margin: "20px auto",
+                    borderRadius: "8px",
+                }}
+            />
+
+            {/* List */}
+            <ul
+                style={{
+                    listStyleType: "disc",
+                    paddingLeft: "40px",
+                    textAlign: "left",
+                    maxWidth: "400px",
+                    margin: "20px auto",
+                }}
+            >
+                <li>First item</li>
+                <li>Second item</li>
+                <li>Third item</li>
+            </ul>
+
+            {/* Bootstrap Button */}
+            <Button
+                onClick={() => {
+                    console.log("Hello World!");
+                }}
+                style={{
+                    margin: "20px 0",
+                    padding: "10px 20px",
+                    fontSize: "1rem",
+                    cursor: "pointer",
+                }}
+            >
+                Log Hello World
+            </Button>
+
+            {/* Two-column Layout */}
+            <Container style={{ marginTop: "30px" }}>
+                <Row>
+                    <Col>
+                        <div
+                            style={{
+                                width: "100%",
+                                height: "100px",
+                                backgroundColor: "red",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: "white",
+                                fontWeight: "bold",
+                                borderRadius: "4px",
+                            }}
+                        >
+                            Column 1
+                        </div>
+                    </Col>
+                    <Col>
+                        <div
+                            style={{
+                                width: "100%",
+                                height: "100px",
+                                backgroundColor: "red",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: "white",
+                                fontWeight: "bold",
+                                borderRadius: "4px",
+                            }}
+                        >
+                            Column 2
+                        </div>
+                    </Col>
+                </Row>
+            </Container>
         </div>
     );
 }