script.js

let blogs = [
  {
    title: "The Future of Renewable Energy",
    author: "Kunal Kamra",
    date: "17 Jan 2024",
    image:"./images/solar_panel.jpg",
    content:
    `Renewable energy sources, such as solar and wind, are playing an increasingly pivotal role in shaping the future of energy. These sustainable options are not only environmentally friendly but also economically viable as advancements in technology drive significant cost reductions and enhance overall efficiency. Innovations like improved solar panel designs, better energy storage solutions, and smarter grid systems are making renewable energy more accessible and reliable than ever before. This transition marks a critical step toward reducing our dependence on fossil fuels, combating climate change, and fostering a cleaner, greener planet. Join the movement toward a sustainable energy revolution.


### The Rising Importance of Renewable Energy
The importance of renewable energy cannot be overstated. In an era where climate change poses an existential threat to the planet, transitioning to renewable energy sources is no longer just an option; it is a necessity. Global temperatures are rising, sea levels are climbing, and extreme weather events are becoming more frequent and devastating. The root cause of these alarming trends is the excessive reliance on fossil fuels, which emit large quantities of greenhouse gases into the atmosphere.
Renewable energy sources offer a solution to these pressing issues. Unlike coal, oil, and natural gas, renewables such as solar, wind, hydropower, and geothermal energy generate electricity without releasing harmful pollutants. This characteristic makes them a cornerstone in the global effort to mitigate the impacts of climate change. By embracing renewable energy, nations around the world can significantly reduce their carbon footprints and work toward achieving net-zero emissions.

### The Economic Viability of Renewables

One of the most compelling arguments for renewable energy is its economic potential. Over the past decade, the costs associated with solar and wind energy have plummeted, thanks to technological advancements and economies of scale. According to industry reports, the cost of solar photovoltaic (PV) panels has dropped by more than 80% since 2010, while the cost of wind turbines has decreased by approximately 50%. These trends have made renewables some of the most cost-effective energy sources available today.
Furthermore, renewable energy projects often create significant economic opportunities. The development, installation, and maintenance of renewable energy infrastructure require skilled labor, generating millions of jobs worldwide. For instance, the solar industry alone employed over 4 million people globally in 2022, with numbers expected to rise as the sector continues to expand. This economic ripple effect benefits local communities and stimulates growth in related industries, such as manufacturing and transportation.

### Innovations Driving the Renewable Revolution

The renewable energy sector has witnessed remarkable innovations that are accelerating its adoption and effectiveness. Solar energy, for example, has seen the development of high-efficiency solar cells that can capture more sunlight and convert it into electricity. These advancements have made solar power a practical option even in regions with less consistent sunlight.
Energy storage solutions have also undergone significant improvements. Batteries, particularly lithium-ion batteries, are becoming more efficient, durable, and affordable. These storage systems are essential for addressing the intermittent nature of renewable energy sources, such as solar and wind. By storing excess energy generated during peak production periods, batteries ensure a steady supply of electricity even when the sun isn’t shining or the wind isn’t blowing.
Smart grid technology is another game-changer. These advanced electrical grids use digital communication tools to monitor and manage energy flows in real time. Smart grids enable the integration of diverse energy sources, optimize energy distribution, and enhance the reliability of power systems. They also empower consumers to participate actively in energy conservation by providing insights into their energy usage patterns.

### Environmental Benefits

The environmental benefits of renewable energy are profound. By replacing fossil fuels with clean energy sources, we can dramatically reduce air pollution, which poses severe health risks to millions of people worldwide. Fine particulate matter and toxic gases emitted by burning fossil fuels are linked to respiratory and cardiovascular diseases, as well as premature deaths. Transitioning to renewables can help alleviate these public health challenges and improve overall quality of life.
In addition to reducing air pollution, renewable energy helps preserve natural ecosystems. Fossil fuel extraction often involves environmentally destructive practices, such as mountaintop removal mining and offshore drilling, which disrupt habitats and harm wildlife. In contrast, renewable energy projects can be designed with minimal ecological impact, ensuring that the planet’s biodiversity is protected.

### Energy Security and Independence

Renewable energy also enhances energy security and independence. Fossil fuel markets are highly volatile, with prices fluctuating due to geopolitical tensions, supply disruptions, and market dynamics. This unpredictability can have severe economic consequences, particularly for nations that rely heavily on imported fossil fuels.
In contrast, renewable energy sources are abundant and locally available in most regions. Harnessing solar, wind, and other renewables allows countries to reduce their dependence on imported energy, insulate themselves from global market shocks, and achieve greater energy self-sufficiency. This shift not only strengthens national security but also promotes resilience in the face of global crises.

### The Role of Policy and Investment

The widespread adoption of renewable energy requires supportive policies and substantial investment. Governments play a crucial role in fostering the growth of the renewable sector by implementing incentives, such as tax credits, subsidies, and feed-in tariffs. These measures make renewable energy projects more financially attractive and encourage private sector participation.
Public and private investments are equally critical. Large-scale renewable energy projects, such as wind farms and solar power plants, require significant upfront capital. Financial institutions and investors must recognize the long-term benefits of renewables and allocate resources accordingly. Moreover, investment in research and development is essential to drive further innovations and bring emerging technologies, such as green hydrogen and advanced nuclear fusion, to market.

### Overcoming Challenges

Despite its many advantages, the transition to renewable energy is not without challenges. One of the primary obstacles is the intermittency of renewable sources. Solar and wind energy production depends on weather conditions, which can be unpredictable. However, advancements in energy storage and grid management are gradually addressing this issue.
Another challenge is the integration of renewables into existing energy systems. Many countries have infrastructure designed for fossil fuel-based power generation, making the transition to renewables a complex and resource-intensive process. Upgrading transmission lines, modernizing power plants, and building new renewable energy facilities require coordinated efforts and substantial funding.

### A Global Movement

The shift toward renewable energy is a global movement that transcends borders. Countries around the world are setting ambitious renewable energy targets and investing in clean energy projects. For example, Germany’s Energiewende initiative aims to achieve a renewable energy share of at least 80% by 2050. Similarly, India’s National Solar Mission seeks to establish the country as a global leader in solar energy by achieving 100 GW of solar capacity.
International collaboration is also vital. Organizations like the International Renewable Energy Agency (IRENA) and initiatives like the Paris Agreement provide platforms for countries to share knowledge, resources, and best practices. By working together, nations can accelerate the transition to a sustainable energy future and address the shared challenge of climate change.
 Conclusion

Renewable energy is not just a technological advancement; it is a societal transformation. As we harness the power of the sun, wind, and other natural forces, we are building a cleaner, greener, and more sustainable world for future generations. This transition requires collective action, innovative solutions, and unwavering commitment from individuals, businesses, and governments alike. By embracing renewable energy, we can reduce our environmental footprint, enhance energy security, and create a prosperous future for all. The time to act is now—join the renewable energy revolution and be a part of the solution.

`,
    categories: ["Energy"],
    likes: 45,
  },
  {
    title: "Elon Musk's Role in U.S. Politics: A Billionaire's Influence",
    author: "Joe Biden",
    date: "12 Jan 2024",
    image: "./images/elon_politics.webp",
    content:
      `Elon Musk's comments and actions have stirred debates in U.S. politics, from free speech on X (formerly Twitter) to his stance on renewable energy policies. Explore his growing influence in the political landscape.United States President-elect Donald Trump has pushed back on the notion that he has “ceded the presidency” to billionaire Elon Musk, who has taken an outsized role in the president-elect’s transition into the White House.
Trump made the comments during a speech in Arizona on Sunday, days after the Tesla and SpaceX owner intervened alongside the president-elect to scuttle a budget bill negotiated in Congress.The incident was the latest in which Musk has taken an atypically large role in the incoming Trump administration, prompting criticism from Democrats and from within Trump’s own Republican party.
Directly addressing those criticisms for the first time, Trump praised Musk, before adding: “And no, he’s not taking the presidency.”
Trump further called the suggestion that he has “ceded the presidency to Elon Musk” another “hoax” pushed by his political opponents.
In a later quip, Trump noted that there is no risk of Musk officially taking over as president because he would be constitutionally barred from doing so.“You know why he can’t be [president]?” Trump asked the crowd in Arizona. “He wasn’t born in this country.”The South African-born Musk – the world’s richest person according to Forbes Magazine – became one of Trump’s biggest supporters in the run-up to the election, endorsing the president-elect in July following an assassination attempt and pumping an estimated $200m into a Political Action Committee (PAC) supporting Trump.
He has since been tapped by Trump to lead a proposed Department of Government Efficiency (DOGE), tasked with taking a slash-and-burn approach to federal government spending.
The so-called “department” has been billed as an independent advisory panel, not an official government agency, and its purview remains undefined.Trump’s comments come a day after outgoing US President Joe Biden signed into law a funding bill that averts a government shutdown.

The previous bill negotiated by members of both parties in Congress was torpedoed days earlier when Trump came out in opposition.
The president-elect’s main contention was that the bill did not raise the debt ceiling – a political fight Trump hoped to avoid before taking office in January. The debt ceiling is the US’s borrowing limit, a cap imposed by Congress on how much money the government can borrow to cover the gap between its revenue and spending.
Musk had also come out in opposition to the deal, which he criticised in a flood of tweets on the X social media platform that he also owns. He pledged to financially support primary challenges to lawmakers who supported the original legislation.
Speaker of the House Mike Johnson later told US media that he spoke by phone to both Trump and Musk as a new bill was renegotiated.
The final bill – which funds the US government at the current rate through March 14 – gutted several provisions opposed by Trump and Musk. However, the final version did not raise the debt ceiling amid opposition from a cadre of Republican lawmakers.
Speaking to CNN, Republican lawmaker Rich McCormick said Musk’s intervention showed “he has influence and he’ll put pressure on us to do whatever he thinks the right thing is for him.”
Other Republicans have been more accepting, with Representative Tony Gonzales saying in an interview on CBS that it “feels like Elon Musk is our prime minister”.
Speaking on CNN, Senator Bill Hagerty praised Musk’s role in negotiating the bill, while pushing back on the notion that the billionaire was driving Trump’s decisions.

‘Extremely alarming’
Beyond the budget deal, Musk’s regular presence alongside Trump before he takes office on January 20 has for weeks caused disquiet among Democrats.
The billionaire was on the call when Trump spoke to Ukrainian President Volodymyr Zelenskyy following his election victory. He has also been present for recent meetings with French President Emmanuel Macron and Italian Prime Minister Giorgia Meloni in New York.
The criticism has been prompted by social media memes showing Trump kowtowing to Musk in various settings.
Following last week’s budget negotiations, several Democrats accused Musk of intervening to serve his own interests.They pointed to his support for removing a provision in the original bill that could have limited the operations of his businesses in China.
“It is extremely alarming that House Republican leadership, at the urging of an unelected billionaire, scrapped a bipartisan, bicameral negotiated funding deal that included this critical provision to protect American jobs and critical capabilities,” Representative Rosa DeLauro wrote in a letter to congressional leaders on Friday.`,
    categories: ["Politics"],
    likes: 375,
  },
  {
    title: "Squid Game: The Dark Mirror of Society",
    author: "Narendra Modi",
    date: "15 Jan 2024",
    image: "./images/squid_game.jpg",
    content:
      `Squid Game took the world by storm with its gripping story and social commentary. Explore the themes and lessons behind this Netflix phenomenon."Squid Game," the South Korean television series created by Hwang Dong-hyuk, became a global phenomenon upon its release in September 2021. The show, hosted on Netflix, captured audiences worldwide with its unique blend of psychological drama, suspenseful storytelling, and visceral critique of societal issues. It is much more than a survival game show; it is a profound exploration of human nature, morality, and the socioeconomic inequalities plaguing modern society.
The premise revolves around 456 individuals, all drowning in financial despair, who are invited to participate in a series of childhood games with a deadly twist. The reward is a staggering ₩45.6 billion (approximately $38 million USD), but the cost of losing a game is death. The seemingly innocent games, drawn from South Korean children's play traditions, turn into life-and-death battles that test the contestants' wit, strength, and morality.
At the heart of the series is Seong Gi-hun, a divorced father struggling to support his daughter and pay off overwhelming debts. Alongside him are a diverse group of characters, including Cho Sang-woo, a once-successful investment banker facing criminal charges; Kang Sae-byeok, a North Korean defector trying to reunite her family; and Ali Abdul, a migrant worker exploited by his employer. Each character's backstory offers a poignant glimpse into the struggles of the underprivileged in a capitalist system.
The games themselves are a microcosm of real-world societal hierarchies. The first game, "Red Light, Green Light," introduces the brutal stakes of the competition, as a massive mechanical doll ruthlessly eliminates those who fail to follow the rules. The tension escalates with each subsequent game, from the nerve-wracking "Honeycomb Challenge" to the treacherous "Tug of War." Each game forces contestants to make moral choices—whether to betray allies for survival or risk their own lives to save others.
What sets "Squid Game" apart from other survival dramas is its unflinching critique of capitalism and social inequality. The show's creator, Hwang Dong-hyuk, uses the games as an allegory for the dehumanizing effects of financial desperation. The contestants are willing to risk their lives for a chance at freedom from their debts, mirroring the harsh realities faced by those marginalized by economic systems. The masked overseers and VIPs, who watch the games for entertainment, symbolize the exploitative elites who thrive on the suffering of the lower classes.
The visual and thematic elements of "Squid Game" also contribute to its impact. The bright, candy-colored sets juxtapose the grim reality of the contestants' plight, creating an unsettling atmosphere. The iconic green tracksuits and numbered uniforms strip the players of individuality, reducing them to mere pawns in a larger game.
Beyond its thrilling narrative, "Squid Game" resonates deeply with viewers because it speaks to universal struggles: the pursuit of dignity, the yearning for fairness, and the lengths to which people will go to survive. Its global success underscores the power of storytelling to shed light on critical issues and provoke meaningful discussions about the world we live in.

In summary, "Squid Game" is not just a television series; it is a cultural phenomenon that challenges viewers to confront the harsh realities of societal structures. Its compelling characters, gripping plot, and incisive social commentary ensure its place as a landmark in modern entertainment.`,
    categories: ["Entertainment"],
    likes: 532,
  },
  {
    title: "Designing for Accessibility",
    author: "Amit Shah",
    date: "05 Feb 2024",
    image:"./images/accessibility-og.jpg",
    content:
      "Accessibility in design ensures that your products can be used by everyone, including those with disabilities. Explore tips and tools for creating inclusive user experiences.",
    categories: ["Design", "Inclusion"],
    likes: 345,
  },
  {
    title: "The Rise of AI in Everyday Life",
    author: "L.Bisnoi",
    date: "12 Mar 2024",
    image:"./images/ai.avif",
    content:
      "Artificial Intelligence is no longer confined to research labs. From smart assistants to self-driving cars, discover how AI is shaping our daily lives.",
    categories: ["Technology"],
    likes: 34,
  },
  {
    title: "Minimalist Living: A Lifestyle Revolution",
    author: "Anubhav Raj",
    date: "28 Feb 2024",
    image:"./images/mini.jpg",
    content:
      "Minimalism is not just about owning less; it's about creating more space for what truly matters. Learn how to declutter your life and find true happiness.",
    categories: ["Lifestyle"],
    likes: 32,
  },
  {
    title: "The Evolution of Blockchain Technology",
    author: "Mukesh Ambani",
    date: "10 Apr 2024",
    image:"./images/blockchains.png",
    content:
      "Blockchain is more than just cryptocurrency. Delve into its applications in industries like healthcare, finance, and supply chain management.",
    categories: ["Technology", "Finance"],
    likes: 23,
  },
  {
    title: "The Art of Sustainable Fashion",
    author: "Kim Kardashen",
    date: "22 Mar 2024",
    image:"./images/sustainable.avif",
    content:
      "Fast fashion is out, and sustainability is in. Discover how the fashion industry is evolving to embrace eco-friendly practices.",
    categories: ["Fashion"],
    likes: 212,
  },
  {
    title: "Understanding Mental Health in the Digital Age",
    author: "Mark Zukerberg",
    date: "15 Jan 2024",
    image:"./images/sm.png",
    content:
      "The internet and social media have transformed how we connect, but at what cost? Explore strategies to maintain mental well-being in a hyperconnected world.",
    categories: ["Health"],
    likes: 342,
  },
  {
    title: "Mastering the Art of Cooking at Home",
    author: "Sonia Gandhi",
    date: "20 Feb 2024",
    image: "./images/cook.webp",
    content:
      "Cooking at home is both an art and a science. Learn essential tips and tricks to elevate your culinary skills.",
    categories: ["Health"],
    likes: 273,
  },
  {
    title: "The Art of Mindful Living",
    author: "Yogi Ji",
    date: "8 Mar 2024",
    image: "./images/mindful.jpg",
    content:
      "Mindfulness is the key to inner peace. Learn how to incorporate mindfulness practices into your daily life.",
    categories: ["Lifestyle"],
    likes: 241,
  },
  {
    title: "The Rise of Electric Vehicles",
    author: "Xi Jingping",
    date: "22 Feb 2024",
    image: "./images/electric_vehicles.jpg",
    content:
      "Electric vehicles are driving the future of transportation. Dive into the advancements and challenges of this growing industry.",
    categories: ["Technology"],
    likes: 205,
  },
  {
    title: "Top 10 Cartoons That Defined Our Childhood",
    author: "Tej Pratap",
    date: "12 Mar 2024",
    image: "./images/childhood_cartoons.webp",
    content:
      "Relive the nostalgia with these iconic cartoons that shaped generations, from Looney Tunes to SpongeBob SquarePants.",
    categories: ["Entertainment"],
    likes: 378,
  },
  {
    title: "Tom and Jerry: The Timeless Chase",
    author: "Anubhav Raj",
    date: "10 Jan 2024",
    image: "./images/tom_and_jerry.jpg",
    content:
      "Few shows have captured the hearts of viewers like Tom and Jerry. Dive into the magic of this iconic duo and their hilarious antics.",
    categories: ["Entertainment"],
    likes: 412,
  },
  {
    title: "Ben 10: A Hero’s Journey Through Time",
    author: "Anubhav Raj",
    date: "18 Feb 2024",
    image: "./images/ben10.jpg",
    content:
      "Ben 10 redefined the superhero genre for kids. Explore how this adventurous series continues to inspire young fans worldwide.",
    categories: ["Entertainment"],
    likes: 325,
  },
  {
    title: "The Latent Show: A Comic Genius on the Rise",
    author: "Madhur Virli",
    date: "10 Mar 2024",
    image: "./images/latent_show.jpg",
    content:
      "Samay Raina’s Latent Show blends comedy, chess, and life’s quirky moments. Discover why it’s one of the most innovative shows in recent years.",
    categories: ["Entertainment"],
    likes: 289,
  },
];
let drafts = [
  {
    title: "The Quiet Power of Reading: Why Books Matter More Than Ever",
    author: "Emily Carter",
    date: "12 Jan 2024",
    image: "./images/reading_books.jpg",
    content:
      "In a world filled with constant distractions, books offer a sanctuary for the mind. Discover how reading fosters creativity, empathy, and critical thinking in today’s fast-paced life.",
    categories: ["Lifestyle", "Education"],
  },
  {
    title: "The Magic of Stargazing: Connecting with the Universe",
    author: "Liam Parker",
    date: "14 Jan 2024",
    image: "./images/stargazing.jpg",
    content:
      "Stargazing is more than a hobby—it’s a way to reconnect with the universe and find peace in the vastness of the cosmos. Learn tips for beginners and the best spots to start your journey.",
    categories: ["Science", "Lifestyle"],
    likes: 372,
  },
];
//typing animation
function animation(){
const texts = ["<Experiences>", "<Ideas>", "<Stories>", "<Dreams>", "<Thoughts>", "<Memories>"];
const typingSpeed = 30;
const erasingSpeed = 20;
const delayBetweenWords = 800; // Delay between words
const delayBeforeNextWord = 200;
let textIndex = 0;
let charIndex = 0;
let isErasing = false;

const typingText = document.getElementById("typingText");

function typeAndErase() {
  // Typing mode
  if (!isErasing) {
    if (charIndex < texts[textIndex].length) {
      typingText.textContent += texts[textIndex].charAt(charIndex);
      charIndex++;
      setTimeout(typeAndErase, typingSpeed);
    } else {
      // When the word is fully typed, wait and start erasing
      isErasing = true;
      setTimeout(typeAndErase, delayBetweenWords);
    }
  } 
  // Erasing mode
  else {
    if (charIndex > 0) {
      typingText.textContent = texts[textIndex].substring(0, charIndex - 1);
      charIndex--;
      setTimeout(typeAndErase, erasingSpeed);
    } else {
      // Move to the next word and start typing again
      isErasing = false;
      textIndex = (textIndex + 1) % texts.length; // Loop through the words
      setTimeout(typeAndErase, delayBeforeNextWord);
    }
  }
}

// Start the typing effect
document.addEventListener("DOMContentLoaded", () => {
  setTimeout(typeAndErase, delayBeforeNextWord);
});
typeAndErase()
}

