Crafting an 'X' Shape with JavaScript

Question

Crafting an 'X' Shape with JavaScript

I am currently trying to write a program using JavaScript that will generate an 'X'. I am facing challenges in starting the code and deciding what commands to include in each line.

<!DOCTYPE html>
<html>
<meta charset="UTF-8"> 
<font face="Courier New">
<body>
<h1>Trying..</h1> 
<font face='Courier New'> 
<script> 
for (var row = 1; row < 5; row++) {
  for (var col = 0; col < max; col++) } {
    if (row===col || row + col===size-1) {
      document.write ('*')
    else
      document.write ('&Nbsp')
  }
</script> 
</font> 
</body> 
</html>

This is my work-in-progress. I would greatly appreciate any assistance or guidance!

javascript loops

Answer 1

Answer №1

What a fun exercise! These two code snippets are identical.

var width = 10
var height = 10
var ratio = width/height; 

for (var row = 0; row < height; row++) {
    for (var col = 0; col < width; col++) {
        var diff = parseInt((row * ratio), 10);
        
        document.write (diff == col || col == width - diff - 1 ? '*' : '-')
            
        if(col == width - 1) {
            document.write ('<br>')
        }
    }
}

var width = 20
var height = 20
var ratio = width/height; 

for (var row = 0; row < height; row++) {
    for (var col = 0; col < width; col++) {
        var diff = parseInt((row * ratio), 10);
        
        if (diff == col || col == width - diff - 1)
            document.write ('*')
        else
            document.write ('-')
            
        if(col == width - 1)
            document.write ('<br>')
    }
}

Answer 2

What a fun exercise! These two code snippets are identical.

var width = 10
var height = 10
var ratio = width/height; 

for (var row = 0; row < height; row++) {
    for (var col = 0; col < width; col++) {
        var diff = parseInt((row * ratio), 10);
        
        document.write (diff == col || col == width - diff - 1 ? '*' : '-')
            
        if(col == width - 1) {
            document.write ('<br>')
        }
    }
}

var width = 20
var height = 20
var ratio = width/height; 

for (var row = 0; row < height; row++) {
    for (var col = 0; col < width; col++) {
        var diff = parseInt((row * ratio), 10);
        
        if (diff == col || col == width - diff - 1)
            document.write ('*')
        else
            document.write ('-')
            
        if(col == width - 1)
            document.write ('<br>')
    }
}

Answer 3

Answer №2

Answer without the dashes... :)

Also, in document.write ('&Nbsp'), &Nbsp should be &nbsp to add space.

Non-breaking Space
A frequently used character entity in HTML is the non-breaking space:  . A non-breaking space prevents a line break. Two words linked with a non-breaking space will stay together at the end of a line, avoiding disruption.

One important point to note

Note: Another common application of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you type 10 spaces in your text, the browser may remove 9 of them. To retain actual spaces in your text, utilize the   character entity.

var width = 10
var height = 10
var ratio = width/height;

for (var row = 0; row < height; row++) {
    for (var col = 0; col < width; col++) {
        var diff = Math.floor(row * ratio);
        
        document.write (diff == col || col == width - diff - 1 ? '*' :
 '&nbsp&nbsp&nbsp&nbsp') //Adjust the number of &nbsp to widen or narrow the X
            
        if(col == width - 1) {
            document.write ('<br>')
        }
    }
}

Reference : Non-breaking Space

Answer 4

Answer without the dashes... :)

Also, in document.write ('&Nbsp'), &Nbsp should be &nbsp to add space.

Non-breaking Space
A frequently used character entity in HTML is the non-breaking space:  . A non-breaking space prevents a line break. Two words linked with a non-breaking space will stay together at the end of a line, avoiding disruption.

One important point to note

Note: Another common application of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you type 10 spaces in your text, the browser may remove 9 of them. To retain actual spaces in your text, utilize the   character entity.

var width = 10
var height = 10
var ratio = width/height;

for (var row = 0; row < height; row++) {
    for (var col = 0; col < width; col++) {
        var diff = Math.floor(row * ratio);
        
        document.write (diff == col || col == width - diff - 1 ? '*' :
 '&nbsp&nbsp&nbsp&nbsp') //Adjust the number of &nbsp to widen or narrow the X
            
        if(col == width - 1) {
            document.write ('<br>')
        }
    }
}

Reference : Non-breaking Space

Crafting an 'X' Shape with JavaScript

Answer №1

Answer №2

Similar questions

Using jQuery to dynamically attach events to elements in a webpage

Adding a trailing slash to the URL in an Express server causes it to be appended

ASP.NET MVC with AngularJS issue: post request does not trigger redirection

What is the best way to push a variable after employing the split function in JavaScript?

Changing the visibility of a div with an onClick event in React

What is the best way to handle parsing JSON using external middleware after the removal of body parser in Express?

Triggering events on multiple elements with Vue.js when clicked

Is there a way to continuously cycle through multiple images fading in and out at various locations on a webpage using absolute positioning?

Tips for capturing audio in flac codec format using JS/AJAX

Formulate a Generic Type using an Enum

Enable the choice for Bootstrap collapse animation to be customized

How to pass hidden values in an HTML form

Receiving successful ajax responses and populating text fields with the returned values

Hmm, seems like there's an issue with the touchable child - it must either be native or forward setNativeProps to

Embed the parent component within the child component

Exploring the possibility of designing custom pageload tooltips inspired by jQuery validationEngine's visual style and interface

Error: JSON parsing error due to unexpected token C at the beginning of the string

guide to importing svg file with absolute path

Is it beneficial to utilize components in order to streamline lengthy HTML code, regardless of whether the components do not repeat and do not require any props (such as in Vue or any other JavaScript library

Having Difficulty Rendering Tube Shapes in Three.js