portfolio website

We are working hard 👷🏼‍♂️ 🏗 🚜 to continually add more.
Please email if you have requests or questions 🙋.
Contact 👽 🛸 info below.
📬

display date

Add a js file and connect it to your html file.

Display the current date on the page.

vanilla-javascript-date

Create JS Folder

Click the add new folder button in the VS Code project sidebar.

Add a new folder named named js to your root folder.

W3 Schools CSS
Mozilla File Structure
VS Code Files and Folders
VS Code Tips and Tricks
js

Add JS File

Click the add new file button in the VS Code project sidebar.

Add a new file named named index.js to your project folder.

W3 Schools Where JS
Fileformat
js/index.js

Import JavaScript

In index.html, nest a script tag inside the body tags at the very bottom of the body.

In the script tag, set the src attribute equal to the relative path of the js file.

Here is an example script tag.

W3 Schools script tag
Mozilla script tag
<script src="./js/index.js"></script>

Here is an example of the script tag at the bottom of the body.

<body>
  <div class="page-title-wrapper">
    <img
      src="./images/main-image.png"
      alt="A street"
      class="title-image"
      height="auto"
      width="200"
    />
    <h1>Jane Doe</h1>
    <h2>Darn glad to meet you.</h2>
    <div class="links-wrapper">
      <a href="https://www.linkedin.com/company/money-club-for-makers/">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="https://github.com/thacash">
        <i class="fab fa-github"></i>
      </a>
      <a href="https://twitter.com/thacash_club">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="https://stackoverflow.com/users/19829260/maker">
        <i class="fab fa-stack-overflow"></i>
      </a>
      <a href="https://www.youtube.com/channel/UCB2UGLXI2IYuIX9QVkXB2ew">
        <i class="fab fa-youtube"></i>
      </a>
    </div>
  </div>
  
  // Script tag at the bottom of the body
  <script src="./js/index.js"></script>
</body>

Save the file.

Console Log

In js/index.js, on line 1 add the following line of code.

W3 Schools console log
Mozilla console log
Stack Overflow console log
Geeks for Geeks console log
console.log('js file connected')

Save the file and refresh index.html in the browser.

Right click the browser and select Inspector.

In the inspector, on the top click the Console tab.

Look in the console for the message 'js file connected'.

console-log-javascript

Create Date Message

In index.js, follow the instructions below to create a variable that stores a message about the current date.

Delete the console log from line 1.

On line 1, create a variable named dateMessage that stores the string "Today is".

On line 2, console log dateMessage.

Mozilla strings
W3 Schools strings
Mozilla Data Types
W3 Schools Data Types
Mozilla JS variables
W3 Schools JS variables
const dateMessage = "Today is"
console.log(dateMessage)

Save the file.

Refresh the browser.

In the browser console, look for the console log of "Today is".

Get Current Date

Delete the console log from line 2.

On line 2, create a variable named currentDate and set it equal to new Date().

On line 3, console log dateMessage.

On line 4, console log currentDate.

W3 Schools dates
W3 Schools date formats
W3 Schools date get methods
Mozilla JS dates examples
Mozilla JS dates
const dateMessage = "Today is";
console.log(dateMessage);
const currentDate = new Date();
console.log(currentDate);

Save the file.

Refresh the browser.

In the browser console, look for the following console logs.

  • Today is
  • The current date in the following format Thu Sep 01 2022 19:13:06 GMT-0500 (US Central Daylight Time)

Format Date

On line 4, refactor the code to console log the date string from currentDate using .toDateString().

Java T JS variables
Java T Data Types
Java T strings
Mozilla toDateString
const dateMessage = "Today is";
console.log(dateMessage);
const currentDate = new Date();
console.log(currentDate.toDateString());

Save the file.

Refresh the browser.

In the browser console, look for the following console logs.

  • Today is
  • The current date in the following format Thu Sep 01 2022

Concatenate Message and Date

On line 5, create a new variable named dateForDisplay.

Set it equal to the result of concatenating dateMessage and currentDate.toDateString().

On line 6, console log dateForDisplay.

W3 Schools string methods
Mozilla string operators
Mozilla useful string methods
Stack Overflow string concatenation
W3 Schools JS operators
const dateMessage = "Today is";
console.log(dateMessage);
const currentDate = new Date();
console.log(currentDate.toDateString());
const dateForDisplay = dateMessage + " " + currentDate.toDateString();
console.log(dateForDisplay);

