DAED daedsoft

## stilos.css
.alert{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #633100;
    border-radius: 8px;
    box-shadow: 0 0 30px #ccc;
}

## alert.js
let alertTemplate = document.querySelector('#alertTemplate').content
let alert = alertTemplate.cloneNode(true)
alert.querySelector('#alertTitle').textContent = "Mi título para el Alert"
alert.querySelector('#alertBody').textContent = "Mi mensaje para el Alert"
document.querySelector('body').append(alert)
alert = document.querySelector('#alert')
// click en Si
alert.querySelector('#alertBtnSi').addEventListener('click', () => {
    // aquí acciones al hacer clic en si
    alert.remove()

## component.html
<template id="alertTemplate">
    <div class="alert" id="alert">
        <div class="alert__title">
            <p id="alertTitle">Título</p>
        </div>
        <div class="alert__body">
            <p id="alertBody">Mensaje</p>
        </div>
        <div class="alert__btns">
            <button type="button" id="alertBtnSi" class="input-btn">Si</button>

## CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: center;
    height: auto;

## HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script defer src="./script.js"></script>
    <title>CARROUSEL</title>

## JS
const accordionHeader = document.querySelectorAll(".accordion__header")

for (let i = 0; i < accordionHeader.length; i++) {
    accordionHeader[i].addEventListener("click", function() {
        accordionHeader[i].classList.toggle("rotate")
        accordionHeader[i].classList.toggle("rounded-all")
        accordionHeader[i].nextElementSibling.classList.toggle("hidden")
    })
}

## CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ddd3ca;
}

## HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script defer src="./script.js"></script>
    <title>ACCORDION</title>

## JS
const btnHideShow = document.getElementById('btnHideShow')
const userName = document.getElementById('name')
const userAccount = document.getElementById('account')
const userExpires = document.getElementById('expires')

let userName_init = userName.textContent
let userAccount_init = userAccount.textContent
let userExpires_init = userExpires.textContent

let hidden = false

## CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #F2F2F2;
}
	.alert{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border: 1px solid #633100;
	border-radius: 8px;
	box-shadow: 0 0 30px #ccc;
	}
	let alertTemplate = document.querySelector('#alertTemplate').content
	let alert = alertTemplate.cloneNode(true)
	alert.querySelector('#alertTitle').textContent = "Mi título para el Alert"
	alert.querySelector('#alertBody').textContent = "Mi mensaje para el Alert"
	document.querySelector('body').append(alert)
	alert = document.querySelector('#alert')
	// click en Si
	alert.querySelector('#alertBtnSi').addEventListener('click', () => {
	// aquí acciones al hacer clic en si
	alert.remove()
	<template id="alertTemplate">
	<div class="alert" id="alert">
	<div class="alert__title">
	<p id="alertTitle">Título</p>
	</div>
	<div class="alert__body">
	<p id="alertBody">Mensaje</p>
	</div>
	<div class="alert__btns">
	<button type="button" id="alertBtnSi" class="input-btn">Si</button>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	.container {
	display: flex;
	justify-content: center;
	height: auto;
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./style.css">
	<script defer src="./script.js"></script>
	<title>CARROUSEL</title>
	const accordionHeader = document.querySelectorAll(".accordion__header")

	for (let i = 0; i < accordionHeader.length; i++) {
	accordionHeader[i].addEventListener("click", function() {
	accordionHeader[i].classList.toggle("rotate")
	accordionHeader[i].classList.toggle("rounded-all")
	accordionHeader[i].nextElementSibling.classList.toggle("hidden")
	})
	}
	const btnHideShow = document.getElementById('btnHideShow')
	const userName = document.getElementById('name')
	const userAccount = document.getElementById('account')
	const userExpires = document.getElementById('expires')

	let userName_init = userName.textContent
	let userAccount_init = userAccount.textContent
	let userExpires_init = userExpires.textContent

	let hidden = false