| title |
before |
folders |
after |
notes |
Set up project |
Before we get started, create some files and get ready.
|
| label |
type |
circle-mover |
folder |
|
| label |
indent |
index.html |
1 |
|
| label |
type |
indent |
css |
folder |
1 |
|
|
| label |
type |
indent |
js |
folder |
1 |
|
|
|
1. Make an `index.html` & add the boilerplate code.
2. Make a `main.css` in your `css` folder & add the boilerplate code.
3. Make an empty `main.js` in your `js` folder & connect it to your HTML.
4. Connect jQuery to your website, with the URL from [cdnjs]( https://cdnjs.cloudflare.com/).
|
| label |
text |
Naming conventions |
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). |
|
| label |
text |
HTML snippets |
Create the boilerplate with `html5`, `viewport`, `css` & `jss` |
|
| label |
text |
CSS snippets |
Create the boilerplate with `borderbox` |
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
HTML setup |
We’re going to need a couple HTML elements to make this work: a `<div>` and a `<button>`
|
html |
index.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Circle mover</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<button id="btn-right">Right</button>
<div class="ball"></div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
|
| num |
text |
11 |
The `<button>` tag should only be used for JavaScript or forms—it **does not** link to other pages. |
|
| num |
text |
12 |
We’re going to use CSS to make this `<div>` look like a circle. |
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Making a rectangle round |
With a touch of CSS we can transform the `<div>` into a circle (because that’s totally necessary).
|
css |
css/main.css |
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.ball {
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 200px;
background-color: red;
border-radius: 100px;
}
|
| num |
text |
12-14 |
Using `position: absolute` is really important here because we want to be able to the move the circle around the screen with coordinates. |
|
|
With our HTML & CSS in place, this is what we should be seeing:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Right button functionality |
Now that we have all the HTML & CSS in place we can make the button work by adding a little JavaScript.
|
js |
js/main.js |
var $ball = $('.ball');
$('#btn-right').on('click', function () {
var newLeft = $ball.offset().left + 10;
$ball.css('left', newLeft);
});
|
| num |
text |
3 |
jQuery provides a function called `on()` that allows us to listen to events.
1. The first argument is what event to listen to—in this code we’re listening to the `click` event.
2. The second argument is a function that should be executed when that event triggers.
|
|
| num |
text |
4 |
With the `offset()` function we can get the exact pixel coordinates of an element on screen. It returns the `left` and `top` positions.
Here we’re adding `10` onto the left coordinate, making it move rightwards.
|
|
| num |
text |
5 |
jQuery’s `css()` function allows us to change CSS properties and values directly, overwriting what’s inside our CSS file.
1. The first argument is the name of the property we want to change—in this code, that’s `left`
2. The second argument is the value we want to set—in this code we’re assigning a new left coordinate to the circle.
|
|
|
With a refresh in your browser you should now be able to click on the “Right” button to move the circle.
|
|
| title |
before |
Finish off the remaining buttons |
It’s time to finish of the rest of the functionality so the circle can move in all four directions.
1. Create 3 new `<button>` tags in HTML: “Left”, “Up” & “Down”.
2. Write 3 new click events in JavaScript to make the circle perform those functions.
|
|
| title |
before |
Bonus challenge |
Use a CSS property we’ve learned before—no JavaScript—to make the ball animate from position to position instead of just snapping.
|
|