- Fork this repository by clicking "Fork" on this page:
https://github.com/meet-projects/y2s18-jquery-1
.
- In Terminal, change directory onto your Desktop:
cd ~/Desktop
- Clone the repository
y2s18-jquery-1
onto your Desktop, replacing<username>
with your Github username in the following command:$ git clone https://github.com/<username>/y2s18-jquery-1
.
- Make sure you are in the
~/Desktop/y2s18-jquery-1
directory. Openstyle/style.html
in Sublime Text (or any other text editor). - Find out how to use CSS to rotate elements with this W3schools article.
- Open
style.js
in Sublime Text. Use JQuery to change the style of the MEET logo:- Finish the function
updateSize
. You should set the width of the the MEET logo to equalnewSize
in pixels. - Finish the function
updateLeftPosition
andupdateTopPosition
functions.
- Finish the function
- If you finished, get checked off by a TA or instructor. Nice job!
- Make sure you are in the
~/Desktop/y2s18-jquery-1
directory. Openevents/events.html
in Sublime Text (or any other text editor). - Open
events.html
in Sublime Text.- Notice that there is a button with an id of
moveButton
on the page. - Notice that there is a paragraph with an id of
message
on the page.
- Notice that there is a button with an id of
- Open
events.css
in Sublime Text.- Notice that
#message
hasposition: fixed
. This means that you can move the paragraph inevents.html
around easily.
- Notice that
- Edit
events.js
in Sublime Text. Using jQuery, add code so that whenmoveButton
is clicked, themessage
paragraph moves to a random place on the screen. We have provided helper functionsrandomX()
andrandomY()
, which return random X and Y positions on the screen. - If you finished, get checked off by a TA or instructor. Nice job!
- Make sure you are in the
~/Desktop/y2s18-jquery-1
directory. Opencontent/content.html
in Sublime Text (or any other text editor). - Open
content.js
in Sublime Text. - Add code to
content.js
so that every time the "Increment" button is pressed, the counter increases by1
. - Add code to
content.js
so that when the "Reset" button is pressed, the counter is reset back to0
. - If you finished, get checked off by a TA or instructor. Nice job!
- Make sure you are in the
~/Desktop/y2s18-jquery-1
directory. Openclasses/classes.html
in Sublime Text (or any other text editor). - Using Sublime Text, add three buttons to
classes.html
.- The first button should have id of
bigButton
and withBIG Button
written on it. - The second button should have id of
hideButton
and withHIDE Button
written on it. - The third button should have id of
rotateButton
and withROTATE Button
written on it.
- The first button should have id of
- Using Sublime Text, edit
classes.css
. Finish the.big
CSS rule. Any element with the class ofbig
should have the following style (use Google if you don't know how to use any of these styles):- Font size of 72pt.
- All letters uppercase.
- Bold.
- Using Sublime Text, edit
classes.css
. Finish the.hidden
CSS rule. Any element with the class ofhidden
should not appear on the screen. - Find out how to use CSS to rotate elements with this W3schools article if you don't know how to do so already.
- Using Sublime Text, edit
classes.css
. Finish the.rotated
CSS rule. If elements have therotated
class, they should be rotated 180 degrees. - Using Sublime Text, edit
classes.js
.- Write code so that when I click
BIG Button
, themessage
paragraph inclasses.html
gets the classbig
. - Write code so that when I click
HIDE Button
, themessage
paragraph inclasses.html
gets the classhidden
. - Write code so that when I click
ROTATE Button
, themessage
paragraph inclasses.html
gets the classrotated
.
- Write code so that when I click
- If you finished, get checked off by a TA or instructor. Nice job!
- We created the sliders for you. Use Google to figure out how to use and make HTML Sliders yourself.
- Use Google to find the different between
oninput
andonchange
. - Use Google to figure out how to use jQuery to get the value of an
input
element. Use this to create three sliders that change the background color of your web page.
- Use Google to figure out how the
Math.random
function works. - Once you are confident you understand how the
Math.random
function works, change the color of themessage
to a random color every time the button is pressed.
- Use Google to find how to add and delete elements to your web page using JQuery.
- Implement a simple to-do list application. The user should be able to add items to do by clicking an "Add" button, and delete items once they have finished them with a "Finished" button.
- Create a dropdown menu using jQuery. Use this link to help you get started, but note that they do not use jQuery. Make sure you use jQuery in your version.
- CSS Rotate: https://www.w3schools.com/cssref/css3_pr_transform.asp
- JavaScript
onchange
event: https://www.w3schools.com/jsref/event_onchange.asp - JQuery
.val()
: http://api.jquery.com/val/