diff --git a/practice/function.js b/practice/function.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1a6c26d0444f1225e13acc685a4444733ee7f93
--- /dev/null
+++ b/practice/function.js
@@ -0,0 +1,84 @@
+const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
+const NUMBER_OF_ARTICLES = 10;
+
+window.onload = handler;
+
+function handler() {
+ "use strict";
+
+ fillArticleSectionWithArticles();
+}
+
+function fillArticleSectionWithArticles() {
+ "use strict";
+
+ const articleSection = document.getElementById('article-section');
+
+ for (let i = 0; i < NUMBER_OF_ARTICLES; ++i) {
+ const article = createArticle();
+
+ articleSection.appendChild(article);
+ }
+}
+
+function createArticle() {
+ "use strict";
+
+ const article = document.createElement('article');
+
+ article.classList.add('article-lorem')
+
+ const loremIpsumLength = LOREM_IPSUM.length;
+
+ const num1 = parseInt(Math.random() * loremIpsumLength);
+ const num2 = parseInt(Math.random() * loremIpsumLength);
+
+ const start = Math.min(num1, num2);
+ const end = Math.max(num1, num2);
+
+ const text = LOREM_IPSUM.substring(start, end + 1);
+
+ const content = document.createTextNode(text);
+
+ article.appendChild(content);
+
+ const backgroundColor = calculateBackgroundColor(start, end, loremIpsumLength);
+
+ console.log(backgroundColor);
+
+ article.style.setProperty('background-color', backgroundColor);
+
+ return article;
+}
+
+function calculateBackgroundColor(start, end, length) {
+ const mean = (start + end) / 2;
+
+ const totalNumberOfRGB = Math.pow(16, 6);
+ const colorCode = Math.floor(mean / length * totalNumberOfRGB);
+
+ const rgb = calculateRGB(colorCode, Math.pow(16, 2));
+
+ const r = rgb[0];
+ const g = rgb[1];
+ const b = rgb[2];
+
+ const backgroundColor = `rgb(${r}, ${g}, ${b})`;
+
+ return backgroundColor;
+}
+
+function calculateRGB(colorCode, basis) {
+ if (colorCode > basis) {
+ const rest = colorCode % basis;
+ const division = parseInt(colorCode / basis);
+
+ const rests = calculateRGB(division, basis);
+
+ rests.push(rest);
+
+ return rests;
+ } else {
+ return [colorCode];
+ }
+}
\ No newline at end of file
diff --git a/practice/index.html b/practice/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..84e8cc4849207b5c3c7463162e94a90ed85f9d21
--- /dev/null
+++ b/practice/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="de">
+ <head>
+ <title>Test</title>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="function.js"></script>
+ <link rel="stylesheet" type="text/css" href="styles.css" />
+ </head>
+ <body>
+ <header>
+ <h1>Hello World</h1>
+ </header>
+
+ <main>
+ <section id="article-section"></section>
+ </main>
+
+ <footer>
+ <h2></h2>
+ </footer>
+ </body>
+</html>
\ No newline at end of file
diff --git a/practice/styles.css b/practice/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..8fda45a7957e73b2ee235fbbde4067cff110b765
--- /dev/null
+++ b/practice/styles.css
@@ -0,0 +1,25 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body, html {
+ margin: 0;
+}
+
+#article-section {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-content: center;
+ width: 100%;
+ background-color: gray;
+}
+
+#article-section > .article-lorem {
+ width: 10rem;
+ overflow-y: auto;
+ height: 10rem;
+}
\ No newline at end of file