Implemented DRY Principle.

Added New Feature: Now Users can Search the Applications directly from the Search Bar. They have two options to Search their favorite Apps. * First is that they can Directly Search from the Start Menu. (Search Bar Enabled) * Second is through Search Icon also the apps can be searched. (Search Bar Enabled) Co-Authored-By: Anand Jaiswar <[email protected]>
anand-3399 · Jul 29, 2022 · a8dcfed · a8dcfed
1 parent ab88999
commit a8dcfed
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 63 deletions.
diff --git a/index.html b/index.html
@@ -75,7 +75,7 @@
  class="smallRight"></button>
  </div>
 
- <div class="start-icons" id="myUL">
+ <div class="start-icons" id="myICONS">
 
  <figure id="startWord">
  <img src="img/icons/word.svg" alt="MS Word icon">
@@ -187,7 +187,7 @@
  </div>
  <div class="topApps">
  <span>Top Apps</span>
- <div class="Search-Apps-Icons" id="myUL1">
+ <div class="Search-Apps-Icons" id="myICONS1">
  <figure id="DefaultDisplaySearch">
  <img src="img/icons/edge.svg" alt="Windows 11 Edge icon">
  <figcaption>Edge</figcaption>
@@ -271,27 +271,27 @@
  <div class="recentSearches">
  <span>Recent</span>
  <div class="Recent-Apps-Icons">
- <figure id="clock-RI">
+ <figure id="Recent-Searches">
  <img src="img\icons\clock.svg" alt="Clock icon">
  <figcaption>Clock</figcaption>
  </figure>
- <figure id="startSettings-RI" onclick="executeProgram('settings')">
+ <figure id="Recent-Searches" onclick="executeProgram('settings')">
  <img src="img/icons/settings.svg" alt="Windows 11 Settings icon">
  <figcaption>Settings</figcaption>
  </figure>
- <figure id="yourPhone-RI">
+ <figure id="Recent-Searches">
  <img src="img\icons\yourPhone.svg" alt="Your Phone icon">
  <figcaption>Your Phone</figcaption>
  </figure>
 
- <figure id="VSCode-RI">
+ <figure id="Recent-Searches">
  <img src="img\icons\vscode.svg" alt="VS Code icon">
  <figcaption>VS Code</figcaption>
  </figure>
 
 
 
- <figure id="terminal-RI">
+ <figure id="Recent-Searches">
  <img src="img\icons\terminal.svg" alt="Terminal icon">
  <figcaption>Terminal</figcaption>
  </figure>

diff --git a/script.js b/script.js
@@ -122,44 +122,44 @@ function Fullscreen() {
 
 
 function myFunction() {
- var input, filter, ul, li, a, i, txtValue;
+ var input, filter, icons, figure, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
- ul = document.getElementById("myUL");
- li = ul.getElementsByTagName("figure");
- for (i = 0; i < li.length; i++) {
- a = li[i].getElementsByTagName("figcaption")[0];
+ icons = document.getElementById("myICONS");
+ figure = icons.getElementsByTagName("figure");
+ for (i = 0; i < figure.length; i++) {
+ a = figure[i].getElementsByTagName("figcaption")[0];
  txtValue = a.textContent || a.innerText;
  if (txtValue.toUpperCase().indexOf(filter) > -1) {
- li[i].style.display = "";
+ figure[i].style.display = "";
  } else {
- li[i].style.display = "none";
+ figure[i].style.display = "none";
  }
  }
 }
 
 function myFunction1() {
- var input, filter, ul, li, a, i, txtValue;
+ var input, filter, icons, figure, a, i, txtValue;
  input = document.getElementById("myInput1");
  filter = input.value.toUpperCase();
- ul = document.getElementById("myUL1");
- li = ul.getElementsByTagName("figure");
+ icons = document.getElementById("myICONS1");
+ figure = icons.getElementsByTagName("figure");
 
- for (i = 0; i < li.length; i++) {
- a = li[i].getElementsByTagName("figcaption")[0];
+ for (i = 0; i < figure.length; i++) {
+ a = figure[i].getElementsByTagName("figcaption")[0];
  txtValue = a.textContent || a.innerText;
  if (txtValue.toUpperCase().indexOf(filter) > -1 && filter != "" && filter != " ") {
- // li[i].style.display = "block";
- li[i].setAttribute('id', 'SearchedTemp')
- li[i].style.display = "";
+ // figure[i].style.display = "block";
+ figure[i].setAttribute('id', 'SearchedTemp')
+ figure[i].style.display = "";
  }
  else if ((i < 5) && (filter == "" || filter == " ")) {
- li[i].setAttribute('id', 'DefaultDisplaySearch');
- li[i].style.display = "block";
+ figure[i].setAttribute('id', 'DefaultDisplaySearch');
+ figure[i].style.display = "block";
  }
  else {
- li[i].removeAttribute('id', 'SearchedTemp')
- li[i].style.display = "none";
+ figure[i].removeAttribute('id', 'SearchedTemp')
+ figure[i].style.display = "none";
 
  }
  }

diff --git a/style.css b/style.css
@@ -8,7 +8,6 @@ body {
  background-size: cover;
  overflow: hidden;
  height: 100vh;
-
 }
 
 .taskbar {
@@ -278,36 +277,25 @@ figure {
  transform: scale(1.1);
 }
 
-.Search-Apps-Icons figure{
+.Search-Apps-Icons figure {
  display: none;
 }
 
-#SearchedTemp{
+#DefaultDisplaySearch,
+#SearchedTemp {
  display: block;
  background-color: white;
  width: 91px;
  height: 83px;
  border-radius: 6px
 }
 
-#SearchedTemp:hover{
+#DefaultDisplaySearch:hover,
+#SearchedTemp:hover {
  background-color: #dedede;
 
 }
 
-#DefaultDisplaySearch
-{
- display: block;
- background-color: white;
- width: 91px;
- height: 83px;
- border-radius: 6px
-}
-
-#DefaultDisplaySearch:hover{
- background-color: #dedede;
-}
-
 .Recent-Apps-Icons {
  display: flex;
  flex-direction: column;
@@ -329,11 +317,7 @@ figure {
 }
 
 
-#clock-RI,
-#yourPhone-RI,
-#VSCode-RI,
-#startSettings-RI,
-#terminal-RI {
+#Recent-Searches {
  /* background-color: white; */
  width: 106px;
  height: 83px;
@@ -344,11 +328,7 @@ figure {
  margin: 6px 23px;
 }
 
-#clock-RI:hover,
-#yourPhone-RI:hover,
-#VSCode-RI:hover,
-#startSettings-RI:hover,
-#terminal-RI:hover {
+#Recent-Searches:hover {
  background-color: #dedede;
 }
 
@@ -365,19 +345,9 @@ figure {
  border-radius: 8px;
 }
 
-
-
-
 /* Setting Timings */
 
 #timedate {
- /* font: small-caps lighter 43px/150% "Segoe UI", Frutiger, "Frutiger Linotype",
- "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
- text-align: left;
- width: 50%;
- margin: 40px auto;
- color: #fff;
- border-left: 3px solid #ed1f24;*/
  padding: 5px;
 }