Hello there, coding enthusiasts! Whether you’re just dipping your toes into the world of app development or looking to add another feather to your cap, building a simple bookmarking app is a great project to tackle. This beginner-friendly tutorial will guide you step-by-step to create a basic yet functional web app to save and manage your favorite URLs. So, let’s get our hands dirty with some code!
What You’ll Need
- Text Editor: Visual Studio Code, Sublime Text, or your preferred option.
- Basic knowledge of HTML, CSS, and JavaScript: We’ll use these languages to build our app.
- A web browser: Preferably Google Chrome or Mozilla Firefox for testing.
Step 1: Setting Up the Project Structure
Create a new directory named bookmarking-app and within it, create the following files:
index.htmlstyles.cssscript.js
Step 2: Crafting the HTML
Open index.html and add this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmarking App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>My Bookmarks</h1>
<form id="bookmark-form">
<input type="url" id="bookmark-url" placeholder="Enter Bookmark URL" required>
<button type="submit">Add Bookmark</button>
</form>
<ul id="bookmark-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
What’s Happening Here?
- A form with an input field and button.
- An empty
<ul>to display saved bookmarks.
Step 3: Adding Some Style
In styles.css, add:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 50px auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
input[type="url"] {
width: 80%;
padding: 8px;
border: 1px solid #ddd;
}
button {
padding: 8px 15px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
Step 4: Making it Interactive with JavaScript
document.getElementById('bookmark-form').addEventListener('submit', function(event) {
event.preventDefault();
const url = document.getElementById('bookmark-url').value;
if (validateURL(url)) {
addBookmark(url);
document.getElementById('bookmark-url').value = '';
} else {
alert("Please enter a valid URL");
}
});
function validateURL(url) {
const pattern = new RegExp('^(https?:\\/\\/)?'+
'((([a-z0-9]+(-[a-z0-9]+)*\\.)+[a-z]{2,})|'+
'((\\d{1,3}\\.){3}\\d{1,3}))'+
'(\\:\\d+)?(\\/[-a-z0-9%_.~+]*)*'+
'(\\?[;&a-z0-9%_.~+=-]*)?'+
'(\\#[-a-z0-9_]*)?$','i');
return !!pattern.test(url);
}
function addBookmark(url) {
const bookmarkList = document.getElementById('bookmark-list');
const li = document.createElement('li');
li.innerHTML = `<a href="${url}" target="_blank">${url} <button onclick="removeBookmark(this)">Remove</button>`;
bookmarkList.appendChild(li);
}
function removeBookmark(button) {
const li = button.parentElement;
li.parentElement.removeChild(li);
}
Optional Enhancements
- Local Storage: Save bookmarks persistently.
- Categories/Tags: Organize bookmarks.
- UI Improvements: Use Bootstrap or Tailwind.
Conclusion
Congrats! You’ve built a real, useful app using just HTML, CSS, and JavaScript. Keep tweaking and improving it, and you’ll level up your dev skills fast. Happy coding!
(Visited 11 times, 1 visits today)