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