Java To Do List Project

How to Create To Do List Project In Java Netbeans

How to Create To Do List Project In Java Netbeans


In this Java Tutorial we will see How To Create a To Do List Project in Java NetBeans.
This application provides a beautiful interface for managing tasks, allowing users to add, view, and delete tasks.

What We Are Gonna Use In This Project:

- Java Programming Language.
- NetBeans Editor.





Project Source Code:


public class TasksManagementApp {

    private JFrame frame;
    private JPanel titleBar;
    private JLabel titleLabel;
    private JLabel closeLabel;
    private JLabel minimizeLabel;
    private JPanel dashboardPanel;
    private JButton addTaskButton;
    private ArrayList<String> tasks = new ArrayList<>();
    
    // Variables for dragging the form
    private boolean isDragging = false;
    private Point mouseOffset;
    
    
    // Constructor
    public TasksManagementApp(){
        // Create the main JFrame
        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(800,500);
        frame.setLocationRelativeTo(null);
        frame.setUndecorated(true);
        // Set border for the frame
        frame.getRootPane().setBorder(BorderFactory.createCompoundBorder(
                BorderFactory.createMatteBorder(7, 7, 7, 7, new Color(211,84,0)),
                new EmptyBorder(0, 0, 0, 0)));
        
        // Create the title bar
        titleBar = new JPanel();
        titleBar.setLayout(null);
        titleBar.setBackground(new Color(12,22,30));
        titleBar.setPreferredSize(new Dimension(frame.getWidth(), 30));
        // Mouse listener for window dragging
        titleBar.addMouseListener(new MouseAdapter() {
            
            @Override
            public void mousePressed(MouseEvent e){
                isDragging = true;
                mouseOffset = e.getPoint();
            }
            
            @Override
            public void mouseReleased(MouseEvent e){
                isDragging = false;
            }
            
        });
        
        // Mouse motion listener for window dragging
        titleBar.addMouseMotionListener(new MouseAdapter() {
            
            @Override
            public void mouseDragged(MouseEvent e){
                
                if(isDragging){
                    Point newLocation = e.getLocationOnScreen();
                    newLocation.translate(-mouseOffset.x, -mouseOffset.y);
                    frame.setLocation(newLocation);  
                } 
            }   
        });
        
        frame.add(titleBar, BorderLayout.NORTH);
        
        // Create and configure the title label
        titleLabel = new JLabel("Tasks Manager");
        titleLabel.setForeground(Color.WHITE);
        titleLabel.setFont(new Font("Arial", Font.BOLD, 16));
        titleLabel.setBounds(10, 0, 250, 30);
        titleBar.add(titleLabel);
        
        // Create and configure the close label (exit button)
        closeLabel = new JLabel("x");
        closeLabel.setForeground(Color.WHITE);
        closeLabel.setFont(new Font("Arial", Font.BOLD, 17));
        closeLabel.setHorizontalAlignment(SwingConstants.CENTER);
        closeLabel.setCursor(new Cursor(Cursor.HAND_CURSOR));
        closeLabel.setBounds(frame.getWidth() - 50, 0, 30, 30);
        // Add mouse listeners to the close label
        closeLabel.addMouseListener(new MouseAdapter() {
            
            @Override
            public void mouseClicked(MouseEvent e){ System.exit(0); }
            
            @Override
            public void mouseEntered(MouseEvent e){
                closeLabel.setForeground(Color.YELLOW);
            }
            
            @Override
            public void mouseExited(MouseEvent e){ 
                closeLabel.setForeground(Color.WHITE);
            }
            
            
        });
        
        titleBar.add(closeLabel);
        
        // Create and configure the minimize label
        minimizeLabel = new JLabel("-");
        minimizeLabel.setForeground(Color.WHITE);
        minimizeLabel.setFont(new Font("Arial", Font.BOLD, 17));
        minimizeLabel.setHorizontalAlignment(SwingConstants.CENTER);
        minimizeLabel.setCursor(new Cursor(Cursor.HAND_CURSOR));
        minimizeLabel.setBounds(frame.getWidth() - 75, 0, 30, 30);
        // Add mouse listeners to the minimize label
        minimizeLabel.addMouseListener(new MouseAdapter() {
            
            @Override
            public void mouseClicked(MouseEvent e){ 
                frame.setState(JFrame.ICONIFIED);
            }
            
            @Override
            public void mouseEntered(MouseEvent e){
                minimizeLabel.setForeground(Color.YELLOW);
            }
            
            @Override
            public void mouseExited(MouseEvent e){ 
                minimizeLabel.setForeground(Color.WHITE);
            }
            
            
        });
        
        titleBar.add(minimizeLabel);
        
        // Create the dashboard panel
        dashboardPanel = new JPanel();
        dashboardPanel.setLayout(new FlowLayout(FlowLayout.CENTER,20,20));
        dashboardPanel.setBackground(new Color(206,214,224));
        
        frame.add(dashboardPanel,BorderLayout.CENTER);
        
        
        // Create and configure the "Add Task" button
        addTaskButton = new JButton("Add Task");
        addTaskButton.setBackground(new Color(16,172,132));
        addTaskButton.setForeground(Color.WHITE);
        addTaskButton.setFont(new Font("Arial", Font.BOLD, 16));
        addTaskButton.setBorderPainted(false);
        addTaskButton.setFocusPainted(false);
        addTaskButton.setCursor(new Cursor(Cursor.HAND_CURSOR));
        
        // Add action listener to the "Add Task" button
        addTaskButton.addActionListener((e) -> {
           
            // only allow 12 task (Limits the number of tasks to 12)
            if(tasks.size() < 12){
                String task = JOptionPane.showInputDialog(frame, "Enter a new task: ", "Add Task", JOptionPane.PLAIN_MESSAGE);
                if(task != null && !task.isEmpty() && !task.trim().equals("")){
                    tasks.add(task);
                    updateTaskPanel();
                }
                //you have nothing to do with your time
                else{
                    JOptionPane.showMessageDialog(frame, "So, you have nothing to do with your time?","Empty Task", JOptionPane.WARNING_MESSAGE);
                }
                
            }
            else{
                JOptionPane.showMessageDialog(frame, "You cannot add more than 12 task, Delete some tasks to add new ones","Tasks Timit Exceeded", JOptionPane.WARNING_MESSAGE);
            }
            
            
        });
        
        frame.add(addTaskButton, BorderLayout.SOUTH);
        
        
        frame.setVisible(true);
    }
    
    
    // Update the task panel with the current list of tasks
    private void updateTaskPanel(){
        
        dashboardPanel.removeAll();
        for(String task : tasks){
            addTaskPanel(task);
        }
        
        dashboardPanel.revalidate();
        dashboardPanel.repaint();
        
    }
    
    
    // Add a task panel with delete button to the dashboard panel
    private void addTaskPanel(String task){
        
        JPanel taskPanel = new JPanel();
        taskPanel.setLayout(new BorderLayout());
        taskPanel.setPreferredSize(new Dimension(240, 80));
        taskPanel.setBackground(Color.WHITE);
        taskPanel.setBorder(new LineBorder(new Color(254,202,87),2));
        
        JLabel taskLabel = new JLabel(task);
        taskLabel.setHorizontalAlignment(SwingConstants.CENTER);
        taskPanel.add(taskLabel,BorderLayout.CENTER);
        
        // Add mouse listener to show full task text on click
        taskPanel.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseClicked(MouseEvent e){
                showTaskDetails(task);
            }
        });
        
        // button remove task
        JButton deleteButton = new JButton("Delete");
        deleteButton.setBackground(new Color(231,76,60));
        deleteButton.setForeground(Color.WHITE);
        deleteButton.setBorderPainted(false);
        deleteButton.setFocusPainted(false);
        deleteButton.setCursor(new Cursor(Cursor.HAND_CURSOR));
        // remove task action
        deleteButton.addActionListener((e) -> {
            tasks.remove(task);
            updateTaskPanel();
        });
        
        taskPanel.add(deleteButton, BorderLayout.SOUTH);
        dashboardPanel.add(taskPanel);
        
    }
    
    
    // Show task details in a custom dialog
    private void showTaskDetails(String task){
        CustomDialog customDialog = new CustomDialog(frame, "Task Details", task);
        customDialog.setVisible(true);
    }
    
    
  
    // Create a custom dialog class for displaying task details.
