My Space - Save Messages

Devlog #9
Now, i got a another funny plan, earn points to unlock features such as copy and edit when user earn and collect the points. So i defined the points as keys and with emoji of a key which is more suitable for this website theme!

So i added a div section that shows the total keys that user collects at the top-right on the website and also added how many keys are collected from each note list, so i added the keys amount on each list.

And i created my own principle to calculate the keys earned per list note, The keys are calculated based on letter count. 1 key per 4 letter count. If the letter count is less than 4 the key will be 0 and if the letter count is 10 that fore the keys count is 2. that is, if letter count is not completely divisible by 4 the nearest completely divided value is selected. This is the major logic for my keys calculating system!

Then i added another animation text which will show up when the user hovered on the top-right keys points section.

i decided that to unlock copy feature need more than 100 and 150 keys for unlock editing feature. So i added if-else condition inside the editMsg() and copyMsg() functions, when the amount on keys is less than that of it will show up a alert with how much keys more needed to unlock that feature.

Its very booring to show as default browser alerting system so i thought why should i alert this through keysinfo area. So i just created a function called infoKey() with a parameter ‘text’ which will help to reduce complicity and retyping the code again and again!

Then to make for carzy and funny appearence changed the default mouse pointer into a key emoji and made the movement based on collect xy axis of the mouse using js and also hided the defult icon in body style area

Devlog #8
Today i changed the head title and subtitle from the top into the bottom with input box. And made the both sections for dynamic as well as the user focus in and focus out in the input box.

Now i thought to add copy and edit options for each notes. For that i changed the render()’s html with edit and copy button tags as similar as delete button, then i created each funcion called editMsg() and copyMsg(). To work the editMsg(), when the user selects and click on the note that the user need to edit, the text will appear as well as with the input box got autofocus in and the text to be edited is automaticaly typed in the input box. Added a if-else condition to identify the user is sending new note or it is already existing and editing, if it is exisits and the user is editing then submiting again the note will rechange into new one!

In copyMsg(), i simply used ddefault navigor function with clipboard connection and with the value to copy the user selected text.

I just added the normal ‘alert’ feature at first when the user click on copy and it successfully copied and when successfully edited the note. I got a plan to make the “alert notiications” more attactive and dynamic.

So added another section div inside the bottom area div then animated as popup from bottom and going back to bottom (outside the page), with that time the heading and subhead section become small width and then came back to normal when the alert is disappeared for this animation i used js of its very complicated to re-use whenever it needs (for edit and copy button). So i created a function alertNoti() with two parameters!

Then solved some scrolling bugs i found that the website is automatically scrolling down as well as according to the movement of the background dots. So i disabled all the overflow of the all elements including body and excluding section div, which make the website only scroll and show the scroll bar when the section list is overflow!

Devlog #7
Today, i added lock emoji icon moeving with overlapping effect animation in PIN screen using CSS and CSS function keyframe. At that time i got another idea why should i add something like this animation on the background, So i just created a tiny-dot and added the same animation function then i connected with JS to visible multiple tiny-dots at a time using for-loop with same animation. Btw i used a root value in CSS for the both animation to delay the animation according to there class count, which will gave the animation at different timeing!

Then i changed the input box of the PIN screen into a completely invisible and only shows the dots so PIN with colours (as green for correct and red with shakeing the dots animation for incorrect PIN)..

I got a inspiration from a reel that i saw on Instagram today where the website is completely with theme of term GLASSMORPHISM. then i thought to add this theme into my project so changes the opacity of everything into .7 and remove some of the border and background colour and some with background colour with transparent!

Then I added a header at main screen with fixed position of the main and sub headings with the same theme glassmorphism effect!

Devlog #6
Today, i decided to change the theme and color palette of the website and mind-set to add more animations!

I selected a colour palette with a bases of dark-theme which is more comfortable for the users. So i changed white-purple theme into black-blue theme. So i selected colours for all the elements and added box shadow and border outline and element shadow effect.

Then i changed the PIN screen buttons into circle from a semi-rectangular shape with suitable colours and hovering effects, Then i added a simple emoji icon on the PIN screen which gave more attraction and fill up the empty space. Put all the PIN screen elements such heading and subheadings, buttons and PIN input area in a box containing a special border and effect!

A added a simple transition animation between two sections (PIN Screen and Main screen) like fadeIn and fadeout animation effect!

Also added the colour effect for the PIN input box that indicates the correct PIN with green and incorrect with a shake animation with red colour effect which made the PIN screen more attractive and modern look, i also added a cyan colour effect to the input when the user clickes a number button.

Then change the empty state into new modern with new text format. As well as added a icon emoji on the each list menu like a pointer.

As well as changed the date format 3/8/2026 into 03-Aug-2026 which make the user more easier to understand the date.

Iam thinking to change the input text box into a modern look, so changed the width of the box into small and hide the submit button, the box will expand and show the submit button when the user focus on the box, and also added a ‘blur()’ in JS to came back to small size when the user clicks the submit button

Then finally added a animation thats perfectly matches for adding or removing list menu

As well as i choose some fonts style from google.fonts.com and decided to use in the website.

Devlog #5 - Adding Deleting feature
To make the website more user-friendly thought to add delete option if user needs to remove or delete the saved note!

Created a function with two parameters one for the selecting the array of the user selected to delete (from localStorage) and another parameter is number of the section list to remove that section! and also added a conformation alert notification to conform the user actually needed to delete it or not! Then made the button more attractive like hovering animation and etc

Devlog #4 - Password System
when considering about privacy and security measurements added a security PIN system that secure the list that have been saved in the localStoarge system.

Now needed to save this PIN also in the localStorage and work the renderMsg() if the password is correct else doesn’t show it!

PIN is linked with localstorage and simpley added a if-else condition to identify the user is new in here or not, if the PIN is not saved in localstorage can understand that the user new here, thatfore it will shows a text to create the PIN and else if there is saved PIN shows a text to enter the PIN to continue.

When the user needed to create a pin added a another security condition that doesn’t allow to create if the PIN is less than 4 digit, the user strictly needed a 4 digits PIN to continue

Then added a function to reset the PIN when the user forgot the PIN, user can reset everything (including list menu) by double clicking the C (resetbtn) with conforming the alert notification then the user can reset everything!

Devlog 3 - Working on JS
Completed working on basic UI design, Now lets work on backend desk!

Called all the necessary elements from HTML into JS. Then added function for the submit button to add the list menu with text that the user have entered in the input box and also added the codes that makes and get current/today date from the device and add that also into the list.

Connect the list with local storage for save the list menu.
For that to show the saved list when ever the user opened the website, created a function ‘renderMsg()’

In renderMsg() added a if condition to show that if there is no saved list or it was a new user, show the empty state.

Devlog #2
In this part, added a empty state when a new user or there is no saved messages , shows a custom message that indicates there is nothing saved!
So added a section called ‘empty_state’. Here is the demo of that!

About the Project
It is a simple user-friendly website that user can sent texts to memorize or to save it on the local storage.

Devlog #1
I just created html and css files. And designed the website. tried to make to look as modern, simple and clear-structure, created the text input and sent button and fixed their positions to fix it even when the website need to be scrolled. Designed the column-list like a each card which make the website for clear.