Project Report
On
“Code Ease”
Bachelor of Science (Information Technology)
Department of Computer Applications
Uttaranchal School of Computing Sciences
Session (2023 - 2024)
Under of Supervision of: Submitted by:
Mr. Saurabh Dyani Karan Nawani
(Assistant Professor) B.Sc.(IT).4th Sem
Enrolment No.- 2210000020
ACKNOWLEDGEMENT
The most awaited moment of any endeavor is successful completion, but nothing can be done
successfully if done alone. Success is the outcome of contribution and consistent help of various
persons and I thank those ones who helped me in successful completion of this project.
Primarily, I would like to thank Prof. (Dr.) Sonal Sharma, Dean USCS for providing a healthy and
encouraging environment to study. I profusely thank the department of computer science and
application, and our Project Mentor Mr. Saurabh Dhyani, Assistant Professor. They have been
generous enough to provide us with an opportunity and accepting our candidature for the most
valuable guidance & affordable treatment.
Karan Nawani
Enrolment No.- 2210000020
I
DECLARATION
I hereby declare that the project report entitled “Code Ease” submitted by Karan Nawani to
“Uttaranchal School of Computing Sciences”. The project was done under the guidance of Mr.
Saurabh Dhyani, Assistant Professor. I further declare that the work reported in this project has not
been submittedand will not be submitted, either in part or in full, for the award of any other degree or
diploma in thisuniversity or any other university or institute.
Karan Nawani
Enrolment no- UU2210000020
BSc. (IT), 4th semester
II
CERTIFICATE OF ORIGINALITY
This is to certify that the project entitled “Code Ease” by Karan Nawani. has been submitted in the
partial fulfilment of the requirements for the award of the degree of Bachelor of Science
(Information Technology) from Uttaranchal University, Dehradun. The results embodied in this
projecthave not been submitted to any other University or Institution for the record of any degree.
Mr. Saurabh Dhyani
Assistant Professor
(Project Mentor)
III
TABLE OF CONTENTS
S. No Content Page No.
Acknowledgement I
Declaration II
Certificate Of Originality III
Table Of Content
Introduction
1.
1. Objective 1-2
System Analysis/Requirement
2. 1. Hardware and Software Used 3-4
2. Gantt Chart
System Design 5-6
3.
1. Flowchart
2. Data Flow Diagram
4. Feasibility Study 7
Conclusion
5.
1. Future Scope of the Project 8-9
2. Limitation of the Project
Appendices
6. 1. Coding 10-19
2. Output
7. Bibliography 20
INTRODUCTION
Welcome to our Code Ease, which provides all-in-one solution for crafting dynamic web experiences. Our
platform offers a seamless environment for writing, editing, and previewing HTML, JavaScript, and CSS code.
Say goodbye to switching between applications – with our intuitive interface, you can focus on bringing your
ideas to life.
Harness the power of HTML for structure, JavaScript for interactivity, and CSS for style. With features like
syntax highlighting, auto-completion, and real-time error checking, coding becomes a breeze. Plus,
collaboration is built-in, allowing you to work solo or with a team, sharing feedback and iterating in real-time.
Whether you're building a personal project or collaborating on a professional endeavor, our online code editor is
your gateway to web development success. Dive in and start coding today!
1
OBJECTIVE
We aim to streamline the development process by offering a unified platform where users can write, edit, and
preview their code seamlessly. Our goals include:
• Our objective is to provide an intuitive and efficient online code editor that empowers users of all skill
levels to create stunning web experiences with HTML, JavaScript, and CSS.
• Our goal is to foster collaboration and creativity by enabling real-time sharing and feedback, whether
users are working individually or as part of a team.
• We strive to be the go-to destination for web developers looking to unleash their creativity and bring
their ideas to life on the web.
2
SYSTEM ANALYSIS
Software and Hardware Used
Software Used:
• VS Code:
Hardware Used:
• Processor:
• Intel Core i5 11600KF 4.2GHz processor.
• RAM:
• The system is equipped with 2GB of RAM.
• Operating System:
• It is compatible in Windows, Linux, etc
3
4
START
HOME HTML CSS JS CODE EASE
Projects Enter
Tutorial of Tutorial of Tutorial of
HTML,CSS
HTML CSS CSS and JS code
Services
Contact Us HTML PDF HTML PDF HTML PDF Execute code
Name
Email
Number
END
5
6
Economical Feasibility:
• Cost-Effective Development Approach: Implementing a lean and agile development process to
minimize upfront investment and development time. This may involve leveraging open-source
technologies, reusable components, and cloud services to reduce development costs without
compromising quality. Additionally, prioritizing features based on user feedback and market demand can
help allocate resources efficiently and focus on delivering essential functionalities first.
• Diverse Revenue Streams: Exploring multiple revenue streams to diversify income sources and
maximize revenue potential. In addition to subscription models, consider offering premium features or
services that cater to specific user needs or industries.
Operational Feasibility:
• User-Friendly Interface: Ensuring that the platform's user interface is intuitive and easy to navigate is
crucial for operational feasibility. A user-friendly interface reduces the learning curve for new users and
enhances productivity for experienced developers. Conducting user testing and incorporating feedback
during the development process can help identify usability issues and refine the interface to meet the
needs of the target audience.
• Scalability and Performance: The operational feasibility of the project depends on its ability to handle
increasing user traffic and workload efficiently. Implementing scalable architecture and utilizing cloud
infrastructure can help accommodate growth without sacrificing performance. Regular performance
monitoring and optimization are essential to ensure that the platform remains responsive and reliable under
varying usage conditions.
Technical Feasibility:
• Compatibility and Integration: Ensuring compatibility with a wide range of web browsers and devices
is crucial for technical feasibility. The platform should be responsive and perform well on various screen
sizes and operating systems.
7
FUTURE SCOPE
Future Scope of the Java chat Project:
• Mobile Optimization: With the increasing use of smartphones and tablets for development tasks,
optimizing the online code editor for mobile devices will be crucial. Providing a seamless experience
on smaller screens with touch-friendly interfaces and responsive design will cater to developers who
prefer mobile-first workflows.
• Additional Tools: Integrating with popular development tools and frameworks, such as Git for version
control or third-party libraries for code editing, can enhance functionality and user experience.
• Artificial Intelligence Integration: Implementing AI-driven features such as intelligent code
completion, automatic bug detection, and code refactoring assistance can significantly enhance
developer productivity and code quality. Advanced AI algorithms can analyse coding patterns, suggest
optimizations, and provide personalized recommendations tailored to each developer's workflow.
• Integrated Development Environments (IDEs): Expanding the capabilities of the online code editor
to encompass full-fledged integrated development environments (IDEs) can cater to the needs of
professional developers and large-scale projects. Integration of advanced IDE features such as project
management, version control, debugging tools, and seamless deployment options can provide a
comprehensive solution for software development teams.
8
Conclusion
Limitations of the Project
• Internet Dependency: As an online platform, the code editor requires a stable internet connection to
access and use its features. Users in areas with poor connectivity or limited internet access may
experience difficulties in using the platform effectively.
• Limited Languages:: Number of supported programming languages is limited as of now.
9
Appendices
1. Coding
• Module 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Editors</title>
<link rel="shortcut icon" href="coding favicons.png" type="image/x-icon">
<link rel="stylesheet" href="editor.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.0.0/split.min.js"
integrity="sha512-
tTsZnBXEzNdEaqUO9Ok8fUofS73xieiBa54pD/sxOSvayIgItM9MmEM0CnUjA13LDnJT22sfwmjf20+Bo2174g=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.bundle.js">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="commenStyle.css">
</head>
<body>
<nav class="navbar navbar-expand-lg mx-auto fixed-top "
style="background-color: rgba(0, 0, 0, 0.191); backdrop-filter: blur(30px); border-radius: 100px; width: 98%;">
<div class="container-fluid">
<a class="navbar-brand active sec-1-logo ms-5" href="/index.php">Code Ease</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-solid fa-bars-staggered" style="color: #f2f2f2"></i></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown" style=" ">
<ul class="navbar-nav ms-auto fs-5 fw-bold me-3 text-center">
<li class="nav-item pe-3 sec-1">
<a class="nav-link sec-1" aria-current="page" href="/index.php">Home</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link " href="HTML.html">HTML</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link " href="CSS.html">CSS</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link " href="js.html">JavaScript</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link active" href="editor.html" style="color: #cba16b">Code Ease </a>
</li>
<li class="nav-item pe-3 sec-1">
10
<a class="nav-link " href="login.php">Login</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link" href="registration.php">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ========== Start Section-1 ========== -->
<div class="container " style="margin-top: 100px;"
<h1>Code Editor </h1>
<div class="editor split">
<!-- code html, css, javascript -->
<div class="left">
<label for=""><i class='bx bxl-html5' style='color:#e44d26'></i>HTML</label>
<textarea onkeyup="run()" class="bg1" spellcheck="false" name="" id="html-code"
placeholder="Type HTML code here"></textarea>
<label for=""><i class='bx bxl-css3' style='color:#0096dc'></i>CSS</label>
<textarea onkeyup="run()" spellcheck="false" name="" id="css-code" placeholder="Type CSS code here"></textarea>
<label for=""><i class='bx bxl-javascript' style="color:#f0db4e;"></i>JavaScript</label>
<textarea onkeyup="run()" spellcheck="false" name="" id="js-code"
placeholder="Type JavaScript code here"></textarea>
</div>
<!-- output -->
<div class="right split">
<label for=""><i class='bx bx-play' style="color: aqua; "></i>Output</label>
<iframe id="output"></iframe>
</div>
</div>
</section>
<div class="footer">
© 2024 all rights reserve | <i class='bx bxl-github bx-tada' style='color:#43c975'></i> <a
href="https://github.com/Aman-Kumar-2004" class="namelink" target="_blank">Aman Kumar</a>
</div>
</div>
<script src="editor.js"></script>
<script src="main.js"></script>
<script src="https://unpkg.com/[email protected]/d\\ist/typed.umd.js"></script>
<script>
let nav = document.querySelector('.nav-background');
window.onscroll = function () {
if (document.documentElement.scrollTop > 20) {
nav.classList.add('on-scroll');
}
else {
nav.classList.remove('on-scroll');
}
}
</script>
11
</body>
</html>
• Module 2
function run(){
let htmlCode = document.getElementById("html-code") ;
let cssCode = document.getElementById("css-code") ;
let jsCode = document.getElementById("js-code") ;
let output = document.getElementById("output") ;
output.contentDocument.body.innerHTML = htmlCode.value +"<style>" + cssCode.value + "</style>" ;
output.contentWindow.eval(jsCode.value) ;
}
• Module 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexstyle.css">
<title>Document</title>
<link rel="icon" href="g-logo.png">
<!-- <link rel="icon" href="https://cdn-icons-png.flaticon.com/128/9956/9956310.png?uid=R100292432&track=ais"> --
>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-
iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"> -->
<link rel="stylesheet" href="bootstrap.css" />
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="commenStyle.css">
<link rel="stylesheet" href="indexstyle copy.css">
</head>
<body>
<nav class="navbar navbar-expand-lg nav-background fixed-top w-100 p-5">
<div class="container-fluid">
<a class="navbar-brand active sec-1-logo ms-5" href="index.php">Code Ease</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-solid fa-bars-staggered" style="color: #f2f2f2"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown" style=" ">
<ul class="navbar-nav ms-auto fs-5 fw-bold me-3 text-center">
<li class="nav-item pe-3 sec-1">
<a class="nav-link sec-1" aria-current="page" href="index.php">Home</a>
12
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link" href="HTML.html">HTML</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link" href="CSS.html">CSS</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link" href="js.html">JavaScript</a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link" href="editor.html">Code Ease </a>
</li>
<li class="nav-item active pe-3 sec-1">
<a class="nav-link" href="login.php" style="color: #cba16b">login </a>
</li>
<li class="nav-item pe-3 sec-1">
<a class="nav-link" href="registration.php">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="login">
<?php
require('db.php');
session_start();
if (isset($_POST['username'])){
$username = $_REQUEST['username'];
$password = ($_REQUEST['password']);
$query = "SELECT * FROM `users` WHERE `username`='$username' and `password`='' + '$password'";
$result = mysqli_query($conn,$query) or die(mysqli_error($conn));
$rows = mysqli_num_rows($result);
if($rows==1){
$_SESSION['username'] = $username;
header("Location: index1.php");
}else{
echo "<div class='form'>
<h3>Username/password is incorrect.</h3>
<br/>Click here to <a href='index.php'>Login</a></div>";
}
}else{
?>
<div class="form">
<h1>Log In</h1>
<form action="" method="post" name="login">
<div class="input-container">
<input placeholder="Enter username" name="username" class="input-field" type="text">
<label for="input-field" class="input-label">Enter username</label>
<span class="input-highlight"></span>
</div>
<br>
<div class="input-container">
<input type="password" name="password" class="input-field" placeholder="Enter Password" required>
<label for="input-field" class="input-label">Enter Password</label>
<span class="input-highlight"></span>
13
</div>
<br>
<button id="bt" name="submit" type="submit" value="Login">Login</button>
</form><br>
<p>Not registered yet? <a href='registration.php'>Register Here</a></p>
</div>
<?php } ?>
</div>
<!-- Site footer -->
<footer class="site-footer ">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 ">
<h6><button data-text="Awesome" class="button">
<span class="actual-text show"> Code Ease</span>
<span class="hover-text" aria-hidden="true"> Code Ease</span>
</button></h6>
<p class="text-justify show"><i> I'M Aman kumar </i>This is a compact website template that allows
users to
easily explore new ideas and unleash their creativity. It has been specifically designed as a
template for
business purposes, providing a solid foundation for creating a professional and visually
appealing website.
Users can customize and tailor the template to suit their unique business needs, giving them the
flexibility
to showcase their products, services, and brand in an engaging way.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Categories</h6>
<ul class="footer-links show">
<li><a href="https://aman-kumar-2004.github.io/reponse-game-website-/" target="_blank">Gaming
Website</a></li>
<li><a href="https://aman-kumar-2004.github.io/responsive-food-website/" target="_blank">Food
Website </a></li>
<li><a href="https://ganeshdutt100.github.io/ARC_website.github.io/" target="_blank">ARC </a>
</li>
<li><a href="https://ganeshdutt100.github.io/Animation/animation_3.html" target="_blank">Animated
Web</a>
</li>
<li><a href="https://ganeshdutt100.github.io/Bicylce-Store/" target="_blank">bicycles</a></li>
<li><a href="https://ganeshdutt100.github.io/Flight-Booking-Website/">Royal Yatra</a></li>
</ul>
</div>
<div class="col-xs-6 col-md-3 show">
<h6>Quick Links</h6>
<ul class="footer-links">
<li><a href="index.php">Home</a></li>
<li><a href="HTML.html">Html</a></li>
<!-- <li><a href="">Services</a></li> -->
<li><a href="js.html">JS</a></li>
<li><a href="CSS.html">CSS</a></li>
<!-- <li><a href="#Templates">Templates</a></li> -->
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
14
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2024 All Rights Reserved by
<a href="https://github.com/Aman-Kumar-2004 class=" sec-1-logo fs-5 ms-2">Aman Kumar</a>.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 hidden">
<ul class="social-icons">
<li><a class="facebook" href="https://www.facebook.com" target="blank"><i class="fa-brands fa-
facebook"></i></a></li>
<li><a class="dribbble" href="https://www.instagram.com/the_ganesh_dutt/"><i class="fa-brands fa-
instagram" target="blank"></i></a></li>
<li><a class="linkedin" href="https://www.linkedin.com"><i class="fa-brands fa-linkedin"
target="blank"></i></a></li>
<li><a class="twitter" href="https://github.com/Aman-Kumar-2004" target="blank"><i class="fa-brands
fa-github"></i></a></li>
<li><a class="whatsapp" href="https://api.whatsapp.com/send?phone=9125289186" target="blank"><I
class="fa-brands fa-whatsapp"></i></a></li>
<li><a class="linkedin" href="tel:+917078404837" target="blank"><i class="fa-solid fa-
phone"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<div class="main-whtapp-icons">
<div class="whatsapp-icons">
<a href="https://api.whatsapp.com/send?phone=9125289186" target="blank">
<img src="whatsapp_icons.png" alt="" width="70px">
</a>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script src="main.js"></script>
</body>
</html>
• Module 4
var typed = new Typed('#element', {
strings: ['HTML Tutorial', 'CSS Tutorial', 'JavaScript Tutorial'],
typeSpeed: 100,
loop: true,
});
let nav = document.querySelector('.nav-background');
window.onscroll = function(){
if(document.documentElement.scrollTop > 20){
nav.classList.add('on-scroll');
}
else{
nav.classList.remove('on-scroll');
}
15
}
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry);
if (entry.isIntersecting) {
entry.target.classList.add("show");
}
});
});
const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((element) => observer.observe(element));
• Module 5
<div class="login">
<?php
require('db.php');
session_start();
if (isset($_POST['username'])){
$username = $_REQUEST['username'];
$password = ($_REQUEST['password']);
$query = "SELECT * FROM `users` WHERE `username`='$username' and `password`='' + '$password'";
$result = mysqli_query($conn,$query) or die(mysqli_error($conn));
$rows = mysqli_num_rows($result);
if($rows==1){
$_SESSION['username'] = $username;
header("Location: index1.php");
}else{
echo "<div class='form'>
<h3>Username/password is incorrect.</h3>
<br/>Click here to <a href='index.php'>Login</a></div>";
}
}else{
?>
<div class="form">
<h1>Log In</h1>
<form action="" method="post" name="login">
<div class="input-container">
<input placeholder="Enter username" name="username" class="input-field" type="text">
<label for="input-field" class="input-label">Enter username</label>
<span class="input-highlight"></span>
</div>
<br>
<div class="input-container">
<input type="password" name="password" class="input-field" placeholder="Enter Password" required>
<label for="input-field" class="input-label">Enter Password</label>
<span class="input-highlight"></span>
</div>
<br>
<button id="bt" name="submit" type="submit" value="Login">Login</button>
</form><br>
<p>Not registered yet? <a href='registration.php'>Register Here</a></p>
</div>
<?php } ?>
</div>
16
2. Output
• Login Page
• SignUp Page
17
• Home Page
• Html Page
18
• Code Ease Page
19
Bibliography
• https://www.w3schools.com/html/
• https://www.w3schools.com/css/
• https://www.w3schools.com/js/
• https://www.w3schools.com/java/
20
