{"id":1505,"date":"2024-10-18T14:46:10","date_gmt":"2024-10-18T17:46:10","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1505"},"modified":"2024-10-18T14:48:58","modified_gmt":"2024-10-18T17:48:58","slug":"resumo-da-live-tiktok-18-10-2024","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1505","title":{"rendered":"Resumo da Live TikTok 18\/10\/2024"},"content":{"rendered":"\n

Ol\u00e1 Pessoal! <\/p>\n\n\n\n

Na Live do dia 18\/10\/2024 trabalhamos com mini projeto utilizando o HTML CSS e JavaScript.<\/p>\n\n\n\n

<\/p>\n\n\n\n

HTML \n\n<!DOCTYPE html>\n<html lang=\"pt-br\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n    <title>L\u00e2mpada<\/title>\n<\/head>\n<body>\n    \n    <main>\n        <div>\n\n            <img src=\".\/img\/desligada.png\" \n            alt=\"L\u00e2mpada\" id=\"lamp\" >\n\n        <\/div>\n\n        <div>\n            <button id=\"turnOn\">Ligar<\/button>\n            <button id=\"turnOff\">Desligar<\/button>\n        <\/div>\n\n\n    <\/main>\n\n    <script src=\"lampada.js\"><\/script>\n\n<\/body>\n<\/html>\n\nCSS\n\nbody{\n    font-family:Arial, Helvetica, sans-serif;\n    background-color: #111;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100vh;\n    margin: 0;\n    transition: background-color 0.5s;\n}\n\nbody.lampada-ligada{\n    background-color: #f0f0f0;\n}\n\nbody.lampada-desligada{\n    background-color: #111;\n}\n\nmain{\n    border-radius: 15px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0.7);\n    margin-top: 40px;\n    padding: 30px;\n    text-align: center;\n\n}\n\nimg{\n\n    width: 150px;\n    height: auto;\n    margin: 20px 0;\n    transition: transform 0.2s;\n}\nbutton{\n\n    background-color: #ff4081;\n    border: none;\n    color: white;\n    padding: 15px 25px;\n    text-align: center;\n    text-decoration: none;\n    display: inline-block;\n    font-size: 18px;\n    margin: 5px;\n    border-radius: 5px;\n    cursor: pointer;\n    transition: bachaground-color 0.3s, transform 0.2s;\n    box-shadow: 0 4px 10px rgba(255, 64, 129, 0.5);\n\n}\n\nbutton:hover{\n    background-color: #e91e63;\n    transform: scale(1.1);\n}\n\n.lampada-ligada{\n\n    border: 5px solid #FFD700;\n    box-shadow: 0 0 15px #FFD700;\n}\n\n\n.lampada-desligada{\n    border: 5px solid #555;   \n}\n\n.lampada-quebrada{\n\n    border: 5px solid #FF0000;\n    animation: shake 0.5s;\n}\n\n@keyframes shake {\n\n0% {  transform: translate(0); }\n25% { transform: translate(-5px);}\n50% { transform: translate(5px);}\n75% { transform: translate(-5px);}\n100% { transform: translate(0);}\n\n}\n\nJAVASCRIPT\n\nconst turnOn = document.getElementById('turnOn');\nconst turnOff = document.getElementById('turnOff');\nconst lamp = document.getElementById('lamp');\n\n\nfunction isLampBroken(){\n\n    if( lamp.src.indexOf('quebrada') > -1 ){\n\n        return true;\n    }else{\n        return false;\n    }\n}\n\nfunction lampOn(){\n    if(!isLampBroken()){\n\n        lamp.src = ' .\/img\/ligada.png';\n        lamp.className = 'lampada-ligada';\n        document.body.classList.add('lampada-ligada');\n        document.body.classList.remove('lampada-desligada');\n    }\n}\n\nfunction lampOff(){\n    if(!isLampBroken()){\n\n        lamp.src = '.\/img\/desligada.png';\n        lamp.className = 'lampada-desligada';\n        document.body.classList.add('lampada-desligada');\n        document.body.classList.remove('lampada-ligada');\n    }\n}\n\nfunction lamBroken(){\n    lamp.src = '.\/img\/quebrada.png'; \n    lamp.className = 'lampada-quebrada';\n    document.body.classList.remove('lampada-ligada', 'lampada-desligada');\n}\n\n\nturnOn.addEventListener('click', lampOn); \nturnOff.addEventListener('click', lampOff); \n\nlamp.addEventListener('mouseover', lampOn);\nlamp.addEventListener('mouseleave', lampOff);\nlamp.addEventListener('dblclick', lamBroken);<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
https:\/\/go.hotmart.com\/V89811082M?dp=1<\/a><\/p>\n\n\n\n
https:\/\/go.hotmart.com\/X90111663X?dp=1<\/a><\/p>\n\n\n\n
\n\n\n\n
HOR\u00c1RIO DAS LIVES<\/strong><\/p>\n\n\n\n
Domingo e Segunda \u00e0s 19:00hs<\/p>\n\n\n\n
Quarta \u00e0s 18:00hs<\/p>\n\n\n\n
Quinta e Sexta \u00e0s 9:30hs<\/p>\n","protected":false},"excerpt":{"rendered":"
Ol\u00e1 Pessoal! Na Live do dia 18\/10\/2024 trabalhamos com mini projeto utilizando o HTML CSS e JavaScript. https:\/\/go.hotmart.com\/V89811082M?dp=1 https:\/\/go.hotmart.com\/X90111663X?dp=1 HOR\u00c1RIO DAS LIVES Domingo e Segunda \u00e0s 19:00hs Quarta \u00e0s 18:00hs Quinta e Sexta \u00e0s 9:30hs<\/p>\n","protected":false},"author":1,"featured_media":1097,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1505"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1505"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1505\/revisions"}],"predecessor-version":[{"id":1507,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1505\/revisions\/1507"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/1097"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}