Added Widget Menu. Animations donegit add .

README.md

@@ -1,7 +1,7 @@
 # Windows11
 
 In this Project, I have made a prototype of Latest Windows11 with the help of HTML, CSS and JavaScript.
- 
+
 The Project is Published online at [Link](https://anand-3399.github.io/Hactoberfest-Windows11/)
 
 Added New Feature:

index.html

@@ -34,16 +34,17 @@
 
  <div class="taskbar">
  <div class="weather">
- <img src="img/icons/cloudyDay.svg" alt="" class="icon">
- <div class="info">
- <p>16°C</p>
- <p>Parc. soleado</p>
- </div>
+  <img src="img/icons/cloudyDay.svg" alt="" class="icon">
+  <div class="info">
+  <p>16°C</p>
+  <p>Parc. soleado</p>
+  </div>
  </div>
 
- <img id="Menu" src="img/icons/startButton.png" alt="">
- <img id="SearchIcon" src="img/icons/search-icon.svg" alt="">
- <img id="TaskView" src="img\icons\taskView.svg" alt="">
+ <img id="Menu" src="img/icons/startButton.png" alt="Start Menu">
+ <img id="SearchIcon" src="img/icons/search-icon.svg" alt="Search">
+ <img id="TaskView" src="img\icons\taskView.svg" alt="TaskView">
+ <img id="Widgets" src="img\icons\widgets.svg" alt="Widgets">
 
  <div class="rightTaskbar">
  <img src="img\icons\up.svg" alt="" onclick="Fullscreen()" title="CLICK HERE FOR FULL SCREEN">
@@ -68,6 +69,7 @@
  </div>
  </div>
  </div>
+
  <div class="startMenuPlace">
  <div class="startmenu">
  <div class="search">
@@ -311,8 +313,75 @@
  </div>
 
 
+ <div class="widgetMenu">
+ <div class="time">
+ <div class="timedate_Of_Widgets">
+ <a class="hours">00</a>:
+ <a class="minutes">00 </a>&nbsp;
+ <a class="am_pm">AM </a>
+ </div>
+ </div>
+
+ <div class="WidgetsPlace">
+
+ <div class="AllWidget Wheather">
+ <div class="topMenuWidget">
+ <img src="img/icons/cloudyDay.svg" alt="">
+ <span class="MainApp">Wheather</span>
+
+ <img src="img\icons\more-info.png" class="moreInfo"></img>
+ </div>
+
+ <div class="MainContentWindow">
+ <img src="img\icons\sun-icon.png" alt="">
+
+ <div class="leftPart">
+ <div class="Part1">
+ <img src="img\icons\home.png" alt="">
+ <p>Parc. soleado, US</p>
+
+ </div>
+ <div class="Part2">
+ <span>16°C</span>
+ <p>Strong UV Today</p>
+ </div>
+ <div class="Part3">
+ See Full Forecast
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="AllWidget MicrosoftEdge">
+ <div class="topMenuWidget">
+ <img src="img\icons\edge.svg" alt="">
+ <span class="MainApp">Microsoft Edge</span>
+
+ <img src="img\icons\more-info.png" class="moreInfo"></img>
+ </div>
+
+ <div class="MainContentWindow">
+ <div class="search">
+ <div class="SearchIcon"></div>
+ <input type="text" class="SearchInput" id="myInput1" onkeyup="" placeholder="Search on Web.."
+ title="Search on Web">
+ </div>
+ <p>
+ <img src="img\icons\location-pin.png" alt=""> Parc. soleado, US
+ </p>
+ </div>
+ </div>
+ <div class="AllWidget"></div>
+ <div class="AllWidget"></div>
+ <div class="AllWidget"></div>
+ <div class="AllWidget"></div>
+ </div>
+ </div>
+
+
+
 
 </body>
 <script src="script.js"></script>
 
-</html>
+</html>

script.js

@@ -9,7 +9,7 @@ Menu.addEventListener("click", () => {
  startmenu.style.bottom = "50px"
  startmenu.style.transform = "translateX(0)"
  searchmenu.style.bottom = "-655px"
-
+ widgetMenu.style.left = "-1000px"
  }
 })
 
@@ -25,11 +25,30 @@ SearchIcon.addEventListener("click", () => {
  searchmenu.style.bottom = "50px"
  searchmenu.style.transform = "translateX(0)"
  startmenu.style.bottom = "-655px"
+ widgetMenu.style.left = "-1000px"
+ }
+
+})
+
+Widgets = document.getElementById("Widgets")
+widgetMenu = document.getElementsByClassName("widgetMenu")[0]
+
+Widgets.addEventListener("click", () => {
+ if (widgetMenu.style.left == "0px") {
+ widgetMenu.style.left = "-1000px"
+
+ }
+ else {
+ widgetMenu.style.left = "0px"
+ startmenu.style.bottom = "-655px"
+ searchmenu.style.bottom = "-655px"
  }
 
 })
 
 
+
+
 // Setting Timings
 // START CLOCK SCRIPT
 
@@ -78,7 +97,7 @@ function updateClock() {
 }
 
 updateClock();
-window.setInterval("updateClock()", 1);
+window.setInterval("updateClock()", 100);
 
 // END CLOCK SCRIPT
 // End
@@ -90,7 +109,9 @@ clickanywhere.addEventListener("click", () => {
  }
  else if (searchmenu.style.bottom == "50px") {
  searchmenu.style.bottom = "-655px"
-
+ }
+ else if(widgetMenu.style.left == "0px"){
+ widgetMenu.style.left = "-1000px"
  }
 
 })
@@ -163,5 +184,18 @@ function myFunction1() {
 
  }
  }
+}
 
+function GetTime() {
+ let h = document.getElementById('h').innerText;
+ let m = document.getElementById('m').innerText;
+ let mi = document.getElementById('mi').innerText;
+
+ document.getElementsByClassName('hours')[0].innerText = h;
+ document.getElementsByClassName('minutes')[0].innerText = m;
+ document.getElementsByClassName('am_pm')[0].innerText = mi;
 }
+
+window.setInterval("GetTime()", 100);
+
+