// background_animation
function background_animation()
{
  for (let i = 0; i < 70; i++) 
  {
    const dot = document.createElement('div');
    dot.classList.add('dot');
    const docWidth = document.documentElement.offsetWidth;
    const docHeight = document.documentElement.offsetHeight;
    
    dot.style.left = `${Math.random() * docWidth}px`;
    dot.style.top = `${Math.random() * docHeight}px`;
    dot.style.animationDelay = `${Math.random() * 5}s`;
    document.body.appendChild(dot);
  }

}
document.getElementById('logo').addEventListener('click',()=>{
  window.location.href = 'index.html'
})
//getting the pages and calling their respective functions
document.addEventListener('DOMContentLoaded', () => {
    const pageId = document.body.id;

    if (pageId === 'indexPage') {
        background_animation(); // Function specific to index.html
        animation()
        
    } 
    else if (pageId === 'readPage') {
        
        let savedBlogs = localStorage.getItem('blogs');
        if (savedBlogs) {
        blogs = JSON.parse(savedBlogs);
        }
        background_animation();
        displayblogs(blogs)
        event_listners_filtering()
        
    } 
    else if (pageId === 'writePage') {
      
      text_box()
      publish_draft()
      notes()
    
    }
    else if (pageId === 'draftpage') {
      let savedDrafts = localStorage.getItem('drafts');
      if (savedDrafts) {
        drafts = JSON.parse(savedDrafts);
        }
      displaydrafts(drafts)
      // publish_draft()
    
    }
});