Save the file.

Refresh the browser.

In the browser console, look for the following console logs.

  • Today is
  • The current date in the following format Thu Sep 01 2022
  • Today is Thu Sep 01 2022

Add Date HTML

In index.html, nest a new div inside of <div class="page-title-wrapper"> at the very bottom.

Set the id attribute of the new div equal to the string "displayDateDiv".

No text inside the div.

W3 Schools id attribute
W3 Schools div tag
W3 Schools strings
Mozilla browser tools
<div id="displayDateDiv"></div>

Save the file.

Refresh the browser.

Open the Inspector.

Look for the new div in the Elements tab with the id="displayDateDiv"

Get Date From DOM

In index.js, on line 8 do the following.

  • Create a new variable named displayDateDiv
  • Save to displayDateDiv the new div
  • Use the value for the id attribute to select it the newDiv

On line 9, console log the diplayDateDiv.

Here are examples of those lines of code.

W3 Schools DOM
W3 Schools document
W3 Schools document methods
Mozilla DOM
Mozilla accessing DOM
Mozilla document
const displayDateDiv = document.getElementById("displayDateDiv");
console.log(displayDateDiv);

Save the file.

Refresh the browser.

Look in the browser console for the element.

Looks like html in your js!

Display Date On Browser

In index.js, display the date on the page by doing the following.

On line 11, create a new variable named dateTextHtml.

Set it equal to a new div.

W3 Schools create element
Mozilla create element
Geeks for Geeks create element
const dateTextHtml = document.createElement("div");

Set the textContent attribute of dateTextHtml equal to dateForDisplay.

W3 Schools textContent
Mozilla textContent
dateTextHtml.textContent = dateForDisplay;

Attach dateTextHtml to displayDateDiv.

Mozilla append
Mozilla prepend
displayDateDiv.append(dateTextHtml);

Save the file.

Refresh the page.

You should see the date string on the broswer!

Position The Date

In styles.css, add position: relative to .page-title-wrapper so that you can position the date div inside of it.

W3 Schools position
.page-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  
  /* Add position relative */
  position: relative;
}

In styles.css, add the following class.

