Showing posts with label code. Show all posts

Friday, 26 October 2018

Java program for building maximum possible time from 9 digit (TCS codevita question )

This is solution for TCS codevita practice round question, According to the question we have to get 9 digit input from user and for a maximum possible time ,if possible.

Animation with HTML line tag and CSS @keyframes having beautiful look by Code4animate

Animation with html and css coding.

This animation is created with line tag and its color is changed with @keyframes .

What you need for creating animation like above.

Basic knowledge of html and css.
Text editor like notepad , better if you use Standard code editor.

Old animation related to this animation
1. A animation with html tag used for creating a line and circle
2. New edition of Animation with html and css (line, animate and and css property) - top4ways
3. Animation with html and css (line, animate and and css property) - top4ways

Lets start coding to create animation like this one.

Step first:- Open an text editor and write the basic structure of html5 and start coding as in step below
Step second :- Now create svg elements and define its height and width ( In this animation height=600 and width=600). As in below code

Step third :-Now create line tags for this animation as in below code

x1 and y1 defines the start point of line and x2 and y2 define ending point of line.

Step fourth: - Now define css for changing the color of line for this animation as in below code

Step fifth :- Now combine and save this codes in a right way and Run it on browser.

Saturday, 8 July 2017

Animation with html and css coding like div, keframes and more by code4animate

Animation with html and css coding. This animation is created with 60 div element placed in a line and each div has an id="dsa1" but different class name (d1,d2,d3.........da60).

What you need for creating animation like above.

Basic knowledge of html and css.
Text editor like notepad , better if you use Standard code editor.

This animation is new version of Animation with div tag of html and css coding by top4ways
Lets start coding to create animation like this one.
Step first:- Open an text editor and write the basic structure of html5 and start coding as in step below
Step second :- Now create div elements and give same class name to all div and different id to all.and again create equal number of div tag with another class name for all and different id name. As in below code

<div id="dsa" class="d1">
</div>
<div id="dsa" class="d2">
</div>
<div id="dsa" class="d3">
</div>
<div id="dsa" class="d4">
</div>
<div id="dsa" class="d5">
</div>
<div id="dsa" class="d6">
</div>
<div id="dsa" class="d7">
</div>
<div id="dsa" class="d8">
</div>
<div id="dsa" class="d9">
</div>
<div id="dsa" class="d10">
</div>
<div id="dsa" class="d11">
</div>
<div id="dsa" class="d12">
</div>
<div id="dsa" class="d13">
</div>
<div id="dsa" class="d14">
</div>
<div id="dsa" class="d15">
</div>
<div id="dsa" class="d16">
</div>
<div id="dsa" class="d17">
</div>
<div id="dsa" class="d18">
</div>
<div id="dsa" class="d19">
</div>
<div id="dsa" class="d20">
</div>
<div id="dsa" class="d21">
</div>
<div id="dsa" class="d22">
</div>
<div id="dsa" class="d23">
</div>
<div id="dsa" class="d24">
</div>
<div id="dsa" class="d25">
</div>
<div id="dsa" class="d26">
</div>
<div id="dsa" class="d27">
</div>
<div id="dsa" class="d28">
</div>
<div id="dsa" class="d29">
</div>
<div id="dsa" class="d30">
</div>
<div id="dsa" class="d31">
</div>
<div id="dsa" class="d32">
</div>
<div id="dsa" class="d33">
</div>
<div id="dsa" class="d34">
</div>
<div id="dsa" class="d35">
</div>
<div id="dsa" class="d36">
</div>
<div id="dsa" class="d37">
</div>
<div id="dsa" class="d38">
</div>
<div id="dsa" class="d39">
</div>
<div id="dsa" class="d40">
</div>
<div id="dsa" class="d41">
</div>
<div id="dsa" class="d42">
</div>
<div id="dsa" class="d43">
</div>
<div id="dsa" class="d44">
</div>
<div id="dsa" class="d45">
</div>
<div id="dsa" class="d46">
</div>
<div id="dsa" class="d47">
</div>
<div id="dsa" class="d48">
</div>
<div id="dsa" class="d49">
</div>
<div id="dsa" class="d50">
</div>
<div id="dsa" class="d51">
</div>
<div id="dsa" class="d52">
</div>
<div id="dsa" class="d53">
</div>
<div id="dsa" class="d54">
</div>
<div id="dsa" class="d55">
</div>
<div id="dsa" class="d56">
</div>
<div id="dsa" class="d57">
</div>
<div id="dsa" class="d58">
</div>
<div id="dsa" class="d59">
</div>

Step third :- Now create stylesheet with style tag and define appearance of div by selecting id and class name as in below code.

