INDEX
SR NO CONTENTS PAGE NO.
1 Aim Of Micro-Project 2
2 Course Outcome 2
3 Purposed Methodology 2
4 Action Plan 3
5 Resources Required 4
6 Group Members- 4
7 Introduction 5
8 Objective 5
9 Description Of Project 6
10 Technology And Tools Used 6
11 Advantages 6
12 Program Code 7 to 9
13 Output 10
14 Conclusion And Refrence 11
pg. 1
PLAN-A
Micro-Project Proposal
DEVELOPING SIMPLE ANIMATION FOR REVOLVING AN EARTH AROUND SUN
Aims/ Benefits of the Micro - Project:
1. To develop a program for animated a circle revolving around
another circle.
2. The aim of this project is to how animated a circle revolving
around another circle is created using java script.
1.0 Course Outcomes Addressed
1. Implement arrays and functions in java script.
2. Use java script for handling Cookies.
2.0 Proposed Methodology
In this project we will learns how to develop animation for
revolving an earth around sun using javascript. We will create a code in
html using javascript. In this code for displaying animation for revolving
an earth around sun more attractive we will use various tags like
canvas,script tags etc. We also use user defined functions. In this code
we also various graphics objects like circle, line, are. In this manner we
are trying to show animated solar system in javascript.
pg. 2
3.0 Action Plan
Sr. Details of Activity Planned Planned Name of responsible
No. Start Date Finish Date Team members.
1 Identify the 12/10/2024 12/10/202 Sarthak Purandare
requirements. of 4
the project
2 Design the 12/10/2024 12/10/202 Fahad Khan
structure of the 4
project.
3 Input micro project 13/10/2024 13/10/202 Sahil Shaikh
information in MS 4
word
4 Create MS word file 14/10/2024 14/10/202 Imad Shaikh
and show file to 4
guide
5 Preparing report 14/10/2024 14/10/202 Sahil Shaikh
4
6 The report 17/10/2024 17/10/202 Shinde S.R.
submitted to the 4
teacher.
pg. 3
4.0 Resources Required
Sr. Resources Required Specification
No.
1 Computer System Computer, RAM Minimum
4GB
2 Internet Wikipedia
3 Operating System Windows/Linx
Names of Team Members with Roll Nos.
Sr. Roll. Number Name of Student
No.
1 2209590263 Shaikh Sahil Chandpasha
2 2214920335 Khan Fahad Feroz
3 2214920313 Shaikh Imad
4 23511910538 Purandare Sarthak Prashant
pg. 4
PLAN-B
INTRODUCTION
JavaScript is a Programming Language commonly used in web
development. It was originally developed by Netscape as a means to
add dynamic and interactive elements to websites. While JavaScript is
influenced by Java, the syntax is more similar to C and is based on ECMA
Script, a scripting language developed by Sun Microsystems.
JavaScript is a client-side scripting language, which means the
source code is processed by the client's web browser rather than on the
web server. This means JavaScript functions can run after a webpage
has loaded without communicating with the server. For example, a
JavaScript function may check a web form before it is submitted to
make sure all the required fields have been filled out. The JavaScript
code can produce an error message before any information is actually
transmitted to the server.
OBJECTIVE
To develop a program for animated a earth revolving around a
sun.
The aim of this project is to show how animated a earth revolving
around a sun using javascript.
pg. 5
DESCRIPTION OF PROJECT
In this project we will learns how to develop animated a earth
revolving around a sun using java script. We will create a code in
html using javascript.In this code for displaying animated a earth
revolving around a sun more attractive we will use various tags
like canvas, script tags.etc. We also use user defined functions.In
this code we also various graphics objects like circle, line, arc. In
this manner we are trying to show animated a earth revolving
around a sun in javascript.
TECHNOLOGY AND TOOLS USED
System used(COMP/LAPTOP): Computer Processor, 4GB RAM
Operating System: Windows 7
Software: Notepad
ADVANTAGES
User can get more information by seeing virtual image.
This will increase the interest of the user to perform more
graphical animations.
Program Code
pg. 6
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: #000;
overflow: hidden;
}
#sun
{
position: absolute;
width: 150px;
height: 150px;
background-image: linear-gradient(red, yellow);
border-radius: 50%;
left: 0%;
top: 13%;
margin-left: 250px;
margin-top: 50px;
animation: rotateSun 15s linear infinite;
pg. 7
box-shadow: 0 0 54px orange;
text("Sun", "white","15pt arial", -50,7);
}
#earth
{
position: absolute;
width: 50px;
right: 335px;
bottom: 135px;
height: 50px;
background-color: #0099cc;
border-radius: 50%;
animation: rotateEarth 5s linear infinite;
box-shadow: 0 0 34px #3a4385;
}
@keyframes rotateSun
{
0%
{
transform: rotate(0deg);
}
100%
pg. 8
{
transform: rotate(360deg);
}
}
@keyframes rotateEarth
{
0%
{
transform: rotate(Odeg) translateX(120px) rotate(0deg); }
100%
{
transform: rotate(360deg) translateX(120px) rotate(-360deg);
}
}
</style>
</head>
<body>
<div id="sun"></div>
<div id="earth"></div>
</body>
</html>
Output
pg. 9
CONCLUSION AND REFRENCE
pg. 10
CONCLUSION
This project can be used to display animation for revolving an
earth around sun. Instead of using the inbuilt application a user can
make use of this to make the representation more effective. This will
increase the interest of the user to perform more graphical animations.
REFRENCE
1. BookName- Javascript Demystified. Author- Keogh, Jim
Publication- McGraw-Hill 2015, New DelhilSBN:0-07060347-2.
2. BookName- Beginning JavaScript Author- Wilton, Paul
Publication- Wilyindia, New Delhi, 2015, ISBN:0-7645-5587-1
pg. 11
