PROJECT REPORT

A TASK REPORT

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE

AWARD OF THE DEGREE OF

B.TECH. (INFORMATION TECHNOLOGY)

TO

RK UNIVERSITY, RAJKOT

SUBMITTED BY

Name of Students Enrolment No.

Fenil Gondaliya 21SOEIT13005

Navaz Sherasiya 20SOEIT11022

UNDER THE GUIDANCE OF

Internal Guide External Guide

Jay Fuletra Kaushik Sondarva
Assistant Professor, Sr. Wed Developer,
RK University, TechnoComet Solutions,
Rajkot. Rajkot.
 CERTIFICATE

This is to certify that the work which is being presented in the Task Report entitled
“TASKS”, in partial fulfilment of the requirement for the award of the degree of B.Tech.
(Information Technology) and submitted to the School of Engineering, RK University, is an
authentic record of our own work carried out during a period from December 2023 to
February 2024

The matter presented in this Project Report has not been submitted by me/us for the award of
any other degree elsewhere.

Signature of Student (S)

Fenil Gondaliya(21SOEIT13005),

Navaz Sherasiya(20SOEIT11022),

This is to certify that the above statement made by the student(s) is correct to the best of my
knowledge.

Internal Guide Head of Department

Prof. Jay Fuletra, Dr. Chetan Shingadiya
Assistant Professor, CE / IT
RK University, School of Engineering,
Rajkot. RK University, Rajkot
February 2024

SCHOOL OF ENGINEERING, RK UNIVERSITY, RAJKOT

 DECLARATION
We hereby certify that we are the sole author(s) of this project work and that neither any part
of this project work nor the whole of the project work has been submitted for a degree to any
other University or Institution. We certify that, to the best of our knowledge, our project work
does not infringe upon anyone’s copyright nor violate any proprietary rights and that any
ideas, techniques, quotations, or any other material from the work of other people included in
our project document, published or otherwise, are fully acknowledged in accordance with the
standard referencing practices. We declare that this is a true copy of our project work,
including any final revisions, as approved by our project review committee.

SIGNATURE OF STUDENT (S)

Fenil Gondaliya (21SOEIT13005) Navaz Sherasiya(20SOEIT11022)

Date : _______________ Date : __________________

Place : _______________ Place : __________________

 ACKNOWLEDGEMENT

We, Fenil Gondaliya & Navaz Sherasiya, would like to express our heartfelt gratitude to all
those who have been instrumental in the completion of this project on Student Admission
Crud Operation.

We are grateful to our friends and peers for their continuous support and valuable discussions,
which have helped shape the ideas and concepts behind Tasks.

Additionally, we want to thank our families for their unwavering encouragement and
understanding throughout this journey.

In conclusion, we appreciate all the support and assistance we have received, which has made
the completion of Tasks possible.
 Company Introduction

TechnoComet Solutions is a software development, app development and web development

company based in India,We are Providing services throughout INDIA,USA,UK and rest
other parts of world.Our team Includes Creative,technically Qualified Professionals.

TechnoComet Sulutions specializes in providing onshore and offshore IT services to its

clients across the globe. We are a group of professionals from various backgrounds Our team
is a combination of creative and technically skilled Professionals that are passionate about
their skills.Our services in software applications or web applications are proved more helpful
and beneficial to our clients to rise their profitability, increase productivity and perform more
efficiently.

Our highly experienced team in website development can design and develop creative,
professional and result based apps and websites for all organizations. Mixture of huge
experience in various technologies, We can assure you about the quality results you will be
receiving by acquiring our services. Our software development services enables you to
customize software application based on the requirements of your business.we are very much
specialized to design and develop all types of softwares, apps and websites using various
language expertise.

We treat both our customers and staff with respect and fairness. Our business is conducted at
the highest levels of integrity and professionalism. And, if we say so ourselves, (our
customers say so too!) we are fun to work with. Talking about the differences between the
service we provide to our customers and our competition.

The competitions goal in providing solutions to customer is to try to find a way to make their
customers solve their own problems, rather than provide the support their customers are
paying good money for. On the other hand, our goal in providing value to our customers is to
make the customer successful by solving their problem.
 INDEX:

SR.No Tasks Page No

1.0 Task-1

2.0 Task-2

3.0 Task-3

4.0 Task-4

5.0 Task-5

6.0 Task-6

7.0 Task-7

8.0 Task-8

9.0 Task-9

10.0 Task-10
 Task – 1
Task :- Create Html Tables.
Screenshot:-
 Task-2
Task-2 : Create One Page Template Using HTML,CSS & Bootstrap.
Screenshot :
 Task-3
Task-3 : Create Contact Detail page.
Screenshot :
 Task-4
Task-4 : Create Full page websites Templates.
Screenshot :
 Task – 5

Task-5 : Create Templates.

Screenshot :
 Task – 6