/*up to down*/
#dsa{ 
   background-color:green;
 border-width:5px;
   width:20px;
   height:20px;
   position:fixed;
   top:200px;
   animation-name:animup;
   animation-iteration-count:infinite;
   animation-duration:.8s;
   border-radius:10px;
}
.d1{left:10px;animation-delay:0.1s;}
.d2{left:20px;animation-delay:0.2s;}
.d3{left:30px;animation-delay:0.3s;}
.d4{left:40px;animation-delay:0.4s;}
.d5{left:50px;animation-delay:0.5s;}
.d6{left:60px;animation-delay:0.6s;}
.d7{left:70px;animation-delay:0.7s;}
.d8{left:80px;animation-delay:0.8s;}
.d9{left:90px;animation-delay:0.9s;}
.d10{left:100px;animation-delay:1s;}
.d11{left:110px;animation-delay:1.1s;}
.d12{left:120px;animation-delay:1.2s;}
.d13{left:130px;animation-delay:1.3s;}
.d14{left:140px;animation-delay:1.4s;}
.d15{left:150px;animation-delay:1.5s;}
.d16{left:160px;animation-delay:1.6s;}
.d17{left:170px;animation-delay:1.7s;}
.d18{left:180px;animation-delay:1.8s;}
.d19{left:190px;animation-delay:1.9s;}
.d20{left:200px;animation-delay:2s;}
.d21{left:210px;animation-delay:2.1s;}
.d22{left:220px;animation-delay:2.2s;}
.d23{left:230px;animation-delay:2.3s;}
.d24{left:240px;animation-delay:2.4s;}
.d25{left:250px;animation-delay:2.5s;}
.d26{left:260px;animation-delay:2.6s;}
.d27{left:270px;animation-delay:2.7s;}
.d28{left:280px;animation-delay:2.8s;}
.d29{left:290px;animation-delay:2.9s;}
.d30{left:300px;animation-delay:3s;}
.d31{left:310px;animation-delay:3.1s;}
.d32{left:320px;animation-delay:3.2s;}
.d33{left:330px;animation-delay:3.3s;}
.d34{left:340px;animation-delay:3.4s;}
.d35{left:350px;animation-delay:3.5s;}
.d36{left:360px;animation-delay:3.6s;}
.d37{left:370px;animation-delay:3.7s;}
.d38{left:380px;animation-delay:3.8s;}
.d39{left:390px;animation-delay:3.9s;}
.d40{left:400px;animation-delay:4.0s;}
.d41{left:410px;animation-delay:4.1s;}
.d42{left:420px;animation-delay:4.2s;}
.d43{left:430px;animation-delay:4.3s;}
.d44{left:440px;animation-delay:4.4s;}
.d45{left:450px;animation-delay:4.5s;}
.d46{left:460px;animation-delay:4.6s;}
.d47{left:470px;animation-delay:4.7s;}
.d48{left:480px;animation-delay:4.8s;}
.d49{left:490px;animation-delay:4.9s;}
.d50{left:500px;animation-delay:5s;}
.d51{left:510px;animation-delay:5.1s;}
.d52{left:520px;animation-delay:5.2s;}
.d53{left:530px;animation-delay:5.3s;}
.d54{left:540px;animation-delay:5.4s;}
.d55{left:550px;animation-delay:5.6s;}
.d56{left:560px;animation-delay:5.7s;}
.d57{left:570px;animation-delay:5.8s;}
.d58{left:580px;animation-delay:5.9s;}
.d59{left:590px;animation-delay:6s;}

/*down to up*/

#dsa1{ 
   background-color:green;
 border-width:5px;
   width:20px;
   height:20px;
   position:fixed;
   top:200px;
   animation-name:animdown;
   animation-iteration-count:infinite;
   animation-duration:.8s;
   border-radius:10px;
}

