Merge branch 'master' of https://github.com/talkpython/100daysofweb-with-python-course

Author: mikeckennedy

.gitignore

@@ -170,3 +170,4 @@ yahoo_clone.iml
 signup.iml
 days/013-016-css-basics/demos/selectorville/.idea/encodings.xml
 days/013-016-css-basics/demos/selectorville/.idea/selectorville.iml
+**.DS_Store

days/013-016-css-basics/your-turn/README.md

@@ -1,51 +1,55 @@
 # Days 13 - 16: CSS Basics
 
-Now you have seen the videos from this chapter, you're ready to start experimenting with HTML & HTML 5. But don't sweat the web design yet. We'll stay focused on the 90's for our sites so we get the native unstyled feel working for us.
+Now you have seen the videos from this chapter, you're ready to start exploring the world of CSS.
 
 ## Day 1: Watch the video lessons
 
 The watch the videos and keep track of where you might want to grab some examples. Remember you have everything you saw typed in the demos folder adjacent to this one if you need them.
 
-## Days 2-3: Recreate Google's homepage
+## Days 2: Play with the selectors
 
-For your hands-on exercises during this chapter, you'll do something quick and easy: recreate Google! 
+Today you get to play with CSS selectors. These are incredibly important because the way you target elements in CSS files are by specifying the selectors.
 
-While I made fun of Yahoo! for being nothing but a glamorized Yellow Pages, the tech behind Google was truly revolutionary at the time.
+Open the selector section of our demo app (from the videos). It's located adjacent to this foyer:
 
-But their web design was decidedly not special. Check it out in the way back machine (choose 1998 for your time frame):
+`013-016-css-basics/demos/selectorville/selectors.html`
 
