Alert
Thu Dec 08 2022 13:44:32 GMT+0000 (Coordinated Universal Time)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Alert</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 80%; width: 90%; } .alert { background-color: #ec4899; color: white; padding: 1.2rem; display: flex; justify-content: space-between; border-radius: 0.3rem; } .header-text { display: flex; gap: 0.5rem; align-items: center; font-size: 16px; font-weight: 400; } .cancel-button { display: flex; font-size: x-large; font-weight: 500; cursor: pointer; } .hidden-revert { display: none; text-transform: uppercase; font-weight: bold; background-color: #ec4899; color: #fff; border: none; outline: none; padding: 10px 15px; border-radius: 3px; cursor: pointer; } .revert { display: none; font-size: 16px; font-weight: 700; text-transform: uppercase; } .input-button { margin-top: 1.3rem; border: none; width: 2rem; background: none; } input[type='color' i] { height: 29px; cursor: pointer; } @media screen and (min-width: 900px) { .container { max-width: 60%; width: 50%; } } </style> </head> <body> <div class="container"> <div class="alert" id="alert"> <div class="header-text"> <i class="fas fa-bell"></i> <span class="bell" ><strong>Pink!</strong ><em> This is a pink alert - check it out </em></span > </div> <div class="cancel-button" id="cancel-button">×</div> </div> <button type="button" class="hidden-revert" id="revert-button"> undo changes </button> <input type="color" class="input-button" id="input-button" /> <!-- <embed type="text/html" src="snippet.html" width="500" height="200" /> --> </div> <script async> const alertBox = document.getElementById('alert'); const cancelButton = document.getElementById('cancel-button'); const revertButton = document.getElementById('revert-button'); const inputButton = document.getElementById('input-button'); function cancelAlert() { alertBox.style.display = 'none'; revertButton.style.display = 'block'; } function displayAlert() { alertBox.style.display = 'flex'; revertButton.style.display = 'none'; } function getColor() { let color = localStorage.getItem('color'); alertBox.style.backgroundColor = color; revertButton.style.backgroundColor = color; inputButton.value = color; } getColor(); function saveColor(color) { localStorage.setItem('color', color); } function changeColor(e) { saveColor(e.target.value); alertBox.style.backgroundColor = e.target.value; revertButton.style.backgroundColor = e.target.value; } inputButton.addEventListener('input', changeColor); revertButton.addEventListener('click', displayAlert); cancelButton.addEventListener('click', cancelAlert); </script> </body> </html>
Comments