// Contains a JTextArea for displaying the content and a "Close" button to close the dialog.
    class CustomDialog extends JDialog{
        
        public CustomDialog(JFrame parent, String title, String content){
            super(parent, title, true);
            setDefaultCloseOperation(DISPOSE_ON_CLOSE);
            setSize(300, 200);
            setLocationRelativeTo(null);
            
            JPanel panel = new JPanel(new BorderLayout());
            JTextArea textArea = new JTextArea(content);
            textArea.setEditable(false);
            textArea.setLineWrap(true);
            textArea.setWrapStyleWord(true);
            textArea.setFont(new Font("Arial", Font.PLAIN, 17));
            JScrollPane scrollPane = new JScrollPane(textArea);
            panel.add(scrollPane, BorderLayout.CENTER);
            
            JButton closeButton = new JButton("Close");
            closeButton.setPreferredSize(new Dimension(120, 40));
            closeButton.setFont(new Font("Arial", Font.PLAIN, 14));
            closeButton.setBackground(new Color(30,144,255));
            closeButton.setForeground(Color.WHITE);
            closeButton.setFocusPainted(false);
            closeButton.setBorderPainted(false);
            
            closeButton.addActionListener((e) -> {
               dispose();
            });
            
            JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.CENTER));
            buttonPanel.add(closeButton);
            panel.add(buttonPanel, BorderLayout.SOUTH);
            getContentPane().add(panel);
            
        }
        
    }
    
    
    
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        
        new TasksManagementApp();
        
    }

}


