blog listing page
<script>
    const blogContainer = document.getElementById('blogContainer');
    const pagination = document.getElementById('pagination');
    const postsPerPage = 6;
    let currentPage = 1;

    function fetchPosts(page) {
        fetch(`https://totallytech.co/wordpress/wp-json/wp/v2/posts?_embed&per_page=${postsPerPage}&page=${page}`)
            .then(response => {
                const totalPages = response.headers.get('X-WP-TotalPages');
                if (totalPages) {
                    createPagination(totalPages);
                }
                return response.json();
            })
            .then(data => {
                displayPosts(data);
            })
            .catch(error => console.error('Error fetching posts:', error));
    }

    function displayPosts(posts) {
        blogContainer.innerHTML = '';
        posts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.classList.add('post');

            const postImage = document.createElement('img');
            if (post._embedded['wp:featuredmedia']) {
                postImage.src = post._embedded['wp:featuredmedia'][0].source_url;
                postImage.alt = post.title.rendered;
            }

            const postContent = document.createElement('div');
            postContent.classList.add('post-content');

            const postTitle = document.createElement('a');
            postTitle.href = `blog_detail.html?id=${post.id}`;
            postTitle.classList.add('post-title');
            postTitle.textContent = post.title.rendered;

            const postMeta = document.createElement('div');
            postMeta.classList.add('post-meta');

            // Updated date format to "09 Dec 2024"
            const formattedDate = new Date(post.date).toLocaleDateString('en-GB', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            });

            postMeta.textContent = `By ${post._embedded.author[0].name} on ${formattedDate}`;

            const postDescription = document.createElement('p');
            postDescription.classList.add('post-description');
            postDescription.innerHTML = post.excerpt.rendered;

            postContent.append(postTitle, postMeta, postDescription);
            postElement.append(postImage, postContent);
            blogContainer.appendChild(postElement);
        });
    }

    function createPagination(totalPages) {
        pagination.innerHTML = '';
        for (let i = 1; i <= totalPages; i++) {
            const button = document.createElement('button');
            button.textContent = i;
            button.addEventListener('click', () => {
                currentPage = i;
                fetchPosts(currentPage);
            });
            if (i === currentPage) {
                button.disabled = true;
            }
            pagination.appendChild(button);
        }
    }

    fetchPosts(currentPage);
</script>






blog_details.html

 <script>
            const postContainer = document.getElementById('postContainer');
            const urlParams = new URLSearchParams(window.location.search);
            const postId = urlParams.get('id');

            function fetchPost(id) {
                fetch(`https://totallytech.co/wordpress/wp-json/wp/v2/posts/${id}`)
                    .then(response => response.json())
                    .then(post => { 
                        console.log(post);
                        displayPost(post);
                    })
                    .catch(error => console.error('Error fetching post:', error));
            }

            function displayPost(post) {
                const postTitle = document.createElement('h1');
                postTitle.classList.add('post-title');
                postTitle.innerHTML = post.title.rendered;

                const postImage = document.createElement('img');
                postImage.src = post.featured_image_url;
                postImage.alt = post.title.rendered;
                postImage.classList.add('post-image');

                const postContent = document.createElement('div');
                postContent.classList.add('post-content');
                postContent.innerHTML = post.content.rendered;

                postContainer.appendChild(postTitle);
                postContainer.appendChild(postContent);
            }

            document.addEventListener('DOMContentLoaded', () => {
                if (postId) {
                    fetchPost(postId);
                }
            });
        </script>