Margarita Potylitsyna

Posted on Apr 29 • Edited on May 2

JavaScript basics for future me 👽

#javascript #webdev #beginners #programming

Get started:

Link css-stylesheet and js-file

<!-- index.html -->
<head>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <script src="index.js"></script>
</body>

Run live server:

npm install -g live-server
// then
live-server

Then open View > Developer > Developer tools > Console
Run js-file in the terminal:

node index.js

To declare a variable and print it out:

// index.js
let newVariable = "value"
console.log(newVariable)

Use const when a variable can't be reassigned:

const newVariable = "value"

To convert data and find out the type:

let myLeads = ["www.myawsomeleads.com"]
myLeads = JSON.stringify(myLeads) // converts array into string
myLeads = JSON.parse(myLeads) // converts string into array

console.log(typeof myLeads)

To create a function:

Create a button in html:

<!-- index.html -->
<button onclick="startGame()">START GAME</button>

Create a function .js file:

// index.js
function startGame() {
     // Some actions here.
}

To get element from HTML:

Assign an id to an html-element:

<!-- index.html -->
<p id="message-el">Message here</p>

Then link it to js-variable:

// index.js
let messageEl = document.getElementById("message-el")

Print a new value inside an html-element:

// index.js
let newValue = "Hi there!"
messageEl.textContent = newValue

For-loop:

To count from 1 to 100 with:

// index.js
for ( let count = 10;  count < 101;  count += 10 )  {
    console.log(count)
}

To display an array of card numbers (functions should be linked to the buttons in html-file):

let cards = [firstCard, secondCard]

function renderGame() {
  cardsEl.textContent = "Cards: " 

  for (let i = 0; i < cards.length; i++) {
      cardsEl.textContent += cards[i] + " "
  }
}

function newCard() {
    let card = getRandomCard()
    sum += card
    cards.push(card)

    renderGame()
}

Math object:

Math.random() // 0.000 - 0.999
Math.random() * 6 // 0.000 - 5.999
Math.floor(Math.random() * 6) + 1 // 1 - 6
Math.floor(3.45632) // Removes decimals. Returns 3 

totalPrice = 420.69235632455
totalPrice.toFixed(2) // Rounds to two decimals. Returns 420.69

Array methods:

let largeCountries = ["Tuvalu","India","USA","Indonesia","Monaco"]

largeCountries.pop() // delete last element of an array
largeCountries.push("Pakistan") // add element to the end
largeCountries.shift() // delete first element of an array
largeCountries.unshift("China") // add element to the beginning
console.log(largeCountries) // [ 'China', 'India', 'USA', 'Indonesia', 'Pakistan' ]

Event Listener:

Create a button in HTML with ID:

<!-- index.html -->
<button id="input-btn">SAVE INPUT</button>

Use ID in JS:

//index.js
let inputBt = document.getElementById("input-btn")

inputBt.addEventListener("click", function() {
    console.log("Button clicked from addEventListener")
})

// double clicked
inputBt.addEventListener("dblclick", function() {
    console.log("Button double clicked from addEventListener")
})

Simple challenge #1:

// The generateSentence(desc, arr) takes two parameterer: a description and an array.
// It should return a string based upon the description and array.

// Example 1: if you pass in "largest countries",and ["China", "India", "USA"],
// it should return the string: "The 3 largest countries are China, India, USA"

// Example 2:If you pass in "best fruits" and ["Apples", "Bananas"], it should return:
// "The 2 best fruits are Apples, Bananas"

// Use both a for loop and a template string to solve the challenge

function generateSentence(desc, arr) {
    let baseString = `The ${arr.length} ${desc} are `
    const lastIndex = arr.length - 1
    for (let i = 0; i < arr.length; i++) {
        if (i === lastIndex) {
            baseString += arr[i]
        } else {
            baseString += arr[i] + ", "
        }
    }
    return baseString
}

const sentence1 = generateSentence("highest mountains", ["Mount Everest", "K2"])
console.log(sentence1) // The 2 highest mountains are Mount Everest, K2

const sentence2 = generateSentence("largest countries", ["China", "India", "USA"])
console.log(sentence2) // The 3 largest countries are China, India, USA

const sentence3 = generateSentence("best fruits", ["Apples", "Bananas"])
console.log(sentence3) // The 2 best fruits are Apples, Bananas

Simple challenge #2:

// index.js
// Create a function that renders the three team images
// Use a for loop, template strings (``), plus equals (+=)
// .innerHTML to solve the challenge.

const imgs = [
    "images/hip1.png",
    "images/hip2.png",
    "images/hip3.png"
]

let containerEl = document.getElementById("container")

function renderImage() {
    let imgsDOM = ""
    for (i = 0; i < imgs.length; i++) {
        imgsDOM += `<img class="team-img" src="${imgs[i]}"></img>`
    }
    containerEl.innerHTML = imgsDOM
}

renderImage()

HTML:

<!-- index.html -->
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>The Brooklyn Agency</h1>
        <div id="container">
            <!-- <img class="team-img" src="images/hip1.png">
            <img class="team-img" src="images/hip2.png">
            <img class="team-img" src="images/hip3.png"> -->
        </div>
        <script src="index.js"></script>
    </body>
</html>

CSS:

/* index.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: whitesmoke;
    text-align: center;
    color: #130e0f;
}

h1 {
    font-weight: 200;
    letter-spacing: 2px;
}

#container {
    width: 100%;
}

.team-img {
    width: 100px;
    border-radius: 100%;
    margin: 10px;
}

DEV Community