1. Create an app described below i You can use it or you can write new one on yo

ID: 3727345 • Letter: 1

Question

1. Create an app described below i You can use it or you can write new one on your own (but you will not get extra marks for your HTML). Details 1. 2. 3. This app stores the properties of shapes and allows the users to view/draw the stored shapes. It has the Ul that is defined by the HTML that I provided (shown on the right). When it starts, it first uses the canvas to display "Assignment #6 submitted by" followed by your own name 4. The users can thern enter types of shapes (shown on the right), specify if they want a Please select a shape Square Circle filled or stroked shape, and its colour Assignment #6 submitted by Yasush Triangle 5. When the Save button is clicked, it adds this new shape to the array of shape objects stored in the localStorage shapes shape. Square", filled".fill, 6. When they click on the Next Shape button for the 1st time, it reads the array of shape objects, and it draws the very first shape that is stored in the localStorage. 7. 8. a. For any subsequent clicks, it keeps drawing the next shapes in the order that they were saved The Previous shape button does the opposite, i.e., it keeps drawing the shapes in the reverse order It should also display the properties of the shapes using the colour that matches the shape colour Draw shapes 0 Previous shape O Previous shape 0 Index: 0 Colour: purple

Explanation / Answer

Please find the answer below to get the desired output

here I have not given seperate files for html, css and js, All are included in 1 file, At the top, css is given, HTML code at the center and javascript at the last

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Shapes.html

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-4"></div>

<div class="col-lg-4"><div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Please select a Shape
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Circle</a></li>
<li><a href="#">Rectangle</a></li>
<li><a href="#">Triangle</a></li>

</ul>
</div>

</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<br/>

<input type="text" class="form-control" placeholder="Color">
<br/>

<button type="button" class="btn btn-default">Save</button>
</div>
<div class="col-lg-4"></div>
</div>

<div class="slideshow-container hide" >

<div class="mySlides fade">
<div class="text">Index : 0</div>
<div class="text">Shape : Circle</div>
<div class="text">Color : Red</div>
<canvas id="circlecanvas" width="500" height="500"></canvas>

</div>

<div class="mySlides fade">
<div class="text">Index : 1</div>
<div class="text">Shape : Rectangle</div>
<div class="text">Color : Blue</div>
<canvas id="myCanvas" width="500" height="500"></canvas>
</div>

<div class="mySlides fade">
<div class="text">Index : 2</div>
<div class="text">Shape : Triangle</div>
<div class="text">Color : Purple</div>
<canvas id="CanvaasTriangle" width="500" height="500"></canvas>
</div>

</div>
<br>

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

// slide show for slide show
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
//var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// for (i = 0; i < dots.length; i++) {
// dots[i].className = dots[i].className.replace(" active", "");
// }
slides[slideIndex-1].style.display = "block";
//dots[slideIndex-1].className += " active";
}
</script>
<script>
// circle
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()

// Rectangle
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.fillStyle = "#0000FF";
ctx.fill();
ctx.stroke();

// Triangle
var canvasElement = document.querySelector("#CanvaasTriangle");
var context1 = canvasElement.getContext("2d");

// the triangle
context1.beginPath();
context1.moveTo(100, 100);
context1.lineTo(100, 200);
context1.lineTo(200, 200);
context1.closePath();

// the outline
context1.lineWidth = 2;
context1.strokeStyle = '#666666';
context1.stroke();

// the fill color
context1.fillStyle = "#800080";
context1.fill();

var showImage = function(n){
$('.slideshow-container').removeClass('hide');
showSlides(n);}

</script>

// CDN links for the things to work
// Make sure that you are connected to internet to make it work it properly
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body></html>

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Happy Coding

Navigate

1. Create an abstract class “Student.cs”. Read page 329. 3 public string data me

1. Create an applet payroll program named CalcPay that allows the user to enter

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

1. Create an app described below i You can use it or you can write new one on yo

Question

Explanation / Answer

Related Questions

Navigate