aresnick · September 1, 2017 19:42
diff --git a/memory.html b/memory.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Memory demo for Molly (1 September 2017)</title>
    <style>
    body {
        margin: 0;
    }

    .memory {
        border: 1px dotted black;
        width: 100px;
        height: 100px;
        background-color: lightblue;
        float: left;
    }

    #text-display {
        position: fixed;
        height: 50vh;
        width: 100vw;
        bottom: 0;
        background-color: pink;
    }
    </style>
 </head>

 <body>
    <div id='memory-1' class='memory'>
    </div>
    <div id='memory-2' class='memory'>
    </div>
    <div id='memory-3' class='memory'>
    </div>
    <div id='memory-4' class='memory'>
    </div>
    <div id='memory-5' class='memory'>
    </div>
    <div id='memory-6' class='memory'>
    </div>
    <div id='memory-7' class='memory'>
    </div>
    <div id='text-display'>
    </div>
    <script>
    // This is the div that will display our text
    var textDisplay = document.querySelector('#text-display');

    // This is an array of all the elements with class memory
    var memories = Array.from(document.querySelectorAll('.memory'));

    // This is a dictionary with each key an id and each value the memory text I want to show
    var memoryTexts = {
        "memory-1": "This is my first memory.",
        "memory-2": "This is my second memory.",
        "memory-3": "This is my third memory.",
        "memory-4": "This is my fourth memory.",
        "memory-5": "This is my fifth memory.",
        "memory-6": "This is my sixth memory.",
        "memory-7": "This is my seventh memory.",
    };

    // This is a function which, when given an element, attaches an event listener to show our memory
    function showMemory(element) {
        // Take the element
        element.addEventListener('mouseenter', function(event) { // When the mouse enters the div
            // Create the message to display by looking at the id of the element triggering the event (event.target.id) and looking up the associated memory text in memoryTexts
            var messageToDisplay = memoryTexts[event.target.id];

            // Then put that message in our textDisplay div
            textDisplay.innerText = messageToDisplay;

            // Or if you want to type it out, 100ms at a time…
            // Array.from(messageToDisplay).forEach(function(letter, index) { // setTimeout(function() { // textDisplay.innerHTML += letter; // }, index * 100); // });

        });
    }

    // Iterate over each element in the memories array and run showMemory on it (attaching the event listener)
    memories.forEach(showMemory);
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Memory demo for Molly (1 September 2017)</title>
	<style>
	body {
	margin: 0;
	}

	.memory {
	border: 1px dotted black;
	width: 100px;
	height: 100px;
	background-color: lightblue;
	float: left;
	}

	#text-display {
	position: fixed;
	height: 50vh;
	width: 100vw;
	bottom: 0;
	background-color: pink;
	}
	</style>
	</head>

	<body>
	<div id='memory-1' class='memory'>
	</div>
	<div id='memory-2' class='memory'>
	</div>
	<div id='memory-3' class='memory'>
	</div>
	<div id='memory-4' class='memory'>
	</div>
	<div id='memory-5' class='memory'>
	</div>
	<div id='memory-6' class='memory'>
	</div>
	<div id='memory-7' class='memory'>
	</div>
	<div id='text-display'>
	</div>
	<script>
	// This is the div that will display our text
	var textDisplay = document.querySelector('#text-display');

	// This is an array of all the elements with class memory
	var memories = Array.from(document.querySelectorAll('.memory'));

	// This is a dictionary with each key an id and each value the memory text I want to show
	var memoryTexts = {
	"memory-1": "This is my first memory.",
	"memory-2": "This is my second memory.",
	"memory-3": "This is my third memory.",
	"memory-4": "This is my fourth memory.",
	"memory-5": "This is my fifth memory.",
	"memory-6": "This is my sixth memory.",
	"memory-7": "This is my seventh memory.",
	};

	// This is a function which, when given an element, attaches an event listener to show our memory
	function showMemory(element) {
	// Take the element
	element.addEventListener('mouseenter', function(event) { // When the mouse enters the div
	// Create the message to display by looking at the id of the element triggering the event (event.target.id) and looking up the associated memory text in memoryTexts
	var messageToDisplay = memoryTexts[event.target.id];

	// Then put that message in our textDisplay div
	textDisplay.innerText = messageToDisplay;

	// Or if you want to type it out, 100ms at a time…
	// Array.from(messageToDisplay).forEach(function(letter, index) { // setTimeout(function() { // textDisplay.innerHTML += letter; // }, index * 100); // });

	});
	}

	// Iterate over each element in the memories array and run showMemory on it (attaching the event listener)
	memories.forEach(showMemory);
	</script>
	</body>

	</html>
No results found