Skip to content

finalized animation demo #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: pre-production
Choose a base branch
from
Open

finalized animation demo #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
36ff31b
Merge pull request #73 from bit-by-bit-coding/pre-production
devinvonarx Oct 11, 2021
252c5d4
Merge pull request #75 from bit-by-bit-coding/pre-production
JenniferYu8 Oct 13, 2021
ad4cde6
Merge pull request #77 from bit-by-bit-coding/pre-production
JenniferYu8 Oct 13, 2021
6e2e69f
Started while-loop demo
BhargavM1 Nov 14, 2021
fb11604
added do while loop
BhargavM1 Nov 16, 2021
aa0a56f
added do-while loop demo + font change
BhargavM1 Nov 16, 2021
d9a291a
Update script.js
BhargavM1 Nov 18, 2021
d97abb8
started animations demo
BhargavM1 Nov 22, 2021
e459391
finished animations demo
BhargavM1 Dec 30, 2021
ffd1712
final animations demo
BhargavM1 Jan 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 125 additions & 0 deletions animations-demo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
# interactive-tutorials Template Files

This folder is made to show what the start of an interactive tutorial might look like.
Remember, however, that a lot of creating a tutorial is creative freedom.
Thus, don't take these as hard fast rules but rather guidelines.
We want to show a uniform look in all the tutorials and so that's why this template exists.
With this said, this document will walk you through how to create your own interactive tutorial.

### Jumping In

First, we need to get the back-bone of the tutorial page.
There is an `index.html` file inside the `template` directory, this is an example of a minimal demo.
In fact, this demo isn't even functional.
With no editor, input, or real result, you'll have to add all those yourself.
To do this we need a `script.js` and some understanding of how each of the common assets work.

Let's start!
Copy the `template` folder to a new folder in the same root `interactive-demos` directory.
For our purposes, we'll call this the `test-demo`.
Then open the `index.html` file.
Inside you'll find HTML comments with the prefix `TODO:`, these point to places that need replaced.
For example, the header below the `<!-- TODO: Change the name of the demo here -->` comment should be replaced with the name of your demo.
Inside the `"content"` div there is already a few sections.
Open the page up to see what this layout produces and read the contents of each section.

### The First Common

There's already styling on the page, but how exactly does it work?
There's a `style.css` file, but this isn't our css file.
Another file, `style.scss`, is what we use to modify the styling on the page.
If you don't already know SASS, quickly read up on it [here][0].
Then, install it using the instructions [here][1].
(The best method is just using `npm install -g sass`.)

Notice the top of the `style.scss` file, `@import "../assets/common.scss";`.
This takes the common SASS file and using its styling and then overwrites them with whatever your styles are.
The `..` is there because the assets directory is one level up from where the demos are.
If you use any other assets such as CodeJar, line numbers, or the options files, don't forget this `..` before the path.

### Proper Local Development

So far, we've been viewing the file as the `index.html` file, and sometimes this is fine.
However, for the best results, we should use a local webserver.
To do this we will use `serve` on npm.
Install it using `npm install -g serve`.
Then run it using `serve` inside the `interactive-demos` directory.
It's recommended to do this in a new terminal window.
It should then start hosting a static webserver at `localhost:5000`.
When making changes to any files be sure to also reload your web view.
To stop it, press `Ctrl + C`.

### Code Editor

The code editor that the demos use is called CodeJar.
First, we must add the assets to the html file.
Add these three script tags to the bottom of the body in the `index.html` file.

```html
<script src="../assets/codejar.js"></script>
<script src="../assets/linenumbers.js"></script>
<script src="../assets/prism.js"></script>
```

The first asset, CodeJar, is the actual code editor.
We'll add the editor in a moment.
Next, `linenumbers.js` is an extension to the CodeJar library.
Finally, Prism is a code highlighting library.
We also need to add a CSS file to the head for this one to work.
The link tag should be as follows:

```html
<link rel="stylesheet" href="../assets/prism.css">
```

Take note that there is a `../assets/` preceeding each filename.
This is very important for the way the file URL's work.

