final edit

.idea/vcs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/main/java/sbu/javafx/Launcher.java

@@ -4,5 +4,6 @@ import javafx.application.Application;
 
 public class Launcher{
     public static void main(String[] args) {
-        // TODO: Launch the JavaFX application by calling Application.launch(Main.class)    }
+        Application.launch(MusicApp.class);
+    }
 }

src/main/java/sbu/javafx/MusicApp.java

@@ -4,7 +4,9 @@ import javafx.application.Application;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
 import javafx.stage.Stage;
+import javafx.scene.image.Image;
 
+import java.awt.*;
 import java.io.IOException;
 
 public class MusicApp extends Application {
@@ -16,7 +18,13 @@ public class MusicApp extends Application {
         Scene scene = new Scene(fxmlLoader.load());
         stage.setTitle("Music Player");
         stage.setScene(scene);
-        //TODO: add icon to the stage
+        scene.getStylesheets().add(getClass().getResource("light.css").toExternalForm());
+        stage.setWidth(1100);
+        stage.setHeight(500);
+
+        Image icon = new Image(getClass().getResourceAsStream("icon.png"));
+        stage.getIcons().add(icon);
+
         stage.show();
     }
 

src/main/java/sbu/javafx/MusicController.java

@@ -1,31 +1,148 @@
 package sbu.javafx;
 
-import javafx.fxml.FXML;
 import javafx.event.ActionEvent;
+import javafx.fxml.FXML;
+import javafx.scene.Scene;
+import javafx.scene.control.Button;
 import javafx.scene.control.Label;
-import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
+import javafx.stage.Stage;
+
+import java.util.ArrayList;
 
 public class MusicController {
 
-    // TODO: Define your UI components using the @FXML annotation.
+    public Label Name1;
+    public Label Singer1;
+    public Button AddToPlaylist1;
+    public Button play1;
+
+    public Label Name2;
+    public Label Singer2;
+    public Button AddToPlaylist2;
+    public Button play2;
+
+    public Label Name3;
+    public Label Singer3;
+    public Button AddToPlaylist3;
+    public Button play3;
+
+    public HBox song1;
+    public HBox song2;
+    public HBox song3;
+    public HBox header;
+    public HBox playingBox;
+
+    boolean isDark = false;
+    Button currentPlayingSong = null;
+    public Label nowPlayingSong;
+    public Button themeToggle;
+    public Button PlayListButton;
+
+    ArrayList<HBox> playlist = new ArrayList<>();
+    boolean onPlaylist1 = false;
+    boolean onPlaylist2 = false;
+    boolean onPlaylist3 = false;
 
-    //TODO: Implement the logic to play a song. This method should update the UI to show which song is currently playing.
 
     @FXML
-    public void handlePlayAction() {
+    public void handlePlayAction(ActionEvent actionEvent) {
-        //Update labels, change button icons, etc.
+        Button button = (Button) actionEvent.getSource();
+
+        if(currentPlayingSong == button) {
+            currentPlayingSong.setText("Play");
+            nowPlayingSong.setText(" ");
+            currentPlayingSong = null;
+            return;
         }
 
-    //TODO: Logic to add a specific song to the user's playlist.
+        if(currentPlayingSong != null) {
-
+            currentPlayingSong.setText("Play");
-    public void addToPlaylist(String songName) {
-        //Add the song to a list or update a ListView.
         }
 
-    // TODO:This method should open a new window or change the current scene  to display the "Playlist" page.
 
-    public void openPlaylistWindow() {
+        currentPlayingSong = button;
-        //Create a new stage and show the playlist UI.
+        currentPlayingSong.setText("Playing...");
+
+        if(currentPlayingSong == play1) {
+            nowPlayingSong.setText(Name1.getText() + " | " + Singer1.getText());
+        }
+        else if(currentPlayingSong == play2) {
+            nowPlayingSong.setText(Name2.getText() + " | " + Singer2.getText());
+        }
+        else if (currentPlayingSong == play3) {
+            nowPlayingSong.setText(Name3.getText() + " | " + Singer3.getText());
+        }
+    }
+
+
+    @FXML
+    public void addToPlaylist(ActionEvent event) {
+
+        Button button = (Button) event.getSource();
+
+        if(button == AddToPlaylist1 && !onPlaylist1) {
+            playlist.add(song1);
+            AddToPlaylist1.setText("On Playlist");
+            onPlaylist1 = true;
+        }
+        else if(button == AddToPlaylist2 && !onPlaylist2) {
+            playlist.add(song2);
+            AddToPlaylist2.setText("On Playlist");
+            onPlaylist2 = true;
+        }
+        else if(button == AddToPlaylist3 && !onPlaylist3) {
+            playlist.add(song3);
+            AddToPlaylist3.setText("On Playlist");
+            onPlaylist3 = true;
+        }
+    }
+
+    public void openPlaylistWindow(ActionEvent event) {
+
+        Button button = (Button) event.getSource();
+
+        Stage stage = (Stage) button.getScene().getWindow();
+
+        stage.setTitle("Playlist");
+        VBox root = new VBox();
+
+        if(!playlist.isEmpty()){
+            root.getChildren().add(header);
+            root.getChildren().addAll(playlist);
+            root.getChildren().add(playingBox);
+        }
+        else {
+            Label label = new Label("Your playlist is empty.");
+            if(!isDark)
+                label.setStyle("-fx-font-size: 24px;");
+            else
+                label.setStyle("-fx-font-size: 24px; ; -fx-text-fill: #e0e0e0;");
+            root.getChildren().add(label);
+        }
+
+
+        Scene scene = new Scene(root);
+        if(!isDark)
+            scene.getStylesheets().add(getClass().getResource("light.css").toExternalForm());
+        else
+            scene.getStylesheets().add(getClass().getResource("dark.css").toExternalForm());
+
+        stage.setScene(scene);
+    }
+
+    @FXML
+    public void toggleTheme() {
+        isDark = !isDark;
+        themeToggle.getScene().getStylesheets().clear();
+        if(isDark) {
+            themeToggle.getScene().getStylesheets().add(getClass().getResource("dark.css").toExternalForm());
+            themeToggle.setText("Switch to Light Mode");
+        }
+        else {
+            themeToggle.getScene().getStylesheets().add(getClass().getResource("light.css").toExternalForm());
+            themeToggle.setText("Switch to Dark Mode");
+        }
     }
 }

src/main/resources/sbu/javafx/App-view.fxml

@@ -1,8 +1,50 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import javafx.scene.layout.VBox?>
-<VBox xmlns="http://javafx.com/fxml" alignment="CENTER" spacing="10">
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Button?>
 
-    <!-- TODO: Add your code here! -->
+<VBox styleClass="main-container" xmlns:fx="http://javafx.com/fxml" fx:controller="sbu.javafx.MusicController">
+
+    <HBox styleClass="header-row" alignment="CENTER_LEFT" fx:id="header">
+        <Label text="Track" minWidth="190" prefWidth="190"/>
+        <Label text="Artist" minWidth="205" prefWidth="205"/>
+        <Label text="Duration" minWidth="120" prefWidth="120"/>
+        <Label text="Play" minWidth="90" prefWidth="90"/>
+        <Label text="Add to Playlist" minWidth="150" prefWidth="150"/>
+        <Button fx:id="themeToggle" text="Switch to Dark Mode" onAction="#toggleTheme"/>
+    </HBox>
+
+    <HBox styleClass="track-row" alignment="CENTER_LEFT" fx:id="song1">
+        <Label fx:id="Name1" text="Song of Dawn" minWidth="180" prefWidth="180"/>
+        <Label fx:id="Singer1" text="Alice Johnson" minWidth="200" prefWidth="200"/>
+        <Label text="03:45" minWidth="100" prefWidth="100"/>
+        <Button fx:id="play1" text="Play" onAction="#handlePlayAction" minWidth="90" prefWidth="90"/>
+        <Button fx:id="AddToPlaylist1" text="Add to Playlist" onAction="#addToPlaylist" minWidth="150" prefWidth="150"/>
+    </HBox>
+
+    <HBox styleClass="track-row" alignment="CENTER_LEFT" fx:id="song2">
+        <Label fx:id="Name2" text="Echoes of You" minWidth="180" prefWidth="180"/>
+        <Label fx:id="Singer2" text="Luna Sky" minWidth="200" prefWidth="200"/>
+        <Label text="05:08" minWidth="100" prefWidth="100"/>
+        <Button fx:id="play2" text="Play" onAction="#handlePlayAction" minWidth="90" prefWidth="90"/>
+        <Button fx:id="AddToPlaylist2" text="Add to Playlist" onAction="#addToPlaylist" minWidth="150" prefWidth="150"/>
+    </HBox>
+
+    <HBox styleClass="track-row" alignment="CENTER_LEFT" fx:id="song3">
+        <Label fx:id="Name3" text="Midnight Drive" minWidth="180" prefWidth="180"/>
+        <Label fx:id="Singer3" text="The Night Owls" minWidth="200" prefWidth="200"/>
+        <Label text="04:12" minWidth="100" prefWidth="100"/>
+        <Button fx:id="play3" text="Play" onAction="#handlePlayAction" minWidth="90" prefWidth="90"/>
+        <Button fx:id="AddToPlaylist3" text="Add to Playlist" onAction="#addToPlaylist" minWidth="150" prefWidth="150"/>
+    </HBox>
+
+    <HBox styleClass="footer-row" alignment="CENTER_LEFT" fx:id="playingBox">
+        <Label text = "Playing: " minWidth="300" prefWidth="300"/>
+        <Label fx:id="nowPlayingSong" text = " " prefWidth="300"/>
+    </HBox>
+
+    <Button styleClass="playlist-button" fx:id="PlayListButton" text = "Playlist" onAction="#openPlaylistWindow" />
 
 </VBox>

src/main/resources/sbu/javafx/dark.css

@@ -0,0 +1,96 @@
+
+.root {
+    -fx-font-family: "Segoe UI", "Inter", "Arial";
+    -fx-background-color: #0f172a;
+    -fx-padding: 20;
+}
+
+
+.main-container {
+    -fx-background-color: #111827;
+    -fx-background-radius: 18;
+    -fx-padding: 20;
+    -fx-spacing: 14;
+    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.35), 20, 0.2, 0, 6);
+}
+
+
+.header-row {
+    -fx-alignment: center-left;
+    -fx-padding: 0 0 10 0;
+    -fx-spacing: 14;
+}
+
+
+.header-row .label {
+    -fx-text-fill: #f8fafc;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+
+
+.track-row {
+    -fx-background-color: #1f2937;
+    -fx-background-radius: 14;
+    -fx-padding: 10 14;
+    -fx-spacing: 14;
+    -fx-alignment: center-left;
+}
+
+.track-row:hover {
+    -fx-background-color: #273244;
+    -fx-cursor: hand;
+}
+
+
+.track-row .label {
+    -fx-text-fill: #cbd5e1;
+    -fx-font-size: 13px;
+}
+
+
+.button {
+    -fx-background-color: #3b82f6;
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 8 14;
+    -fx-font-size: 13px;
+    -fx-cursor: hand;
+    -fx-border-width: 0;
+}
+
+.button:hover {
+    -fx-background-color: #2563eb;
+}
+
+.button:pressed {
+    -fx-background-color: #1d4ed8;
+}
+
+
+.playlist-button {
+    -fx-background-color: #22c55e;
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 10 20;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+.playlist-button:hover {
+    -fx-background-color: #16a34a;
+}
+.playlist-button:pressed {
+    -fx-background-color: #15803d;
+}
+
+
+
+.footer-row {
+    -fx-alignment: center-left;
+    -fx-padding: 16 0 0 0;
+    -fx-spacing: 10;
+}
+
+.footer-row .label {
+    -fx-text-fill: #94a3b8;
+}

src/main/resources/sbu/javafx/light.css

@@ -0,0 +1,98 @@
+
+.root {
+    -fx-font-family: "Segoe UI", "Inter", "Arial";
+    -fx-background-color: #f8fafc;
+    -fx-padding: 20;
+}
+
+
+.main-container {
+    -fx-background-color: #ffffff;
+    -fx-background-radius: 18;
+    -fx-padding: 20;
+    -fx-spacing: 14;
+    -fx-effect: dropshadow(gaussian, rgba(15, 23, 42, 0.08), 18, 0.2, 0, 6);
+}
+
+
+.header-row {
+    -fx-alignment: center-left;
+    -fx-padding: 0 0 10 0;
+    -fx-spacing: 14;
+}
+
+
+.header-row .label {
+    -fx-text-fill: #0f172a;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+
+
+.track-row {
+    -fx-background-color: #f8fafc;
+    -fx-background-radius: 14;
+    -fx-padding: 10 14;
+    -fx-spacing: 14;
+    -fx-alignment: center-left;
+}
+
+.track-row:hover {
+    -fx-background-color: #eef2ff;
+    -fx-cursor: hand;
+}
+
+
+.track-row .label {
+    -fx-text-fill: #334155;
+    -fx-font-size: 13px;
+}
+
+
+.button {
+    -fx-background-color: #2563eb;
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 8 14;
+    -fx-font-size: 13px;
+    -fx-cursor: hand;
+    -fx-border-width: 0;
+}
+
+.button:hover {
+    -fx-background-color: #1d4ed8;
+}
+
+.button:pressed {
+    -fx-background-color: #1e40af;
+}
+
+.playlist-button {
+    -fx-background-color: #22c55e;
+    -fx-text-fill: white;
+    -fx-background-radius: 10;
+    -fx-padding: 10 20;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+.playlist-button:hover {
+    -fx-background-color: #16a34a;
+}
+.playlist-button:pressed {
+    -fx-background-color: #15803d;
+}
+
+
+#PlayListButton:pressed {
+    -fx-background-color: #047857;
+}
+
+.footer-row {
+    -fx-alignment: center-left;
+    -fx-padding: 16 0 0 0;
+    -fx-spacing: 10;
+}
+
+.footer-row .label {
+    -fx-text-fill: #64748b;
+}