Task-6 : Create Template with animation in website.
Screenshot :
 Task – 7
Task-7 : Create Responsive webpage and use of animation and hover Effiect.
Screenshot :
 Task – 8
Task-8 : Create javscript Curd Oparation.
Screenshot :
Sample Code :-
const numberInput = document.getElementById("phone")
numberInput.addEventListener("input", (event) => {
const inputValue = event.target.value;
const numericValue = inputValue.replace(/[^0-9]/g, "");
event.target.value = numericValue;
});

function validateForm() {
document.getElementById("nameErorr").innerText = "";
document.getElementById("ageErorr").innerText = "";
document.getElementById("phoneErorr").innerText = "";
 document.getElementById("addressErorr").innerText = "";
document.getElementById("chekErorr").innerText = "";

var name = document.getElementById("name").value.trim();

var age = document.getElementById("age").value;
var phone = document.getElementById("phone").value.trim();
var address = document.getElementById("address").value.trim();
var check = document.getElementById("Check").checked;

if (name === "") {

document.getElementById("nameErorr").innerText = "Name is required.";
return false;
}

if (age === "") {

document.getElementById("ageErorr").innerText = "Birth date is required.";
return false;
}

if (phone === "") {

document.getElementById("phoneErorr").innerText = "Phone number is
required.";
return false;
}

if (address === "") {

document.getElementById("addressErorr").innerText = "Address is
required.";
 return false;
}

if (!check) {
document.getElementById("chekErorr").innerText = "Please accept terms
and conditions.";
return false;
}
return true;
}

function allData() {
var table = document.getElementById('table');
table.innerHTML = '';
var fenil = JSON.parse(localStorage.getItem('listItem')) ?? [];

if (fenil.length > 0) {
document.getElementById('noData').style.display = 'block';
} else {
document.getElementById('noData').style.display = 'none';
}

fenil.forEach(function (value, i) {
table.innerHTML += `
<tr>
<td>${i + 1}</td>
<td><img src="${value.image}"style="width: 50px; height:
50px;"></td>
 <td>${value.name}</td>
<td>${value.age}</td>
<td>${value.address}</td>
<td>${value.phone}</td>
<td>${value.Gender}</td>
<td>${value.hobbies}</td>
<td>${value.Contry}</td>
<td>${value.city}</td>
<td> <button type="button" class="btn btn-info" data-bs-toggle="modal"
onclick="viewData(${value.id})" data-bs-target="#exampleModal">
View
</button></td>
<td><button class="btn btn-sm btn-primary" onclick="find($
{value.id})"><i class="fa fa-edit"></i></button>
<button class="btn btn-sm btn-danger ms-3" onclick="removeData($
{value.id})"><i class="fa fa-trash"></i></button>
</td>
</tr>`;
});
}

function save() {

var fenil = JSON.parse(localStorage.getItem('listItem')) ?? [];

var id = fenil.length > 0 ? fenil[fenil.length - 1].id : 0;

var selectedGender =
document.querySelector('input[name="gender"]:checked');
var genderValue = selectedGender ? selectedGender.value : '';
 var selectedCheck =
document.querySelector('input[name="Check"]:checked');
var CheckValue = selectedCheck ? selectedCheck.value : '';

var selectedHobbies =
document.querySelectorAll('input[name="hobbies"]:checked');
var hobbiesValues = Array.from(selectedHobbies).map(checkbox =>
checkbox.value);

if (document.getElementById('id').value) {
fenil.forEach(value => {
if (document.getElementById('id').value == value.id) {
value.name = document.getElementById('name').value;
value.age = document.getElementById('age').value;
value.address = document.getElementById('address').value;
value.phone = document.getElementById('phone').value;
value.Gender = genderValue;
value.hobbies = hobbiesValues;
value.Contry = document.getElementById('sel1').value;
value.city = document.getElementById('sel2').value;
value.Check = CheckValue;
value.image = document.getElementById('image').value;

value.form2.push({
Education: document.getElementById('Education').value,
Percentage: document.getElementById('Percentage').value,
Grade: document.getElementById('Grade').value,
 Class: document.getElementById('Class').value,
Exam: document.getElementById('Exam').value,
State: document.getElementById('State').value,
Passing: document.getElementById('Passing').value
});

var fileInput = document.getElementById('image');

if (fileInput.files.length > 0) {
var reader = new FileReader();
reader.onload = function (e) {
value.image = e.target.result;
localStorage.setItem('listItem', JSON.stringify(fenil));
allData();
};
reader.readAsDataURL(fileInput.files[0]);
} else {
localStorage.setItem('listItem', JSON.stringify(fenil));
allData();
document.getElementById('form').reset();
}
}
});

document.getElementById('id').value = '';
} else {
var item = {
id: id + 1,
 name: document.getElementById('name').value,
age: document.getElementById('age').value,
address: document.getElementById('address').value,
phone: document.getElementById('phone').value,
Gender: genderValue,
hobbies: hobbiesValues,
Contry: document.getElementById('sel1').value,
city: document.getElementById('sel2').value,
Check: CheckValue,
image: document.getElementById('image').value,

form2: [{
id: id + 1,
Education: document.getElementById('Education').value,
Percentage: document.getElementById('Percentage').value,
Grade: document.getElementById('Grade').value,
Class: document.getElementById('Class').value,
Exam: document.getElementById('Exam').value,
State: document.getElementById('State').value,
Passing: document.getElementById('Passing').value
}]
};

if (!validateForm()) {
return;
}
 var fileInput = document.getElementById('image');
if (fileInput.files.length > 0) {
var reader = new FileReader();
reader.onload = function (e) {
item.image = e.target.result;
fenil.push(item);
localStorage.setItem('listItem', JSON.stringify(fenil));
allData();
document.getElementById('form').reset();
};
reader.readAsDataURL(fileInput.files[0]);
} else {
fenil.push(item);
localStorage.setItem('listItem', JSON.stringify(fenil));
allData();
document.getElementById('form').reset();
}
}
}

