ARTICLE-PUBLISHER

 























ARTICLE-PUBLISHER








code



<!DOCTYPE html>
<html>
<head>
    <title>Article Reading</title>
</head>
<body>
    <h1>Article Reading</h1>
    <h2>List of Articles</h2>
    <ul id="article-list"></ul>
    <h2>Article Details</h2>
    <h3 id="article-title"></h3>
    <p id="article-author"></p>
    <div id="article-content"></div>
    <script>
        // Sample data
        var articles = [
            {
                title: "Introduction to Python",
                author: "John Doe",
                content: "This is an introductory article about Python."
            },
            {
                title: "Web Development Basics",
                author: "Jane Smith",
                content: "Learn the basics of web development."
            },
            {
                title: "Data Science Techniques",
                author: "Alice Johnson",
                content: "Explore various data science techniques."
            }
        ];
        // Populate article list
        var articleList = document.getElementById("article-list");
        articles.forEach(function(article) {
            var listItem = document.createElement("li");
            var link = document.createElement("a");
            link.href = "#";
            link.textContent = article.title;
            link.addEventListener("click", function() {
                displayArticle(article);
            });
            listItem.appendChild(link);
            articleList.appendChild(listItem);
        });
        // Display article details
        function displayArticle(article) {
            var title = document.getElementById("article-title");
            var author = document.getElementById("article-author");
            var content = document.getElementById("article-content");
            title.textContent = article.title;
            author.textContent = "Author: " + article.author;
            content.textContent = article.content;
        }
    </script>
</body>
</html>












The provided code is an HTML page that displays a list of articles and allows users to view the details of each article by clicking on its title. Let's break down the code step by step:

- `<!DOCTYPE html>`: This is the document type declaration and specifies that the document is an HTML file.

- `<html>`: The opening and closing `<html>` tags define the root element of the HTML document.

- `<head>`: The `<head>` section contains meta-information about the document, such as the title displayed in the browser's title bar.

- `<title>Article Reading</title>`: Sets the title of the webpage to "Article Reading".

- `<body>`: The `<body>` section contains the visible content of the webpage.

- `<h1>Article Reading</h1>`: This displays the main heading "Article Reading" at the top of the page.

- `<h2>List of Articles</h2>`: This displays a subheading "List of Articles".

- `<ul id="article-list"></ul>`: This creates an empty unordered list with the `id` attribute set to "article-list". The list will be populated dynamically using JavaScript.

- `<h2>Article Details</h2>`: This displays a subheading "Article Details".

- `<h3 id="article-title"></h3>`: This creates an empty `<h3>` element with the `id` attribute set to "article-title". The title of the selected article will be displayed here.

- `<p id="article-author"></p>`: This creates an empty `<p>` element with the `id` attribute set to "article-author". The author of the selected article will be displayed here.

- `<div id="article-content"></div>`: This creates an empty `<div>` element with the `id` attribute set to "article-content". The content of the selected article will be displayed here.

- JavaScript code: The JavaScript code block within the `<script>` tags handles the dynamic population of the article list and the display of article details. It defines an array of sample articles, iterates over them, and creates list items with clickable links for each article title. When a link is clicked, the `displayArticle` function is called to update the article details section with the corresponding title, author, and content.

Overall, this code provides a basic structure for an article reading webpage with sample data. You can modify the JavaScript section and add more articles to suit your needs.

Comments

Post a Comment