Register Items Project in JavaScript with Source Code

Register Items Project in JavaScript with Source Code

by

Register Items Project in JavaScript with Source Code

The Register Items 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 simple mini project for Register Items Project 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. 

Talking about the highlights of this Register Items Project framework, the client can list their products and keep them as a record. The purpose of this project is to display elements registered in panel form through the “submit” button. As soon as the client presses the send button, the product will be displayed in the field. The client can add the number of product items and view details saved in the list such as sticky notes. Users can also search or delete product items if they want to delete them.

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.

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.

To start creating a Register Items Project in JavaScript, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

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

Register Items 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“Create html in Register Item in JavaScript with Source Code

  • Step 3: Create a JavaScript file.

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

  • Step 4: Create a CSS file.

    Fourth click “file” and select “save as” and named it “style.css“Create html in Register Item 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 the index.html

In the code given below, which is the code contains the interface of the application. This code will show the form that will be use in html.(Register Items Project in JavaScript)

Register Items Project





Register products
Product name

Product description

Quantity

Price

Submit

<div class="productsbar-output"> <h4 id="output-items-title">Your items</h5> <div class="inputbar-field-container"> <input type="text" name="filter" id="filter" /> <label for="filter">Filter Products</label> </div> <div class="collection"></div> <div class="btn-clear-position"> <a href="#" class="clear-items btn-black">Clear Products</a> </div> </div> </div> <div class="footer-position"> <footer class="footer"> Developed in 2020 | All rights reserved </footer> </div> <script src="register.js"></script>

This function is for the style.css

In the code given below, which is for the code to design a login form background color, text and the box.Register Items Project in JavaScript

