Welcome to Discussion #2b!

Do Now: Get into your teams!

Back to index

Quick Refresher

Style elements with classes and ids

Agenda

Learn DOM manipulation with Javascript

Our activity: Task Tracker

How do I include Javascript?

Where do I put script tag?

Locating DOM Elements

Theres More!

We can manipulate HTML!

                    const para = document.getElementById('stylish-paragraph');
                    para.innerHTML = 'I say something else';
                    para.textContent = "I am a paragraph!"
                

Examples:

• innerHTML
• textContent

CSS & Event Handlers

Examples:

• onClick
• onClick anonymous fn

Toggle Classes

                    const btn = document.getElementById('btn');
                    const para = document.getElementById('p');
                    
                    btn.addEventListener('click', () => {
                        para.classList.toggle('bold');
                    });
                

Functionality and Console

                    function add(a, b) {
                        return a + b;
                    }
                    
                    console.log(add(10, 5));

                    const subtract = (a, b) => {
                        return a - b;
                    };
                    
                    console.log(subtract(9, 2));
                

Lets look!

• Console
• Function as Variable

Input elements let us create interactive UI components for the user and we can get and set the value with JavaScript

                const btn = document.querySelector('button');
                const inp = document.querySelector('#operand');

                btn.addEventListener('click', () => {
                  const num = parseInt(inp.value, 10); // .value
                  inp.value = num + num; // and it can be written!
                });
            

Activity: Shopping List

Thank you!

Other resources:

• Tim! https://160.tja.io/sp2024/week2/
• Learn JavaScript