-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
937 lines (830 loc) · 42.8 KB
/
script.js
File metadata and controls
937 lines (830 loc) · 42.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
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"><${test_blog.title}></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);
}
})