.da1{left:10px;animation-delay:0.1s;}
.da2{left:20px;animation-delay:0.2s;}
.da3{left:30px;animation-delay:0.3s;}
.da4{left:40px;animation-delay:0.4s;}
.da5{left:50px;animation-delay:0.5s;}
.da6{left:60px;animation-delay:0.6s;}
.da7{left:70px;animation-delay:0.7s;}
.da8{left:80px;animation-delay:0.8s;}
.da9{left:90px;animation-delay:0.9s;}
.da10{left:100px;animation-delay:1s;}
.da11{left:110px;animation-delay:1.1s;}
.da12{left:120px;animation-delay:1.2s;}
.da13{left:130px;animation-delay:1.3s;}
.da14{left:140px;animation-delay:1.4s;}
.da15{left:150px;animation-delay:1.5s;}
.da16{left:160px;animation-delay:1.6s;}
.da17{left:170px;animation-delay:1.7s;}
.da18{left:180px;animation-delay:1.8s;}
.da19{left:190px;animation-delay:1.9s;}
.da20{left:200px;animation-delay:2s;}
.da21{left:210px;animation-delay:2.1s;}
.da22{left:220px;animation-delay:2.2s;}
.da23{left:230px;animation-delay:2.3s;}
.da24{left:240px;animation-delay:2.4s;}
.da25{left:250px;animation-delay:2.5s;}
.da26{left:260px;animation-delay:2.6s;}
.da27{left:270px;animation-delay:2.7s;}
.da28{left:280px;animation-delay:2.8s;}
.da29{left:290px;animation-delay:2.9s;}
.da30{left:300px;animation-delay:3s;}
.da31{left:310px;animation-delay:3.1s;}
.da32{left:320px;animation-delay:3.2s;}
.da33{left:330px;animation-delay:3.3s;}
.da34{left:340px;animation-delay:3.4s;}
.da35{left:350px;animation-delay:3.5s;}
.da36{left:360px;animation-delay:3.6s;}
.da37{left:370px;animation-delay:3.7s;}
.da38{left:380px;animation-delay:3.8s;}
.da39{left:390px;animation-delay:3.9s;}
.da40{left:400px;animation-delay:4.0s;}
.da41{left:410px;animation-delay:4.1s;}
.da42{left:420px;animation-delay:4.2s;}
.da43{left:430px;animation-delay:4.3s;}
.da44{left:440px;animation-delay:4.4s;}
.da45{left:450px;animation-delay:4.5s;}
.da46{left:460px;animation-delay:4.6s;}
.da47{left:470px;animation-delay:4.7s;}
.da48{left:480px;animation-delay:4.8s;}
.da49{left:490px;animation-delay:4.9s;}
.da50{left:500px;animation-delay:5s;}
.da51{left:510px;animation-delay:5.1s;}
.da52{left:520px;animation-delay:5.2s;}
.da53{left:530px;animation-delay:5.3s;}
.da54{left:540px;animation-delay:5.4s;}
.da55{left:550px;animation-delay:5.6s;}
.da56{left:560px;animation-delay:5.7s;}
.da57{left:570px;animation-delay:5.8s;}
.da58{left:580px;animation-delay:5.9s;}
.da59{left:590px;animation-delay:6s;}

Step fourth: - Now define css for animating div as in below code.

Step fifth :- Now combine and save this codes in a right way and Run it on browser.

Thursday, 15 June 2017

Animation with html tag circle and rect and @keyframes css property by top4ways

What you need for this animation :-
●Basic knowledge of html and css.
●Text editor like Notepad, Better if you use any code editor.

List of html tags and css used

circle
style
svg
rect

Lets start coding for creating above animation :-
Step first: Create an svg elements and define its height and width.
Step second : create a rect tag with id or class and then create five circle tag with different id or class. As in below code: -

Step third: - After completing second step create a style tag and define cx , cy , fill and r of circle by selecting id or class name one by one for all circle.
Step fourth: - After completing third step define @keyframe for all circle and define value you want to chane with time.
After completing all the step the code looks like the below code: -

#circlea2{
 cx:300;
 cy:300;
 r:20;
 fill:red;
 animation: circlea2 9s linear infinite 2s;
}
@keyframes circlea2 {
 50%{r:120;}
 100%{r:20;}
 
 25%{cy:600;}
 75%{cy:0;}
 100%{cy{}:300;}
 
 20%{fill:red;}
 40%{fill:blue;}
 60%{fill:green;}
 80%{fill:pink;}
 100%{fill:red;}
}
#circlea3{
 cx:300;
 cy:300;
 r:20;
 fill:red;
 animation: circlea3 9s linear infinite 2s;
}
@keyframes circlea3 {
 50%{r:120;}
 100%{r:20;}
 
 25%{cx:0;}
 75%{cx:600;}
 100%{cx:300;}
 
 20%{fill:red;}
 40%{fill:blue;}
 60%{fill:green;}
 80%{fill:pink;}
 100%{fill:red;}
}

#circlea4{
 cx:300;
 cy:300;
 r:20;
 fill:red;
 animation: circlea4 9s linear infinite 2s;
}
@keyframes circlea4 {
 50%{r:120;}
 100%{r:20;}
 
 25%{cy:0;}
 75%{cy:600;}
 100%{cx:300;}
 
 20%{fill:red;}
 40%{fill:blue;}
 60%{fill:green;}
 80%{fill:pink;}
 100%{fill:red;}
}

