The sample website begins with the index page which has a login feature.

Through it the user inputs

an a pic, name and password then clicks on the login button.

The pic and name are stored into the local storage with the following piece of code.

The function submit is fired every time the user clicks on the login button. The value of the name
inputted in by the user is accessed using the “getElementById” method. To make sure the user
doesn’t insert in blank values, an if condition checks of the user has inputted in the required values is
added.
If the inputted information is correct, a object called current profile which holds values in type of key-
value pairs is created. This object is used to store the name and the address of the profile pic. The
object is converted into a String using the JSON’s stringify method because the localStorage can only
store string values.
The system then checks if the localStorage already contains the Profiles key. Because every new
created profile is to be stored into the localStorage. If the key Profiles doesn’t exist yet into the
system this means that the current user is the first to use the app and the code in the else condition is
executed which first creates a new array because all f the created profiles are to be stored into an
array. The current profile object is pushed into the array and after this array is also turned into a string
because the localStorage only stores items in form of strings. Then the key “Profiles” is created into
the local storage.

If the Profiles key already exists in the system, this means that the user isn’t the first to log into the
system and the values of the local storage are first accessed and after being accessed, they are then
parsed form a string back into an object using the JSON’s parse method. After it has been parsed into
a string the newly created profile object is added into the system, the data that was in the local
storage cleared to prevent duplication of data and finally a new profile is added into the system.
The profile of the current user is stored differently into the local storage and its key is “Current
Profiles” this makes the system only to allow only one user at a given time.

After this is done the home page is opened by the use of the open method. The second argument
makes the new page to be opened from the same tab.

This loads the home page.Through the homepage, the user is able to upload images, videos ,
education backgrounds, personal interests and also be able to view the other users that have so far
interacted with the social media app using the same device.

For videos/images to be able to be uploaded, some default variables some global variables are
necessary. The img_link variable stores the default image to be displayed once the user uploads
anything, the count to be used to generate unique ids of the posts, the DataLink to hold the URL link
of the image or video to be stored in the local storage. The profile pic variable stores the profile
picture of the current user.
The addPost function is responsible for displaying the newly created post and those that were already
saved in the local storage. The dict parameter tells whether the current post is from the localstorage
or not. By default its none and this indicates that the image/videos isn’t from the database.
For every post created, the date and time, user information and user picture have to be stored. In
case of a new post the date is variables are initiated to the current date and time and if not they are
changed to those that were already stored into the database.

In case the user hasn’t inputted in any text in the whats on your mind input, an alert is fired. Other
than that, the HTML content of the new post is stored into a variable “html”, this HTML content
includes the id to uniquely identify the post, its date and tome, username plus the img_link which
contain the link of the image/video.
The HTML content is displayed through the use of the insertAdjancentHtml DOM method. The data
about this added post is the added to the localStorage. Such that the next time the user logins, these
posts can be viewed. Also this allow another user to view the posts posted by the other user. NB The
videos aren’t stored into the localStorage because they take up a lot of space and always the space in
the localStorage is limited.The data is stored in terms of a key-value pairs way.

The displayAllPosts function is fired automatically every time the page is opened. This is through the
onload event on the body tag in the home HTML code. This initializes the current_profile variable with
the profile picture link the user added in the login page, the username is also assigned to the user’s
name. The posts data stored in the localStorage is then retrieved from the “Posts” and the method
AddPost is called for each post stored in the localStorage.
Once the user clicks on the Image/Video button when adding new post, The function LoadImg is
called, This toggles file dialog through the user selects the video/image he/she wants. This
image/video is opened using the FileReader. The file reader creates a location in the browser’s where
that image/video is located and it returns the link. This link is the stored in the img_link variable for
later usage.

The function AddEducation is responsible for adding the education background of the user. This
function when triggered it collects the information about the user’s inputted education background,
creates an HTML code which is then displayed through the DOM property insertAdjancentHTML.

The idea used for the education background is the same that was used on the hobby and the HTML
content was displayed through the use of the DOM.
To display the all of the users that have so far used the app, each of those users are first stored into
the local storage at the point when they register, so when the friends button is clicked the function
DisplayFriends function is called Which reads the data of the friends from the local storage and this
data is displayed by the use of the DOM property of InsertAdjancentHTML.