URL Keeper with HTML, CSS, and JavaScript (Source Code)

By Faraz - October 26, 2023

Learn to create URL Keeper with HTML, CSS, and JavaScript in this step-by-step tutorial. Manage and save your URLs with ease!

Join us on Telegram

URL Keeper with HTML, CSS, and JavaScript.jpg

Read Also create an eye-catching pricing table with just html, css, and javascript.jpg

Create an Eye-Catching Pricing Table with Just HTML, CSS, and Javascript

URL Keeper is a powerful web application that simplifies the process of managing and saving website URLs. In this tutorial, we will guide you through the process of building your own URL Keeper using HTML, CSS, and JavaScript. With this user-friendly tool, you can save and organize your favorite URLs effortlessly.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, create a basic HTML structure for URL Keeper. This structure will serve as the foundation for your web application.

Let me explain each part of the code:

1. <!DOCTYPE html>: This is the document type declaration, which specifies that the document is an HTML5 document.

2. <html lang="en">: This is the opening <html> tag that defines the root element of the HTML document. The lang attribute is set to "en" to indicate that the language of the document is English.

3. <head>: This is the <head> section of the HTML document. It contains metadata and information about the page, but it's not displayed on the web page itself.

<meta charset="UTF-8">: This meta tag sets the character encoding of the document to UTF-8, which is a character encoding that supports a wide range of characters and languages.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is typically used for Internet Explorer compatibility and suggests that the page should be displayed in the highest available mode in Internet Explorer.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is often used for responsive web design. It tells the browser to set the initial zoom level to 1.0 and adjust the page's width to match the device's width.
<link rel="stylesheet" href="styles.css">: This line links an external stylesheet named "styles.css" to the HTML document. Stylesheets are used for defining the visual appearance of the web page.
<title>URL Keeper</title>: This sets the title of the web page, which is displayed in the browser's title bar or tab. In this case, the title is "URL Keeper."

4. <body>: This is the opening <body> tag, which contains the visible content of the web page.

<h1>URL KEEPER</h1>: This is a top-level heading (h1) that displays the text "URL KEEPER."
<p>Keep your favorite urls in one place 🔗</p>: This is a paragraph (p) element that displays the text "Keep your favorite URLs in one place" and includes a Unicode emoji (🔗) represented by the character entity reference "."
<input type="text" id='input-el'>: This is an input element of type "text" where users can input text. It has an "id" attribute set to "input-el" for identification in scripts or styles.
<button id='inpbtn-el'>SAVE LINK</button>: This is a button element with the id "inpbtn-el," which displays the text "SAVE LINK." It can be used for saving a link.
<button id='tabbtn-el'>SAVE TAB</button>: Similar to the previous button, this button with the id "tabbtn-el" displays the text "SAVE TAB" and can be used for saving a tab or link.
<button id='clbtn-el'>CLEAR ALL</button>: This button, identified by the id "clbtn-el," displays the text "CLEAR ALL" and can be used to clear all saved links or tabs.
<ul id="ul-el">: This is an unordered list (ul) element with the id "ul-el." The list items (li) inside it will be added dynamically using JavaScript to display saved URLs.
<script src="script.js"></script>: This script tag links an external JavaScript file named "script.js" to the HTML document. JavaScript is used for adding interactivity and functionality to the web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>URL Keeper</title>
</head>
<body>
    <h1>URL KEEPER</h1>
    <p>Keep your favorite urls in one place 🔗</p>
    <input type="text" id='input-el'>
    <button id='inpbtn-el'>SAVE LINK</button>
    <button id='tabbtn-el'>SAVE TAB</button>
    <button id='clbtn-el'>CLEAR ALL</button>
    <ul id="ul-el">
    </ul>
    <script src="script.js">
    </script>
</body>
</html>

Read Also Creating an Interactive Feedback UI HTML, CSS, JavaScript.jpg

Creating an Interactive Feedback UI: HTML, CSS, JavaScript

Step 2 (CSS Code):

A visually appealing user interface is essential for a user-friendly experience. Use CSS to style URL Keeper. Create a CSS file and link it to your HTML document.

Let me explain each part:

1. body:

Sets the left and right margins to 0, effectively removing any default margin.
Adds 10 pixels of padding on all sides of the body element.
Specifies the font family to be used, with fallback options if Arial is not available.
Ensures a minimum width of 400 pixels.
Sets the background color to black.

2. h1:

Removes the default margin at the bottom of <h1> elements.
Sets the text color to #3463c9 (a shade of blue).

3. p:

Removes the default margin at the top of <p> elements.
Sets the text color to #e67518 (a shade of orange).

4. input:

Makes all <input> elements extend to 100% of their container width.
Adds a 1-pixel solid border with the color #4af029.
Sets the padding inside the input element to 10 pixels.
The box-sizing property ensures that the padding and border are included in the total width.
Adds a margin at the bottom of 4 pixels to separate input elements.

5. button:

Sets the background color to #e944e1 (a shade of pink/purple).
Adds a slight border radius (rounded corners) of 1 pixel.
Sets the text color to white.
Adds padding of 10 pixels on the top and bottom and 20 pixels on the left and right.
Adds a 1-pixel solid border with the color #5f9341.
Makes the text bold.

