- Fork this repository by clicking "Fork" on this page:
https://github.com/meet-projects/y2s19-js-meetx
. - In Terminal, change directory onto your Desktop:
cd ~/Desktop
- Clone the repository
y2s19-js-meetx
onto your Desktop, replacing<username>
with your Github username in the following command:$ git clone https://github.com/<username>/y2s19-js-meetx
.
- Make sure you are in the
~/Desktop/y2s19-intro-js
directory. Openvars.html
in Sublime Text (or any other text editor). Write all of your code in between the<script></script>
tags. - Use
prompt
to ask the user for the year they were born. Store this value as a Number usingparseInt
in a variable calledbirthYear
. - Ask the user for their lucky number. Store this value as a Number using
parseInt
in a variable calledluckyNumber
. - Create two
String
type variables calledfavFruit
andfavSubject
.favFruit
should contain your favorite fruit, andfavSubject
should contain your favorite subject. - Answer the following questions:
- What is the remainder when
birthYear
is divided byluckyNumber
? - What is the value of
birthYear + luckyNumber
? - What is the value of
birthYear + favSubject
? - What is the value of
favFruit + birthYear + luckyNumber
? - What is the value of
birthYear + luckyNumber + favSubject
?
- What is the remainder when
Not sure what to do? Try Googling for the following terms:
javascript string to int
, javascript variables
, javascript order of operations
- Ask the user for three things that they are excited for about MEET, separated by a comma and a space:
", "
. - Split their answer into an array using and sort the array.
- Finally, join the resulting array together with
", "
and display it on the web page withdocument.write
.
Not sure what to do? Try Googling for the following terms:
javascript split string
, javascript sort array
, javascript join array
- Let's write a guessing game! The code given to you generates a random number from 1 to 100 and stores it in a variable called
randomInt
. Using loops and conditionals, write a guessing game that does the following:- Prompt the user to guess a number.
- If their guess is greater than
randomInt
, tell them that they guessed too high. If their guess is less thanrandomInt
, tell them that they guessed to low. - If they guessed correctly, congratulate them and let them know how many guesses it took them to get the right answer.
- A palindrome is a phrase that, when only letters are kept, reads the same both forwards and backwards. For example, "Madam, I'm Adam" is a palindrome, because when only letters are kept, "madamimadam" is the same as its reverse.
- Write a function called
isPalindrome(<word>)
that returnstrue
orfalse
, depending on whether or not the argument is a palindrome, using our providedisLetter(<char>)
function. Afor
loop and learning to copy an array will be helpful too. - Prompt the user to input a phrase, and then output to the screen a message whether or not their input is a palindrome.
- Make sure you are in the
~/Desktop/y2s19-js-meetx
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/y2s19-js-meetx
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/y2s19-js-meetx
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/y2s19-js-meetx
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.