Guys in this post i will share car running project source code. if you are beginner and learning html , css , javascript then this project best for you.

Lets understand basic technologies and tools we used in car running JavaScript project. It is a small mini project we used Html,css, javascript and IDE- visual studio code.

Car Running JavaScript Project Overview

Here we implemented two button i,e start and stop. when user click on the start button car will move and stop click then car will not move.

javascript project

Project Tutorial Video

Source code JavaScript

index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
    <link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div id=”scene”>
    <div id=”bdiv”>
        <button onclick=”start()” id=”btn”>Start</button>
        <button onclick=”stop()” id=”btn”>Stop</button>
    </div>
</div>
    <div id=”car”>
        <img src=”c2.png” style=”width:150px;” id=”im”>  
    </div>   
<script src=”js-file.js”></script>
</body>
</html>

style.css

body{
margin: 0%;
padding: 0%;
}
#car{
background: url(road.jpg);

}
#scene{
background: url(side.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 450px;
}
#btn{
width: 100px;
height: 50px ;
background-color: yellow;
font-size: 20px;
margin: 20px;
}

#bdiv{
display: flex;
justify-content: center;
align-items: center;
min-height: 40vh;
}

js-file.js

var x;
var m=0;
function start()
{
 x=setInterval(anim,100);
 
  function anim()
  {
      
      console.log(m);
        if(m==1200)
        {
            clearInterval(x);           
            m=0;
        }
        
        else
        {
            m=m+5;
            document.getElementById(“im”).style.visibility=”visible”;
            var target=document.getElementById(“im”);
            target.style.marginLeft=m+’px’;
        }
   }

}

function stop()
{
    clearInterval(x)
}

Project Resource Download

Download Images- Click Here

Hey Guys if your need any type Java project , Python and Android Apps then contact me we provide in cheap price . Contact Us:- Email-daspabitra55@gmail.com, WhatsApp No- 7978904654

Leave a Reply

Your email address will not be published. Required fields are marked *