www.codedex.io Open in urlscan Pro
76.76.21.241  Public Scan

URL: https://www.codedex.io/javascript/03-letter-tree
Submission: On May 15 via manual from GT — Scanned from DE

Form analysis 10 forms found in the DOM

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" d="M0 0h24v24H0V0z"></path>
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
    </svg></button>
  <h3 class="heading">FEATURE UNLOCKED!</h3>
  <div class="sc-2de07a1e-1 gbWMJh"><img src="/images/pop-ups/discord-unlock.gif" alt="sad characters gif">
    <p>You have <strong>100 XP</strong>! This means you can now join our Discord community to chat and hang out with fellow learners and the team behind Codédex!<br>See you there. 😊</p>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" d="M0 0h24v24H0V0z"></path>
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
    </svg></button>
  <h3 class="heading">FEATURE UNLOCKED!</h3>
  <div class="sc-e37cc34c-1 jCfXEF"><img src="/images/community/ticket.gif" alt="pom pom characters gif">
    <p>You have <strong>250 XP</strong>! This means you can now join our On-Platform community to chat and hang out with fellow learners!<br>Say hi in the <strong>Introductions</strong> channel. 😊</p>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><img src="/images/unlockableItems/times.svg" alt="close btn"></button>
  <h3 class="heading">New Item Unlocked!</h3>
  <div class="sc-1873fdd8-1 gkJaxf">
    <div class="image-container"><img src="/images/unlockableItems/RubberDuck.png" alt="pom pom characters gif" class="nes-pointer ducky"><img src="/images/unlockableItems/explosion.svg" alt="item duck" class="nes-pointer"></div>
    <p class="item-name">Rubber Duck <span>NEW</span></p>
    <p>Rubber duck debugging is a classic technique used by developers to debug code. By explaining the code line-by-line to a rubber duck, you can break down the code into smaller pieces, and potentially identify the error. <br><br>... It's silly,
      we know.</p><button class="nes-btn is-primary close">Continue Learning</button>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><img src="/images/unlockableItems/times.svg" alt="close btn"></button>
  <h3 class="heading">New Item Unlocked!</h3>
  <div class="sc-94725228-1 gEpsPt">
    <div class="image-container"><img src="/images/unlockableItems/ai-bot-sprite.png" alt="pom pom characters gif" class="nes-pointer ducky"><img src="/images/unlockableItems/explosion.svg" alt="item duck" class="nes-pointer"></div>
    <p class="item-name">Codédex Bot<span>NEW</span></p>
    <p>I’m a coding mentor bot built with GPT-4 👋. I’m here to answer any questions related to programming, Codédex, and much more.</p><button class="nes-btn is-primary close">Continue Learning</button>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><img src="/images/unlockableItems/times.svg" alt="close btn"></button>
  <h3 class="heading">New Item Unlocked!</h3>
  <div class="sc-572a55d0-1 bkWASx">
    <div class="image-container"><img src="/images/unlockableItems/editor-theme-brush.png" alt="paintbrush" class="nes-pointer ducky"><img src="/images/unlockableItems/explosion.svg" alt="item duck" class="nes-pointer"></div>
    <p class="item-name">Editor Themes <span>NEW</span></p>
    <p>Congrats! You unlocked Editor Themes. You can now change the theme of the editor to your liking.</p><button class="nes-btn is-primary close">Continue Learning</button>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" d="M0 0h24v24H0V0z"></path>
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
    </svg></button>
  <h3 class="heading">FEATURE UNLOCKED!</h3>
  <div class="sc-2de07a1e-1 gbWMJh"><img src="/images/pop-ups/discord-unlock.gif" alt="sad characters gif">
    <p>You have <strong>100 XP</strong>! This means you can now join our Discord community to chat and hang out with fellow learners and the team behind Codédex!<br>See you there. 😊</p>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path fill="none" d="M0 0h24v24H0V0z"></path>
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
    </svg></button>
  <h3 class="heading">FEATURE UNLOCKED!</h3>
  <div class="sc-e37cc34c-1 jCfXEF"><img src="/images/community/ticket.gif" alt="pom pom characters gif">
    <p>You have <strong>250 XP</strong>! This means you can now join our On-Platform community to chat and hang out with fellow learners!<br>Say hi in the <strong>Introductions</strong> channel. 😊</p>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><img src="/images/unlockableItems/times.svg" alt="close btn"></button>
  <h3 class="heading">New Item Unlocked!</h3>
  <div class="sc-1873fdd8-1 gkJaxf">
    <div class="image-container"><img src="/images/unlockableItems/RubberDuck.png" alt="pom pom characters gif" class="nes-pointer ducky"><img src="/images/unlockableItems/explosion.svg" alt="item duck" class="nes-pointer"></div>
    <p class="item-name">Rubber Duck <span>NEW</span></p>
    <p>Rubber duck debugging is a classic technique used by developers to debug code. By explaining the code line-by-line to a rubber duck, you can break down the code into smaller pieces, and potentially identify the error. <br><br>... It's silly,
      we know.</p><button class="nes-btn is-primary close">Continue Learning</button>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><img src="/images/unlockableItems/times.svg" alt="close btn"></button>
  <h3 class="heading">New Item Unlocked!</h3>
  <div class="sc-94725228-1 gEpsPt">
    <div class="image-container"><img src="/images/unlockableItems/ai-bot-sprite.png" alt="pom pom characters gif" class="nes-pointer ducky"><img src="/images/unlockableItems/explosion.svg" alt="item duck" class="nes-pointer"></div>
    <p class="item-name">Codédex Bot<span>NEW</span></p>
    <p>I’m a coding mentor bot built with GPT-4 👋. I’m here to answer any questions related to programming, Codédex, and much more.</p><button class="nes-btn is-primary close">Continue Learning</button>
  </div>
