Skip to main content

Pyramid Generator

Pyramid Generator Project Preview

The Project​

Pyramid Generator developed with introductory JavaScript concepts, focusing on functions, loops, conditionals and array manipulation to create ASCII art patterns.

I started JavaScript enthusiastically, but the enthusiasm quickly faded in the first steps. The syntax, variables, basic concepts didn't give me that sense of "control" I had developed with CSS.

Source Code​

const character = "!";
const count = 10;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return " ".repeat(rowCount - rowNumber) + character.repeat(2 * rowNumber - 1) + " ".repeat(rowCount - rowNumber);
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = ""

for (const row of rows) {
  result = result + row + "\n";
}

console.log(result);

The Turning Point​

The breakthrough came with the introduction of flow control concepts - if and else. Suddenly I saw the logical structure behind every code decision. It was no longer syntax to memorize, but applied logic: "if this condition is true, do this, otherwise do that."

I felt these constructs as natural, despite never having programmed before. It was as if my brain finally recognized a language that spoke its own language: that of logical decisions.

The Methodical Approach​

Despite deepening most steps with Code Tutor to guarantee deep understanding and avoid gaps, I maintained an iron rule: deepen only after completing the step.

Result: In only three occasions across 118 steps I had to ask Code Tutor for help. This shows that the approach of completing first and deepening after works.

The Missing Visual Side​

I miss the visual side, I admit it. I'm not satisfied with console.log, I'm not satisfied with talking to myself with the computer. I want the computer to talk with users.

The Return of Enthusiasm​

It wasn't just the if and else concepts that brought back my energy, but also the prospect of JavaScript integration with HTML and CSS. "Browsing" the upcoming projects I saw that starting from the third project we'll mix JavaScript with HTML and CSS.

Finally I'll be able to see the results of my logic in action in the user interface, no longer limited to console.log.

I can't wait to update the real-world-vademecum with the latest JavaScript concepts learned!

What I Learned​

1. Variable Fundamentals:

  • let vs const - when to use reassignable variables vs constants
  • undefined - state of uninitialized variables
  • Scope global vs local variables

2. Data Types:

  • Strings - single vs double quotes, concatenation, .repeat()
  • Numbers - arithmetic operations, use in calculations
  • Booleans - true/false, falsy values ("", 0, false)

3. Arrays - The Collections:

  • Creation and access through index [0], [1]
  • .push() - add to end
  • .unshift() - add to beginning
  • .length - property for length

4. Functions - The Reusable Blocks:

  • Declaration and calling
  • Multiple parameters (e.g.: padRow(rowNumber, rowCount))
  • Return statement to return values
  • Local scope - variables inside functions

5. Flow Control:

  • if/else - basic and multiple conditions
  • Comparison operators (<, >, <=, ==, ===, !==)
  • Difference between loose (==) and strict (===) equality

6. Loops - The Repetitions:

  • Classic for - initialization, condition, increment
  • while - with complex conditions
  • for...of - to iterate over arrays
  • Increment operators (i++, i+=, i--)

7. Operators:

  • Arithmetic (+, -, *, operator precedence)
  • Assignment (=, +=, -=)
  • String concatenation with +

8. Console and Output:

  • console.log() for output and debug
  • Testing values and functions

9. Comments:

  • Single line (//) and multi-line (/* */)
  • Best practices for documentation

10. Patterns and Practical Constructs:

  • Boolean flags for flow control (inverted)
  • Result accumulation (result = result + row + "\n")
  • Mathematical formula for patterns (2 * rowNumber - 1)
  • Conditional decisions in loops (if inside for)

11. Best Practices Observed:

  • Naming convention camelCase
  • Progressive refactoring from repetitive to DRY
  • Incremental testing with console.log

Reflection​

JavaScript initially seemed abstract compared to the visual concreteness of HTML/CSS. At the moment I'm still working with console.log and haven't yet seen JavaScript in action with DOM manipulation, but the prospect of making interfaces react to user actions intrigues me greatly.

The console.log is just the beginning - when I finally see this logic bring interactive user experiences to life, I'll truly understand the power of this language.

Next Project: Review JavaScript Fundamentals by Building a Gradebook App