//likes counting
// const button = getElementById('like-btn')
// function incrementLikes(button) {
//   const likeCountSpan = button.nextElementSibling;
//   let currentLikes = parseInt(likeCountSpan.textContent, 10);
//   if (button.classList.contains('liked')) {
//     // If liked, decrement the count and remove 'liked' class
//     likeCountSpan.textContent = currentLikes - 1;
//     button.classList.remove('liked');
//     button.style.backgroundColor='transparent'
//   }
//   else{
//     likeCountSpan.textContent = currentLikes + 1;
//     button.classList.add('liked')
//     button.style.backgroundColor='green'
//   }
// }

//Function to display cards and the blogs details(upon clicking in read section)
function displayblogs(blogs){

const cards = document.getElementById('cards')
cards.innerHTML=''
//creating blog cards
let blogDetail;
for(let i = 0;i<blogs.length;i++)
{
let test_blog = blogs[i]

let card = document.createElement('div')
card.className='card'

let img = document.createElement('img')
img.src=test_blog.image
card.appendChild(img)

let author_date = document.createElement('p')
author_date.textContent=`${test_blog.author} -- ${test_blog.date}`
card.appendChild(author_date)

let heading = document.createElement('h1')
heading.innerHTML=test_blog.title
card.appendChild(heading)

let content = document.createElement('p')
content.innerHTML=test_blog.content
card.appendChild(content)

let category = document.createElement('div')
category.className='category'
for(let j=0;j<test_blog['categories'].length;j++)
{
let categories = document.createElement('a')
categories.className="categories links"

  categories.textContent=test_blog['categories'][j]
  category.appendChild(categories)
  
}
card.appendChild(category)
let likes = document.createElement('div')
likes.id='likes'
let lyk_btn = document.createElement('button')
lyk_btn.id='like-btn'
// lyk_btn.onclick="incrementLikes(this)"
let counter = document.createElement('span')
counter.className='like-count'
counter.textContent=test_blog.likes
likes.appendChild(counter)

lyk_btn.innerHTML='<img src="./images/arrow-up.png" alt="" height="15px">'
likes.appendChild(lyk_btn)

card.appendChild(likes)

card.addEventListener('click', function () {
  // Hide cards section
  cards.style.display = 'none';
  document.getElementById('filter').style.display='none'
  blogDetail = document.getElementById('blog-detail')
  // Display detailed view
  blogDetail.style.display = 'block';
  blogDetail.innerHTML = `
    <h1 class="blog-head">&lt;${test_blog.title}&gt;</h1>
    <p id="blog-author" >${test_blog.author} -- ${test_blog.date}</p>
    <hr>
    <p class="blog-content ">${test_blog.content}</p>
  `;
  let dots = document.getElementsByClassName('dot')
  for (let i = 0; i < 70; i++) {
    dots[i].style.visibility='hidden'
  }
});
cards.appendChild(card)
}
}
//Similar to display cards in draft section(as in read section)
function displaydrafts(drafts){

  const cards = document.getElementById('cards')
  cards.innerHTML=''
  //creating blog cards
  let blogDetail;
  for(let i = 0;i<drafts.length;i++)
  {
  let test_blog = drafts[i]
  
  let card = document.createElement('div')
  card.className='card'
  
  let img = document.createElement('img')
  img.src=test_blog.image
  card.appendChild(img)
  
  let author_date = document.createElement('p')
  author_date.textContent=`${test_blog.author} -- ${test_blog.date}`
  card.appendChild(author_date)
  
  let heading = document.createElement('h1')
  heading.innerHTML=test_blog.title
  card.appendChild(heading)
  
  let content = document.createElement('p')
  content.innerHTML=test_blog.content
  card.appendChild(content)
  
  let category = document.createElement('div')
  category.className='category'
  for(let j=0;j<test_blog['categories'].length;j++)
  {
  let categories = document.createElement('a')
  categories.className="categories links"
  
    categories.textContent=test_blog['categories'][j]
    category.appendChild(categories)
    
  }
  card.appendChild(category)
  let edit_del = document.createElement('div')
  edit_del.id="edit_del"
  let edit = document.createElement('span')
  edit.id='edit'
  edit.textContent='Edit'
  edit_del.appendChild(edit)
  let del = document.createElement('span')
  del.id='del'
  del.textContent='Delete'
  edit_del.appendChild(del)

  card.appendChild(edit_del)
  
  card.addEventListener('click',(event)=>{
    console.log("clicked")
    if(event.target.id==='edit')
    {
      console.log(test_blog.title)
    }
    else if(event.target.id==='del'){
      card.remove()
    }
  })
  
  cards.appendChild(card)
  
  }
}


