Networx/index.js at main · saketh-exe/Networx · GitHub

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
let profile = document.getElementById("profile");
let sub = document.getElementById("sub-menu");
let sub_d = false;
profile.addEventListener("click",() =>{
   sub_d = !sub_d;
   if(sub_d == true){
    sub.style.display = "block";
    sub.style.transformOrigin = "top";
    sub.style.animation = "sub-m-ani 0.5s ease-out 1 forwards"
   }
   else{
    sub.style.transformOrigin = "top";
    sub.style.animation = "sub-m-ani-r 0.5s ease 1 forwards"
    setTimeout(()=>{
        sub.style.display = "none";},600)
   }


})

document.querySelector(".post-close").addEventListener("click",()=>{
   document.querySelector(".post-interface").style.display = "none";
   document.body.style.overflow = "scroll";
   document.body.style.overflowX = "hidden";

})
document.querySelector("#Post-btn").addEventListener("click",() => {
   document.querySelector(".post-interface").style.display = "block";
   document.body.style.overflow = "hidden";
   document.querySelector(".post-interface").style.overflow = "scroll";
})

document.querySelector(".profile-info h1").textContent = localStorage.getItem("username");
document.querySelector(".sub-text p").textContent = localStorage.getItem("username");
document.querySelector("#user-id").textContent = "@"+localStorage.getItem("username").split(" ")[0];

let input_file = document.getElementById("input-file");
let prev = document.querySelector(".preview");

input_file.addEventListener("change", event =>{

   let file = event.target.files[0];
   if(file){

      const Reader = new FileReader();

      Reader.onload = function(e){
         let img = document.createElement("img");
         img.src = e.target.result;
         img.style.width = "100%"
         img.style.height = "100%"
         prev.innerHTML = " "
         prev.appendChild(img);

      }

      Reader.readAsDataURL(file);

   }

});

window.addEventListener('scroll', function() {
   if(window.scrollY > 36) {
      // Hide elements when scrolled down
      document.querySelector(".navbar-1").style.display = "none";
      document.querySelector(".navbar-3").style.display = "none";
      // Add a class to the navbar for styling changes
      document.querySelector(".navbar").classList.add("on_scroll");
      document.querySelector(".navbar").classList.remove(".navbar");
   } else {
      // Show elements and reset navbar styles when scrolled up
      document.querySelector(".navbar-1").style.display = "flex";
      document.querySelector(".navbar-3").style.display = "flex";

      // Remove the class added for styling changes
      document.querySelector(".on_scroll").classList.add("navbar");
      document.querySelector(".navbar").classList.remove("on_scroll");
   }
});

// --background-c: hsl(0, 0%, 17%);
//     --text-c: hsl(0, 0%, 100%);
//     --nav-c: hsl(0, 0%, 38%);
//     --nav-sha-c: hsl(0, 0%, 26%);
//     --nav-inp-c: hsl(0, 0%, 55%);
//     --text: rgb(255, 255, 255);
//     --lside-content: hsl(0, 0%, 28%);
//     --subheadings : hsl(0, 0%, 77%);
//     --headings : hsl(0, 0%, 100%);
//     --hover-bc:hsl(0, 0%, 21%);

let them = false;

function theme() {
   them = !them

   if(them){

      document.documentElement.style.setProperty('--background-c', 'hsl(0, 0%, 17%)');
      document.documentElement.style.setProperty('--text-c', 'hsl(0, 0%, 100%)');
      document.documentElement.style.setProperty('--nav-c', 'hsl(0, 0%, 38%)');
      document.documentElement.style.setProperty('--nav-inp-c', 'hsl(0, 0%, 55%)');
      document.documentElement.style.setProperty('--nav-sha-c', 'hsl(0, 0%, 26%)');
      document.documentElement.style.setProperty('--text', 'rgb(255, 255, 255)');
      document.documentElement.style.setProperty('--lside-content', 'hsl(0, 0%, 28%)');
      document.documentElement.style.setProperty('--subheadings', 'hsl(0, 0%, 77%)');
      document.documentElement.style.setProperty('--headings', 'hsl(0, 0%, 100%)');
      document.documentElement.style.setProperty('--hover-bc', 'hsl(0, 0%, 21%)');
      document.querySelector("#theme_changer_btn").innerHTML = 'LightTheme <i class="fa-regular fa-sun"></i>'
   }
   else{
      document.documentElement.style.setProperty('--background-c', 'hsl(210, 100%, 97%)');
      document.documentElement.style.setProperty('--text-c', 'hsl(0, 0%, 13%)');
      document.documentElement.style.setProperty('--nav-c', 'hsl(0, 0%, 100%)');
      document.documentElement.style.setProperty('--nav-inp-c', 'hsl(210, 15%, 87%)');
      document.documentElement.style.setProperty('--nav-sha-c', 'hsl(0, 0%, 89%)');
      document.documentElement.style.setProperty('--text', 'black');
      document.documentElement.style.setProperty('--lside-content', 'hsl(220, 100%, 99%)');
      document.documentElement.style.setProperty('--subheadings', 'hsl(0, 0%, 34%)');
      document.documentElement.style.setProperty('--headings', 'hsl(0, 0%, 15%)');
      document.documentElement.style.setProperty('--hover-bc', 'hsl(0, 0%, 85%)');
      document.querySelector("#theme_changer_btn").innerHTML = 'DarkTheme <i class="fa-solid fa-moon"></i>'
   }

}