1+ // ============================================================================
2+ // Constellation Lab
3+ // (with sound functionality)
4+ // ============================================================================
5+
6+ // Utility function to play a click sound.
7+ function playClickSound ( ) {
8+ const sound = document . getElementById ( 'clickSound' ) ;
9+ if ( sound ) {
10+ sound . currentTime = 0 ;
11+ sound . play ( ) ;
12+ }
13+ }
14+
15+ // Get the current year once the page is fully loaded.
16+ let currentYear ;
17+ document . addEventListener ( 'DOMContentLoaded' , ( ) => {
18+ currentYear = new Date ( ) . getFullYear ( ) ;
19+ } ) ;
20+
21+ // Part 1: JavaScript Basics
22+ const form = document . getElementById ( 'userForm' ) ;
23+ const nameInput = document . getElementById ( 'nameInput' ) ;
24+ const ageInput = document . getElementById ( 'ageInput' ) ;
25+ const greetOut = document . getElementById ( 'greet' ) ;
26+
27+ form . addEventListener ( 'submit' , ( e ) => {
28+ e . preventDefault ( ) ;
29+ playClickSound ( ) ;
30+
31+ const name = String ( nameInput . value ) . trim ( ) ;
32+ const age = Number ( ageInput . value ) ;
33+
34+ let group ;
35+ if ( age < 13 ) group = 'child' ;
36+ else if ( age < 18 ) group = 'teen' ;
37+ else if ( age < 60 ) group = 'adult' ;
38+ else group = 'senior' ;
39+
40+ greetOut . textContent = name
41+ ? `Hello, ${ formatName ( name ) } ${ group }
42+ : 'Please provide your name.' ;
43+
44+ console . log ( { name, age, group } ) ;
45+ } ) ;
46+
47+ // Part 2: Functions
48+ function formatName ( name ) {
49+ if ( ! name ) return '' ;
50+ return name [ 0 ] . toUpperCase ( ) + name . slice ( 1 ) . toLowerCase ( ) ;
51+ }
52+
53+ function calculateAge ( birthYear ) {
54+ return currentYear - birthYear ;
55+ }
56+
57+ const birthYearInput = document . getElementById ( 'birthYearInput' ) ;
58+ const birthYearBtn = document . getElementById ( 'birthYearBtn' ) ;
59+ const ageOut = document . getElementById ( 'ageOut' ) ;
60+
61+ birthYearBtn . addEventListener ( 'click' , ( ) => {
62+ playClickSound ( ) ;
63+ const birthYear = Number ( birthYearInput . value ) ;
64+ if ( ! birthYear || birthYear > currentYear ) {
65+ ageOut . textContent = 'Please enter a valid birth year.' ;
66+ } else {
67+ const age = calculateAge ( birthYear ) ;
68+ ageOut . textContent = `Your age is: ${ age } ;
69+ console . log ( `Age calculated: ${ age } ) ;
70+ }
71+ } ) ;
72+
73+ // Part 3: Loops
74+ const listOut = document . getElementById ( 'listOut' ) ;
75+
76+ document . getElementById ( 'countdownBtn' ) . addEventListener ( 'click' , ( ) => {
77+ playClickSound ( ) ;
78+ listOut . innerHTML = '' ;
79+ listOut . classList . add ( 'left-align' ) ;
80+ listOut . classList . remove ( 'right-align' ) ;
81+ let n = 5 ;
82+ while ( n >= 0 ) {
83+ const li = document . createElement ( 'li' ) ;
84+ li . textContent = `Countdown: ${ n } ;
85+ listOut . appendChild ( li ) ;
86+ n -- ;
87+ }
88+ } ) ;
89+
90+ document . getElementById ( 'starsBtn' ) . addEventListener ( 'click' , ( ) => {
91+ playClickSound ( ) ;
92+ listOut . innerHTML = '' ;
93+ listOut . classList . add ( 'right-align' ) ;
94+ listOut . classList . remove ( 'left-align' ) ;
95+ for ( let i = 1 ; i <= 6 ; i ++ ) {
96+ const li = document . createElement ( 'li' ) ;
97+ li . textContent = '★' . repeat ( i ) ;
98+ listOut . appendChild ( li ) ;
99+ }
100+ } ) ;
101+
102+ // Part 4: DOM Manipulation
103+ const domBtn1 = document . getElementById ( 'domBtn1' ) ;
104+ const domBtn2 = document . getElementById ( 'domBtn2' ) ;
105+ // We now get the whole section element by its ID
106+ const domSection = document . getElementById ( 'dom' ) ;
107+ const toggleText = document . getElementById ( 'toggleText' ) ;
108+
109+ domBtn1 . addEventListener ( 'click' , ( ) => {
110+ playClickSound ( ) ;
111+ // Toggle the new class on the section, not the inner div
112+ domSection . classList . toggle ( 'panel--colored' ) ;
113+ console . log ( 'Panel background color toggled.' ) ;
114+ } ) ;
115+
116+ domBtn2 . addEventListener ( 'click' , ( ) => {
117+ playClickSound ( ) ;
118+ toggleText . classList . toggle ( 'hidden' ) ;
119+ const isHidden = toggleText . classList . contains ( 'hidden' ) ;
120+ console . log ( `Paragraph visible: ${ ! isHidden } ) ;
121+ } ) ;
122+
123+ // Part 5: Theme Switcher
124+ const themeBtn = document . getElementById ( 'themeBtn' ) ;
125+ themeBtn . addEventListener ( 'click' , ( ) => {
126+ playClickSound ( ) ;
127+ document . body . classList . toggle ( 'light-theme' ) ;
128+ console . log ( 'Theme toggled. Check the body element class.' ) ;
129+ } ) ;
0 commit comments