Is it possible to use html paragraphes within an array?

Question

Is it possible to use html paragraphes within an array?

Štefan Mihael Rihar 181

First the keywords for my problem i am aware of but cannot resolve for my solution. (createelement)(id)

The following program parts resolved are a intersection observed screen output with a rectangle smaller then my screen and the color is transparent. I also have two buttons, one to choose a textfile and a second to load the output.

Within the script tag enviroment i used the array function to choose which textblocks of the textfile can be loaded.

One part of the style area is automaticly added or removed when the text is outside the screened rectangle.

My problem is if every textblock is saved seperat with a <p> tag then i have seperat textcontent that is automaticly removed or added on the screend content.

With the javascript line, foreach p, i try to recognize what i have to do to load textcontent from a textfile instead of saving every textblock sperat in a <p> tag.

Do i have to use createelement.id?


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .container {
            margin: 150px;
        }

        .container p {
            color: #ff000080;
            font-size: 1.6rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            line-height: 1.6;
            padding: 1rem;
            border: 1px solid #eee;
            margin: 1rem 0;
            transform: translateX(-100%);
            transition: transform 0.5s linear;
        }

        .container p.active {
            opacity: 1;
            transform: translateX(0);
        }

        .container p:nth-child(2n) {
            color: cornflowerblue;
        }

        .cover {
            position: fixed;
            /* screen viewport erst visibl wenn positions angabe */
            top: 250px;
            right: 50px;
            bottom: 250px;
            left: 50px;
            background-color: hsla(30deg, 40%, 80%, 0.5);
            /* i change color in cover class when aim to know what i do */
        }
    </style>
    <input type="file" id="fileInput">
    <button id="readBtn">Read</button>
    <!--p id="result"></p-->
    <!--p id="result"></p-->
    <div class="container">
        <p id="result"></p>
    </div>
    <!--div class="container">
        <p>
            Et odio pellentesque diam volutpat commodo sed egestas egestas. Est placerat in egestas erat
            imperdiet sed. Non
            quam
            lacus suspendisse faucibus interdum. Pharetra convallis posuere morbi leo urna molestie at. Pellentesque sit
            amet
            porttitor eget dolor. Varius duis at consectetur lorem donec massa sapien faucibus. Nunc consequat interdum
            varius sit
            amet. Nisl tincidunt eget nullam non nisi est sit. Vel turpis nunc eget lorem dolor sed viverra. Facilisis
            magna
            etiam
            tempor orci eu lobortis elementum. Id neque aliquam vestibulum morbi blandit cursus. Amet purus gravida quis
            blandit.
            Arcu cursus euismod quis viverra.
        </p>
    </div-->
    <div class="cover">&nbsp</div>
    <script>

        function readFileAsync(file) {
            return new Promise((resolve, reject) => {
                let reader = new FileReader();

                reader.onload = () => {
                    resolve(reader.result);
                };

                reader.onerror = reject;

                reader.readAsArrayBuffer(file);
            })
        }

        function arrayBufferToString(arrayBuffer, decoderType = 'utf-8') {
            let decoder = new TextDecoder(decoderType);
            return decoder.decode(arrayBuffer);
        }

        async function processFile(file) {
            try {
                let arrayBuffer = await readFileAsync(file);
                let first20Bytes = arrayBufferToString(arrayBuffer);
                const allLines = first20Bytes.split("\n");

                const lineOne = allLines;

                let iceCreamFlavors = [lineOne[0], lineOne[2]];

                iceCreamFlavors.push(lineOne[4]);

                document.getElementById('result').innerText = iceCreamFlavors;
            } catch (err) {
                console.log(err);
            }
        }

        document.getElementById('readBtn').addEventListener('click', () => {
            let file = document.getElementById('fileInput');
            processFile(file.files[0]);
        })

        document.addEventListener("DOMContentLoaded", () => {
            let options = {
                root: null,
                rootMargin: "-250px -50px",
                threshold: 0.05
            };
            let observer = new IntersectionObserver(beTouching, options);
            document.querySelectorAll(" .container p").forEach(p => {
                observer.observe(p);
            });
        });
        function beTouching(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("active");
                    // observer.unobserve(entry, target);
                } else {
                    entry.target.classList.remove("active");
                }
            })
        }

    </script>
</body>

</html>

Share via

Is it possible to use html paragraphes within an array?

Your answer