Fashioning a sizable letter X

I'm currently working on a script that lets users input the number of rows they want, which will then be used to print out a large letter X. I've managed to create the shape of a V so far, but now I'm facing some difficulties in getting the complete X pattern.

rows = 0;
space = " ";
var user_input = parseFloat(prompt("Please enter the number of rows:", 0));
while (rows < user_input) {
  space_counter = 0;
  while (space_counter < rows) { //process1
    document.write(space);
    space_counter++;
  }
  document.write("x"); //process2
  rows++;
  midspace_counter = 0;
  while (midspace_counter < user_input - rows) { //process3
    document.write(space + space);
    midspace_counter++;
  }
  document.write("x<br>"); //process4
  rows++;
}

Answer №1

Here is my approach:

 let output = "";
 const numberOfRows = +prompt("Enter the number of rows you want?");
 
 const halfRows = (numberOfRows - 1) / 2;

 for(let r = 0; r < numberOfRows; r++){
   const middleSpace = Math.abs(halfRows - r);
   const padding = numberOfRows - middleSpace - 1;
   
   output += " ".repeat(padding) + "x" + " ".repeat(middleSpace * 2) + "x\n";
}

Lastly, just add this to the document.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with AJAX Request within PHP switch statement

Recently, I encountered an issue with a PHP switch statement handling an AJAX request. Despite searching for solutions on multiple platforms, including here, I have been unable to resolve this issue. The problem arose after I upgraded from PHP5 to PHP7, fo ...

What is the process for assigning a function and its arguments as a callback in programming?

Here is a code snippet for your consideration: $scope.delete=function(){ foo('x',3); }; How can we improve the clarity of this code snippet when the callback function contains only one line that calls another function? It's important ...

Images in Android webview disappearing after first load

When it comes to loading a local HTML file with local images into a WebView on Android, everything seems to work fine on emulators and newer devices. However, I encountered an issue with a much older device running Android 2.3.4. Initially, the images disp ...

Dynamically insert <td> elements into <tr> element using both jQuery and JavaScript

I am facing an issue with adding a new table data (td) element dynamically to the first table row (tr) in my JavaScript code. Here is the original table before adding the new td element: <table> <tbody> <tr> <t ...

What is the best way to fake dependencies in Jest for each individual test?

Check out the complete minimal reproducible example Let's take a look at the app below: src/food.js const Food = { carbs: "rice", veg: "green beans", type: "dinner" }; export default Food; src/food.js import Food from "./food"; functio ...

How can I modify certain attributes within an array of objects?

https://i.sstatic.net/TKkcV.jpgI need help with updating properties within an object array. Below is my code for reference. I have an object array consisting of two arrays, where the first one contains attribute "first" and the second one contains "last". ...

Warning: MaxListenersExceededNotification may occur during the installation or creation of Node.js projects on macOS

Encountering a warning message while attempting to set up or generate Node.js projects on macOS (darwin): (node:80101) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxList ...

Top-tier Reactjs Infinite Scroll library that prioritizes optimal performance

I'm creating a calendar with numerous days that requires scrolling to view the content, causing performance issues in the application. Are there any specific techniques or libraries available in reactjs to enable smooth scrolling functionality like t ...

Leverage the power of the YouTube API to determine if a video is able to be embedded

As I delve into the YouTube Data API v3 to determine if a particular video is embeddable, I have come across the status.embeddable property that seems crucial. By making a request like this: https://www.googleapis.com/youtube/v3/videos?id=63flkf3S1bE& ...

Guide to automatically closing the calendar once a date has been chosen using owl-date-time

Utilizing Angular Date Time Picker to invoke owl-date-time has been functioning flawlessly. However, one issue I have encountered is that the calendar does not automatically close after selecting a date. Instead, I am required to click outside of the cal ...

Basic ajax code for showing the title of a book

Recently, I delved into learning Ajax and decided to create a simple HTML page that showcases user input. The idea was to allow users to type in the name of a book, which would then trigger an Ajax call to fetch results from an array stored in a PHP file. ...

Saving words inside a text box using a variable

I am attempting to save a text value in an input element. The element is accessed through a jquery selector, where the variable selectedindex holds an integer from a dropdown list (can be 0, 1, or 2). Below is the code with both HTML and JavaScript. <l ...

Learn how to retrieve the TextBox value from a button click within a Nested Gridview

I am trying to extract the value of a textbox inside a Nested Gridview using jQuery in ASP.NET. When a Button within the Nested Gridview is clicked, I want to display the textbox value in an alert box. Here is an example setup: <asp:GridView ID="Grid ...

What are some effective ways of using the parent, before, and children selectors?

<table> <tr><td><input type="text" value="123"></td><td><input class="here" type="text"></td></tr> <tr><td><input type="text" value="333"></td><td><input class=" ...

Is there a better way to implement an inArray function in JavaScript than using join and match?

Recently, I created an inArray function for JavaScript which seems to be working fine. It's short and a bit unusual, but I have a nagging feeling that there might be something wrong with it, although I can't quite pinpoint what it is: Array.prot ...

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

I am currently developing a vueJs web application and I'm in need of determining the position of an element within my web app relative to the viewport itself, rather than its parent elements. I'm curious if there exists a function or property tha ...

Adding the API JSON response to the MetaInfo in Vue.js

i am dealing with a meta tag that has the following structure metaInfo () { return { title: 'my title', meta: [ { name: 'description', content: 'my description' }, ...

What is the reason for the Circle to Polygon node module producing an oval or ellipse shape instead of a circle shape?

I've been experimenting with the npm package circle-to-polygon and I crafted the following code to generate a polygon that resembles a circle. const circleToPolygon = require('circle-to-polygon'); let coordinates = [28.612484207825005, 77. ...

What could be the reason that step 3 of the AngularJS Tutorial is not functioning correctly?

During Step 3 of the AngularJS Tutorial, an additional e2e test is recommended to enhance the example: it('should display the current filter value within an element with id "status"', function() { expect(element('#status').text() ...

Obtain the value of "data-something" attribute from an <option> element within a <select> element

Can anyone help me with this HTML snippet? <select id="something"> <option value="1" data-something="true">Something True</option> <option value="2" data-something-else="false">Something Else False</option> </selec ...