Mozilla position
.date-message {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

In index.html, apply date-message to the date div.

W3 Schools class selectors
Mozilla class selectors
<div id="displayDateDiv" class="date-message"></div>

Save all your files.

Refresh the browser.

Look for the date in the browser in the bottom right of the page.

Design The Date

In styles.css, update date-message with the following styles.

.date-message {
  position: absolute;
  bottom: 20px;
  right: 20px;
  
  /* new styles below */
  color: gray;
  font-family: monospace;
  font-size: 18px;
}

Save the file.

Refresh the browser.

Look for the new styles in the browser.

Animate Date

In styles.css, add a keyframe with animation instructions.

Put it below .date-message.

Apply the animation to any div element inside date-message.

W3 Schools animations
Mozilla animations
W3 Schools transitions
Mozilla transitions
.date-message {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: gray;
  font-family: monospace;
  font-size: 18px;
}

@keyframes text-sparkle {
  0% {
    color: gray;
  }

  25% {
    color: yellow;
  }
  50% {
    color: gray;
  }
  75% {
    color: yellow;
  }
}

.date-message > div {
  animation: text-sparkle 3s linear;
}

Save the file.

Refresh the browser.

Look for the date to change color when the page first loads.

Discussion

JavaScript is a general purpose scripting language.

One really common application of JavaScript is for building software for the browser.

Embed JavaScript in HTML

You can write JavaScript code for the browser in three main places.

One is in external .js files. Then import the .js files into the html file at the bottom of the body tag.

Another is directly in the .html files inside script tags usually embedded at the bottom of the body.

A third place to write JavaScript is in HTML tag attributes. An example is the onclick attribute.

Do not do this third one. It is bad practice to do so.

For most projects, especially larger ones, you should use external .js files instead of script tags.

It is what other developers expect, what you will find in most existing code bases you work in, and helps you stay organized and sane.

To import a .js file into an .html file, used a script tag and set the src attribute equal to the relative path of the .js file.

<script src="./js/index.js"></script>

Put the script tag at the bottom of your body tag.

Sometimes you need to put a script tag in the head tag. For instance, Google Analytics instructs you to put their script tag in the head tag. That is an exception to the general rule. Unless instructed otherwise, generally put the script tags in the bottom of the body.

If you import multiple scripts, the order matters.

The browser reads your code from top to bottom

A script tag can access the information in the script tags above - but not below.

If you see errors saying a variable or function does not exist, it may be that the object you reference in your code does not yet exist in the browser's memory.

Many examples online contain code that does not use external JavaScript files. Instead, they have JavaScript directly in the html files.

That code, however, is not reusable or as easy to maintain for larger projects. Plus, it can be less efficient for the browser.

If an example does not use an external .js file, it still may be relevant to you. It could have really good code.

Learn how to take those examples and convert the code to an external JavaScript file.

One important thing developers do is write comments in their code.

Comments are used as notes to developers explaining the code.

The browser does not execute comments.

Variables

A variable stores data in memory.

You can create variables whenever you want.

You have three different ways to make variables, two of which are more common than the third.

All three ways use a keyword to kickoff variable create.

  • const is the keyword that creates a variable whose value cannot be changed
  • let creates a variable whose value can be changed
  • var also creates a variable whose value can be changed

Here are examples.

const constantVariable = 10
let variableLet = 11
var variableVar = 12

The difference between let and var is how they are scoped, where let is scoped to the most recent block and var to the most recent function.

In general, use let instead of var unless you have a compelling reason. It is the more modern solution and was introduced to help avoid bugs caused by var.

You will see examples online using var. It existed before const and let, and sometimes it is the right solution for the context of that example.

But you should convert the var variables you find online to const and let unless you need var.

After declaring a variable with a keyword, you need to name it.

The memory uses the varibale name to keep track of which variable is storing which information.

Good naming is really important. It helps your code tell a story.

When you read it later or when someone else reads it for the first time, good names should bring your code to life.

Just from reading the code, you should know what it does based on the naming.

Here are some tips to help you practice good naming.

  • Use camelCase
  • Names for non-functional code should be nouns
  • Use short, unique, descriptive name
  • Function names should start with verbs
  • Put the data type in the name (e.g., const usersArray = [])

After the keyword and name comes a single = sign followed by the value. Save pretty much anything to variables.

Here are common examples.

  • Numbers
  • Strings
  • Booleans
  • Arrays
  • Objects
  • Function definitions
  • Function calls
  • Html elements

You see == and === in code, as opposed to =. Double and triple equal signs are for comparing values, whereas a single equal sign is for setting a variable equal to a value.

After saving data in memory, you can interact with it.

The variable represents that thing in memory, so the variable can do the same things the underlying data can do.

Using an html element as an example, after saving the element to a variable, you can access any of the HTML element's attributes.

It is as if the variable is the HTML element.

And the best is that is in your JavaScript file!

Here are some common things you can do with HTML elements inside JavaScript after saving it to a variable.

  • Set the element's text
  • Listen for events that trigger functions when that event happens, like a click, input, scroll or other
  • Enable and disable buttons
  • Record user's input into a form
  • Change styles by adding and removing items from the element's classList
  • Create HTML elements from scratch and add them to the DOM
  • And so much more

Data Types

The data in your application exists as one of several data types.

The data type determines the properties and functionality for the underlying data.

The common data types in JavaScript are the following.

  • Numbers
  • Strings
  • Booleans
  • Arrays
  • Objects

Visit W3Schools for examples.

It is the enclosures and syntax for the data that determines its type.

Here are two examples.

Strings are enclosed with quotes. Inside the quotes can be zero or more characters.

const exampleString = "This is a string."

Numbers are integers or decimal numbers not enclosed in quotes.

const exampleNumber = 10

Based on the enclosures you use, that is what determines the properties and functionality for that data.

For instance, strings have a length property. The length of a string is the number of characters inside the quotes.

In contrast, numbers do not have a length property.

Strings have built-in functionality for changing the text to all uppercase or all lowercase.

In constrast, numbers do not. You can, however, perform math with numbers but not with strings.

Here is a list of the common data types with brief explanations and links to help you understand how they work.

String

Number

Boolean

Array

Object:

Other values to know about.

  • undefined: variable defined but has no value
  • null: variable does not exist

You can use typeof to find the type of a variable

const itemOne = "a phrase or something like that"
console.log(typeof itemOne)

The browser console will tell you it is a string.

Last updated Oct 3, 2022 at 10:35