//sorting blogs 
//sorting by likes
function sortBlogsbylikes(order) {
  if (order === "highestlike") {
    blogs.sort((a, b) => b.likes - a.likes); // Descending order
  } else if (order === "lowestlike") {
    blogs.sort((a, b) => a.likes - b.likes); // Ascending order
  }
  displayblogs(blogs);
}

//sorting by date
// Function to change date format
function parseDate(dateStr) {
  const months = {
    "Jan": 0, "Feb": 1, "Mar": 2, "Apr": 3, "May": 4, "Jun": 5,
    "Jul": 6, "Aug": 7, "Sep": 8, "Oct": 9, "Nov": 10, "Dec": 11
  };

  const parts = dateStr.split(" ");
  const day = parseInt(parts[0], 10);
  const month = months[parts[1]];  
  const year = parseInt(parts[2], 10); 

  return new Date(year, month, day); 
}

// Function to sort blogs by date
function sortBlogsByDate(order) {
  if (order === "latest") {
    blogs.sort((a, b) => {
      const dateA = parseDate(a.date);
      const dateB = parseDate(b.date);
      return dateB - dateA; // Latest to earliest
    });
  } else if (order === "oldest") {
    blogs.sort((a, b) => {
      const dateA = parseDate(a.date);
      const dateB = parseDate(b.date);
      return dateA - dateB; // Earliest to latest
    });
  }

  displayblogs(blogs);
}

