Adding style.css

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" 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

@@ -16,6 +16,9 @@ public class MusicApp extends Application {
         Scene scene = new Scene(fxmlLoader.load());
         stage.setTitle("Music Player");
         stage.setScene(scene);
+        scene.getStylesheets().add(
+                MusicApp.class.getResource("style.css").toExternalForm()
+        );
         //TODO: add icon to the stage
         stage.show();
     }

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

@@ -1,31 +1,75 @@
 package sbu.javafx;
 
-import javafx.fxml.FXML;
+import javafx.collections.FXCollections;
 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.control.ListView;
 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.
+    @FXML
+    private Label nowPlayingLabel;
 
-    //TODO: Implement the logic to play a song. This method should update the UI to show which song is currently playing.
+    private final ArrayList<String> playlist = new ArrayList<>();
 
     @FXML
-    public void handlePlayAction() {
+    public void handlePlayAction(ActionEvent event) {
-        //Update labels, change button icons, etc.
+        Button button = (Button) event.getSource();
-    }
+        String songName = "";
+        switch (button.getId()) {
+            case "play1":
+                songName = "Blinding Lights";
+                break;
+            case "play2":
+                songName = "Shape of You";
+                break;
+            case "play3":
+                songName = "Believer";
+                break;
+        }
 
-    //TODO: Logic to add a specific song to the user's playlist.
+        nowPlayingLabel.setText("Now Playing: " + songName);
+    }
 
     public void addToPlaylist(String songName) {
-        //Add the song to a list or update a ListView.
+        playlist.add(songName);
     }
 
-    // TODO:This method should open a new window or change the current scene  to display the "Playlist" page.
+    @FXML
+    public void addSong1() {
+        addToPlaylist("Blinding Lights");
+    }
 
+    @FXML
+    public void addSong2() {
+        addToPlaylist("Shape of You");
+    }
+
+    @FXML
+    public void addSong3() {
+        addToPlaylist("Believer");
+    }
+
+    @FXML
     public void openPlaylistWindow() {
-        //Create a new stage and show the playlist UI.
+
+        Stage stage = new Stage();
+
+        ListView<String> listView = new ListView<>();
+        listView.setItems(FXCollections.observableArrayList(playlist));
+
+        VBox root = new VBox(10);
+        root.getChildren().addAll(new Label("Playlist"), listView);
+
+        stage.setScene(new Scene(root, 300, 250));
+        stage.setTitle("Playlist");
+        stage.show();
     }
-}
+}

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

@@ -1,8 +1,50 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
-<VBox xmlns="http://javafx.com/fxml" alignment="CENTER" spacing="10">
 
-    <!-- TODO: Add your code here! -->
+<VBox xmlns="http://javafx.com/javafx/21"
+      xmlns:fx="http://javafx.com/fxml/1"
+      fx:controller="sbu.javafx.MusicController"
+      alignment="CENTER"
+      stylesheets="@style.css"
+      spacing="10">
 
-</VBox>
+    <Label fx:id="nowPlayingLabel" text="Now Playing: None"/>
+    <HBox alignment="CENTER" spacing="10">
+        <Label text="Blinding Lights"/>
+        <Label text="The Weeknd"/>
+        <Label text="3:20"/>
+        <Button fx:id="play1"
+                text="Play"
+                onAction="#handlePlayAction"/>
+        <Button text="Add to Playlist"
+                onAction="#addSong1"/>
+    </HBox>
+    <HBox alignment="CENTER" spacing="10">
+        <Label text="Shape of You"/>
+        <Label text="Ed Sheeran"/>
+        <Label text="4:02"/>
+        <Button fx:id="play2"
+                text="Play"
+                onAction="#handlePlayAction"/>
+        <Button text="Add to Playlist"
+                onAction="#addSong2"/>
+    </HBox>
+    <HBox alignment="CENTER" spacing="10">
+        <Label text="Believer"/>
+        <Label text="Imagine Dragons"/>
+        <Label text="3:24"/>
+        <Button fx:id="play3"
+                text="Play"
+                onAction="#handlePlayAction"/>
+        <Button text="Add to Playlist"
+                onAction="#addSong3"/>
+    </HBox>
+
+    <Button text="View Playlist"
+            onAction="#openPlaylistWindow"/>
+
+</VBox>

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

@@ -0,0 +1,51 @@
+.root {
+    -fx-background-color: #f4f6f8;
+    -fx-font-family: "Segoe UI";
+    -fx-padding: 20;
+    -fx-spacing: 15;
+}
+
+.label {
+    -fx-text-fill: #2c3e50;
+    -fx-font-size: 14px;
+}
+
+#nowPlayingLabel {
+    -fx-font-size: 18px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #1565c0;
+}
+
+.hbox {
+    -fx-background-color: white;
+    -fx-background-radius: 8;
+    -fx-border-color: #d6d6d6;
+    -fx-border-radius: 8;
+    -fx-padding: 10;
+    -fx-spacing: 10;
+}
+
+.button {
+    -fx-background-color: #1976d2;
+    -fx-text-fill: white;
+    -fx-background-radius: 5;
+    -fx-border-radius: 5;
+    -fx-cursor: hand;
+    -fx-padding: 6 14;
+}
+
+.button:hover {
+    -fx-background-color: #1565c0;
+}
+
+.button:pressed {
+    -fx-background-color: #0d47a1;
+}
+
+.button:last-child {
+    -fx-background-color: #43a047;
+}
+
+.button:last-child:hover {
+    -fx-background-color: #388e3c;
+}