6. #clbtn-el:

This targets an element with the id of "clbtn-el."
Sets the background to white (rgb(255, 255, 255)).
Changes the text color to #5f9341 (a shade of green).

7. ul:

Adds a margin of 20 pixels at the top of unordered lists.
Removes the default list-style (bullets).
Sets the padding on the left of the list to 0.

8. li:

Adds a margin of 5 pixels at the top of list items.

9. a:

Sets the text color of links to white.
Defines a font size of 1 rem (relative to the root font size).

body{
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  min-width: 400px;
  background-color: black;
}
h1{
  margin-bottom: 0;
  color: #3463c9;
}
p{
  margin-top: 0;
  color: #e67518;
}
input{
  width: 100%;
  border: 1px solid #4af029;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 4px;
}
button{
  background: #e944e1;
  border-radius: 1px;
  color: white;
  padding: 10px 20px;
  border: 1px solid #5f9341;
  font-weight: bold;
}
#clbtn-el{
  background: rgb(255, 255, 255);
  color: #5f9341;
}

ul {
  margin-top: 20px;
  list-style: none;
  padding-left: 0;
}

li {
  margin-top: 5px;
}

a {
  color: #ffffff;
  font-size: 1rem;
}

Step 3 (JavaScript Code):

Now, let's add JavaScript to make URL Keeper functional. Start by linking your JavaScript file:

Let's break down what the code is doing step by step:

1. It begins by defining several constants and variables:

inputEl, inpBtnEl, tabBtnEl, and clBtnEl are constants that store references to HTML elements with specific IDs using document.querySelector(). These elements are form inputs and buttons on your web page.
ulEl is a variable that stores a reference to an HTML element with an ID, which is an unordered list where URLs will be displayed.
urlsFromLocalStorage attempts to retrieve and parse JSON data from the 'urls' key in the browser's local storage. If data is found, it populates the urls variable with this data, assuming it's an array.
An empty array urls is declared, which will be used to store the list of URLs.

2. The code then checks if there are URLs stored in local storage:

If there are URLs (urlsFromLocalStorage is not null), it populates the urls array with the stored data and calls the renderUrls() function to display them in the HTML.

3. Event listeners are set up for three different buttons:

inpBtnEl (presumably a button for user input): When clicked, it checks if the inputEl (presumably an input field) has a value. If it does, it pushes the value (a URL) into the urls array, clears the input field, stores the updated urls array in local storage, and updates the display by calling renderUrls(). If the input field is empty, it displays an alert.
tabBtnEl (a button for capturing the current tab's URL): When clicked, it uses the Chrome Extension API (assuming this is a Chrome extension) to query for the active tab in the current window. It then pushes the URL of the active tab into the urls array, stores the updated urls array in local storage, and updates the display using renderUrls().
clBtnEl (presumably a button to clear stored data): When clicked, it clears the local storage and resets the urls array to an empty state. It then updates the display by calling renderUrls() to remove all displayed URLs.

4. The renderUrls(urls) function is defined to render the list of URLs in the HTML page. It generates a list of <li> elements, each containing an anchor <a> tag with the URL as the href and text. The resulting HTML string is inserted into the ulEl element, updating the displayed list of URLs on the page.

const inputEl = document.querySelector('#input-el')
const inpBtnEl = document.querySelector('#inpbtn-el')
const tabBtnEl = document.querySelector('#tabbtn-el')
const clBtnEl = document.querySelector('#clbtn-el')
let ulEl = document.querySelector('#ul-el')
const urlsFromLocalStorage = JSON.parse(localStorage.getItem('urls'))
let urls = []

if(urlsFromLocalStorage){
    urls = urlsFromLocalStorage
    renderUrls(urls)
}

inpBtnEl.addEventListener('click', function(){
    if(inputEl.value){
        urls.push(inputEl.value)
        inputEl.value = ""
        localStorage.setItem('urls', JSON.stringify(urls))
        renderUrls(urls)
    }
    else{
        alert('Please enter url.')
    }
})

tabBtnEl.addEventListener('click', function(){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        urls.push(tabs[0].url)
        localStorage.setItem("urls", JSON.stringify(urls))
        renderUrls(urls)
    })
})

clBtnEl.addEventListener('click', function(){
    localStorage.clear()
    urls = []
    renderUrls(urls)
})

function renderUrls(urls){
    let listItems = ""
    for(let i = 0; i < urls.length; i++){
        listItems += `
        <li>
            <a href=${urls[i]}>${urls[i]}</a>
        </li>
        `
    }
    ulEl.innerHTML = listItems
}

Final Output:

URL Keeper with HTML, CSS, and JavaScript.gif

Read Also

Create a Stylish Navigation Bar with Search Box Using Tailwind CSS.jpg

Create a Navigation Bar with Search Using Tailwind CSS

Conclusion:

Congratulations! You've successfully created your URL Keeper web application. With this tool, you can efficiently save, organize, and manage your bookmarks. Its user-friendly design and robust functionality make it valuable to your web development toolkit.

In conclusion, URL Keeper simplifies managing URLs, making it an invaluable tool for web developers. Start building your URL Keeper today and enjoy efficient URL management.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