From abcb1e4e6c67438469948e87f74f6fd5125fcd35 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Tue, 3 Oct 2023 22:37:06 +0200
Subject: [PATCH] Practice some JS
---
practice/function.js | 84 ++++++++++++++++++++++++++++++++++++++++++++
practice/index.html | 23 ++++++++++++
practice/styles.css | 25 +++++++++++++
3 files changed, 132 insertions(+)
create mode 100644 practice/function.js
create mode 100644 practice/index.html
create mode 100644 practice/styles.css
diff --git a/practice/function.js b/practice/function.js
new file mode 100644
index 0000000..a1a6c26
--- /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 0000000..84e8cc4
--- /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 0000000..8fda45a
--- /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
--
GitLab