Bookmark Project in JavaScript with Source Code

Bookmark Project in JavaScript with Source Code

The Bookmark Project in JavaScript is a system project created using HTML, CSS, and JavaScript. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else, can update and change both HTML and CSS.

This project for Bookmark in JavaScript is complete and totally error free and  also includes a downloadable Source Code for free, just find the downloadable source code below and click to start downloading. Before you start to click the download now first you must click the Run Quick Scan for secure Download.

The project is designed to add records of various locations that you want to mark for a later visit. You can hold bookmarks with the acceptable name of any website you want. For the management method, this project uses Crud service. The user should use the right name to add the records of several pages. The user can add the information here, delete the information whenever they want, and visit the bookmarked sites whenever they want. This project contains a lot of JavaScript to validate those elements.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

Anyway if you want level up your knowledge in programming especially C/C++ Programming Language, try this new article I’ve made for you Best C Projects with Source Code for Beginners Free Download 2020.

To start creating a Bookmark Project in JavaScript with Source Code, make sure that you have any platform in creating a JavaScriptbootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

Steps on how to create a Bookmark Project in JavaScript with Source Code

Bookmark Project in JavaScript with Source Code

  • Step 1: Open Sublime Text.

    First after installing sublime text IDE, click “open” to start.

  • Step 2: Create a HTML file.

    Second click “file” and select “save as” and named it “index.html“.write index.html in your bookmark in javascript with source code

  • Step 3: Create a JavaScript file.

    Third click “file” and select “save as” and named it “main.js

  • Step 4: Create a CSS file.

    Fourth click “file” and select “save as” and named it “style.csswrite style.css in your bookmark in javascript with source code

  • Step 5: The actual code.

    You are free to copy the code given below and paste to your different file created.

This code is for creating structure of index.html

In the code given below, which is for the function for creating structure of index.html. It is composed of site name label and site URL label and the add button.(Bookmark Project in JavaScript)

Bookmark





Bookmarker


<!-- Start Bookmarker Body-->
<section>
    <div class="container py-3 pl-4 border-bottom border-dark">
        <!-- Start Bookmark Site -->
        <div id="bookmarkSite" class="text-center mb-4">
            <h3 class="mb-5 text-capitalize">Bookmark your favorite sites</h3>
            <form>
                <div class="form-group"> <label for="exampleInputEmail1">Site Name</label> <input type="text" class="form-control mb-4" id="s_name" placeholder="Bookmark Name" /> <label for="exampleInputEmail1">Site URL</label> <input type="text" class="form-control mb-4" id="s_url" placeholder="Website URL" /> </div> <button type="button" id="addbuttonweb" onclick="addsite()" class="btn btn-primary">Submit</button>
            </form>
        </div> <!-- End Bookmark Site -->
        <!-- Start Sites Presentation -->
        <div id="displaySite">
            <div class="websiteItem">
                <h3 class="d-inline-block">ITSOURCECODE</h3> <a id="v_button" class="btn btn-primary d-inline-block mx-2" href="https://itsourcecode.com/" target="_blank">Visit</a> <button id="d_button" onclick="deletesite(this)" class="btn btn-danger text-white d-inline-block mx-2">Delete</button>
            </div>
        </div> <!-- End Sites Presentation -->
    </div>
</section> <!-- End Bookmarker Body-->
<!-- Start Bookmarker Footer -->
<footer>
    <div class="container py-3 pl-4">
        <p>&copy; 2020 Bookmarker Inc.</p>
    </div>
</footer> <!-- Start Bookmarker Footer --> <input type="checkbox" id="checkInp" />
<div id="imageDiv"> </div>
<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/main.js">
    checkInp.on = function() {
        var imageDiv = document.getElementById("imageDiv");
        var myImg = "<img src=\" Path Here \" />";
        imageDiv.innerHTML += myImg;
    };
</script>

This code is for adding style

In the code given below, which is for the function for adding a style of a buttons, labels, background, the title and for the footer.(Bookmark Project in JavaScript)

/* Start General Rules / body { font-family: Arial, Helvetica, sans-serif; } .btn:hover { box-shadow: 2px 5px 3px 0px #888; } .btn-danger:hover { background-color: red !important; border-color: black !important; } .btn-primary:hover { background-color: green !important; border-color: black !important; } / End General Rules */
/* Start Bookmarker header / header h2 { color: black; } / End Bookmarker header */
/* Start Bookmark Site */
bookmarkSite
{
background-color: blue;
padding: 2rem;
}
bookmarkSite form .form-group label
{
font-weight: bold;
color: white;
}
/* End Bookmark Site */
/* Start Sites Presentation */
displaySite .websiteItem
{
background-image: linear-gradient(white,white);
padding: 1.5rem;
margin: 1rem 0;
}
displaySite .websiteItem h3
{
width: 30%;
color: blue;
line-height: 1.6;
}
/* End Sites Presentation */
/* Start Bookmarker Footer / footer p { color: black; font-weight: bold; margin: .9rem 0; line-height: 2; } / End Bookmarker Footer */

This code is for events handling

In the code given below, when the users click the submit button it will display on the screen and the users also can delete and visit the site URL he/she added.(Bookmark Project in JavaScript)

var s_name = document.getElementById("s_name"),
s_url = document.getElementById("s_url"),
addbuttonweb = document .getElementById("addbuttonweb"),
d_button = document.getElementById("d_button"),
v_button = document.getElementById("v_button"),
websiteItem = document.getElementsByClassName("websiteItem"),
S_List = [];
// Add Website Name and URL Function
function addsite()
{
if (s_name != "" && s_url != "") {
var website = { name: s_name.value, url: s_url.value }; S_List.push(website); displayWebsite(); s_name.value = ''; s_url.value = '';
} else {
alert("Please, Fill These Fields");
}
}
// Display Website Name and URL Function
function displayWebsite()
{
var websites = "",
h3, a1, a2;
for (var i = 0; i < S_List.length; i++)
{
h3 = "
" +S_List[i].name +"
";
a1 = "Visit";
a2 = "Delete
";
websites = ""+ h3 + a1 + a2 +"
";
}
document.getElementById("displaySite").innerHTML += websites;
}
// Delete Website Name and URL Function
function deletesite (d_button)
{
// Disappear The Website
d_button.parentElement.style.display = 'none';
// Remove Website from Array var link = d_button.previousElementSibling; var url = link.getAttribute('href'); console.log(url); for (var i = 0; i < S_List.length; i++) { if (S_List[i].url == url) { S_List.splice(i,1); } }
}
ABOUT PROJECTPROJECT DETAILS
Project Name :Bookmark Project in JavaScript
Project Platform :JavaScript
Programming Language Used:php,javascript,html,css
Developer Name :itsourcecode.com
IDE Tool (Recommended):Sublime
Project Type :Web Application
Database:None
Upload Date:November 16, 2020

Downloadable Source Code

Summary

In summary, this 2022 Bookmark Project in JavaScript with Source Code can be useful to students or professional who wants to learn web development using technologies like HTML, CSS and JavaScript. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy coding!

Inquiries

If you have any questions or suggestions about Bookmark Project in JavaScript with Source Code, please feel free to leave a comment below.

Leave a Comment