#circlea5{
 cx:300;
 cy:300;
 r:20;
 fill:green;
 animation: circlea5 9s linear infinite 2s;
}
@keyframes circlea5 {
 50%{r:120;}
 100%{r:20;}
 
 20%{fill:green;}
 40%{fill:pink;}
 60%{fill:red;}
 80%{fill:blue;}
 100%{fill:green;}
}

</style>

Step fifth: - Save this text file with html extension and run it on any html supported browsers.

Sunday, 11 June 2017

Animation with html and css such as line, animate and and css property

(line , animate and css property ) - top4ways
The below animation is created with the help of html5 and css.

Animation with div svg circle and animate tags

The below animation is created with the help of html5 and css.
Take a look to the animation first.

What you need for this animation ?

Basic knowledge of html and css.
Text editor like Notepad, Better if you use code editor.

Lets start coding for creating above animation.
List of html tags used in above animation.

div used 4 times
svg used 4 times
circle used 20 times
style
animate used 20 times

Method to create above animation :-
Step first: Create four div tags with different id or class name.
Step second : Create one-one svg elements between each div element. And define its height and width and create 5 circle between each svg elements. Then the code look like the below code: -

</svg>
</div>

Step third: Now we will define the css for the whole code to make the animation complete. As the below code :-
Step fourth: Now place the code from second step inside the body tag and code from third step inside the style tag in below format for completing the above animation.

Step fifth : Save the code in html extension and run it on any html support browser.
If you have any problems in saving this animation file. You can download it just click on the download botton.

Thursday, 8 June 2017

New edition of Animation of circle with the help of html5 and css

what should you have?
● Basic knowledge of html and css.
● Any text editor better if you use any code editor.

Method to create this animation.
step first: For creating a circle on any html page we have to define an svg (scalable vector graphics) first and define its height and width. For this animation i have set the value of height equal 600 and width equal to 600.
second step: Create circle by using circle tag and define there position on x-axis and y-axis by cx and cy respectively. The circle will appear on top other circle or any other elements which are coded first. For example

Third step :- First take a look to this post , so you can understand how to create circle with animation as in the above animation.Click here
Forth step :- The code for making animation of circle for the above animation is below.

</style>

</svg>

Fifth step : Now create an div tag and give a class attribute to it ( div_box in my case)and place the above code inside it.and Then apply the following style code to it.

Your animation is complete. If you have any problems in creating this code you can download it for free from here :-
Download this animation file

Wednesday, 7 June 2017

Make a table fan with html and css

Animate html tag to make a table fan with the help of css and html.

What you need to make this animation with coding.
# Basic knowledge of html and css.
# Text editor like Notepad. Better if you use any code editor.

List of html tags used

polyline
animate
div
svg
circle
style

Method to make this table fan animation
First Step : Create an div tag and define its height and width with value so the blade of the fan can cover almost the entire area. Because we will rotate the whole div tag so the blades appear to be rotating. Give an class name to this div. After creating div tag create an svg element inside this tag and define its height and width with value of 100%

Step second : Second Step : Now write a new tag polyline inside the svg and make a plus symbol with center. Again create polyline tag and make another plus symbol so the line of both sing make 45° angle.

The look like this after completing the above Step:

Step third : Now create another two div elements and give class name rode and stand.
Step fourth: Lets complete the last step , in this step you have to create an style sheet or create style tag in the above code file. As in below code:--

Now save this text file in html format and run it on your browser.
Download this animation html file

Code For Animate

Coming Soon

Coming Soon

Friday, 26 October 2018

Java program for building maximum possible time from 9 digit (TCS codevita question )

Thursday, 20 July 2017

Animation with HTML line tag and CSS @keyframes having beautiful look by Code4animate

Animation with html and css coding.

This animation is created with line tag and its color is changed with @keyframes .

What you need for creating animation like above.

Lets start coding to create animation like this one.

Step third :-Now create line tags for this animation as in below code

Step fourth: - Now define css for changing the color of line for this animation as in below code

Step fifth :- Now combine and save this codes in a right way and Run it on browser.

Saturday, 8 July 2017

Animation with html and css coding like div, keframes and more by code4animate

Thursday, 15 June 2017

Animation with html tag circle and rect and @keyframes css property by top4ways

Sunday, 11 June 2017

Animation with html and css such as line, animate and and css property

Saturday, 10 June 2017

Animation with div svg circle and animate tags

Thursday, 8 June 2017

New edition of Animation of circle with the help of html5 and css

Wednesday, 7 June 2017

Make a table fan with html and css

Saturday, 13 May 2017

Animation of circle with the help of html5 and css

Popular Posts

Ads

Definition List

Text Widget

Blog Archive

Contact Form

Pages - Menu

Popular Posts