What is the best way to fill in the space between these two objects, essentially making one object that fills the space from the most left the a to the most right of b. I need a dynamic solution, since the the position of A and B will vary, sometimes B will be further left than A. I would like them to begin as two separate objects though. Also note only the space between the two do I wish to be filled, nothing outside.
function myFunction() {
var x = document.getElementById('a');
var y = document.getElementById('b');
x.style.right = "70%";
y.style.right = "50%";
var greenRect = x.getBoundingClientRect();
var blueRect = y.getBoundingClientRect();
}
h1 {
position: relative;
width: auto;
height: 50px;
background-color: beige;
}
h2 {
position: relative;
}
#a {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
border-radius: 50%;
}
#b {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
border-radius: 50%;
}
<h1>
<div id='a'></div>
<div id='b'></div>
</h1>
<h2>
<button onclick='myFunction()'>PRESS</button>
</h2>
function myFunction() {
var x = document.getElementById('a');
var y = document.getElementById('b');
x.style.right = "70%";
y.style.right = "50%";
var greenRect = x.getBoundingClientRect();
var blueRect = y.getBoundingClientRect();
y.style.width = (blueRect.left - greenRect.left) + "px";
}
h1 {
position: relative;
width: auto;
height: 50px;
background-color: beige;
}
h2 {
position: relative;
}
#a {
position:relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
}
#b {
position:relative;
min-width: 50px;
height: 50px;
background-color: green;
float: right;
}
<h1>
<div id = 'a'></div>
<div id = 'b'></div>
</h1>
<h2>
<button onclick = 'myFunction()'>PRESS</button>
</h2>
You can use some background and box-shadow trick to visually fill the space between:
var x = document.getElementById('a');
var y = document.getElementById('b');
function myFunction() {
var r = Math.random()*100;
y.style.right=r+"%";
x.style.right=(Math.random()*(100 - r) + r)+"%";
}
h1 {
overflow:auto;
background-color: blue;
color:#fff;
text-align:center;
}
#a {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
border-radius: 50%;
box-shadow:-50vw 0 0 50vw beige;
}
#b {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
border-radius: 50%;
box-shadow:50vw 0 0 50vw beige;
}
<h1>
<div id='a'>1</div>
<div id='b'>2</div>
</h1>
<h2>
<button onclick='myFunction()'>PRESS</button>
</h2>
Related
I recently picked up JavaScript and I have trouble moving my input text from one div to another.
I have no issues inputting my name and displaying in box A.
The only issue is moving the text.
I have no issues with CSS and HTML area, however, if you feel that I can improve in the areas below (HTML & CSS) and dish out tips I would greatly appreciate it.
Am I missing out or doing it wrong? Please advice.
Below is my code:
// `name` is a global var for use in functions below this comment. //
var name;
function requestname() {
var name = prompt("Enter your name");
var para = document.createElement("p");
var node = document.createTextNode(name);
para.appendChild(node);
document.getElementById("boxa").appendChild(para);
}
function movetext() {
var name = document.getElementById("nameinput");
var pos = 0;
var moveText = setInterval(move, 50);
}
function move() {
pos++;
e.style.top = pos + "px";
e.style.left = pos + "px";
}
#container {
width: 100%;
overflow: hidden;
}
#boxa {
background-color: black;
width: 20%;
height: 200px;
float: left;
margin: auto;
text-align: center;
vertical-align: middle;
line-height: 150px;
color: white;
}
#button {
background: white;
width: 10%;
height: 200px;
float: left;
margin-left: 15px;
margin-right: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
#boxb {
background: grey;
width: 20%;
height: 200px;
float: left;
margin-left: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
<button onClick="requestname()">Start</button>
<button onClick="clear()">Clear</button>
<br />
<!-- There will be 1 main DIV(container) and 3 sub DIV(boxa, button and boxb) -->
<!-- Div button have 2 buttons allowing me to move name from box A to box B -->
<div id="container">
<div id="boxa"></div>
<div id="button">
<button onClick="movetext()">></button>
<br />
<button onClick="movetext2()"><</button>
</div>
<div id="boxb">
<span id="nameinput" style="position:absolute" ;></span>
</div>
</div>
I have no problem here on. I think my main issue lies in script part.
// Var name is a global var for use in functions below this comment. //
var name
var pos=0;
var para;
var node;
var m;
function requestname()
{
name = prompt("Enter your name");
para = document.createElement("p");
para.setAttribute('id','remove');
node = document.createTextNode(name);
para.appendChild(node) ;
document.getElementById("boxa").appendChild(para);
}
function movetext ()
{
para = document.createElement("p");
node = document.createTextNode(name);
para.appendChild(node);
document.getElementById("boxb").appendChild(para);
name = document.getElementById("nameinput");
var element = document.getElementById('remove');
element.parentNode.removeChild(element)
pos = 0;
move(name)
}
function move(name)
{
pos++;
name.style.top = pos + 'px';
name.style.left = pos + 'px';
}
#container {
width: 100%;
overflow: hidden;
}
#boxa {
background-color: black;
width: 20%;
height: 200px;
float: left;
margin: auto;
text-align: center;
vertical-align: middle;
line-height: 150px;
color: white;
}
#button {
background: white;
width: 10%;
height: 200px;
float: left;
margin-left: 15px;
margin-right: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
#boxb {
background: grey;
width: 20%;
height: 200px;
float: left;
margin-left: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
<button onClick="requestname()">Start</button> <button onClick="clear()">Clear</button>
<br />
<div id="container">
<div id="boxa">
</div>
<div id="button">
<button onClick="movetext()">></button> <br />
<button onClick="movetext2()"><</button>
</div>
<div id="boxb">
<span id="nameinput" style="position:absolute";></span>
</div>
</div>
So what I'm trying to do is create two functions that each go along with their respective buttons. The purpose of the function is to make divs containing images rotate through a number images. When 3 is rotated to the right it leaves the stack of visible images on the page, and when 1 is rotated to the left the same happens. When 1 is rotated to the right, a new image pops into the visible stack. I have the basic JavaScript written out, however when I click the buttons nothing happens. Can anyone help me out with this? Thank you!!
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<div>
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft(), false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight(), false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
The problem was in your even listeners. You were passing rotateLeft() and rotateRight() when you should have passed them without the parenthesis. See working code below.
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft, false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight, false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>
I want to create page, which will show bars/restaurants on page based on some filter. I have one div, which will contain all results (.resultsContainer). I have no problem appending more divs (.barContainer) to this one, but I am struggling to actually append information to these divs. I want .barContainer (.infoContainer) to hold more information such as picture, name, address etc. Problem is when I use append to it, divs are stacked vertically, because margins take full width, even when I set them to zero. I tried using createDocumentFragment() function, where I stack more childs, and then I append result to the .barContainer, which I pass then to HTML, but still it is not working how it should. Basically what I try to achieve is to stack information to infoContainer like tetris bricks. I appreciate any help, maybe there is way how to create html template and use it dynamically? I am pretty sure I am doing something wrong with appendChild, but I cant find a solution. I am new to webcoding.)
Here in my code I will try to put picture, adress and name into the infoContainer, each of those should take one third of the parent div's width and they should be next to each other without any margin. They will have different colours.
HTML:
<body>
<button type="button" id="myBtn" onclick="appendBars()">Append</button>
<div id="resultsContainer"></div>
</body>
JS:
function appendBars(){
var barContainer = document.createElement("div");
barContainer.className = "barContainer"
var infoContainer = document.createElement("div");
infoContainer.className = "infoContainer";
var barPicture = document.createElement("div");
barPicture.className = "barPicture";
var barName = document.createElement("div");
barName.className = "barName";
var barAddress = document.createElement("div");
barAddress.className = "barAddress";
var fragment = document.createDocumentFragment();
fragment.appendChild(barPicture);
fragment.appendChild(barName);
fragment.appendChild(barAddress);
infoContainer.appendChild(fragment);
barContainer.appendChild(infoContainer);
document.getElementById("resultsContainer").appendChild(barContainer);
}
CSS:
#resultsContainer{
float: right;
background: red;
width: 620px;
height: 100%;
overflow-x: auto;
}
.barContainer {
background-color: white;
width: 100%;
height: 200px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: grey;
}
.infoContainer{
width: 620px;
height: 180px;
background-color: white;
padding: 10px;
}
.barPicture{
width: 200px;
height: 180px;
margin: 0;
background-color: yellow;
}
.barName{
background-color: blue;
margin: 0px;
width: 200px;
height: 180px;
}
.barAddress{
background-color: green;
margin: 0px;
width: 200px;
height: 180px;
}
Simply make your elements inline-block, as by default div is a block element and whatever the width you specify it will always occupy the whole row.
You can read more about block/inline elements
function appendBars(){
var barContainer = document.createElement("div");
barContainer.className = "barContainer"
var infoContainer = document.createElement("div");
infoContainer.className = "infoContainer";
var barPicture = document.createElement("div");
barPicture.className = "barPicture";
var barName = document.createElement("div");
barName.className = "barName";
var barAddress = document.createElement("div");
barAddress.className = "barAddress";
var fragment = document.createDocumentFragment();
fragment.appendChild(barPicture);
fragment.appendChild(barName);
fragment.appendChild(barAddress);
infoContainer.appendChild(fragment);
barContainer.appendChild(infoContainer);
document.getElementById("resultsContainer").appendChild(barContainer);
}
#resultsContainer{
float: right;
background: red;
width: 620px;
height: 100%;
overflow-x: auto;
}
.barContainer {
background-color: white;
width: 100%;
height: 200px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: grey;
}
.infoContainer{
width: 620px;
height: 180px;
background-color: white;
padding: 10px;
}
.barPicture{
width: 200px;
height: 180px;
margin: 0;
background-color: yellow;
display:inline-block
}
.barName{
background-color: blue;
margin: 0px;
width: 200px;
height: 180px;
display:inline-block
}
.barAddress{
background-color: green;
margin: 0px;
width: 200px;
height: 180px;
display:inline-block
}
<button type="button" id="myBtn" onclick="appendBars()">Append</button>
<div id="resultsContainer"></div>
Your best solution is to apply display: flex to .infoContainer. That will force the divs to be arranged in a row. You can also apply display: inline-block; for .barPicture and .barName, but it may look bad if you have an overflow.
Demo with .infoContainer {display: flex;}:
function appendBars(){
var barContainer = document.createElement("div");
barContainer.className = "barContainer"
var infoContainer = document.createElement("div");
infoContainer.className = "infoContainer";
var barPicture = document.createElement("div");
barPicture.className = "barPicture";
var barName = document.createElement("div");
barName.className = "barName";
var barAddress = document.createTextNode("div");
barAddress.className = "barAddress";
var fragment = document.createDocumentFragment();
fragment.appendChild(barPicture);
fragment.appendChild(barName);
fragment.appendChild(barAddress);
infoContainer.appendChild(fragment);
barContainer.appendChild(infoContainer);
document.getElementById("resultsContainer").appendChild(barContainer);
}
#resultsContainer{
float: right;
background: red;
width: 620px;
height: 100%;
overflow-x: auto;
}
.barContainer {
background-color: white;
width: 100%;
height: 200px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: grey;
}
.infoContainer{
width: 620px;
height: 180px;
background-color: white;
padding: 10px;
display: flex;
}
.barPicture{
width: 200px;
height: 180px;
margin: 0;
background-color: yellow;
}
.barName{
background-color: blue;
margin: 0px;
width: 200px;
height: 180px;
}
.barAddress{
background-color: green;
margin: 0px;
width: 200px;
height: 180px;
}
<button type="button" id="myBtn" onclick="appendBars()">Append</button>
<div id="resultsContainer"></div>
If I understand your question correctly, you just need to add this to your CSS
/* CLASSES YOU WANT TO INCLUDE */
.barPicture,
.barName,
.barAddress{
display: inline-block;
}
how to repeat a div X times over html page,
lets say I want to set variance to declare times of repeat.
repeat this section 5 times, I assume it's with JS.
<div class="blackstrip">black</div>
<div class="bluestrip">
BLUE
<div class="whitestrip">WHITE strip</div>
</div>
I'm adding the css as it comes out strange look -
.blackstrip{
opacity: 0.8;
width: 600px;
height: 100px;
background-color: black;
background-position: center;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin: 0 auto;
}
.bluestrip{
opacity: 0.5;
width: 600px;
height: 300px;
background-color: blue;
background-repeat: none;
padding-bottom: 10px;
position: relative;
margin-top:50px;
margin: 20px auto;
}
.whitestrip{
opacity: 0.8;
width: 100px;
height:300px;
background-color: gray;
position: relative;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}
Just use a for loop eg:
var amount = 5;
for (var i = 0; i < amount; i++){
var new_div = document.createElement("div");
new_div.className = "bluestrip";
document.body.appendChild(new_div);
console.log("This is repeat " + i);
}
Simple technic, huh?
https://jsfiddle.net/d15e9r6z/
Like Andreas said, it is more effective if you use
DocumentFragment to change multiple DOM's.
I made a simple web application which allow you to add dynamic divs to a container div.
You can see how the app is looking here :
Before resizing
As you can see, when you click the link "Image" in the left menu, it add a new div in the div container with the black background.
Theses dynamics divs add by this way can be dragged and resized by jQuery with the jQuery ui draggable and resizable method.
the draggable function works well, but not the resizable. It seem like the divs are dependents, and when you try to resize it, it depends of the size of the others dynamics divs.
Here is the illustration of what I try to explain :
After resize
Like you can see, I tried to resize the div2, but because I add the div1 first, the div1 been resized too.
I want to make all div independent so I can resize it even if it overlap another div.
Here is my codes :
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
var moveDiv = document.createElement("div");
moveDiv.className = 'encadrer';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
moveDiv.appendChild(titre);
para.textContent = prompt("Texte de l'image :");
para.className = 'centrerPara';
moveDiv.appendChild(para);
bg.appendChild(moveDiv);
$(function () {
$(".encadrer")
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
display: table-cell;
border: 1px solid white;
vertical-align: middle;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
/*----- Resizable ------*/
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0px;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0px;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-nw {
cursor: nw-resize;
height: 7px;
width: 7px;
top: -5px;
left: -5px;
}
.ui-resizable-se {
cursor: se-resize;
height: 7px;
width: 7px;
right: -5px;
bottom: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
height: 7px;
width: 7px;
top: -5px;
right: -5px;
}
.ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 7px;
left: -5px;
bottom: -5px;
}
/*----------------------*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
I don't really know how to use the snippet system but you can see the code by this way :p
Sorry for the bad English and the var names.
I did some css and js changes to fix your problem:
Replace $(".encadrer") to $(moveDiv) because you don't want to call the plugin for all elements (.encadrer) in each time the user add an image.
The main problem was with the position of the images which was relative I changed it to absolut.
I removed the display:table-cell and vertical-align:middle. If you want to center the image you should do this using by following How to center absolute element in div.
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
//var moveDiv = document.createElement("div");
//moveDiv.className = 'encadrer';
//var titre = document.createElement("p");
//var para = document.createElement("p");
//titre.textContent = "Titre";
//titre.className = 'centrerTitre';
//moveDiv.appendChild(titre);
//para.className = 'centrerPara';
//moveDiv.appendChild(para);
var name = prompt("Texte de l'image :");
var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
$(bg).append(container);
container
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
/*display: table-cell;
vertical-align: middle;*/
border: 1px solid white;
position:absolute !important;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
Update
To get the content center inside the .encadrer you need to:
Wrap the content with div
Follow the tutorial go to: Vertically-> Is it inline or inline-* elements (like text or links)?-> Is it multiple lines? -> see the second demo. You can see the final result here