Personal Productive Tab

NOTE: I created this on a 14 inch display laptop, while I tried to use flexbox, I noticed that the display is weird on my monitor and I haven’t figured out how to fix this yet.
Project:
I created a Personal Productivity Dashboard with a minimal organized display designed to serve as a template when opening a New Tab. Key features include a personal quote (picked a personal one instead of motivational one) at the top of the page reminding myself to be present as well as a two column display to maximize space usage on the tab.
The left column includes an embedded google search bar which links the search into a new tab when entered, a dynamic clock which syncs to your clock’s local time to update every second, a date display, and quick links for common developer tools.
The right column is the planning/productivity section where you can set your main focus for the day at the top. Right below this you can ask daily tasks/goals in your todo section which can be marked as complete through the checkbox or removed from the list with the X.
Challenges?
The main challenge I ran into was fitting the display efficiently in a way that could fit on a single screen without having to scroll up or down. I initially opted for a single centered column displaying everything vertically. However, I quickly realized that this method extended past the screen very quickly and also wasted a lot of space on the sides. Another issue was that the moment I began adding more tasks, the dashboard would extended further and further downwards. This is why I took a dual column display approach to maximize the horizontal space available, saving the vertical overflow. I also included a max-height setting for the todo list with an auto overflow restriction so that adding multiple tasks would create a mini scrolling page within the todo section instead of extending the dashboard page downwards.
Success?
I was able to implement all my features into this display screen. I am notably proud of the todo section which includes the completion checkbox feature to strikethrough the goal when marked as complete. Additionally I created the option to delete goals if needed. This, alongside the clock and date display, was the main use of my script.js file.
The clock feature were created by extracting the local time on the computer, formatting everything to 2 digits (ex: 06 instead of 6), displaying it as the time and updating it every second. The todo list first initialised by retriving existing tasks from localStorage or defaults to an empty array, adds new tasks when the enter key is pressed with eventListener, changes the state of the task depending on if it is completed or deleted and removes accordingly, and finally the task list updates in localStorage where it can be retrieved when needed.