//Function to sort by categories
function filterBlogsByCategory(selectedCategory) {
  if (selectedCategory === "") {
    displayblogs(blogs);
  } else {
    const filteredBlogs = blogs.filter((blog) =>
      blog.categories.includes(selectedCategory)
    );
    displayblogs(filteredBlogs);
  }
}
// Event listener for dropdown for date
function event_listners_filtering(){
document.getElementById("date-fltr").addEventListener("change", (event) => {
  const order = event.target.value;
  const likesDropdown = document.getElementById("like-fltr");
  likesDropdown.value = "";
  const categorydropdown = document.getElementById("catergory-fltr")
  categorydropdown.value=""
  sortBlogsByDate(order)
});

//adding event listener for like
document.getElementById("like-fltr").addEventListener("change", (event) => {
  const order = event.target.value;
  const datesDropdown = document.getElementById("date-fltr");
  datesDropdown.value=''
  const categorydropdown = document.getElementById("catergory-fltr")
  categorydropdown.value=""
  sortBlogsbylikes(order);
});

//event listner for category
document.getElementById("catergory-fltr").addEventListener("change", (event) => {
  const selectedCategory = event.target.value;
  filterBlogsByCategory(selectedCategory);
});
}
//text box
function text_box(){
	const content = document.getElementById('content');
  
    content.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') {
        event.preventDefault(); // Prevent default behavior of creating block elements
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);

        // Insert a <br> at the caret position
        const br = document.createElement('br');
        range.insertNode(br);

        // Move the caret after the <br>
        range.setStartAfter(br);
        range.setEndAfter(br);
        selection.removeAllRanges();
        selection.addRange(range);

        // Ensure the contenteditable div is not empty after <br>
        if (editableDiv.innerHTML === '<br>' || editableDiv.innerHTML === '') {
            editableDiv.innerHTML = '<br><br>';
            range.setStartAfter(editableDiv.firstChild);
            range.setEndAfter(editableDiv.firstChild);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
});






