Practice and reinforce the concepts from Lesson 2
In this activity, you will:
console.log()
to display outputprompt()
alert()
Total Time: ⏱️ 45-60 minutes
:warning: Warning DO NOT DELETE the existing files in the template:
- Package files
- Any other files you didn't create
ONLY EDIT the necessary files.
Time: ⏱️ 5 minutes
:bulb: Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.
myAge
, with the value 15console.log()
with the message as myAgeTime: ⏱️ 5 minutes
:bulb: Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.
yourAge
, but the value is taken using prompt()
, with the message "What is your age?"console.log()
with the message as yourAgeTime: ⏱️ 10 minutes
script.js
in your project<script src="script.js"></script>
before the closing </body>
tagscript.js
, declare a variable called myName
with your name as the value:
let myName = "Your Name Here";
console.log()
to display the variable:
console.log(myName);
:bulb: Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.
Time: ⏱️ 10 minutes
:emoji:️ Scenario: Imagine you're on a mountain top, shouting a message and hearing your echo reflected back!
script.js
file (just like in Exercise 1)shout
:
let shout;
shout
using the prompt()
method:
shout = prompt("You shouted:");
alert()
method to display the echo:
alert(shout);
:bulb: Tip If the prompt() and alert() don't appear, refresh your website. Sometimes browsers block pop-ups, so make sure to allow them for Stackblitz.
:bulb: Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.
Time: ⏱️ 10 minutes
:bulb: Scenario: Control the lights with boolean values!
script.js
file (just like in previous exercises)lightsOn
and set it to false:
let lightsOn = false;
console.log(lightsOn);
lightsOn = true;
console.log(lightsOn);
:bulb: Tip Boolean values are
true
orfalse
without quotes. Watch how the value changes in the console from false to true!
:bulb: Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.
Time: ⏱️ 10 minutes
:heart: Scenario: Learn about reassigning variables with a heartwarming message!
script.js
file (just like in previous exercises)favParent
:
let favParent;
prompt()
:
favParent = prompt("Who is your favourite parent?");
favParent = "It doesn't matter. I love both my parents!";
alert()
:
alert(favParent);
:bulb: Tip Notice how reassigning a variable completely replaces its original value. The user's input is replaced with the new message!
:bulb: Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.
Make sure your JavaScript Variable projects include:
myName
variable logged to console:information_source: Ready to submit? Make sure to test all your exercises first!
- Check that all console.log() outputs appear correctly
- Test all prompts and alerts
- Verify that your script files are properly linked
When you have completed your "Introduction to JavaScript" variable projects, submit them using the link below:
Having issues? Here are common problems and solutions:
:bulb: Tip Script not working?
- Make sure your
<script>
tag is placed before the closing</body>
tag- Check that the file name in your
src
attribute matches exactly (including .js extension)- Refresh the page if prompts or alerts don't appear
:bulb: Tip Console not showing output?
- Press F12 to open developer tools
- Click on the "Console" tab
- Make sure there are no red error messages
- Check your spelling of
console.log()
Great job completing this activity! You've learned the basics of JavaScript variables, user interaction, and console output. :tada: