_juliettech juliettech13

👩‍💻

coding & talking about it

devrel | weekly newsletter (newsletter.juliet.tech)

juliettech13 / index.js

Created July 15, 2020 04:30

animate

	const paragraph = document.querySelector('p');

	paragraph.addEventListener('click', (event) => {
	// First, we select the element we want to animate and confirm we are grabbing the right one.
	const element = event.target; // In this scenario, the target is paragraph itself.
	console.log(element); // note: this should be removed once the right element has been confirmed.

	// Then, we perform the animation we want to occur when the click event is triggered.
	element.style.color = 'red' // Add here your favorite color hehe that red one is dis.gus.ting. Don't say I didn't warn you 👀
	element.style.fontSize = '10px' // You can pass any CSS property here. Just make sure to change the property from mid-snake-case to lowerCamelCase.

juliettech13 / index.js

Created July 15, 2020 04:01

define the mission

	const paragraph = document.querySelector('p');

	paragraph.addEventListener('click', animation);

juliettech13 / index.js

Created July 15, 2020 03:54

hire the event listener

	const paragraph = document.querySelector('p');

	paragraph.addEventListener();

juliettech13 / index.html

Created July 15, 2020 03:49

	<html>
	<head>...</head>
	<body>
	....the entire body of your site....
	<script src="index.js"></script> /* this should be the last element in your body */
	</body>
	</html>

juliettech13 / index.js

Last active July 15, 2020 04:05

	let paragraph = document.querySelector('p');
	console.log(paragraph);
	// => <p>Hello World!</p>

	paragraph = document.querySelector('#bio');
	console.log(paragraph);
	// => <p id="bio">Hello World!</p>

	paragraph = document.querySelector('.text');
	console.log(paragraph);

juliettech13 / index.css

Created June 17, 2020 03:43

breakpoints

	@media only screen and (min-width: 600px) {
	.section {
	width: 80%
	}

	.social-media-list li a {
	color: pink
	}
	}

juliettech13 / index.css

Created June 17, 2020 03:04

flex-wrap

	.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
	}

juliettech13 / index.html

Created June 17, 2020 03:00

	<div class="hobbies section">
	<ul class="flex">
	<li class="flex-item">
	<img src="images/code.gif" alt="">
	<h4>Code</h4>
	<p>I like it bc I'm geeky.</p>
	</li>
	<li class="flex-item">
	<img src="images/writing.gif" alt="">
	<h4>Write</h4>

juliettech13 / style.css

Last active June 17, 2020 02:59

flexbox-justify

	.flex {
	display: flex;
	justify-content: space-between;
	}

juliettech13 / index.html

Last active June 17, 2020 02:47

	<div class="hobbies section">
	<ul class="flex">
	<li class="flex-item">
	<img src="images/code.gif" alt="">
	<h4>Code</h4>
	<p>I like it bc I'm geeky.</p>
	</li>
	<li class="flex-item">
	<img src="images/writing.gif" alt="">
	<h4>Write</h4>