#100DaysOfWeb in Python Transcripts
Chapter: Days 25-28: JavaScript Introduction
Lecture: Day 4: simple calculator and calorie tracker
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Welcome back to the hundred days of web and day four of the JavaScript introduction. You've gone through all the videos of this lesson congratulations.
0:12
And now it's time to practice as I showed at the beginning of the lesson there are two projects you can build.
0:18
A simple calculator and a calorie counter. And all the materials is here in the demo folder of the 2528 JavaScript folder. So the calculator again
0:33
just a simple form. It can perform calculations multiple operations. And it has a bit of error handling in the sense that if you divide by zero
0:48
or you give it a different type, a string it gives infinity and none and it's colored red. By over riding the styles in the DOM.
0:57
I have provided you starter templates so we have the HTML, some CSS and even the form actually and the function you have to write.
1:09
And here we do an inline event handler. So when the user clicks the calculate button, do calculation fires and that's
1:16
the function you're going to write. The second app is the calorie counter. And its under calories, and again open index and this should work like this.
1:31
I can, there's some McDonald's foods loaded in with their calories. I can add the foods some nuggets and it's all calculated on the fly.
1:42
Of course, this seems way more involved and that's why I got you some boiler plate code. So if you go to the starter template
1:53
that nice auto complete that you say that's actually a vanilla JS auto complete plugin. And included all that code that's already written.
2:01
Then I made function stops and some of them are filled in, and some are empty and have some commands what you need to do.
2:10
And the foods are actually loaded in also. So, in scripts I actually made a Python script to scrape menu into JSON. So here's the data.
2:24
So a bunch of foods from McDonald's with their quantities and calories. And I made a script that loads in that csv and just dumps it to JSON to
2:35
food_json which is food.json and that gets loaded into the page. Again, also the auto complete and the script.js is where you actually going to write
2:50
the code and that was again the starter template. So this links to script-template.js and if you're stuck you can actually just go to script.js
3:06
and here you see the solution. So don't worry you can also just work from the solution type it over, copy it over, read it
3:15
but the main thing is to work with the code. Because that's how you really learn. So again, also link to the solutions here.
3:24
Also, these two projects are totally optional I designed them not too easy but maybe also not too hard but really tailored to
3:31
what you've learned in this lesson. Now, if you have your own projects in JavaScript you can work on today, that's awesome
3:38
and you should definitely do that. The thing is to really dedicate this day to practice as much JavaScript as you can.
3:46
Because as I always say, the learning is in the practice. Finally, we encourage you to share what you've learned
3:52
using #100daysofweb and include @talkpython and @PyBites in your tweets. Then we see your work and we're just very excited to see what you come up with
4:02
and see how you progress your hundred days. So good luck, have fun and see you in the next lesson.