</form>

DIALOG

<form method="dialog"><button class="close-btn nes-pointer"><img src="/images/unlockableItems/times.svg" alt="close btn"></button>
  <h3 class="heading">New Item Unlocked!</h3>
  <div class="sc-572a55d0-1 bkWASx">
    <div class="image-container"><img src="/images/unlockableItems/editor-theme-brush.png" alt="paintbrush" class="nes-pointer ducky"><img src="/images/unlockableItems/explosion.svg" alt="item duck" class="nes-pointer"></div>
    <p class="item-name">Editor Themes <span>NEW</span></p>
    <p>Congrats! You unlocked Editor Themes. You can now change the theme of the editor to your liking.</p><button class="nes-btn is-primary close">Continue Learning</button>
  </div>
</form>

Text Content

CREATE A NEW BLANK PROJECTSELECT YOUR EDITOR:

Python

HTML/CSS/JS

JavaScript

Please sign in to use our Editor!

Sign in


RECENT BUILDS:SEE ALL

Please sign in to use our Editor!

Sign in


CODÉDEX

Sign in
   Learn
   
    * Python
      Intermediate Python
      NumPy
    * HTML
    * CSS
    * JavaScript
   
    * 😎
      
      Command Line
   
    * 🐙
      
      Git & GitHub
    * React
    * SQL

   Practice
   
    * Challenges
    * Projects

   Learn
   Practice
 * Build
 * Community
 * Pricing
 * Sign in
      
    * Dark Mode
      

Exercise


03. LETTER TREE


# LINE BY LINE

JavaScript is run one line at a time, from top to bottom of the file.

We can output multiple messages by using multiple console.log() methods. For
example, if we want to print out two simple greetings:

console.log("🚌 Greyhound to New York");
console.log("🕥 Departs at 9:30 am");



This is will output:

🚌 Greyhound to New York
🕥 Departs at 9:30 am



Now let's use what we just learned to complete a special challenge!


# INSTRUCTIONS

Suppose we want the output to look exactly like this pattern below:

   a
  b c
 d e f
g h i j
   k



How can you do that?

Create a JavaScript program that prints this pattern exactly as shown.

This will likely take some trial and error, but give it a shot!

Progress not saved

Sign In or Sign Up in order to save all the hard work you've done!

Get a Hint



FEATURE UNLOCKED!

You have 100 XP! This means you can now join our Discord community to chat and
hang out with fellow learners and the team behind Codédex!
See you there. 😊

BackJoin Discord


FEATURE UNLOCKED!

