can you do this question ill give you the html and js and css files i did everything 5154170
can you do this question ill give you the html and js and css files i did everything i want you to do the abnswer apear to the left not to the rghit like the image just do the answer to the left when you run my files it works but apear to rghit i want you to change it to the left
EECS1012: Lab 5 – computational thinking
triangle with nested loops
Run the program
(c) Author: your name
function problem_15() {
/* this statement defines an object reference to the
html element that its ID is “output”.
Every time you want to output something, use outputObj */
var outputObj = document.getElementById(“output”);
// this statement receives some data and parses it to integer
var a = parseInt(prompt(“Please enter a number: “, “”));
/* this statement add some message to our output Object
you would need to change the message to be appropriate in Ex10 to E15*/
outputObj.innerHTML = “number: ” + a + “
its digits:
“;
// translate rest of your flowcharts to js here:
for (let i = 0; i
for (let j = 0; j
outputObj.innerHTML += “XX “;
}
outputObj.innerHTML += “
“;
}
//the following statements inform the user that the program ended
//and disable the button
outputObj.innerHTML = outputObj.innerHTML + “
” + “program ended”;
document.getElementsByTagName(“button”)[0].setAttribute(“disabled”, “true”);
}
* {
box-sizing: border-box;
background-color:LightGrey;
}
body {
font-family: NimbusSanL, Arial, sans-serif;
text-align: center;
color:#202020;
background-color:Silver;
}
div {
border:1px solid SlateGrey;
border-radius:5px;
margin: 20px;
}
.input {
border:none;
text-align:right;
}
p {
text-align:right;
padding: 20px;}
input, button {
font:inherit;
color:Blue;
width:100px;
padding-left: 5px;
}
button {
color:DarkSlateGrey;
width:200px
}
strong {
font-family: NimbusSanL, Arial, sans-serif;
font-size:1.2em;
color:Green;
text-decoration:bold;
}
footer{
padding-top:10px;
text-align:center;
font-size:10px;
color:LightSlateGrey;
}
/* Responsive layout – makes the columns stack on
top of each other instead of next to each other */
[class*=”column”] {
width: 80%;
display:inline-block;
height:60vh;
font-size:1.5em;
}
@media screen and (min-width:600px) {
[class*=”column”] {
width:50%;
}
}
Exercise 15. Copy ct_Ex14.html and ct_Ex14.js to new files named ct_Ex15.html and ct_Ex15.js In this exercise, you translate your flowchart of Ex 15 of Part 1 to its equivalent JavaScript code. Several changes that you need to make here are minor changes like what you did in previous exercises in html and js files. So, we do not re-state them here. This exercise can be done with for loop, as iterations are deterministic. For instance, if input is 5, we need to iterate exactly 5 times to output those 5 rows; also, in each row i, we should put i pairs of XX So, we need to nest one loop inside another Note: in this exercise you would ne ed to change text alignment to left. You can do this just in your js code. Also, you would need to make the output font size smaller, let's say to 11px. For these, you can modify the style property of outputObj just before you enter the loop, like in line 18 and 19. Once you are done, run the program, you should see the following result if you enter 5 or 10. If not, debug your code (Shift+Ctrl+J in Firefox). triaingle with nested loops triangle with nested loops run the program run the program sumber t ber rgended rogaended