diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.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;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.js b/src/App.js
index ce9cbd2..80d2b19 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,26 +1,14 @@
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import ListContainer from "./ListContainer";
-function App() {
- return (
-
- );
+class App extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
}
export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 4db7ebc..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- const { getByText } = render();
- const linkElement = getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/ListContainer.js b/src/ListContainer.js
new file mode 100644
index 0000000..8b28a46
--- /dev/null
+++ b/src/ListContainer.js
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import ListElement from "./ListElement";
+import style from './ListContainer.module.css';
+
+class ListContainer extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ elements: [],
+ title: "Container of Elements"
+ }
+
+ this.handleclick = this.handleclick.bind(this);
+ }
+
+ render() {
+ return (
+
+
+ {this.state.title}
+
+
+
+
+
+ {
+ this.state.elements.map((elemname) => (
+
+ ))
+ }
+
+
+ );
+ }
+
+ handleclick() {
+ let elems = this.state.elements;
+ elems.push("TESTNAME");
+ this.setState({elements: elems, title: "Container of several Elements"});
+ }
+}
+
+export default ListContainer;
diff --git a/src/ListContainer.module.css b/src/ListContainer.module.css
new file mode 100644
index 0000000..c24152d
--- /dev/null
+++ b/src/ListContainer.module.css
@@ -0,0 +1,13 @@
+.mainbody{
+ margin-left: 200px;
+ margin-top: 150px;
+
+ width: 500px;
+
+ background-color: coral;
+}
+
+.title{
+ text-align: center;
+ color: blue;
+}
diff --git a/src/ListElement.js b/src/ListElement.js
new file mode 100644
index 0000000..311a68c
--- /dev/null
+++ b/src/ListElement.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import style from './ListElement.module.css'
+
+class ListElement extends React.Component {
+ render() {
+ return (
+
+ This is a element.
+
+ );
+ }
+}
+
+export default ListElement;
diff --git a/src/ListElement.module.css b/src/ListElement.module.css
new file mode 100644
index 0000000..c9fc357
--- /dev/null
+++ b/src/ListElement.module.css
@@ -0,0 +1,9 @@
+.mainelement {
+ text-align: center;
+ color: #5f4508;
+}
+
+.mainelement:hover {
+ background-color: red;
+ opacity: 0.7;
+}