content.addEventListener('mouseenter', function () {
	const a = content.querySelectorAll('a');
	a.forEach(item=> {
		item.addEventListener('mouseenter', function () {
			content.setAttribute('contenteditable', false);
			item.target = '_blank';
		})
		item.addEventListener('mouseleave', function () {
			content.setAttribute('contenteditable', true);
		})
	})
  window.formatDoc= function(cmd, value=null) {
    if(value) {
      document.execCommand(cmd, false, value);
    } else {
      document.execCommand(cmd);
    }
  }
})
}


function publish_draft(){
//extracting the content
document.querySelector('#publish-btn').addEventListener('click',(event)=>{
  event.preventDefault()
  const title = document.getElementById('title-section').value
  const content = document.getElementById('content').innerHTML
  // console.log(content)
  // console.log(title)
  // console.log(content)
  const warning = document.getElementById('warning-message');
  const author = 'You'
  let categories =[]
  categories.push(document.getElementById("catergory-input").value)
  let likes = 0
  const date = date_filler();
  let image = document.getElementById('imglink').value
  if(image=="")
  {
    image = './images/no_image.jpg'
  }
  if (!title || !content || categories[0]=="") {
    warning.textContent = 'Please fill out all fields before publishing.';
    warning.style.color = 'red';
    return;
  }
  warning.textContent = '';
  blogs.unshift({title,author,date,image,content,categories,likes});
  localStorage.setItem('blogs', JSON.stringify(blogs));
  window.location.href = 'read.html';
  // console.log(blogs)
  // displayblogs(blogs)
})


function date_filler()
{
  const today = new Date();
  const year = today.getFullYear();
  const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const month = monthNames[today.getMonth()]; 
  const day = String(today.getDate()).padStart(2, '0');
  return `${day} ${month} ${year}`
}

document.querySelector('#draft-btn').addEventListener('click',(event)=>{
  event.preventDefault()
  const title = document.getElementById('title-section').value
  const content = document.getElementById('content').innerHTML
  let categories = []
  const author = 'You'
  const date = date_filler()
  categories.push(document.getElementById('categories').value)

  let image = document.getElementById("imglink").value
  console.log(image)
  if (image = ""){
    image = './images/no_image.jpg'
  }
  drafts.unshift({title,author,date,image,content,categories});
  localStorage.setItem('drafts', JSON.stringify(drafts));
  window.location.href = "drafts.html";
})
}

