I'm having trouble trying to create a diamond shape without manipulating html css or centering(It will be smart enough to add spaces). Been spending few hours trying out but still no success. Is this an impossible task without manipulating html or css? Any help would appreciated. Thanks.

Below are the functions for code:

function slope(val){

    document.write('function slope('+val+')<br>');
    doubleit = val*2;

    for(i=0; i<doubleit; i++){
        if (i < val){
            for(j=0; j<i; j++){
                document.write('*');
            }
        }
        if (i >= val){
            for(j=doubleit; j>i; j--){
                document.write('*');
            }
        }

    document.write('<br>');
    }
}

function diamond(val){

    doubleit = val*2;
    document.write('<center>');
    document.write('function diamond('+val+')<br>');
    for(i=0; i<doubleit; i++){
        if (i < val){
            for(j=0; j<i; j++){
                document.write('*');
            }
        }
        if (i >= val){
            for(j=doubleit; j>i; j--){
                document.write('*');
            }
        }

        document.write('<br>');
    }

    document.write('</center>');
}

I'm having trouble trying to create a diamond shape without manipulating html css or centering(It will be smart enough to add spaces). Been spending few hours trying out but still no success. Is this an impossible task without manipulating html or css? Any help would appreciated. Thanks.

Below are the functions for code:

function slope(val){

    document.write('function slope('+val+')<br>');
    doubleit = val*2;

    for(i=0; i<doubleit; i++){
        if (i < val){
            for(j=0; j<i; j++){
                document.write('*');
            }
        }
        if (i >= val){
            for(j=doubleit; j>i; j--){
                document.write('*');
            }
        }

    document.write('<br>');
    }
}

function diamond(val){

    doubleit = val*2;
    document.write('<center>');
    document.write('function diamond('+val+')<br>');
    for(i=0; i<doubleit; i++){
        if (i < val){
            for(j=0; j<i; j++){
                document.write('*');
            }
        }
        if (i >= val){
            for(j=doubleit; j>i; j--){
                document.write('*');
            }
        }

        document.write('<br>');
    }

    document.write('</center>');
}

• javascript
• html
• css

Share Improve this question Follow edited Jul 19, 2016 at 4:28 Prabhat 33844 silver badges2020 bronze badges asked Jul 19, 2016 at 3:30 Ame MAme M 5522 silver badges66 bronze badges 3

• 1 I'm trying to understand what you're after... is the current output what you want it to be, but you want to remove the <center> tag (and have it still look the same)? – user94559 Commented Jul 19, 2016 at 3:35
• I don't see how you could create that indenting using nothing but space characters unless you have a font where a space is exactly half the width of an asterisk. (Because otherwise how could you space it to centre ** under *?) – nnnnnn Commented Jul 19, 2016 at 3:37
• Why is this tagged with Java? – Ishita Sinha Commented Jul 19, 2016 at 4:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

If you want to get rid of the <center> tag, you'll have to:

• use a fixed-width font
• do the correct left justification
• insert spaces between the '*' characters

Example:

  *
 * *
* * *
 * *
  *

You can think of it as the ASCII version of the Nine-Ball starting position.

Let's give it a try:

function diamond(val){
  var y, w, shape = '';

  for(y = 0; y < val * 2 - 1; y++) {
    w = y < val ? y : val * 2 - y - 2;
    shape += Array(val - w).join(' ') + Array(w + 1).join('* ') + '*\n';
  }
  document.write('<pre>' + shape + '</pre>');
}

diamond(7);

function diamondOfWidth(n){
    var i, diamonds = '*';
    for(i=1; i< 2*n; i++){
        document.write('<pre>' + diamonds + '</pre>');
        diamonds += i<n? "  *": '';
        diamonds = i>=n? diamonds.slice(3): diamonds;
    };
    document.body.style.textAlign = 'center';
    document.body.style.lineHeight = 0.5;
};

function diamondOfHeight(n){
    var i, diamonds = '*';
    for(i=1; i <= n+1; i++){
        document.write('<pre>' + diamonds + '</pre>');
        diamonds += i< n/2? ' * *': '';
        diamonds = i>n/2? diamonds.slice(4): diamonds;
    };
    document.body.style.textAlign = 'center';
    document.body.style.lineHeight = 0.1;
};

diamondOfHeight(7);
diamondOfHeight(6);
diamondOfHeight(5);
diamondOfHeight(4);
diamondOfHeight(3);

diamondOfWidth(7);
diamondOfWidth(6);
diamondOfWidth(5);
diamondOfWidth(4);
diamondOfWidth(3);

<h1> Diamonds </h1>

for(i=1;i<=5;i++){
  txt = "";
  for(j=i;j<10;j++){
    txt += " ";
  }
  for(k=0;k<(i*2)-1;k++){
    txt += "*";
  }
  console.log(txt);
}
var txt = "";
for(i=5-1;i>=1;i--){
  txt = "";
  for(j=i;j<10;j++){
    txt += " ";
  }
  for(k=0;k<(i*2)-1;k++){
    txt += "*";
  }
  console.log(txt);
}

i did it this way.

var width = 11;  
var num = (width+1)/2;  
for (let i = num-1; i >-num; i--) {
    for (let j = num-Math.abs(i); j < num; j++) {
        stars+=' '
    }
    for (let j = 0; j < 2*(num-Math.abs(i))-1; j++) { //2*num-(2*Math.abs(i) +1) simplified to 2*(num-Math.abs(i))-1
        stars+="*";
    }
    stars+="\n";
}
console.log(stars);