Let's add an editor to the HTML page now.
To whichever section you want to make the editor section, add the class `editor-section`.
Then place another div inside of this section with the class `editor`.
Best practice is also to give the editor div an ID so that it identifiable from the script.
For the code highlighting to work, also add a language class to the editor.
This should be something like `"lang-html"` or `"lang-js"`.
The final result should look something like this:

```html
<div class="editor-section section">
<div class="editor lang-html" id="editor"></div>
</div>
```

We now add this editor as a CodeJar in the script.
First, create a `script.js` file and add it to the end of the body, after the other three script tags.
In this file, we'll create a CodeJar and test the methods of manipulating it.
First, get the div element with the class `"editor"`, in this case it has an id of `"editor"` as well.
Then pass this into the `Codejar` class constructor.
For the basic highlighting use `Prism.highlightElement`; for line numbers wrap this in the `withLineNumbers` function.
The last argument is for the options of the editor.
A final Codejar with line numbers and prism highlighting would look something like this.

```js
let editorElement = document.getElementById("editor");
let jar = CodeJar(editorElement, withLineNumbers(Prism.highlightElement, {
color: '#000',
backgroundColor: 'rgb(232, 232, 232)'
}), {
tab: ' ',
indentOn: /[\[({]$/
});
```

The last options are the tab size/character, and when to auto-indent.
For JavaScript this can be kept to default, however, for HTML it should be changed to something like `/<[a-zA-Z =\"\-]+>$/`.

There are three methods that are used on this code jar: `updateCode`, `toString`, and `onUpdate`.
First, `updateCode` takes in a string and sets the code in the editor.
The method `toString` returns a string containing the code in the editor.
Finally, `onUpdate` takes a function as the only parameter, which is called any time the code in the editor changes.

Examples of these functions being used include: an execute button that calls `toString` and passes it into the source of an iframe, auto saving 3 seconds after the last code update, and creating an animated code/result display.
All three of these examples are in the `div-demo/script.js` file.


[0]: https://sass-lang.com/guide
[1]: https://sass-lang.com/install
171 changes: 171 additions & 0 deletions animations-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html>
<head>
<!-- TODO: Change the title of the page to your demo name -->
<title>Animations Demo | Bit by Bit</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="https://bitbybitcoding.org/imgs/favicon.svg">
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7f9874946f.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header" class="flex-container-header">
<div class="flex-item-header flex-container-left">
<div class="flex-item-left">
<a href="/" style="margin-right: 1em;">
<button id="back-button" title="Back to all demos">
<i class="fas fa-arrow-left"></i>
</button>
</a>
</div>
<!-- TODO: Change the name of the demo here -->
<h1 class="flex-item-left">ANIMATIONS DEMO</h1>
</div>
<div class="flex-item-header">
<img id="bxb-logo" src="https://bitbybitcoding.org/imgs/Logo.svg" alt="Logo">
</div>
</div>
<div class="content">
<!-- TODO: Fill this content div with all the content of the demo -->
<div class="section">
<h3>Introduction</h3>
<p>

Animations are used in many T.V. shows and cartoons, and they can also be programmed in JavaScript. All you have to do is write a function, to perform a movement or change in color/shape
and call that function with an object.<br><br>