function notes(){
  const noteit_btn = document.getElementById('note_it')
  noteit_btn.addEventListener('click',()=>{
  const  notes_data = document.getElementById('notes').value
    // console.log(notes)
    const notes = document.createElement('div')
    const delete_btn = document.createElement('span')
    const LightColors = [
      "#F8F9FA", // Light Gray
      "#E3F2FD", // Light Blue
      "#E8F5E9", // Light Green
      "#FFFDE7", // Light Yellow
      "#FFEBEE", // Light Red
      "#F3E5F5", // Light Purple
      "#EDE7F6", // Light Violet
      "#FFCCBC", // Light Orange
      "#FFECB3", // Soft Peach
      "#90CAF9", // Sky Blue
      "#A5D6A7", // Mint Green
      "#FFF59D", // Mellow Yellow
      "#FFAB91", // Soft Coral
      "#CE93D8", // Lilac
      "#F48FB1", // Blush Pink
      "#FFCC80", // Warm Peach
      "#D1C4E9", // Pale Lavender
      "#B39DDB", // Medium Purple
      "#80CBC4", // Aquamarine
      "#A1887F", // Dusty Brown
      "#E6EE9C", // Light Olive
      "#FDD835", // Golden Yellow
      "#FFA726", // Soft Orange
      "#FF7043", // Burnt Coral
      "#81D4FA", // Medium Cyan
      "#4DD0E1", // Bright Teal
      "#FFD54F", // Sunflower Yellow
      "#FF8A65", // Salmon
      "#BA68C8", // Vibrant Violet
      "#7986CB", // Muted Indigo
      "#4FC3F7", // Ocean Blue
      "#AED581", // Light Avocado Green
      "#F06292", // Rosy Pink
      "#FFD180", // Apricot
      "#FF6E40", // Flamingo
      "#BCAAA4", // Mocha Beige
      "#B0BEC5", // Steel Blue Gray
      "#A7C0CD", // Slate Blue
      "#C2185B", // Raspberry
      "#9FA8DA", // Lavender Blue
      "#FFB74D", // Butterscotch
      "#8EACBB", // Denim Blue
      "#81C784", // Sage Green
      "#E57373", // Light Brick Red
      "#C5E1A5", // Pistachio
      "#D1C4E9", // Lavender
      "#F0F4C3", // Pale Lime
      "#FCE4EC", // Light Pink
      "#E1F5FE", // Baby Blue
      "#F9FBE7", // Mint Green
      "#FFF8E1", // Ivory
      "#FFCDD2", // Blush Pink
      "#D7CCC8", // Beige
      "#FBE9E7", // Coral Mist
      "#FFF3E0", // Creamy Peach
      "#E0F2F1", // Aquamarine
      "#E0F7FA", // Soft Cyan
      "#F3F4F6", // Platinum
      "#E6EE9C", // Lemon Grass
      "#FFAB91", // Apricot
      "#FFE0B2", // Pale Orange
      "#F8BBD0", // Candy Pink
      "#C5CAE9", // Periwinkle
      "#C8E6C9", // Spring Green
      "#D7CCC8", // Taupe
      "#ECEFF1", // Light Steel
      "#FFCCCB", // Pale Red
      "#FFF9C4", // Pastel Yellow
      "#DCEDC8", // Sage Green
      "#F0F8FF", // Alice Blue
      "#E3DAC9", // Linen
      "#FAF0E6", // Light Linen
      "#FDF5E6", // Old Lace
      "#FFF0F5", // Lavender Blush
      "#FFE4E1", // Misty Rose
      "#F5F5DC", // Beige
      "#FAFAD2", // Light Goldenrod Yellow
      "#E0FFFF", // Light Cyan
      "#F0FFF0", // Honeydew
      "#F5FFFA", // Mint Cream
      "#F8F8FF", // Ghost White
      "#F0F8FF", // Alice Blue
      "#F5F5F5", // White Smoke
      "#FFFAFA", // Snow
      "#FFFFF0", // Ivory
    ];
    let index = Math.floor(Math.random()*85 )+1
  if(notes_data!=""){
    
  notes.className='noting'
  notes.textContent=notes_data
  notes.style.color='black'
  notes.style.backgroundColor=LightColors[index]
  delete_btn.textContent='Delete'
  notes.appendChild(delete_btn)
  }
  
  notes_section = document.getElementById('notes-section')
  notes_section.appendChild(notes)
  document.getElementById('notes').value=""
  delete_btn.addEventListener('click',()=>{
    notes.remove()
  })
  })
}


