Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Treehouse Club: JavaScript Car Sounds Background Color, Margin, and Padding

Nelson Cole
Nelson Cole
1,423 Points
Posted by Nelson Cole
Nelson Cole
1,423 Points

Seeing the (the bike) wrong image on preview, before and after refresh.

Not sure why I am seeing the bike and not the car on preview?

I would be willing to send a screen shot, but not sure how in this environment

Thanks Nelson.

css/style.css 
/* Background Color */
html {
  background: #99E6FF;
}


/* Body */
body {
  margin: 0 auto;
  max-width: 800px;
}


/* Images */
img {
  width: 100%;
}

.car { 
  display:block;
  margin: 100px 0 50px 0;
  padding: 0;
}


/* Links */
a {
  background: transparent;
  border: 0;
  display: block;
  float: left;
  margin: 0;
  outline: 0;
  padding: 0;
  width: 33%; 
}
index.html 
<!DOCTYPE html>
<html lang="en">

  <head>
  <meta name="charset" value="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
    <title>Car Sounds</title>

    <!--Style Sheet link-->
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>

    <!--Car image -->
    <img src="images/bike.png" class="car" alt="car">


    <!--Button-->
    <a href="javascript:bikeBell();"><img src="images/bikeLock.png" alt="key"></a>


    <!--Audio Files-->
    <audio id="bikeBell" src="sounds/bikeBell.mp3" preload="auto"></audio>


    <!--Javascript-->
    <script type="text/javascript">
        function bikeBell() {
            document.getElementById('bikeBell').play();
        }

    </script>

  </body>

</html>

1 Answer

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points

You seem to misunderstand. The bike is the right image. All of the tasks up to this point are about changing the car to a bike, and from the looks of your code it seems like you did it correctly.

In the first task you took the car image:

    <img src="images/car1.png" class="car" alt="car">

And changed it to the bike image:

    <img src="images/bike.png" class="car" alt="car">

The second task shows you how to change the car sound:

    <!--Audio Files-->
    <audio id="startCar" src="sounds/startCarA.mp3" preload="auto"></audio>


    <!--Javascript-->
    <script type="text/javascript">
        function startCar() {
            document.getElementById('startCar').play();
        }

    </script>

to a bike sound:

    <!--Audio Files-->
    <audio id="bikeBell" src="sounds/bikeBell.mp3" preload="auto"></audio>


    <!--Javascript-->
    <script type="text/javascript">
        function bikeBell() {
            document.getElementById('bikeBell').play();
        }

    </script>