← Home BP · 7-9 🌷

Garden Sorter

82
Day 1 🔥
🎯 Today's Missions
🌷 🦋 ☀️ 🐞
🌷
Blossom Garden Universe
Garden Sorter
The Garden Show starts in one hour — but the line-up is a MESS! 🌷 Tall, tiny, medium… all jumbled together. Meet .sort(), the coach superpower that asks two flowers "who comes first?" and lines the WHOLE row up in perfect order. Pick your compare rule, flip it to reverse, even sort by PETALS — and save the show! 🌻

🌷 What we're MAKING today: My Garden Show

In Treasure Filter you met .filter() — it KEEPS only some items. Yesterday in Petal Parade, .map() CHANGED every item. Today the trio is complete: .sort() keeps every item, keeps each one exactly the SAME — it only changes the ORDER!

How? You give sort ONE compare rule. The coach walks down the row asking two flowers: "who comes first?" The rule a.height - b.height whispers "smaller steps LEFT!" — so the whole garden lines up small → tall. Flip it to b.height - a.height and the line-up REVERSES. Same flowers, new order!

🔗 Last time (Petal Parade) you transformed every bud with .map(). Today: nobody gets dropped, nobody gets painted — 5 flowers in, 5 flowers out, standing in a PERFECT line. That's .sort()! 🌷
garden.js JavaScript 

    

      💡 Tap compare rules below — watch this line change LIVE!
      .sort() changes the ORDER
    

  


  
  

    

       garden stage
      LIVE
    

    

      

        
🌷 WAITING FOR RULE

        

          📏 LINE-UP MACHINE
          

        

        

          

        

        
Tap a compare rule, then press ▶ Run Line-Up — every flower takes its place!

        

          
↢ Flowers in
5

          
In order ↣
—

          
🎖️ Garden rank
Seedling 🌱

        

      

    

  









  
  

    Challenge 1 / 5
    
Morning Staircase! Line up every flower small → tall…

  


  

    

      
🧩 Tap ONE compare rule for the coach PICK ONE

      

    

    
    
🌷 Compare rules tell the coach WHO comes first. The code line updates the moment you tap!

  


  
  

    
    
    
    
  







  
📋 Your 5 Garden Challenges

  







  

  
0 of 5 challenges lined up







  

    
🌷

    
You Mastered Garden Sorter!

    
One compare rule, one perfect line — you ran the Garden Show like a true Line-Up Coach. The judges are standing and the butterflies are cheering! 🦋🌷

    

      
💫 What You Learned

      
    
        
  • .sort() puts every item in ORDER — smallest → biggest (or the flip!)
    • 
        
  • The compare rule a.height - b.height whispers "smaller steps LEFT" — flip it to b.height - a.height to reverse the line-up
    • 
        
  • 5 in → 5 out: sort never drops items (.filter() does) and never changes them (.map() does) — it only re-orders!
    • 
        
  • You can sort by ANY property — height today, petal count too!
    • 
        
  • Real coders .sort() data every day — names A→Z, scores high→low. Now you do too! 🌷
    • 
      

    

    

      
🌷 Your Creation

      
My Garden Show

    

    

    

      
🌷 Come Back Tomorrow!

      
Next up: Monster Maker — meet OBJECTS! You already used them today: each flower was a little packet of labelled facts (height, petals). Tomorrow you BUILD your own monster object — name, eyes, color — and change it live! 👾

    

    

      🏠 Home
      
      
      
    

  






Nice! 🎉