Queo Bắc Bắc, the original article from my blog , please support it.
Probably recently, people and family members all know that Decree 100 of CP has just promulgated the law of “drinking”, and everywhere they hear, they talk enthusiastically, like bottles and bottles. A series of closed group instructions on how to make the key appear, do not see where the instructions are full of adverts, and many shops start selling alcohol meters but do not know how the quality is. I’m also a drunk (about 5 cans), so I understand the aspirations of the brothers, as a true coder, I have to build the toy by myself to use, but the accuracy is high. With great determination, in the evening, I built the alcohol content measurement website, I tried 3 times and the accuracy was 96.69%.
Here are the steps I build website https://nongdocon.duthaho.com/ , show me the chicken so you should not make bricks.
Step 1:
The first is to go to google type đo nồng độ cồn , how dell is all the ads and measurement information like some duck, like, makes me more determined in building the website. So I turned to search in English, in the world, the problem of violating blood alcohol violators is quite a lot, so there will be similar tools. As expected, after a search with alcohol calculations , there are a bunch of results, which are the interface and a whole bunch of calculation formulas.
Step 2:
Because there are quite a lot of pages, so I started to choose the pages that have the most appropriate and informative interface (choose beer / wine, body, drinking volume, time …). After selecting a few websites, the next thing is to hack the calculation formula. Say hacking it only, but actually open the chrome debugger to see the network tab as the main 
. Complete the information and click Submit to see if the request is sent anywhere, whether the website reloads or not.
Step 3:
As a result of the hack , I will exclude the websites that call or reload (render server side), because if it is an API, then I will meet CORS , and render server side, the calculation code is on the server, only hack can only access the server to get code 
. After removing, I have 2 websites left, my job is to open to the source tab of chrome and play with JavaScript code only. Everything just started, looking in a heap of sources of the first web, finally arrived at the place with the formula, wtf, the code has been minified all smooth, read how dell does not understand. Well, let’s try the second web, why is it that people don’t like it, maybe this senior’s website is coded, the code does not minify but reads without comment clearly, to understand extremely 
.
Step 4:
Once you have the formula, the next thing we need to do is to draw the interface, the alcohol content measuring tool, so maybe just a simple form, but those who are faint and then try to measure, so the website I have to catch my eye, not the next time the photos are no longer in use. I am handsome but I have no taste, so thanks to the list of resources I have shared before, the Codepen.io page or the small UI sharing, used to practice html / css / javascript very well. After a few basic mouse clicks, you can also find a form like that. Start adding formulas and further editing to get this eye-catching interface:
Step 5:
Experiment with some data, the tool found it running quite well, waiting for release date. But wait, now everyone has equipped themselves with a smartphone, this time is Tet, so they will use their tool on the phone a lot, check that the form is not responsive. Also by practicing on Codepen should also know a little about CSS. Open the chrome debugger again, use the tab element and the responsive tool to edit the styles, until it’s beautiful .
summary
So I have built the alcohol content measurement website, remember to bookmark it when you need it. Through this article I also learned many things:
- Most of the articles are in English, some Vietnamese are mostly advertisements or news -> You should equip yourself with foreign language skills.
- Debugging skills with google chrome -> use the network tab, source, styles … in this article I did not go into details, hope I will have it in the next article.
- There are many free resources that are hard to learn and practice, the skill will increase rapidly. No need to register for a course or hire a tutor … There are many developers who share the knowledge everywhere for free, such as JavaScript for example.
- UI, UX are quite important to make your website successful, please leave a comment for me to improve.