๐Ÿง Activity 2 - Digital Tasbeeh Program

๐Ÿง Activity 2 - Create a Digital Tasbeeh Program (ุงู„ุชุณุจูŠุญ ุงู„ุฐู‡ุจูŠ)

๐Ÿ“‹ Task

Create a web program using HTML, CSS, and JavaScript that simulates a digital Tasbeeh counter with beautiful black-and-gold design.


Requirements:

Your program should:

1๏ธโƒฃ Display a centered box with the title โ€œุงุจุฏุฃ ุงู„ุชุณุจูŠุญโ€ and a Start button.
2๏ธโƒฃ When the user clicks ุงุจุฏุฃ (Start):

  • The button becomes disabled until the program finishes.
  • The following dhikr phrases should appear automatically, each changing color and counting up to 33:
    • โ€œุณุจุญุงู† ุงู„ู„ู‡โ€ โ†’ 33 times (white).
    • โ€œุงู„ุญู…ุฏ ู„ู„ู‡โ€ โ†’ 33 times (red).
    • โ€œุงู„ู„ู‡ ุฃูƒุจุฑโ€ โ†’ 33 times (gold).
  • After that, display the full phrase once (green):
    โ€œู„ุง ุฅู„ู‡ ุฅู„ุง ุงู„ู„ู‡ ูˆุญุฏู‡ ู„ุง ุดุฑูŠูƒ ู„ู‡ุŒ ู„ู‡ ุงู„ู…ู„ูƒ ูˆู„ู‡ ุงู„ุญู…ุฏ ูˆู‡ูˆ ุนู„ู‰ ูƒู„ ุดูŠุก ู‚ุฏูŠุฑโ€
  • Finally, show an alert message that says:
    โ€œููŠ ู…ูŠุฒุงู† ุญุณู†ุงุชูƒู…โ€
    3๏ธโƒฃ Once completed, the button should become enabled again for another round.
    4๏ธโƒฃ The counter should update automatically using setInterval() every 0.5 seconds.
    5๏ธโƒฃ Style the page with a black background and golden theme using the font Noto Kufi Arabic.
    6๏ธโƒฃ Add a small logo in the corner and a glowing link under it to ProgrammingAdvices.com.


Use these images...

Download
Complete and Continue  
Discussion

2 comments