You can use animations to perform any of these:
<ul>
<li>Changing the color over a period of time.</li>
<li>Changing the position of an object.</li>
<li>Merging or seperating two objects.</li>
</ul>
</p>
</div>
<div class="section">
<h3>Properties</h3>
<p>
There are many different <span class="bold">properties</span> of animations that could be applied. The table below shows the name and purpose of a few of these properties.
</p>
<table>
<tr>
<th class="bold">Property</th>
<th class="bold">Description</th>
</tr>
<tr>
<th>@keyframes</th>
<th>Signifies the animation code</th>
</tr>
<tr>
<th>animation</th>
<th>Sets all animation properties to default</th>
</tr>
<tr>
<th>animation-delay</th>
<th>Sets delay for animation</th>
</tr>
<tr>
<th>animation-direction</th>
<th>Sets the cycle in which the animation should run</th>
</tr>
<tr>
<th>animation-duration</th>
<th>Sets the time-period for one animation cycle</th>
</tr>
<tr>
<th>animation-fill-mode</th>
<th>Sets style for animation while not running</th>
</tr>
<tr>
<th>animation-iteration-count</th>
<th>Specifies the number of times the animation should run</th>
</tr>
<tr>
<th>animation-name</th>
<th>Sets the name of the @keyframes animation</th>
</tr>
<tr>
<th>animation-play-state</th>
<th>Sets the current status of animation (playing, paused)</th>
</tr>
<tr>
<th>animation-timing-function</th>
<th>Specifies the speed of the animation</th>
</tr>
</table>
</div>
<div class="flex-box">
<div class="flex-col section">
<p>
<h2>Example 1</h2>
Press the button below and watch the BxB bot move from one side to the other. The button is linked to a function that animates the bot to move from one side to the other.
<br><br>
<button onclick="e1Example()">Animate!</button><br><br>
<img src="../assets/bit-by-bot-images/waving-happy-bot.svg" id="e1Bot" alt="BxB Bot">
</div>
<div class="flex-col section">
<p class="code">
<span class="comment">//This is the css declaration for the image of the bot. This is applied via Javascript when the button is pressed.</span><br>
#animatedBot { <br>
&emsp;width: 20%; <br>
&emsp;height: 20%; <br>
&emsp;position: relative;
&emsp;-webkit-animation:move 2.5s ease-in-out; <br>
} <br>
<br>
<span class="comment">//This is the actual animation of the bot</span> <br>
@-webkit-keyframes move { <br>
&emsp;from {<br>
&emsp;&emsp;left: 0px; <br>
&emsp;&emsp;top: 0px; <br>
&emsp;}
<br>
&emsp;to {<br>
&emsp;&emsp;left: 300px; <br>
&emsp;&emsp;top: 0px; <br>
&emsp;} <br> <br>
<span style="color:black; font-size:smaller;">*Simplified version of code</span>
</p>
</div>
</div>
<br>
<div class="flex-box">
<div class="flex-col section">
<p>
<h2>Example 2</h2>
Press the button below to watch the BxB bot appear and disappear. Animations can be also set with a <span class="bold">delay</span>, which makes them appear after a period of time.
<br><br>
<button onclick="e2Example()">Animate!</button><br><br>
Delay: <span id="e1SliderAmount"></span><input type="range" min="0.1" step="0.1" max = "10" value = "1" class="slider" id ="e2DelayValue"><br><br>
<img src="../assets/bit-by-bot-images/waving-happy-bot.svg" id="e2Bot" alt="BxB Bot">
</div>
<div class="flex-col section">
<p class="code">
<span class="comment">//This is the css declaration for the image of the bot. This is applied via Javascript when the button is pressed.</span><br>
#animatedBot { <br>
&emsp;width: 20%; <br>
&emsp;height: 20%; <br>
&emsp;position: relative; <br>
&emsp;-webkit-animation:appear 2.5 ease-in-out; <br>
&emsp;animation-delay: <span class="comment">(delay set by Javascript)</span><br>
} <br>
<br>
<span class="comment">//This is the actual animation of the bot</span> <br>
@-webkit-keyframes appear { <br>
&emsp;from {<br>
&emsp;&emsp;opacity: 0; <br>
&emsp;}
<br><br>
&emsp;to {<br>
&emsp;&emsp;opacity: 1;<br>
&emsp;} <br> <br>
<span style="color:black; font-size:smaller;">*Simplified version of code</span>
</p>
</div>
</div>
<!-- The end of the content div is here -->
</div>
<script src="script.js"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions animations-demo/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
var id = null;
function e1Example() {
var elem = document.getElementById("e1Bot");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 300) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
}
}
}

function e2Example() {
var elem = document.getElementById("e2Bot");
var delay = document.getElementById("e2DelayValue");
setTimeout(e2, delay.value*1000);
}

function e2() {
var elem = document.getElementById("e2Bot");
var opacity = 0;
clearInterval(id);
id = setInterval(frames, 100);
function frames() {
if (opacity == 1) {
clearInterval(id);
}
else {
opacity+=0.1;
elem.style.opacity = opacity;
}
}
setTimeout(e2Finish, 1000)
}

function e2Finish() {
var elem = document.getElementById("e2Bot");
elem.style.opacity = 0;
}
Loading