# Building a Simple User Registration and Login App with JavaScript
I recently built a user registration and login system using HTML, CSS, and JavaScript. It is a simple client-side app that doesn't connect to any backend or database. Although it is a beginner-level project, it helped me understand the logic behind user authentication and gave me practical experience with form validation, data handling, and updating the DOM dynamically. In this article, I will walk through what the app does, how it works under the hood, what I think can be improved, and the challenges I faced while working on it.

### What the App Does
The app allows users to register by filling in their full name, email address, phone number, password, and date of birth. After registration, the user details are saved temporarily using JavaScript’s array structure. There is also a login form where a user can sign in using the email and password they registered with.

I added form validation to ensure that users fill all the required fields and that each input meets certain conditions. For example, the password must include uppercase and lowercase letters, at least one number, and be more than seven characters long. The user must also be at least 18 years old based on their date of birth. Once registration is successful, the app displays a list of all the users who have signed up during that session.

On the login side, when a user enters their credentials, the app checks whether the details match any existing users. If the match is found, it shows a welcome message. If not, it alerts the user that the login failed.
### How the App Adds Users
When a user clicks the register button, the `registerUser` function runs. It collects values from the input fields, trims extra spaces, and performs checks for empty inputs, email format, password strength, and valid age.

If all the checks pass, the function checks whether the email already exists in the registered users array. If not, it creates an object with the user’s data and adds it to the array. After that, it clears the form and updates the list of registered users on the page.

The login process runs when a user clicks the login button. The function searches the array for a matching email and password using the` find `method. If a match is found, it displays a success message with the user’s name. If not, it notifies the user that the credentials are incorrect.
### What the App Could Do
At the moment, the app only stores users in memory. Once the page reloads, all the data disappears. A natural next step would be to use `localStorage` to keep the user data saved even after the page refreshes.

Another idea is to add a password strength meter, better feedback messages, or a show or hide password toggle to improve user experience. I could also connect the app to a real backend and database so that users can log in from anywhere, not just within one browser session.

The UI is functional, but it could be more visually appealing. Adding animations, icons, or using a design framework like Tailwind CSS or Bootstrap would make the interface more modern and user-friendly.
### Where I Could Improve
One major area is password handling. Right now, passwords are stored in plain text. In a real application, this is a serious security flaw. I would need to use encryption or hashing before saving any password, even in localStorage or a database.

I could also improve the structure of the code. Some functions are doing multiple things and could be split into smaller helper functions. I noticed that the code for clearing forms and showing messages is repeated. Writing cleaner, reusable code would make the app easier to maintain and scale.

In terms of validation, there is room to handle more edge cases. Right now, the app only checks for age using the birth year, month, and day, but it could also validate the phone number format or prevent future dates in the date of birth field.

### Challenges I Faced
Calculating the user’s age was one of the first challenges. I had to learn how to work with JavaScript’s `Date` object. At first, I got the year difference correctly, but the logic failed for users who had not reached their birthday yet in the current year. After some testing and adjustments, I was able to check the month and day to make sure the user was truly at least 18 years old.

I also struggled a bit with password validation. My first version of the function did not correctly test for uppercase or numeric characters, so even strong passwords were getting rejected. I eventually rewrote the validation function to use regular expressions, and that fixed the issue.

Another issue came up with the login feature. At first, I forgot to use strict equality checks when comparing the entered credentials with those in the array. That caused valid users to be rejected. Once I fixed that, the login process worked as expected.

Styling was another challenge. I used Flexbox to align the registration and login cards side by side, but they didn’t look good on smaller screens. I added media queries to make the layout responsive, and that helped the app adapt to different device sizes.
### Conclusion

Building this app helped me improve my JavaScript skills and understand the basics of user authentication. It was also a good opportunity to practice validation and responsive design. Even though the app is simple, I learned a lot about handling forms, checking input, storing data, and giving feedback to the user.

There is still a lot of room to grow this project. I would like to make it more secure, better structured, and connected to a backend eventually. But for now, I am happy with what I was able to achieve and how much I learned in the process.

### what it looks like

### Try It Live
You can interact with the registration and login app here: https://register-kzbr.vercel.app/