Skip to content

Instantly share code, notes, and snippets.

@dedemenezes

dedemenezes/index.html

Created April 5, 2022 22:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dedemenezes/38185d561cbb5c36efa4ba323239cbb0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dedemenezes/38185d561cbb5c36efa4ba323239cbb0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dedemenezes created this gist Apr 5, 2022.
    44 changes: 44 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Playground - JavaScript 101</title>
    </head>

    <body>
    <ul id="players"></ul>

    <p class="red">A red paragraph</p>

    <ul id="colors">
    <li class="green">Luke</li>
    <li class="red">Anakin</li>
    </ul>

    <ol id="fifa-wins">
    <li>Brazil (5 wins)</li>
    <li>Germany (4 wins)</li>
    <li>Italy (4 wins)</li>
    <li>Argentina (2 wins)</li>
    <li>Uruguay (2 wins)</li>
    </ol>


    <input name="email" id="email" value="paul@gmail.com" />

    <a href="https://www.lewagon.com" id="home">Le Wagon <em>rocks</em></a>

    <div id="user" data-uid="2471555" data-github-nickname="Papillard">
    Boris Paillard
    </div>

    <img src="https://kitt.lewagon.com/placeholder/users/monsieurpaillard" id="romain" height="200"
    alt="Romain Paillard" />
    <img src="https://kitt.lewagon.com/placeholder/users/Papillard" id="boris" height="200" alt="Boris Paillard" />

    <script src="main.js"></script>
    </body>

    </html>
    86 changes: 86 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    // Select an Element with ID
    const list = document.querySelector('#players');
    const sameListAsAboveDifferentFunctionToSelect = document.getElementById('players');
    console.log(list);
    console.log(sameListAsAboveDifferentFunctionToSelect);

    // Add an element to the list
    list.insertAdjacentHTML('beforeend', '<li>Julia</li>');
    list.insertAdjacentHTML('beforeend', '<li>Eric</li>');
    list.insertAdjacentHTML('afterbegin', '<li>Dan</li>');

    // Select multiple elements
    const colorList = document.querySelector('#colors');
    const redElementlist = colorList.querySelector('.red');
    console.log(redElementlist.innerText);


    // Select every Fifa Winner
    const countries = document.querySelectorAll('#fifa-wins li');
    console.log(countries);
    countries.forEach((country) => {
    console.log(country.innerText);
    });

    // Add a winner to the list
    // grab the list
    const countryList = document.querySelector('#fifa-wins');
    // insert the html element;
    countryList.insertAdjacentHTML('beforeend', '<li>France (2 wins)</li>');

    // Adding some style to an element
    countryList.style.display = 'none';
    countryList.style.display = '';

    // Add/Remove/Toggle the element class
    const brazil = document.querySelector('#fifa-wins > li');
    brazil.classList.add('border');
    brazil.classList.remove('border');
    brazil.classList.toggle('border');


    // grab the input VALUE
    const input = document.querySelector('#email');
    console.log(input.value);
    // Let's change the value
    input.value = 'dede@menezes.com';

    // Get the text of an element
    const home = document.querySelector('#home');
    console.log(home.innerText);
    console.log(home.innerHTML);
    console.log(home.attributes.href.value);

    // Change HTML to => Le Wagon <strong> rocks</strong>
    home.innerHTML = 'Le Wagon <strong> rocks</strong>';


    // Get info from the data of an element using DATASET!
    const boris = document.getElementById('user');
    console.log(boris.dataset.uid);
    console.log(boris.dataset.githubNickname);


    // EVENTS

    // 1. grab the element you want to listen on
    const imgTag = document.querySelector('#romain');
    console.log(imgTag);

    // 2. add the event listener
    // imgTag.addEventListener('click', (event) => {
    // console.log(event);
    // console.log(event.currentTarget);
    // event.currentTarget.classList.toggle('img-circle');
    // });


    // listening same event on multiple elements
    const images = document.querySelectorAll('img');
    images.forEach((element) => {
    element.addEventListener('click', (event) => {
    console.log(event.currentTarget);
    // debugger
    event.currentTarget.classList.toggle('img-circle');
    });
    });