Question

In: Computer Science

Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop",...

Use HTML, CSS, jQuery and Bootstrap to do the following:

1. Add four buttons "Start", "Stop", "Back", "Reset". <button type="button">

2. Add "glyphicon-shopping-cart" to <div id="sc" style="font-size: 100px; color: blue; ">.
Use CSS in embeded style to set
<style type="text/css">
    #sc{

border-style: dotted; /* Required to animate border width */
border-color: red;
border-width: 0;
}
</style>

3. <script>

- "Start", call "animate()" function to move it to right by 300px for
each click, speed is 2000. left: "+=300px". Hint: chaining
call animate({borderBottomWidth: "0px"},500)
in css, border-bottom-with:

- "Stop", call "stop()" function stop movement, show bottom border color
in red. Hint: use "Chaining" to call stop() and
animate({borderBottomWidth: "10px"},500)

- "Back", call "animate()" function to move it to left by 300px for
each click, speed is 2000.

- "Reset", call "animate()" function to the begining positon. left: "0".
"Chaining" call.

Solutions

Expert Solution

Working code implemented in HTML, CSS, jQuery & Bootstrap and appropriate comments provided for better understanding.

Source Code:

<!doctype html>
<html lang-"en">
   <head>
       <meta charset-"utf-8"/>
       <title>Assignment</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstraptheme.
   min.css" integrity="sha384-
   rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
   Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <script>
       $(document).ready(function() {

           $("#start").click(function() {
               $("#sc").animate({borderBottomWidth: "0"},500).animate({
                   marginLeft: "+=300px",
               }, 2000);
           });

           $("#stop").click(function() {
               $("#sc").stop().animate({borderBottomWidth: "10px"},500).css("borderBottomWidth", "10px");
           });

           $("#back").click(function() {
               $("#sc").animate({borderBottomWidth: "0"},500).animate({
                   marginLeft: "-=300px",
               }, 2000);
           });

       $("#reset").click(function() {
           $("#sc").animate({borderBottomWidth: "0"},500).animate({
               marginLeft: "0px",
           }, 500);
           });

       });
</script>
   <style media="screen">
       .button-container {
           padding: 10px 0px 50px 10px; /*T10-R0-B50-L10*/
       }
       #sc {
           display: inline-block; /*only take up space needed*/
           border-style: dotted;
           border-color: red;
           border-width: 0;
           font-size: 100px;
           color: blue;
       }
   </style>

   </head>

   <body>
       <div class="button-container">
           <button id="start" type="button" name="button">Start</button>
           <button id="stop" type="button" name="button">Stop</button>
           <button id="back" type="button" name="button">Back</button>
           <button id="reset" type="button" name="button">Reset</button>
       </div>

<!--START animate({borderBottomWidth: "0px"},500) -->
<!--STOP stop().animate({borderBottomWidth: "10px"},500) -->
<!--BACK animate() -->
<!--RESET animate() -->

       <div id="sc">
           <span class="glyphicon glyphicon-shopping-cart"></span>
       </div>

   </body>
</html>

Sample Output Screenshots:

venereology answered 6 months ago
Next > < Previous

Related Solutions

Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to...
Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it. 3-5) Develop a server which can serve the file you developed in 3-4. 3-6) Add a plugin to the real jQuery...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write a website for the fictitious company Game Gurus. The website will have a home page that you will design, as well as pages created by each "guru." (At least 2 gurus are required). The home page will include: o A description of the site o A quote from each guru o Links to manufacturers websites o Links to the TopTen.html and GameOfTheWeek.html pages for...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original code just add it to to make the next steps please: HTML: <nav> <ul class="Login-button"> LOG IN</ul> </nav> CSS: *{ margin: 0; padding: 0; list-style-type: none; } nav { height: 50px; background: #DEDFE0; display: flex; align-items: center; padding: 0 20px; } .login-button { padding: 5px 8px; cursor: pointer;} .login-button: hover { background: #BCBDC0; } PLEASE do the following: Create a transparent grey overlay over...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT