Created
February 23, 2022 21:47
-
-
Save joelibaceta/f04a7b1ac1ecd011184346e87e28e4c9 to your computer and use it in GitHub Desktop.
Ejercicio Funciones
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#colour_container { | |
width: 150px; | |
height: 150px; | |
background-color: black; | |
} | |
.color-option { | |
width: 50px; | |
height: 50px; | |
} | |
#red { | |
/* Color de fondo: rojo */ | |
background-color: red; | |
} | |
#green { | |
background-color: green; | |
} | |
#blue { | |
background-color: blue; | |
} | |
.color-selectors { | |
display: flex; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<link rel="stylesheet" href="estilos.css" /> | |
</head> | |
<body> | |
<div id="colour_container"> | |
<!-- Cuadro de color principal --> | |
</div> | |
<div class="color-selectors"> | |
<div id="red" | |
onmouseover="selectColor(this, 'red')" | |
onmouseout="cleanColors(this)" | |
class="color-option"></div> | |
<div id="blue" | |
onmouseover="selectColor(this, 'blue')" | |
onmouseout="cleanColors(this)" | |
class="color-option"></div> | |
<div id="green" | |
onmouseover="selectColor(this, 'green')" | |
onmouseout="cleanColors(this)" | |
class="color-option"></div> | |
</div> | |
<script src="script.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function redSelected() { | |
var mainColourE = document.getElementById("colour_container") | |
mainColourE.style.backgroundColor = "red" | |
} | |
function selectColor(e, color) { | |
// Esta funcion cambia de color de fondo al el elemento | |
// identificado con el Id colour_container, el color es | |
// recibido a traves del parametro color | |
var mainColourE = document.getElementById("colour_container") | |
mainColourE.style.backgroundColor = color | |
// Otra alternativa | |
// mainColourE.style.backgroundColor = e.style.backgroundColor | |
//e.style.width = "60px"; | |
e.style.height = "60px"; | |
} | |
function cleanColors(e){ | |
var mainColourE = document.getElementById("colour_container") | |
mainColourE.style.backgroundColor = "black" | |
//e.style.width = "50px"; | |
e.style.height = "50px"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment