feat: add 15

codebubb · codebubb · commit 0af29a359629 · 2023-11-16T14:03:44.000Z
diff --git a/15-lorem-ipsum/index.html b/15-lorem-ipsum/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>15 - Lorem Ipsum</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <div id="loremIpsumGenerator">
+        <label for="paragraphsCount">How many Paragraphs?</label>
+        <input min="0" type="number" id="paragraphsCount">
+        <button id="getLoremIpsum">Go</button>
+
+        <div id="result"></div>
+    </div>
+</body>
+</html>
diff --git a/15-lorem-ipsum/script.js b/15-lorem-ipsum/script.js
@@ -0,0 +1,52 @@
+
+const getLoremIpsum = numberOfParagraphs => {
+    fetch(`https://baconipsum.com/api/?type=meat-and-filler&paras=${numberOfParagraphs}`)
+        .then(response => response.json())
+        .then(loremIpsumTextArray => {
+            updateResult(loremIpsumTextArray);
+        })
+        .catch(error => {
+            showError(error);
+        });
+};
+
+const updateResult = textArray => {
+    const resultElement = document.getElementById('result');
+    resultElement.innerHTML = '';
+    resultElement.innerHTML = textArray
+        .map(paragraph => `<p>${paragraph}</p>`)
+        .join('');
+    addCopyButton(textArray.join(''));
+};
+
+const showError = error => {
+    const resultElement = document.getElementById('result');
+    resultElement.innerHTML = '';
+    resultElement.innerHTML = `<p class="error">${error.message}</p>`
+}
+
+const addCopyButton = text => {
+    const resultElement = document.getElementById('result');
+    const copyBtn = document.createElement('button');
+
+    copyBtn.textContent = 'Copy';
+    copyBtn.classList.add('copy');
+    copyBtn.onclick = () => {
+        navigator.clipboard.writeText(text);
+        copyBtn.textContent = 'Copied!';
+        setTimeout(() => {
+            copyBtn.textContent = 'Copy';
+        }, 2000);
+    }
+
+    resultElement.appendChild(copyBtn);
+}
+
+const getLoremIpsumElement = document.getElementById('getLoremIpsum');
+const paragraphsCountElement = document.getElementById('paragraphsCount');
+
+getLoremIpsumElement.addEventListener('click', () => {
+    getLoremIpsum(parseInt(paragraphsCountElement.value));
+    paragraphsCountElement.value = '';
+
+})
diff --git a/15-lorem-ipsum/styles.css b/15-lorem-ipsum/styles.css
@@ -0,0 +1,31 @@
+#loremIpsumGenerator {
+    font-family: sans-serif;
+    margin: 1rem;
+}
+
+#paragraphsCount {
+    width: 4rem;
+}
+
+#result {
+    margin-top: 1rem;
+    padding: 1rem;
+    border: 1px dashed gray;
+    font-size: .75rem;
+    position: relative;
+}
+
+.copy {
+    position: absolute;
+    right: .25rem;
+    top: .25rem;
+    border: 0;
+    text-transform: uppercase;
+    font-size: .5rem;
+    padding: .25rem .5rem;
+    cursor: pointer;
+}
+
+.copy:hover {
+    background-color: blanchedalmond;
+}