The Final Result:



Java To Do List Project

Java To Do List Project - Add Task

Java To Do List Project - Task Added

Java To Do List Project - View Task

Java To Do List Project - Tasks Limit

Java To Do List Project - Tasks List

Java To Do List Project - Remove Task




if you want the source code click on the download button below








JavaScript - Text Styling with JavaScript

How to Create Text Styling Controls with HTML, CSS, and JavaScript


Text Styling with JavaScript


In this Javascript tutorial, we will see how to create an interactive text styling tool for an HTML webpage..
This code enables users to modify the styling of a text block by checking or unchecking checkboxes.


Project Source Code:



<!DOCTYPE html>
<html>
<head>
<title>Text Styling</title>
<!-- link font-awesome to web page -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+
ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />

<style>

form{display: flex; flex-wrap: wrap; justify-content: center; align-items: center}

label{display: flex; align-items: center; margin: 10px}

input[type="checkbox"],select{margin-right: 10px}

/*hide checkbox*/
input[type="checkbox"]{display: none;}

/*custom checkbox*/
input[type="checkbox"] + .custom-checkbox::before {
display: inline-block;
content: "";
width: 20px;
height: 20px;
border: 1px solid #ccc;
vertical-align: middle;
margin-right: 10px;
background: #fff;
}

/*style checkbox when checked*/
input[type="checkbox"]:checked + .custom-checkbox::before {
content: "\f00c"; /* Fontawsome checkmark */
color:#4CAF50;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

input[type="checkbox"] + .custom-checkbox::before {
transition: all 0.2s ease-in-out;
}

input[type="checkbox"] + .custom-checkbox:hover::before {
border-color: #4CAF50;
}

i{padding: 2px}

input[type="color"] {width: 50px; height: 30px;}

#text{

width: 80%;
min-height: 200px;
padding: 20px;
margin: 20px auto;
border: 1px solid #ccc;
box-shadow: 2px 2px 4px #ccc;
font-size: 16px;
text-align: center;
}




</style>
</head>

<body>


<div id="app">
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<form>
<label for="bold">
<input type="checkbox" id="bold" onchange="setStyle()"/>
<span class="custom-checkbox"></span>
<i class="fa fa-bold"></i>
</label>

<label for="italic">
<input type="checkbox" id="italic" onchange="setStyle()"/>
<span class="custom-checkbox"></span>
<i class="fa fa-italic"></i>
</label>

<label for="underline">
<input type="checkbox" id="underline" onchange="setStyle()"/>
<span class="custom-checkbox"></span>
<i class="fa fa-underline"></i>
</label>

<label for="color">
<i class="fa fa-paint-brush"></i>
<input type="color" id="color" onchange="setStyle()"/>
</label>

<label for="fontsize">
<i class="fa fa-height"></i>
<select id="fontsize" onchange="setStyle()">
<option value="10px">10px</option>
<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="20px">20px</option>
<option value="25px">25px</option>
<option value="30px">30px</option>
<option value="40px">40px</option>
</select>
</label>

<label for="font-family">
<i class="fa fa-font"></i>
<select id="font-family" onchange="setStyle()">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Tahoma">Tahoma</option>
</select>
</label>

</form>
</div>

<script>

const text = document.getElementById("text");

function setStyle()
{
if(document.getElementById("bold").checked)
{
text.style.fontWeight = "bold";
}
else
{
text.style.fontWeight = "normal";
}

if(document.getElementById("italic").checked)
{
text.style.fontStyle = "italic";
}
else
{
text.style.fontStyle = "normal";
}

if(document.getElementById("underline").checked)
{
text.style.textDecoration = "underline";
}
else
{
text.style.textDecoration = "none";
}

text.style.fontSize = document.getElementById("fontsize").value;
text.style.color = document.getElementById("color").value;
text.style.fontFamily = document.getElementById("font-family").value;
}

text.style.fontSize = document.getElementById("fontsize").value;

</script>


</body>
</html>




Code Explanation:

this JavaScript code, allows users to dynamically change the text's font weight, style, decoration, size, color, and font family.

This JavaScript code performs the following actions:

1 - A function called setStyle() is defined and activates when form elements change. It styles the paragraph according to user choices.

2 - Within setStyle(), it examines checkboxes for bold, italic, and underline, adjusting font-weight, font-style, and text-decoration accordingly.

3 - The font size adapts to the dropdown selection, and text color reflects the chosen color from the picker.

4 - The font family updates based on the selection from the font family dropdown.




OUTPUT:

How to Create Text Styling Controls with HTML, CSS, and JavaScript