exemple-code-js-design

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

    <style>
        .green {
            color: darkgreen;
        }

        .orange {
            color: orangered;
        }
        .blue {
            color: blueviolet;
        }
        .yellow {
            color: yellow;
        }

        .big {
            font-size: 5em;
        }
    </style>
<body>

    <h1 id="my-title" class="green">Carotte</h1>

    <div class="articles">
        <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
        <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
        <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
        <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit tempore id nobis dolores dolorem natus itaque, maiores tenetur, non aut corrupti odio eos. Nemo perferendis delectus tenetur laboriosam voluptatum nisi.</p>
    </div>

    <a href="#">Clique ici</a>

    <div class="article">
        <h1>Mon article de blog</h1>
    </div>

    <script>
        let title = document.getElementById('my-title');

        let paragraph = document.getElementsByClassName('paragraph');

        let link = document.getElementsByTagName('a');

        console.log(title);
        console.log(paragraph[2]);
        console.log(link);

        let pQuerySelector = document.querySelector('p.paragraph');
        console.log(pQuerySelector);

        let pQuerySelectorAll = document.querySelector('.article h1');
        console.log(pQuerySelectorAll);

        let article = document.querySelector('.article');
        console.log(article);

        pQuerySelector.innerText = 'Je modifie le DOM'

        /*
        Modification de classes
        */

        let myElement = document.getElementById('my-title');
        console.log('my-title', myElement.className);

        //let color = prompt('Quelle couleur ?')
        myElement.classList.add('orange');
        myElement.classList.remove('green');

        myElement.classList.toggle('big');

        let paragraphElement = document.querySelector('.articles');
        console.log(paragraphElement.lastChild)


    </script>
</body>
</html>