// do not comment out this code

// fetch api
// fetch('

https://dummy.restapiexample.com/api/v1/employees')
// .then(res => res.json())
// .then(data => {
// localStorage.setItem('navaz', JSON.stringify(data.data));
// allData();
// });

function viewData(id) {
let fenil = JSON.parse(localStorage.getItem('listItem')) ?? [];
let selectedData = fenil.find(value => value.id === id);

if (selectedData) {
let modalBody = document.getElementById('modalBody');

let table = document.createElement('table');

table.classList.add('styled-table');

let headerRow = table.insertRow();

['Education', 'Percentage', 'Grade', 'Class', 'Board', 'State', 'Passing
Year'].forEach(headerText => {
let th = document.createElement('th');
th.textContent = headerText;
headerRow.appendChild(th);
});

selectedData.form2.forEach(entry => {
let row = table.insertRow();
['Education', 'Percentage', 'Grade', 'Class', 'Exam', 'State',
'Passing'].forEach(prop => {
let cell = row.insertCell();
 cell.textContent = entry[prop];
});
});
modalBody.innerHTML = '';
modalBody.appendChild(table);
}
}

function find(id) {
var fenil = JSON.parse(localStorage.getItem('listItem')) ?? [];

fenil.forEach(function (value) {
if (value.id == id) {
document.getElementById('id').value = value.id;
document.getElementById('name').value = value.name;
document.getElementById('age').value = value.age;
document.getElementById('address').value = value.address;
document.getElementById('phone').value = value.phone;
document.querySelector(`input[name="gender"][value="$
{value.Gender}"]`).checked = true;
document.getElementById('sel1').value = value.Contry;
document.getElementById('sel2').value = value.city;
document.querySelector(`input[name="Check"][value="$
{value.Check}"]`).checked = true;
document.getElementById('image').value = value.image;
var selectedHobbies =
document.querySelectorAll('input[name="hobbies"]:checked');
Array.from(selectedHobbies).forEach(checkbox => checkbox.checked =
false);
 value.hobbies.forEach(function (hobby) {
document.querySelector(`input[name="hobbies"][value="$
{hobby}"]`).checked = true;
});
document.getElementById('Education').value = value.form2[0].Education;
document.getElementById('Percentage').value = value.form2[0].Percentage;
document.getElementById('Grade').value = value.form2[0].Grade;
document.getElementById('Class').value = value.form2[0].Class;
document.getElementById('Exam').value = value.form2[0].Exam;
document.getElementById('State').value = value.form2[0].State;
document.getElementById('Passing').value = value.form2[0].Passing;
}
});
}

function removeData(id) {

var fenil = JSON.parse(localStorage.getItem('listItem')) ?? [];

fenil = fenil.filter(function (value) {

return value.id != id;
});
if (confirm("Are you sure !!") == true) {
Toastify({
text: "Deleted successfully",
duration: 3000,
style: {
background: "linear-gradient(to right, #00b09b, #96c93d)",
 },
}).showToast();

} else {
return false;
}

localStorage.setItem('listItem', JSON.stringify(fenil));
allData();
}

function handleImageUpload(event) {
var file = event.target.files[0];
}

function resolveAfter2Seconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('resolved');
fetch('https://datausa.io/api/data?drilldowns=Nation&measures=Population')
.then((response) => response.json())
.then((json) => console.log(json));

fetch('one.json')
.then((response) => response.json())
 .then((json) => console.log(json));

fetch('https://api.publicapis.org/entries')
.then((response) => response.json())
.then((json) => console.log(json));
}, 5000);
});
}

async function asyncCall() {

console.log('api calling');
const result = await resolveAfter2Seconds();
console.log(result);
}

asyncCall();

Thank You..