body {
font-family: Arial, Helvetica, sans-serif;
background-color: navajowhite;
}
.container {
padding: 5px;
display: flex;
justify-content: space-evenly;
}
.sidebar-form {
display: flex;
flex-direction: column;
justify-content: center;
border-right: solid 1px black;
margin: 0;
padding: 0;
}
.contentbar-form {
display: flex;
flex-direction: column;
width: 330px;
height: 500px;
background-color: skyblue;
border-radius: 8px;
}
.titlebar-form {
display: flex;
flex-direction: row;
justify-content: center;
}
label {
margin-left: 10px;
}
.inputbar-product {
display: flex;
width: 300px;
height: 25px;
border-radius: 4px;
margin: 10px;
}
.areabar-description {
display: flex;
width: 300px;
height: 100px;
border-radius: 4px;
margin: 10px;
}
.inputbar-quantity {
display: flex;
flex-direction: row;
justify-content: center;
width: 25px;
border-radius: 4px;
margin: 10px;
}
.inputbar-price {
display: flex;
flex-direction: row;
justify-content: center;
width: 100px;
border-radius: 4px;
margin: 10px;
}
.img-upload {
display: flex;
flex-direction: column;
justify-content: center;
width: 300px;
height: 150px;
margin: 10px;
}
.input-img {
display: flex;
flex-direction: column;
justify-content: center;
width: 200px;
margin-left: 55px;
}
.btn-submit {
display: flex;
border-radius: 4px;
margin-top: 30px;
margin-left: 85px;
background-color: green;
width: 100px;
height: 30px;
text-align: center;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.1rem;
}
.productsbar-output {
display: flex;
flex-direction: column;
border: solid 1px blue;
width: 1000px;
}
output-items-title {
display: flex;
justify-content: center;
}
.inputbar-field-container {
display: flex;
justify-content: center;
}
.collection {
display: flex;
}
.collection-item {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
width: 150px;
height: 200px;
margin: 20px;
border: solid black 1px;
}
.btn-clear-position {
display: flex;
justify-content: flex-end;
}
.footer-position {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.footer {
text-align: center;
}

This code is for the register.js

In the code given below, which is for the code creating a script function for register items project.Register Items Project in JavaScript

const form = document.querySelector('#items-form');
const listingItems = document.querySelector('.collection');
const buttonClear = document.querySelector('.clear-items');
const filter = document.querySelector('#filter');
const proName = document.querySelector('.inputbar-product');
const proDes = document.querySelector('.areabar-description');
const quantitiesitems = document.querySelector('.inputbar-quantity');
const itemsprices = document.querySelector('.inputbar-price');
const productint = [proName, proDes, quantitiesitems, itemsprices];
loadEventListeners();
function loadEventListeners() {
document.addEventListener('DOMContentLoaded', getItems);
form.addEventListener('submit', addItem);
listingItems.addEventListener('click', deleteItem);
buttonClear.addEventListener('click', clearItems);
t
filter.addEventListener('keyup', filterItems);
}
function getItems() {
let items;
if (localStorage.getItem('items') === null) {
items = [];
} else {
items = JSON.parse(localStorage.getItem('items'));
}
items.forEach(function (item) {
const div = document.createElement('div'); div.className = 'collection-item'; div.appendChild(document.createTextNode(item)); const pDescription = document.createElement('p'); pDescription.appendChild(document.createTextNode(proDes.value)); const pqtt = document.createElement('p'); pqtt.appendChild(document.createTextNode(quantitiesitems.value)); const pPrice = document.createElement('p'); pPrice.appendChild(document.createTextNode(itemsprices.value)); const link = document.createElement('a'); link.className = 'delete-item'; link.innerHTML = '<i class="fa fa-remove"></i>'; div.appendChild(pDescription); pDescription.appendChild(pqtt); pqtt.appendChild(pPrice); pPrice.appendChild(link); listingItems.appendChild(div);
});
}
function addItem(e) {
if (proName.value === '') {
alert('Fill out the empty field');
}
const div = document.createElement('div');
div.className = 'collection-item';
div.appendChild(document.createTextNode(proName.value));
const pDescription = document.createElement('p');
pDescription.appendChild(document.createTextNode(proDes.value));
const pqtt = document.createElement('p');
pqtt.appendChild(document.createTextNode(quantitiesitems.value));
const pPrice = document.createElement('p');
pPrice.appendChild(document.createTextNode(itemsprices.value));
const link = document.createElement('a');
link.className = 'delete-item';
link.innerHTML = '';
div.appendChild(pDescription);
pDescription.appendChild(pqtt);
pqtt.appendChild(pPrice);
pPrice.appendChild(link);
listingItems.appendChild(div);
storeIteminLocalstorage(proName.value, proDes.value);
//clear input
proName.value = '';
proDes.value = '';
e.preventDefault();
}
function storeIteminLocalstorage(item1) {
let items;
if (localStorage.getItem('items') === null) {
items = [];
} else {
items = JSON.parse(localStorage.getItem('items'));
}
items.push(item1);
localStorage.setItem('items', JSON.stringify(items));
}
function deleteItem(e) {
if (e.target.parentElement.classList.contains('delete-item')) {
if (confirm('Are you sure you want to delete?')) {
e.target.parentElement.parentElement.parentElement.parentElement.parentElement.remove();
// Remove from LS removeItemFromLocalStorage( e.target.parentElement.parentElement.parentElement.parentElement .parentElement ); }
}
}
function removeItemFromLocalStorage(item) {
let items;
if (localStorage.getItem('items') === null) {
items = [];
} else {
items = JSON.parse(localStorage.getItem('items'));
}
items.forEach(function (item) {
if (item.textContent == item) {
items.splice(index, 1);
}
});
localStorage.setItem('items', JSON.stringify(items));
}
function clearItems() {
while (listingItems.firstChild) {
listingItems.removeChild(itemsList.firstChild);
}
clearItemsFromLocalStorage();
}
function clearItemsFromLocalStorage() {
localStorage.clear();
}
function filterItems(e) {
const text = e.target.value.toLowerCase();
document
.querySelectorAll('.collection-item')
.forEach(function (itemCollection) {
const item = itemCollection.firstChild.textContent;
if (item.toLowerCase().indexOf(text) != -1) {
itemCollection.style.display = 'block'; } else { itemCollection.style.display = 'none'; } });
}
ABOUT PROJECTPROJECT DETAILS
Project Name :Register Items 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:October 20, 2020

Downloadable Source Code

Download Now

Summary

In summary, this 2022 Register Items 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!

That’s how you create Register Items Project in JavaScript with Source Code in your projects. You can always expand and try different ways in implementing the Register Items Project in JavaScript in your JavaScript projects. In this Mini Project for Register Items Project in JavaScript with Source Code is free to download and It is easy to understand and manipulate this project and use for education purpose only.

Inquiries

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

Leave a Comment