Clean the client code and add an empty settings page

public/index.html

@@ -11,23 +11,7 @@
         <div class="app">
             <main class="content">
                 <h1>Images Scrapper JS</h1>
-                <div class="view" id="view">
-                    <div class="horizontal-div">
-                        <form class="horizontal-div input-form" id="search-form">
-                            <input id="search-input" type="text" placeholder="Search For Images..." />
-                            <button onclick="search()">Search</button>
-                        </form>
-                        <button class="square" onclick="download()"><img src="assets/downloadButton.png" /></button>
-                    </div>
-                    <hr />
-                    <div class="loader-div" id="loader-div">
-                        <div class="loader" id="loader"></div>
-                        <h2>Scrapping in progress ...</h2>
-                    </div>
-                    <div class="scroll-div">
-                        <div id="images-div" class="images-div scroll-hidden"></div>
-                    </div>
-                </div>
+                <div class="view" id="view"></div>
             </main>
         </div>
 
@@ -37,6 +21,33 @@
             </div>
         </template>
 
+        <template id="home-template">
+            <div class="horizontal-div">
+                <form class="horizontal-div input-form" id="search-form">
+                    <input id="search-input" type="text" placeholder="Search For Images..." />
+                    <button onclick="search()">Search</button>
+                </form>
+                <button class="square" onclick="download()"><img src="assets/downloadButton.png" /></button>
+                <button class="square" onclick="navigate('settings')"><img src="assets/settingsButton.png" /></button>
+            </div>
+            <hr />
+            <div class="loader-div" id="loader-div">
+                <div class="loader" id="loader"></div>
+                <h2>Scrapping in progress ...</h2>
+            </div>
+            <div class="scroll-div">
+                <div id="images-div" class="images-div scroll-hidden"></div>
+            </div>
+        </template>
+
+        <template id="settings-template">
+            <div class="horizontal-div">
+                <button class="square" onclick="navigate('home')"><img src="assets/leftArrowButton.png" /></button>
+                <h2>Settings</h2>
+            </div>
+            <hr />
+        </template>
+
         <script src="script.js"></script>
     </body>
 </html>

public/script.js

@@ -1,17 +1,13 @@
 const starsNumber = 1000;
-const searchInput = document.getElementById("search-input");
-const searchForm = document.getElementById("search-form");
-const imagesDiv = document.getElementById("images-div");
-const imageTemplate = document.getElementById("image-template");
-const loaderDiv = document.getElementById("loader-div");
+const view = document.getElementById("view");
+const homeTemplate = document.getElementById("home-template");
+const settingsTemplate = document.getElementById("settings-template");
 let imagesUrls = [];
 let uuid;
 
-starsCanvas(starsNumber);
-searchForm.addEventListener("submit", function (event) {
-    event.preventDefault();
-});
+navigate("home");
 
+starsCanvas(starsNumber);
 window.addEventListener("resize", () => {
     starsCanvas(starsNumber);
 });
@@ -84,6 +80,23 @@ function starsCanvas(number) {
     animate();
 }
 
+function navigate(page) {
+    view.replaceChildren();
+    switch (page) {
+        case "home":
+            view.appendChild(homeTemplate.content.cloneNode(true));
+            const searchForm = document.getElementById("search-form");
+
+            searchForm.addEventListener("submit", function (event) {
+                event.preventDefault();
+            });
+            break;
+        case "settings":
+            view.appendChild(settingsTemplate.content.cloneNode(true));
+            break;
+    }
+}
+
 async function getImagesURL(query, offset, count, smart) {
     const url = `/api/getImagesURL?q=${encodeURIComponent(query)}&offset=${offset}&count=${count}&smart=${smart}`;
     const response = await fetch(url);
@@ -94,13 +107,7 @@ async function getImagesURL(query, offset, count, smart) {
     const data = await response.json();
     uuid = data.uuid;
 
-    loaderDiv.classList.toggle("show");
-    for (const url of data.urls) {
-        imagesUrls.push(url);
-        const imageTemplateCopy = imageTemplate.content.cloneNode(true);
-        imageTemplateCopy.getElementById("image").src = url;
-        imagesDiv.append(imageTemplateCopy);
-    }
+    return data.urls;
 }
 
 async function downloadImages(uuid) {
@@ -123,9 +130,22 @@ async function downloadImages(uuid) {
 }
 
 async function search() {
+    const imageTemplate = document.getElementById("image-template");
+    const imagesDiv = document.getElementById("images-div");
+    const loaderDiv = document.getElementById("loader-div");
+    const searchInput = document.getElementById("search-input");
+
     imagesDiv.replaceChildren();
     loaderDiv.classList.toggle("show");
-    await getImagesURL(searchInput.value, 1, 1000, false);
+    const urls = await getImagesURL(searchInput.value, 1, 1000, false);
+
+    loaderDiv.classList.toggle("show");
+    for (const url of urls) {
+        imagesUrls.push(url);
+        const imageTemplateCopy = imageTemplate.content.cloneNode(true);
+        imageTemplateCopy.getElementById("image").src = url;
+        imagesDiv.appendChild(imageTemplateCopy);
+    }
 }
 
 async function download() {

public/style.css

@@ -55,6 +55,14 @@ body {
     justify-content: center;
 }
 
+.content h2 {
+    font-size: 32px;
+    color: var(--text-color);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 .content button {
     width: 200px;
     height: 50px;