Skip to content

Commit 9d782ba

Browse files
linda-lailinda-lai
committed
Initial commit
0 parents  commit 9d782ba

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+2716
-0
lines changed

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.idea/
2+
.vscode/launch.json
3+
# Mac related system files
4+
.DS_Store
5+
_site
6+
Gemfile.lock

‎Gemfile‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
source "https://rubygems.org"
2+
3+
# Hello! This is where you manage which Jekyll version is used to run.
4+
# When you want to use a different version, change it below, save the
5+
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
6+
#
7+
# bundle exec jekyll serve
8+
#
9+
# This will help ensure the proper Jekyll version is running.
10+
11+
12+
group :jekyll_plugins do
13+
gem 'jekyll-livereload'
14+
gem "github-pages"
15+
end
16+
17+
gem "json"
18+
19+
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
20+
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Muses Code JS - Australia
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Intro to JavaScript
2+
3+
<img width="300" src="assets/logo.png" />
4+
5+
An introductory ES6 workshop for beginners.
6+
7+
## Getting Started
8+
9+
If you are familiar with Git, you can clone this repository to your machine.
10+
11+
If you don't know what Git is, relax. You can easily download the folder on your machine - go to green `Clone or download` button in the top right corner and click `Download Zip`.
12+
13+
![Download Intro to JS tutorial](/assets/download-tutorial.png)
14+
15+
Unzip (extract) and open the folder, don't open files inside the .zip.
16+
17+
Start from the `README.md` file, then read the `Getting Started` section to begin.
18+
19+
To see the web-page in your browser, open `muses-code-website/index.html` by double clicking on it; if you see an option to 'open in browser' then choose that. Preferably use Chrome, but Firefox and Safari will work as well.
20+
21+
Follow the instructions given in each step and type code in your text editor (this is where your code lives and you can write, edit and delete code).
22+
23+
In order to see anything that you edit, you need to save the file and refresh the web page. The result of any `console.log()` statement will be in the _browser console_.
24+
25+
### How to open the `Browser Console`
26+
27+
| Browser | Platform | Instruction |
28+
| --- | --- | --- |
29+
| **Chrome** | Any | right-click the page and select `Inspect`, switch to `Console` tab in the developer tools |
30+
| **Chrome** | Mac | press `COMMAND + OPTION + J` |
31+
| **Chrome** | Windows | press `CONTROL + SHIFT + J` |
32+
| **Firefox** | Any | right-click the page and select `Inspect Element`, switch to `Console` tab |
33+
| **Firefox** | Mac | press `COMMAND + OPTION + K` |
34+
| **Firefox** | Windows | press `CONTROL + SHIFT + K` |
35+
| **Safari** | Mac | go to the menu bar and open `Safari > Preferences > Advanced >` and tick the box `Show Develop Menu` at the bottom, restart Safari, now you can right-click on the page and select `Inspect Element` to see the console. |
36+
| **Safari** | Mac | press `COMMAND + OPTION + C` |
37+
38+
The console/developer tools will appear at the bottom or on the right side of the screen.
39+
40+
You can write JavaScript code directly into the browser console and see the result straight away, but as soon as you refresh the page all the code will be gone, this is why we use a text editor in order to save our code.
41+
42+
## Structure
43+
44+
Inside this project you will find the `muses-code-website` folder. We will be editing the contents of this folder during the workshop. In the folder you will see three files:
45+
- `index.html` - a file that is responsible for the structure of our project
46+
- `style.css` - a file that is responsible for styles and how our project looks on the web
47+
- `script.js` - a file that makes our project work, it defines content and makes a static page functional
48+
49+
We will be making changes to the `script.js` file.
50+
51+
Our project also contains:
52+
- `README.md` - a file with explanations and any information about the project, how to run it, what it is for etc
53+
- `cheat-sheet.md` - a file with a quick overlook for key namings and their explanations
54+
55+
56+
🚦 Ready? Set. Go!
57+
58+
### To run locally
59+
Unless you want to run the [Intro to JS tutorial](https://muses-code-js.github.io/intro-to-es6-melbourne/) locally instead of online version to make changes to it, you do not need to follow the steps below to do the workshop.
60+
61+
1. [Install Ruby v2](https://www.ruby-lang.org/en/documentation/installation/) if you don't already have it.
62+
63+
2. Install bundler:
64+
```
65+
gem install bundler
66+
```
67+
3. Install Ruby dependencies:
68+
```
69+
bundle install
70+
```
71+
72+
4. Then, run Jekyll command to serve the website locally on http://127.0.0.1:4000:
73+
```
74+
bundle exec jekyll serve
75+
```

‎_config.yml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Welcome to Jekyll!
2+
#
3+
# This config file is meant for settings that affect your whole blog, values
4+
# which you are expected to set up once and rarely edit after that. If you find
5+
# yourself editing this file very often, consider using Jekyll's data files
6+
# feature for the data you need to update frequently.
7+
#
8+
# For technical reasons, this file is *NOT* reloaded automatically when you use
9+
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
10+
11+
# Site settings
12+
# These are used to personalize your new site. If you look in the HTML files,
13+
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
14+
# You can create any custom variable you would like, and they will be accessible
15+
# in the templates via {{ site.myvariable }}.
16+
title: "Muses Code JS"
17+
workshopname: "Intro to ES6"
18+
email: melbourne@musescodejs.org
19+
description: > # this means to ignore newlines until "baseurl:"
20+
This is an introductory workshop for ES6.
21+
baseurl: "/intro-to-es6" # the subpath of your site, e.g. /blog
22+
url: "https://muses-code-js.github.io" # the base hostname & protocol for your site, e.g. http://example.com
23+
24+
# Build settings
25+
markdown: kramdown
26+
# theme: muses-code-js
27+
28+
collections:
29+
steps:
30+
output: true
31+
challenges:
32+
output: true
33+
34+
challenge_separator: "<!--BREAK-->"
35+
challenge_difficulties:
36+
- NONE
37+
- Minor tweak of existing feature
38+
- Adding new code derived from existing features
39+
- Expands on existing concepts
40+
- Introduces multiple new concepts
41+
- Multiple new concepts. Might need to some research.
42+
43+
plugins:
44+
- jekyll-feed
45+
- jemoji
46+
47+
exclude:
48+
- Gemfile
49+
- Gemfile.lock
50+
51+
theme: jekyll-theme-cayman

‎_includes/footer.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<footer class="site-footer">
2+
3+
<div class="wrapper">
4+
5+
<div class="social-media centered">
6+
<ul>
7+
<li>
8+
<i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp;
9+
<a href="https://musescodejs.org/" target="_blank">musescodejs.org</a>
10+
</li>
11+
<li>
12+
<i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;
13+
<a href="mailto:info@musescodejs.org">info@musescodejs.org</a>
14+
</li>
15+
</ul>
16+
<ul>
17+
<li>
18+
<i class="fa fa-facebook" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;
19+
<a href="https://www.facebook.com/MusesCodeJS" target="_blank">facebook.com/MusesCodeJS</a>
20+
</li>
21+
<li>
22+
<i class="fa fa-github-alt" aria-hidden="true"></i>&nbsp;&nbsp;
23+
<a href="https://github.com/muses-code-js" target="_blank">github.com/muses-code-js</a>
24+
</li>
25+
<li>
26+
<i class="fa fa-twitter" aria-hidden="true"></i>&nbsp;&nbsp;
27+
<a href="https://twitter.com/MCJSMelb" target="_blank">twitter.com/MCJSMelb</a>
28+
</li>
29+
</ul>
30+
</div>
31+
32+
</footer>

‎_includes/google-analytics.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script>
2+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
3+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
4+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
6+
7+
ga('create', '{{ site.google_analytics }}', 'auto');
8+
ga('send', 'pageview');
9+
10+
</script>
11+

‎_includes/head.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<head>
2+
<meta charset="utf-8">
3+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
6+
<title>{{ site.workshopname | escape }}: {% if page.title %}{{ page.title | escape }}{% endif %}</title>
7+
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
8+
<link rel="icon" type="image/x-icon" href="/express-workshop-2/favicon.ico" />
9+
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
11+
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
12+
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
13+
14+
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
15+
<script>
16+
$(document).ready(function(){
17+
$('div.solution').each( function(){
18+
$(this).prepend('<h5 class="toggle hiding"><i class="fa fa-chevron-up" aria-hidden="true"></i> Click to <span class="action"></span> solution</h5>');
19+
});
20+
$('div.solution .highlight').first().addClass('hidden');
21+
$('h5.toggle').click(function(e){
22+
$(this).parent().children('.highlight').first().slideToggle('show');
23+
$(this).toggleClass('showing');
24+
$(this).toggleClass('hiding');
25+
$(this).children('i.fa').toggleClass('fa-chevron-up');
26+
$(this).children('i.fa').toggleClass('fa-chevron-down');
27+
28+
});
29+
});
30+
</script>
31+
{% if jekyll.environment == 'production' and site.google_analytics %}
32+
{% include google-analytics.html %}
33+
{% endif %}
34+
</head>

‎_includes/header.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<header class="site-header" role="banner">
2+
3+
<div class="wrapper">
4+
{% assign default_paths = site.pages | map: "path" %}
5+
{% assign page_paths = site.header_pages | default: default_paths %}
6+
<a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }} <small>{{ site.workshopname | escape }}</small></a>
7+
8+
{% if page_paths %}
9+
<nav class="site-nav">
10+
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
11+
<label for="nav-trigger">
12+
<span class="menu-icon">
13+
<svg viewBox="0 0 18 15" width="18px" height="15px">
14+
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
15+
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
16+
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
17+
</svg>
18+
</span>
19+
</label>
20+
21+
<div class="trigger">
22+
<a class="page-link" href="{{ '/' | relative_url }}">Home</a>
23+
<a class="page-link go-link" href="{{ 'step1/' | relative_url }}"><i class="fa fa-rocket" aria-hidden="true"></i> Start</a>
24+
</div>
25+
</nav>
26+
{% endif %}
27+
</div>
28+
</header>

‎_includes/icon-github.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>

0 commit comments

Comments
 (0)