Question

In: Computer Science

Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....

Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of the page should change every 3 seconds to a random color.

Solutions

Expert Solution

Note: Cannot show animation. Do try the code.

button_hover_page.html

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
html,body{
heigth:100%;width:100%;min-height:100%;position:relative;oberflow:hidden;
color:#fff;
}
body {
background: #45484d; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #45484d 0%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #45484d 0%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #45484d 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-align:center;
}
[class*="BT"]{width:250px;display:block;position:absolute;padding:0;border-color:#ffffff;margin:0 0 10px;line-height:6px;border-style:solid;left:50%;margin-left:-125px;height:60px;}
[class*="BT"] hover{position:absolute;z-index:5;width:246px;margin-left:-370px; transition: all 0.3s ease-out 0s; background: -moz-linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(135,135,135,0.38) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(135,135,135,0.38)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* IE10+ */background: linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ height:60px;margin-top:-30px;}
[class*="OH"]{overflow:hidden;}
[class*="BR"]{border-width:2px;}
[class*="R6"]{border-radius:6px;}
[class*="NF"]{background:transparent;}
[class*="BT"]:hover hover{ margin-left:123px;}
[class*="TU"]{text-transform:uppercase;}
[class*="PT"]{cursor:pointer;}
[class*="BT"] span{ position:absolute; width:200px; margin-left:-100px; z-index:3;}
canvas{margin: 0;padding: 0;display:block;position:absolute;margin-top:-30px;}
#button{
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$('#button').mouseover(function(){
$(this).css({
left:(Math.random()*$(window).width()-15),
top:(Math.random()*$(window).height()-15),
});
});

   $('#button').click(function(){
   window.location.href = "Background_color_change.html";
   });
});
</script>
</head>
<body>
<br /><br /><br />

<br /><br /><br />
<p>
<button id="button" class="BT-OH-BR-R6-NF-FH-FP-TU-PT">
<canvas id="canvas"></canvas>
<hover></hover>
<span>Click to receive $10</span>
  
</button>

</p>
<br /><br /><br /><br /><br /><br /><br /><br />


</body>
</html>

Background_color_change.html

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
html,body{
heigth:100%;width:100%;min-height:100%;position:relative;oberflow:hidden;
color:#fff;
}
body {
background: #45484d;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-align:center;
}
</style>

<script type="text/javascript">
var i = 0;
   function change() {
   var doc = document.getElementById("change_background");
   var color = ["black", "blue", "brown", "green","pink","lightgreen","grey","lightgreen"];
   doc.style.backgroundColor = color[i];
   i = (i + 1) % color.length;
   }
   setInterval(change, 3000);
</script>
</head>
<body id="change_background">
</br></br></br></br></br></br></br></br></br>
<img src="download.jpg" />

</body>
</html>

venereology answered 1 week ago
Next > < Previous

Related Solutions

2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel and tourism company. Use between 8 and 12 pictures that will automatically change every 1 to 3 seconds. You may use the pictures from Assignment 1 and add more to the collection. The slide show will have the following features: Use a background image. The pictures must use a type of ‘transition’ ie Fade in/Fade out when the pictures change. Each picture must include...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
suggests on how to save the web portfolio Programming languages Chosen: HTML, CSS, and JavaScript. Project...
suggests on how to save the web portfolio Programming languages Chosen: HTML, CSS, and JavaScript. Project Name: Auto Portfolio Project Goal: Create a website that will generate a web portfolio using information inputted by the user. Product Backlog using user stories: As a user, I want to be able to save my web portfolio in a format which I can save so I can use the website later for my own needs. Example: http://www-personal.umich.edu/~hamatilo/
suggests on how to save the web portfolio Programming languages Chosen: HTML, CSS, and JavaScript. Project...
suggests on how to save the web portfolio Programming languages Chosen: HTML, CSS, and JavaScript. Project Name: Auto Portfolio Project Goal: Create a website that will generate a web portfolio using information inputted by the user. Product Backlog using user stories: As a user, I want to be able to save my web portfolio in a format which I can save so I can use the website later for my own needs.
Please Use JavaScript and P5 1) Greeter Create an page with an input, and a button....
Please Use JavaScript and P5 1) Greeter Create an page with an input, and a button. When the button is clicked, output the phrase "Hello {Name}" to the developer console, with {Name} being the value the user put into the input field. Use a function that takes the name as an argument, and returns the full phrase as its output.
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...
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...
Build an application using HTML, CSS, javascript, json. It is not necessary for backend to be...
Build an application using HTML, CSS, javascript, json. It is not necessary for backend to be working but the frontend should be good. App should to simple and useful in our day to day life. For eg- grocery shopping list or alarm or weather forecast or reminder.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT