snowscriptwinterofcode / notes-app Goto Github PK

We currently do not display information about when a note was last edited in our notes app. This feature would provide users with valuable context regarding the most recent modifications to their notes.

Feature Details:

• Display Location: The "last edited" timestamp should be visible within the note interface, near the top or bottom of the note content.

• Automatic Update: Whenever a user edits a note, the "last edited" timestamp should be automatically updated to reflect the current date and time.

• Visibility Control: Users should have the option to toggle the visibility of the "last edited" timestamp. This feature is to accommodate users who prefer a cleaner interface without this information.

The toast message color is not clearly visible when the application is in white mode. This affects the overall user experience, making it difficult for users to read or notice the toast messages.

The toast message color should be visible and clearly distinguishable when the application is in white mode.

Screenshot:

I want to add background animation in the following format.


Please assign this issue to me.

Below Abstract Section , Create a section for Notes-App Images and add short description .

When we click on edit button, the position of Done button seems very odd:

Now, when we enter a large title, it becomes something like this: 👇

changing it to input element, will make it's UI better

Current behaviour

The title input for adding a note is implemented as a textarea, which is unnecessary since it's expected to be a short text. Additionally, when the "Enter" key is pressed in the title textarea, it does not navigate the cursor to the message textarea.

Expected behaviour

• Replace the title textarea with an input element.
• Ensure that pressing "Enter" in the title input moves the cursor to the message textarea.

Can I please improve the UI of the website other than background as it is quite simple.

Currently the App has default scrollbar . I want you to create a custom scrollbar .
Reference -

Hi, i wanted to add a scroll to top button in the site for improved user experience.
@nisha-laur kindly assign this issue to me!

Prior to initiating the deletion of a note, the app will provide the user with a warning asking 'Are you sure you want to delete this note?' This serves as a gentle reminder, ensuring that the user confirms their intention to delete the note.

Please assign it to me @nisha-laur @Nitya-Pasrija

Improving the UI of the app, I want to replace the edit and delete buttons with their icons and moving them to top right corner

@nisha-laur can I work on it?

Issue: After editing the notes when we clear the values in Title and Notes input the empty notecard is saved.
Solution: we can show an alert or toast message either to delete the notes or provide the values.
Current Issue:

This will make easy for user to write notes accordingly.

I want to add a search bar in the navbar so that users can easily filter out their notes by typing the topic in the navbar.
Sample ss-

I want to change the shape of these buttons and would like to add decent hover effect on these buttons. please assign this issue to me

the theme switcher icon needs improvement, can I do that? @nisha-laur

I want to add a voice to text transcription feature along with improving the UI .

When we do not enter a title, it shows an alert like this:

However, UI can be improved by showing a toast message exactly similar to the case when notes section is empty like this:

When we switch to dark mode, the setting works as expected. However, upon reloading the page or revisiting the platform, the mode reverts to the default bright mode instead of persisting in the chosen dark mode.

Expected Behavior

The dark mode setting should persist across sessions, and users should not have to repeatedly enable dark mode after each reload or revisit to the platform.

Additional Information

Browser : Firefox
OS: Windows 11

Screenshots:

1] When Switch to Dark Mode:

2] Upon reloading:

Before :

The let keyword can be replaced by "const" to ensure that variables don't get changed accidentally.

After :

I'd like to work on this issue if it gets approved.

Before :-

After:-

I'd like to work on the issue if it gets approved.

Aim: to create faq 's section for enhancing user experience and adding interesting images to home page

there is no option for light and dark mode so i would like to implement this feature

Before :-

After :-

Code changes :-

Add the style="background: var(--color-secondary)" attribute to the body tag of index.html as well.

I want to work on the issue if the issue is approved.

@nisha-laur I want to fix it

To show an alert message when the title is empty and not saving the notes without title.Currently this alert is not being showed and the notes can be saved without title which can be avoided by showing the alert message.

When attempting to add an empty note, the toast message is being displayed, providing a misleading indication of a successful note addition. This behavior is not consistent with the intended functionality, as the toast message should only appear on successful note additions

Screenshot:

Proposed Solution:

Implement a validation check to prevent the display of the toast message when attempting to add an empty note.

The height and Width of notes container are not fit to the content.

Current issue:

Propsed Solution:

Light Mode :

Dark Mode :

Issue: Even after clearing the search input the page is still showing the search results

Solution:By adding debouncing to this we can bounce back and get all the notes after clearing the search input.

Hover effect can be added to the note card to enhance the user experinence.

I am facing an issue with the "Enter" key press functionality for adding a note

Expected Behaviour

I expect that pressing the "Enter" key adds a note, but currently it's not. so I would like to work on it. @nisha-laur please assign it to me

Feature request, description.
The hover effect on the notes overlaps with other container, and this looks so odd.

Describing the solution I like
I would like to enhancethe hover effect with a more soothing transition, which includes
-Adding a BoxShadow
-Adding Transition
-Scaling the div

Before Enhancement

Assign this issue to me before I start working on the feat.
@nisha-laur

The heading of the saved notes will appear bold. This will improve the look of the app.
Please assign this issue to me. @nisha-laur

Fix :-

I want to work on the issue if it gets approved.

In the previous code, there was no feature to save the previous mute preferences for the user, i.e., each time the website loaded, the sounds were un-muted, but after this feature, the mute state/preference will be saved in the local storage, and will be retrieved same as the initial theme properties(props).
Code changes: -
Had to create a new initialMuteState.js file. After that, I created another isMuted variable to get the initial state of the mute preferences inside the getInitialProps.js file, to know if the website is muted already or not. And then created initialMuteState.js file to add respective class to the volume button in each case and added this script using the defer attribute inside the head tag. I had to remove the initial volume-fa-up class from the tag of the volume icon.

I would like to fix this error by removing reduntant code. Also, format the code

@nisha-laur kindly assign it to me

Problem:-

Working Solution:-
Create a new theme.js file containing the logic of the theme slider. In the previous code, the problem was that the scripts were loaded after HTML was parsed(even when they were inside the body at the end, the same is done using the defer tag inside the head tag of HTML). Then create a theme function inside it and call it obviously, then add another script tag with an "defer" attribute inside the head tag so that the script loads simultaneously with the DOM. And we'll need one more file named getInitialTheme which will get the initial theme from local storage and then give it to theme.js so that the initial theme can be loaded. That will be added inside a script tag with no attributes like defer or async so that it gets loaded as soon as the HTML is parsed!

Effect:-

I want to work on the issue if it gets approved.

I would like to redesign the buttons including the toggle button.

Someone mistakenly reverted the changes done in #45 . it was supposed to be this:

However, it's not working as expected now

The initial of the first word of title should be auto capitalised for better UI

Current scenario:

Expected scenario:

Current Behavior:

When a user clicks the save button with an empty note, an alert is triggered, displaying a generic message such as "Note cannot be empty."

Proposed Enhancement:

Replace the current alert with a styled message that provides a more visually appealing and user-friendly notification. This styled message could appear directly within the note input area or as an overlay, clearly conveying the message that the note cannot be empty.

Screenshots:

For clean index.html so that anyone who starts contributing or looking into the project can instantly know what scripts have been used, we can move the script tags into the head tag and add the "defer" attribute into them, which will help us achieve the same but inside the head tag, resulting in cleaner code.
Before :

After :

I'd like to work on this issue if it gets approved.

I want the notes to be a little attractive with some character there at corner to make it more appealing

Issue :-

Fix:-
Add color: var(--font-color); inside the styling property of the toast message, this way the font color will change accordingly. Also add the background: var(--color-secondary); inside the property so that the background of the toast message could change according to the theme changes.

Effect:-

I want to work on the issue if it gets approved.

We need to change the background of the given app to make it more aesthetically pleasing.

Current Behavior:
We currently do not have any background
Expected Behavior:
We aim to create a visually appealing background which will also increase readability and enhance overall user experience.

I am thinking something like this for the day theme:

and something like this for the night theme: