This article is dedicated to those of you who are in a romantic relationship. Want to do something to celebrate your love!!! Today I share the source code for free and guide you to make your own website to count the days of love.
| Join the channel Telegram belong to AnonyViet 👉 Link 👈 |
This website is designed in a simple, luxurious style Material design by Google. Colors are carefully selected and harmoniously coordinated. This website I write with HTML5, CSS3 and JavaScript only!! You just need to download and edit the content again and then Upload Go to the host to use it.
Demo interface of counting days of love
Highlights of the website to count the days of love 2019
- The website is designed in a modern and elegant way.
- The colors are available in harmony and soothing to the eyes of the ladies.
- Written in HTML5, CSS3 and JavaScript so it’s easy to edit and change the content.
- Self-scaling and compatible with most screen types of devices.
Instructions for editing website content
You need to download the source code from the website at the link below:
After downloading, you proceed to right-click on the folder and select Extract Here to extract. Unzip the file, you will get a folder named beenTogether2019. Open that folder, you will see files like the image below.
Now we will proceed to edit the website content !! To edit, you should install a program that supports writing web programming languages. I am using Visual Studio Code for web programming, if you like to use it like me, you can download it for free here !
Edit image content
Open the folder img and replace 02 images inner representation into your image.
However, to save time editing the code, just name the image as it was originally!!
- thong.jpg is a picture of a male friend
- page.jpg is your photo
Of course, you should keep the image extension in .jpg format for a lighter image so that the web loads faster.
Edit website content
We’ll go back and open the file index.html with editing software. The white content in the image below is the content displayed on the web, you can edit !!
Also in the card <img src="https://anonyviet.com/web-dem-ngay-yeu-nhau-2019/img/thong.jpg" class="avatar"> and <img src="https://anonyviet.com/web-dem-ngay-yeu-nhau-2019/img/trang.jpg" class="avatar">is the path to the avatar file. If the profile picture is not displayed, please check this section to see if the name of your avatar is correct in the folder img not yet!!
Set up a date
Finally, what we need to do is reset the date of the two people’s dating. Open file main.js equal to vscode to edit. You will see the contents of the File main.js like the photo below.
Look for the line var startDate = new Date(2018, 10, 1);and replace the 3 numbers in parentheses with your date. For example, if I have a date on November 1, 2018, I will replace it as follows:
- 2018: It’s the year I started dating them – this is correct, so I’ll keep it.
- ten: I have a date in November but when I replace it, I enter 10.
Because in JavaScript, you have to subtract the number of months by 1 unit. - first: Your date.
After editing, save it and upload it to the host. If you do not know how to upload web source to the host, please refer to the tutorial below.
