Practice some JS

abcb1e4e · Silas Meister · 122f1932 · abcb1e4e · abcb1e4e · abcb1e4e
Commit abcb1e4e authored 1 year ago by Silas Meister
--- a/practice/function.js
+++ b/practice/function.js
+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
--- a/practice/index.html
+++ b/practice/index.html
+<!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
--- a/practice/styles.css
+++ b/practice/styles.css
+* {
+    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