You have 250 XP! This means you can now join our On-Platform community to chat
and hang out with fellow learners!
Say hi in the Introductions channel. 😊

Join Community


index.js

Run

Copy code

Screenshot


NEW ITEM UNLOCKED!

Rubber Duck NEW

Rubber duck debugging is a classic technique used by developers to debug code.
By explaining the code line-by-line to a rubber duck, you can break down the
code into smaller pieces, and potentially identify the error.

... It's silly, we know.

Continue Learning


NEW ITEM UNLOCKED!

Codédex BotNEW

I’m a coding mentor bot built with GPT-4 👋. I’m here to answer any questions
related to programming, Codédex, and much more.

Continue Learning


NEW ITEM UNLOCKED!

Editor Themes NEW

Congrats! You unlocked Editor Themes. You can now change the theme of the editor
to your liking.

Continue Learning


RUBBER DUCK





CODÉDEX BOT

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

 * What are classes and objects in Python?
 * How to create a table in HTML?
 * What's if (variable > 2) print(‘greater’)?
 * What's Codédex Club?



1
2
3
// Write code below 💖










Enter to Rename, Shift+Enter to Preview


Console

W






THE ORIGINS III: JAVASCRIPT


THE CONSOLE

01. Setting Up

02. The Console

03. Letter Tree

04. Initials

05. Receipt


VARIABLES


CONDITIONALS


LOOPS


CHECKPOINT


ARRAYS


FUNCTIONS


OBJECTS


TRIFECTA

03. Letter Tree

+ 15 XP

BackCompleteNext

Did you know that you can join our Community to get live help from our Code
Mentors?

OR

Report a bug


OTHERS ON THIS EXERCISE:

@itsvidhanreddy

A Vidhan Reddy

Level 7

@skylercox1324211

Level 2

@devdulals693

Dulal Shikdar

Level 1

@daniel199222753855

daniel sb

Level 1

@jenayariley30932

Jenaya Reynolds

Level 1

@joshuahtoo9895534

Level 1

@f_vaccarezza89793

Level 1

+3

Exercise


03. LETTER TREE


# LINE BY LINE

JavaScript is run one line at a time, from top to bottom of the file.

We can output multiple messages by using multiple console.log() methods. For
example, if we want to print out two simple greetings:

console.log("🚌 Greyhound to New York");
console.log("🕥 Departs at 9:30 am");



This is will output:

🚌 Greyhound to New York
🕥 Departs at 9:30 am



Now let's use what we just learned to complete a special challenge!


# INSTRUCTIONS

Suppose we want the output to look exactly like this pattern below:

   a
  b c
 d e f
g h i j
   k



How can you do that?

Create a JavaScript program that prints this pattern exactly as shown.

This will likely take some trial and error, but give it a shot!

Progress not saved

Sign In or Sign Up in order to save all the hard work you've done!

Get a Hint



FEATURE UNLOCKED!

You have 100 XP! This means you can now join our Discord community to chat and
hang out with fellow learners and the team behind Codédex!
See you there. 😊

BackJoin Discord


FEATURE UNLOCKED!

You have 250 XP! This means you can now join our On-Platform community to chat
and hang out with fellow learners!
Say hi in the Introductions channel. 😊

Join Community

index.js

Run

Copy code

Screenshot


NEW ITEM UNLOCKED!

Rubber Duck NEW

Rubber duck debugging is a classic technique used by developers to debug code.
By explaining the code line-by-line to a rubber duck, you can break down the
code into smaller pieces, and potentially identify the error.

... It's silly, we know.

Continue Learning


NEW ITEM UNLOCKED!

Codédex BotNEW

I’m a coding mentor bot built with GPT-4 👋. I’m here to answer any questions
related to programming, Codédex, and much more.

Continue Learning


NEW ITEM UNLOCKED!

Editor Themes NEW

Congrats! You unlocked Editor Themes. You can now change the theme of the editor
to your liking.

Continue Learning


RUBBER DUCK





CODÉDEX BOT

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

 * What are classes and objects in Python?
 * How to create a table in HTML?
 * What's if (variable > 2) print(‘greater’)?
 * What's Codédex Club?



1
// Write code below 💖








Enter to Rename, Shift+Enter to Preview

Complete