//light and dark mode
let lyt_drk = document.getElementById('lyt_drk')
function toggleLightMode(isLightMode){
  const elementsToToggle = [
    document.body,
    document.getElementById('navbar'),
    document.getElementById('logo'),
    document.querySelector('footer'),
    document.querySelector('#typingText'),
    document.querySelector('#Share'),
    document.querySelector('#cursor'),
    document.getElementById('fltr-txt'),
    document.getElementById('content'),
    document.getElementById('title-section'),
    document.getElementById('blog-content'),
    document.getElementById('sidebar'),
    document.getElementById('blog-author')
  ];

  // Add elements from the collections
  const btn = document.getElementsByClassName('btn');
  const dot = document.getElementsByClassName('dot');
  const card = document.getElementsByClassName('card')
  const link = document.getElementsByClassName('links')
  const fltr = document.getElementsByClassName('fltr-name')
  const blog_content = document.getElementsByClassName('blog-content')
  const toolbar = document.getElementsByClassName('toolbar')
  elementsToToggle.push(...btn, ...dot, ...card,...link,...fltr,...blog_content,...toolbar);

  // Toggle 'dark-mode' class for all elements
  elementsToToggle.forEach(element => {
    if (element) {
      element.classList.toggle('dark-mode', !isLightMode);
    }
  });
}
lyt_drk.addEventListener('click',()=>{
  const isLightMode = lyt_drk.textContent === "Light-Mode";
  lyt_drk.textContent = isLightMode ? "Dark-Mode" : "Light-Mode";

  // Save the preference in localStorage
  localStorage.setItem('theme', isLightMode ? 'light' : 'dark');

  // Toggle light mode
  toggleLightMode(isLightMode);
})

window.addEventListener('DOMContentLoaded', () => {
  const theme = localStorage.getItem('theme') || 'light';
  const isLightMode = theme === 'light';

  // Update button text
  lyt_drk.textContent = isLightMode ? "Light-Mode" : "Dark-Mode";

  // Apply the mode
  toggleLightMode(isLightMode);
});

let lyt_drks = document.getElementById('lyt_drks')
document.getElementById('mobilehamburger').addEventListener("click",(event)=>{
  document.getElementById("sidebar").style.display='flex'
    // console.log(event.target.id)
    if(event.target.id==='closesidebar')
    {
    document.getElementById("sidebar").style.display ="none"
    }

    else if(event.target.id==='lyt_drks')
    {
      const isLightMode = event.target.textContent === "Light-Mode"
      lyt_drks.textContent = isLightMode ? "Dark-Mode" : "Light-Mode";

      // Save the preference in localStorage
  localStorage.setItem('theme', isLightMode ? 'light' : 'dark');

  // Toggle light mode
  toggleLightMode(isLightMode);
  }
    

  
})