Fix API cors issue

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.env
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.vercel

README.md

@@ -27,21 +27,21 @@
 
 ## About The Project
 
-<p>The goal of this landing page challenge is integration with the shrtcode URL shortening API and playing with browser storage.
+- The goal of this landing page challenge is integration with the shrtcode URL shortening API and playing with browser storage.
 The challenge is to integrate with the shrtcode API to create shortened URLs and display them like in the designs.
 You can use any JavaScript framework/library on the front-end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.
-<br><br>Users should be able to:
-<br>1. View the optimal layout depending on their device's screen size.
+
+
+### Users should be able to:
+1. View the optimal layout depending on their device's screen size.
 2. See hover states for all interactive elements on the page.
-<br>
 3. Shorten any valid URL.
-<br>
 4. Copy the shortened link to their clipboard in a single click.
-<br>
-  5. Receive an error message when the form is submitted if the input field is empty.
-  <br>
-  6. See a list of their shortened links, even after refreshing the browser.
-<br> <p>I do not have access to the Figma sketch so the design is not pixel perfect.</p>
+5. Receive an error message when the form is submitted if the input field is empty.
+6. See a list of their shortened links, even after refreshing the browser.
+
+
+I do not have access to the Figma sketch so the design is not pixel perfect.
 
 
 

app.js

@@ -40,9 +40,8 @@ shortlyBtn.addEventListener("click", (e) => {
         fetchBackupUrl(inputValue);
     }
 });
-
 function fetchBackupUrl(inputValue) {
-    fetch(`https://ulvis.net/API/write/get?url=${inputValue}`)
+    fetch(`http://localhost:3000/shorten?url=${encodeURIComponent(inputValue)}`)
         .then((response) => response.json())
         .then((response) => {
             if (response.success) {
@@ -55,23 +54,24 @@ function fetchBackupUrl(inputValue) {
  <button class="copy-btn">Copy</button>
 </div>
 </div>`;
-                //check if I have some storage and show results from it
+                // Check if I have some storage and show results from it
                 if (sessionStorage.getItem("resultsStorage") !== null) {
                     resultStorage = [resultSkeleton, sessionStorage.getItem("resultsStorage")].reverse();
                     parentNode.innerHTML = [resultStorage].join('').split(',').join('');
                     sessionStorage.setItem("resultsStorage", [resultStorage].join('').split(',').join(''));
                     resetResults.classList.add("active");
                 }
-                //if I don't have storage just show the first/current result
+                // If I don't have storage just show the first/current result
                 else {
                     parentNode.innerHTML = resultSkeleton;
-                    //then push this first result to my storage and then session storage
+                    // Then push this first result to my storage and then session storage
                     resultStorage.push(resultSkeleton);
                     sessionStorage.setItem("resultsStorage", [resultStorage].join('').split(',').join(''));
                     resetResults.classList.add("active");
                 }
             }
-        }).catch(error => console.log(`Error with API: ${error.message}`))
+        })
+        .catch(error => console.log(`Error with API: ${error.message}`));
 }
 
 parentNode.addEventListener("click", function (e) {