javascript-project-source-code

Car Running Html, CSS and JavaScript Project Source Code

by

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

1 thought on “Car Running Html, CSS and JavaScript Project Source Code”

  1. Sir, thank you very much for making my day. I have searched for something like this for very long time!!! But I would like you to help me expand it by including traffic light. Thank you once again.

    Reply

Leave a Comment