How to make a cute website to count days of love

On the phone, there is an application to count the days of getting to know each other for couples. If you don’t want to be like other people, you want to make a more special application yourself. In other words, you want to surprise your lover by making your own dating app.

Join the channel Telegram belong to AnonyViet 👉 Link 👈

Doing so will make more sense and let her feel your sincerity. Today, I share with you the interface of the love counting website that I wrote myself. This site is quite romantic with harmonious and gentle colors poured from pink to purple.

Details of the love day counting app

Programmed by Lmint.

Watch the live version of the website at:

https://anonyviet.com/resource/demngayyeu/

The photo above is the interface of the love day counting website that we will do. Now I would like to briefly introduce the interface and functions of the site. How to edit and use instructions I will write right after this introduction.

First, the time clock will count the time starting from the day you two know each other to the present time. For example on the photo, I fell in love with myself during 6 days 10 hours 39 minutes 06 seconds. (From August 1, 2018 to August 7, 2018).

The anniversary date will be displayed under the heart icon (between the two photos). There is also a function to play any song in a pre-prepared playlist.

The website is designed for cross-device compatibility. That is, it will automatically stretch to fit the screen of phone and tablet devices. The image below is the website interface when displayed on the screen Iphone 6s/7s.

Everything is fine when displayed on the phone.

Is it too much!! This is a spiritual gift for a lover who can sincerely and respect the other half. Now, I will show you how to edit and use this love day counting website!!!

Instructions for setting up the website and using it

You need to download the web code that you have prepared at the link below.

Unzip password: anonyviet.com

After downloading and unzipping, make sure you have all the components as shown below.

Next you need a software that supports writing web code to edit the interface. Can use Sublime Text 3, Notepad++ or Visual Studio Code all okay. As long as you can edit the code.

Instructions for editing interface

Start from File index.htmlopen it up with editing software.

The white text in the image is the content displayed on the website. Feel free to revise it into your own content. However, if the content does not appear on the website, do not edit it to avoid errors.

Download 02 avatars that you want to use and put them in the folder img.

Return to the code interface, change the image name in the path to the image file name you want to change. For example in the image below, I used image main.jpg represent image.

Results, photos main.jpg used to represent the image. Because we both write the names of the two images as main.jpg (the photo above), so the two avatars will use the same photo.

Set anniversaries

Open file app.js with editing software. In the first line of the app.js file, you will see something like the image below.

We will set the anniversary date in this line. You need to change the green text in the image above to your anniversary date. For example, I want the anniversary date to be October 30, 2016 2 hours 10 minutes 26 seconds.

I will adjust the green text as follows:

2016-10-30BILLION02:10:26

side before the letter T is the date
side after the letter T is time.

After editing Save Again, the image below is the result.

The watch will automatically update the time and have accurately counted the date for you. The last part, we will edit the list of songs.

Edit playlist

Download songs in .mp3 format and put them in the folder music. I have 3 songs available in the folder music already for you.

Reopen the file app.js to edit playlists. In the second line of the app.js file, you will list the names of the music files in the program’s data array.

Content is written between brackets []
Each song name (each element) is enclosed in double quotes “” or “
The elements are separated by commas.

I have finished listing 3 of my music files. When someone else accesses the web and presses the play button, the program will automatically play 1 of the listed songs randomly.

That’s it, your last job is to upload the source code to the host so that others can access it. If you do not know how to upload to the host, please see the instructions here.

Note, when uploading to the host, you still have to keep the correct location of the files. I have uploaded it to my host and still keep the correct order and location of the files.

I have uploaded to the host and kept the correct order of the files.
You don’t need to care about the default.php file (it’s just my junk file).