-[https://web.archive.org/web/19981202230410/http://www.google.com/](https://web.archive.org/web/19981202230410/http://www.google.com/)
+Remember that you can just open that file directory from your hard drive.
 
-Here's the design with a few visual notes on what is required for each part of the page (yes, tables make a comeback). No really, view the source, it's tables and the center tag even!
+Use the "What can I use" dialog to find some interesting things to query and highlight. Look at the source code of the HTML file to find other interesting CSS selectors to run as well.
 
-![](./google-1998-marked-up.png)
+## Day 3: Build a nav out of a UL
 
-Your job is to recreate this home page. Feel free to save the Google logo from the way back machine for your page (right-click, save image as...). Then recreate the home page with forms and validation per the graphic above.
+In the Layout demo part of the you saw that we can convert a HTML list into a navigational element by changing the display and other CSS properties.
 
-If you are unfamiliar with HTML tables, here's a primer:
+On this day, use a similar technique to convert a list of hyperlinks into the Talk Python To Me podcast's site navigation:
 
-```
-<table border="0" width="90%">
-	<tr>
-		<td bgcolor="#EEEEEE">
-			column details here...
-		</td>
-		<td bgcolor="#EEEEEE">
-			column details here...
-		</td>
-		<td bgcolor="#EEEEEE">
-			column details here...
-		</td>
-	</tr>
-</table>
-```
+![](talk-python-nav.png)
 
+Don't worry about the big image below or the Linode ad banner. Just recreate the nav over at [https://talkpython.fm/](https://talkpython.fm/) from something like:
 
-## Day 4: Use the data model
+- TalkPython['Podcast']
+- Episodes
+- Python Courses
+- Friends of the show
+- Patreon
+- Contact
 
-Imagine Google more like it is today, with services that require a dedicated account. 
+Bonus points if you can recreate the search graphic using [font-awesome](https://fontawesome.com/icons) (as it was originally created).
 
-Extend your basic Google homepage to have a register page (link to a second HTML file). Use what you learned about input validation and HTML forms to build the nicest registration form you can without worrying about design just yet.
+## Day 4: Research Bootstrap themes
+
+While we did not have time to cover [Bootstrap](https://getbootstrap.com/) and the rich theme ecosystem, it is very helpful when building web applications and speeding up the design process.
+
+So, this day is to dream a little. Imagine some cool business or product you'd like to create some day or maybe your company is working on but has a poor design. 
+
+Then visit Wrap Bootstrap, a commercial theme site:
+
+[https://wrapbootstrap.com/](https://wrapbootstrap.com/)
+
+Yes, you would have to buy these themes, but they are often just $20 once for a whole web design. Your goal is to search around here and find 3 potential themes as the starting point for your new website for your product or service.
+
+You don't have to build anything. We just want you to get a little exposure to the idea of themes and Bootstrap.
 
 ### Time to share what you've accomplished!
 

days/013-016-css-basics/your-turn/talk-python-nav.png

@@ -0,0 +1,51 @@
+# Day 25 – JavaScript Introduction
+
+In the coming 4 days you are going to write some 'Vanilla' (pure / no frameworks) Javascript.
+
+## Day 1
+
+Watch the first 9 videos about the history of JS, how to run it and some fundamental building blocks of the language.
+
+## Day 2
+
+Check out video 10 and practice what you've learned doing 1-4 optional exercises using _control flow_, _functions_, _looping_ and _objects_. 
+
+Check them out [here](demo/language/): use the _topic.html_ files to start, and look at the _topic-solution.html_ files if you get stuck.
+
+Of course you are free to skip ahead but I recommend you at least try to code in JS a bit at this point to have the materials sink in quicker.
+
+## Day 3
+
+Watch videos 11-15 about working with the DOM (Document Object Model) - demo code [here](demo/dom) -, debugging, JS gotchas and more resources.
+
+## Day 4
+
+Check out video 16: I got two project apps you can work on today. Depending your expertise and time available, pick one or two:
+
+1. [A simple calculator](demo/calculator) -> [starter template](demo/calculator/index-template.html)
+
+2. [A calorie counter](demo/calories) -> [starter template](demo/calories/js/script-template.js)
+
+You can look at my solutions [here](demo/calculator/index.html) and [here](demo/calories/js/script.js) respectively if you get stuck.
+
+Of course these two projects are *optional*, convenient if you don't have use cases for JS yet.
+
+However if you have some front-end stuff you can work on for your own projects, feel free to do that instead.
+
+The most important is to try to put some of the JS you've learned so far into practice!
+
+---
+
+If you take this course it's likely you do some kind of web development. From full-stack developer to administrating a site, JS is an important skill to have! 
+
+So learn as much as you can these 4 days, it's effort well invested! Good luck and remember: _the learning is in the practice_.
+
+In future lessons you will build upon these skills building apps with 2 popular JS frameworks: Vue.js and React, exciting ...
+
+### Time to share what you've accomplished!
+
+Be sure to share your last couple of days work on Twitter or Facebook. Use the hashtag **#100DaysOfWeb**.
+
+Here are [some examples](https://twitter.com/search?q=%23100DaysOfCode) to inspire you. Consider including [@talkpython](https://twitter.com/talkpython) and [@pybites](https://twitter.com/pybites) in your tweets.
+
+*See a mistake in these instructions? Please [submit a new issue](https://github.com/talkpython/100daysofweb-with-python-course/issues) or fix it and [submit a PR](https://github.com/talkpython/100daysofweb-with-python-course/pulls).*

days/025-028-javascript/README.md

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>JS is Fun!</title>
+  <style>
+    body {
+      width: 800px;
+      margin: 0 auto;
+    }
+    #result {
+      font-size: 200%;
+      font-weight: bold;
+    }
+    #result, #calculateForm {
+      padding: 10px;
+      margin: 10px 0;
+      border: 1px solid #ddd;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>Basic JS Calculator</h1>
+
+  <form id="calculateForm">
+    <input id="num1">
+    <select id="operator">
+      <option name="+">+</option>
+      <option name="-">-</option>
+      <option name="*">*</option>
+      <option name="/">/</option>
+    </select>
+    <input id="num2">
+    <button type="button" id="calculate" onclick="doCalculation();">Calculate!</button>
+  </form>
+
+  <div id="result"></div>
+
+  <script type="text/javascript">
+  function doCalculation(){
+    // you code
+  }
+  </script>
+
+</body>
+</html>

days/025-028-javascript/demo/calculator/index-template.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>JS is Fun!</title>
+  <style>
+    body {
+      width: 800px;
+      margin: 0 auto;
+    }
+    #result {
+      font-size: 200%;
+      font-weight: bold;
+    }
+    #result, #calculateForm {
+      padding: 10px;
+      margin: 10px 0;
+      border: 1px solid #ddd;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>Basic JS Calculator</h1>
+
+  <form id="calculateForm">
+    <input id="num1">
+    <select id="operator">
+      <option name="+">+</option>
+      <option name="-">-</option>
+      <option name="*">*</option>
+      <option name="/">/</option>
+    </select>
+    <input id="num2">
+    <button type="button" id="calculate" onclick="doCalculation();">Calculate!</button>
+  </form>
+
+  <div id="result"></div>
+
+  <script type="text/javascript">
+  // to avoid using evil eval!
+  // https://stackoverflow.com/a/13077966
+  const math_it_up = {
+    '+': function (x, y) { return x + y },
+    '-': function (x, y) { return x - y },
+    '*': function (x, y) { return x * y },
+    '/': function (x, y) { return x / y },
+  }
+
+  function doCalculation(){
+    let operator = document.getElementById("operator").value;
+    let num1 = document.getElementById("num1").value;
+    let num2 = document.getElementById("num2").value;
+
+    let result = math_it_up[operator](parseInt(num1), parseInt(num2));
+
+    if(isNaN(result) || !isFinite(result)){
+      document.getElementById("result").style.color= "red";
+    } else {
+      document.getElementById("result").style.color= "green";
+    }
+
+    document.getElementById("result").innerHTML = result;
+  }
+  </script>
+
+</body>
+</html>

days/025-028-javascript/demo/calculator/index.html

@@ -0,0 +1,9 @@
+.autocomplete-suggestions {
+    text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
+
+    /* core styles should not be changed */
+    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
+}
+.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
+.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
+.autocomplete-suggestion.selected { background: #f0f0f0; }

days/025-028-javascript/demo/calories/README.md

@@ -0,0 +1,21 @@
+th, td {
+  text-align: left;
+}
+#logo {
+  position: relative;
+  top: 10px;
+  right: 15px;
+}
+#content-wrapper {
+  margin: 20px;
+}
+.delete {
+  background: url('../img/delete.png') no-repeat top left;
+  border: none;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+.bold {
+  font-weight: bold;
+}