JavaScript - quiero crear un calendario de adviento con fotografias

quiero crear un calendario de adviento con fotografias

Publicado por Ivan (6 intervenciones) el 14/11/2022 11:41:18

Hola muy buenas,

veréis tengo intención de crear una especie de calendario de adviento como un regalo, pero en lugar de chocolates, que cada vez que abras un día sea una foto con un mensaje escrito y no se bien como aplicarlo en especial a JavaScript, si pudierais ayudarme, gracias de antemano :D

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 45

Val: 40

quiero crear un calendario de adviento con fotografias

Publicado por Marlon (90 intervenciones) el 15/11/2022 22:46:12

En que has avanzado?
Supongo que la idea es enviárselo a alguien y para eso hay dos opciones (debe haber mas, pero desconozco) la primera es subir la pagina a un host para que se pueda ver online y la segunda es que le envíes los archivos.

Muestranos que tienes hasta el momento para empezar ayudarte a partir de ahí. Saludos!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

quiero crear un calendario de adviento con fotografias

Publicado por Iván (6 intervenciones) el 21/11/2022 18:36:35

Hola buenas, antes que nada gracias por la ayuda :)

veras es mas bien la segunda opción para enviar los archivos por correo a esa persona, hasta el momento he conseguido hacer que se lean mensajes al pinchar en el botón del "día" en cuestión pero no consigo agregarle imágenes

let myCal = document.getElementById("adventCal");

let currentDate = new Date();

function Door(calendar, day) {

	this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95;

	this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.80;

	this.adventMessage = 'Day ' + day + ' of Advent\n\n' + '"' + messages[day - 1][0] + '"\n\n\t' + 'by ' + messages[day - 1][1] + '\n\n';

	this.x = ( 0.04 * calendar.width + ((day- 1) % 4) * (1.1 * this.width) );

	this.y = - ( 0.96 * calendar.height - Math.floor((day - 1) / 4) * (1.1 * this.height) );

	this.content = function() {

		let node = document.createElement("li");

		document.getElementById("adventDoors").appendChild(node);

		node.id = "door" + day;

		node.style.cssText = "width: " + this.width + "px; height: " + this.height + "px; top: " + this.y + "px; left: " + this.x + "px;";

		let innerNode = document.createElement("a");

		document.getElementById("door" + day).appendChild(innerNode);

		innerNode.innerHTML = day;

		innerNode.href = "#";

		if( ( currentDate.getMonth() + 1 ) < 12 || currentDate.getDate() < day ) {

			innerNode.className = "disabled";

			innerNode.onclick = function() {

				return false;

		} else {

			let adventMessage = this.adventMessage;

			innerNode.onclick = function() {

				alert(adventMessage);

				return false;

};

(function() {

	let doors = [];

	for(let i = 0; i < 25; i++) {

		doors[i] = new Door(myCal, i + 1);

		doors[i].content();

	return doors;

})();

Valora esta respuesta

Comentar

Pos: 45

Val: 40

quiero crear un calendario de adviento con fotografias

Publicado por Marlon (90 intervenciones) el 24/11/2022 19:19:48

Como vas, aun estas con ese proyecto?

Valora esta respuesta

Comentar

quiero crear un calendario de adviento con fotografias

Publicado por Iván (6 intervenciones) el 24/11/2022 22:52:50

Hola Marlon aun sigo liado con este proyecto, sigo buscando una manera de visualizar imagenes al pinchar en cada uno de los dias pero no se me ocurre nada

Valora esta respuesta

Comentar

Pos: 45

Val: 40

quiero crear un calendario de adviento con fotografias

Publicado por Marlon (90 intervenciones) el 25/11/2022 01:20:12

Vale, podrias pponer el codigo completo para poder probar lo que llevas. el codigo de arriba me arroja errores

tu idea es que en toda la pagina aparezca un calendario algo parecido a esto:
https://i.pinimg.com/originals/9f/98/c2/9f98c2e8e78bc0e37f88125c392d3c95.jpg

y que al dar click en cada dia salga una imagen y un mensaje, verdad?
quieres que aparezca la imagen en cada espacio del dia o solo que esta aparezca cuando se da click en el dia?
quieres que solo se puedan ver los dias que han pasado o todos al mismo tiempo?

Valora esta respuesta

Comentar

quiero crear un calendario de adviento con fotografias

Publicado por Iván (6 intervenciones) el 25/11/2022 01:31:29

si mi idea era que al dar click al dia aparezca la imagen con el mensaje, yo lo tengo programado para que solo se vean los dias que han pasado y pueda clicar en el dia en concreto

esto es el html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="utf-8">

		<title>Calendario de adviento</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" href="style.css" media="all">

	</head>

	<body>

		<header class="demo-header cf">

			<h1>Calendario de adviento</h1>

		</header>

		<div class="demo-content cf">

			<article>

				<h1>Tú propio calendario de adviento</h1>

				<img src="images/IMG_20221112_114417.jpg" alt="Advent Calendar" id="adventCal">

				<ul id="adventDoors"></ul>

			</article>

		</div>

		<script src="scripts/messages.js"></script>

		<script src="scripts/calendar.js"></script>

	</body>

</html>

y este otro archivo de JS donde almacenaba los mesajes

let messages = [

	["There is nothing in the world so irresistibly contagious as laughter and good humor.", "Charles Dickens" ],

	["Christmas, children, is not a date. It is a state of mind.", "Mary Ellen Chase"],

	["Christmas waves a magic wand over this world, and behold, everything is softer and more beautiful.", "Norman Vincent Peale"],

	["Blessed is the season which engages the whole world in a conspiracy of love.", "Hamilton Wright Mabie"],

	["A lovely thing about Christmas is that it's compulsory, like a thunderstorm, and we all go through it together.", "Garrison Keillor"],

	["Christmas is a necessity. There has to be at least one day of the year to remind us that we're here for something else besides ourselves.", "Eric Sevareid"],

	["Christmas magic is silent. You don't hear it --- you feel it, you know it, you believe it.", "Kevin Alan Milne"],

	["Never worry about the size of your Christmas tree. In the eyes of children, they are all thirty feet tall.", "Larry Wilde"],

	["Peace on Earth will come to stay, when we live Christmas every day.", "Helen Steiner Rice"],

	["What kind of Christmas present would Jesus ask Santa for?", "Salman Rushdie"],

	["Unless we make Christmas an occasion to share our blessings, all the snow in Alaska won't make it white.", "Bing Crosby"],

	["Gifts of time and love are surely the basic ingredients of a truly merry Christmas.", "Peg Bracken"],

	["The real Santa Claus is at the mall.", "Lemony Snicket"],

	["What if, doesn't come from a store. What if Christmas... perhaps... means a little bit more!", "Dr. Seuss"],

	["It was often in small moments that significant things were revealed.", "Lisa Kleypas"],

	["I wish we could put up some of the Christmas spirit in jars and open a jar of it every month.", "Harlan Miller"],

	["Christmas is not an external event at all, but a piece of one's home that one carries in one's heart.", "Freya Stark"],

	["Christmas, my child, is love in action. Every time we love, every time we give, it's Christmas.", "Dale Evans Rogers"],

	["Christmas is the keeping-place for memories of our innocence.", "Joan Mills"],

	["One can never receive enough love, nor, can they give enough. Love is the one thing we can never have enough of, nor, give too much.", "Caedem Marquez"],

	["Do give books for Christmas. They're never fattening, seldom sinful, and permanently personal.", "Lenore Hershey"],

	["Christmas works like glue, it keeps us all sticking together.", "Rosie Thomas"],

	["Christmas is a bridge. We need bridges as the river of time flows past. Today's Christmas should mean creating happy hours for tomorrow and reliving those of yesterday.", "Gladys Taber"],

	["MERRY CHRISTMAS", "hongkiat.com"],

	["MERRY CHRISTMAS", "hongkiat.com"],

];

Valora esta respuesta

Comentar

Pos: 45

Val: 40

quiero crear un calendario de adviento con fotografias

Publicado por Marlon (90 intervenciones) el 25/11/2022 05:53:51

No pude probarlo con tu código, pero te dejo un ejemplo de como yo lo haria:

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">

    <title>Document</title>

    <link rel="stylesheet" href="calendar.css">

</head>

<body>

    <div id="dayModal" class="modal">

        <div class="modal-content">

            <span class="close">&times;</span>

            <img id="img" src="" alt="image">

            <p id="message">DAY</p>

        </div>

    </div>

    <div class="calendar" id="container">

        <div id="day1" class="day">1</div>

        <div id="day2" class="day">2</div>

        <div id="day3" class="day">3</div>

        <div id="day4" class="day">4</div>

        <div id="day5" class="day">5</div>

    </div>

    <script src="calendar.js"></script>

</body>

</html>

Javascript

let modal = document.getElementById("dayModal");

let message = document.getElementById("message");

let img = document.getElementById("img");

let span = document.getElementsByClassName("close")[0];

let days = document.querySelectorAll('.day')

let counter = 0;

let mensajes = [

    '"DAY 1"',

    '"DAY 2"',

    '"DAY 3"',

    '"DAY 4"',

    '"DAY 5"'

let images = [

    "https://i.pinimg.com/564x/63/2d/2a/632d2a2919cee56dd1401bcc44459d95.jpg",

    "https://i.pinimg.com/564x/e7/8b/5d/e78b5d5321916ec581fef9e35a714b49.jpg",

    "https://i.pinimg.com/564x/af/aa/00/afaa009558098a3ad3605c1795afedd5.jpg",

    "https://i.pinimg.com/564x/8c/ac/6b/8cac6ba5333f7b12fd59fb4be06e6df5.jpg",

    "https://i.pinimg.com/564x/0a/d3/4e/0ad34e1a42aa1d488e7ab20a92280b46.jpg"

days.forEach((element, index) => {

    element.onclick = ()=>{

        modal.style.display = "block";

        message.textContent = mensajes[index];

        img.src = images[index];

});

span.onclick = function() {

  modal.style.display = "none";

CSS

.modal{

    display: none;

    position: fixed;

    z-index: 1;

    padding-top: 100px;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0,0.4);

.modal-content{

    background-color: #fefefe;

    margin: auto;

    padding: 20px;

    border: 1px solid #888;

    width: 80%;

.close{

    color: #aaaaaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

img{

    width: 400px;

p{

    font-size: 50px;

.close:hover,

.close:focus{

    color: #000;

    text-decoration: none;

    cursor: pointer;

.day{

    display: inline-block;

    background: darkgrey;

    width: 100px;

    height: 100px;

    line-height: 100px;

    text-align: center;

SALUDOS!!!!!!

Valora esta respuesta

Comentar

quiero crear un calendario de adviento con fotografias

Publicado por Iván (6 intervenciones) el 25/11/2022 11:37:06

He estado probando con tu codigo pero por algun motivo me pasa lo mismo, el mensaje se me muestra sin ningun problema pero la imagen no la carga

Valora esta respuesta

Comentar

Pos: 45

Val: 40

quiero crear un calendario de adviento con fotografias

Publicado por Marlon (90 intervenciones) el 27/11/2022 19:53:25

Te podria ayudar mejor si me muestras de que forma estas intentando cargar las imagenes....

Valora esta respuesta

Comentar

quiero crear un calendario de adviento con fotografias

Publicado por Iván (6 intervenciones) el 28/11/2022 10:55:10

Estaba intentando cargarlas desde mi propio archivo ejemplo: ("/images/foto1...") , pero era error mio lo hice de la manera que tenias puesto tu en tu codigo y si me funciona, fallo mio perdona

Valora esta respuesta

Comentar

Cómo resolver problema lógico con JavaScript

Me repite el mismo valor en campos siguientes.. Ayuda Por fa