juliettech juliettech13

## index.js
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.

## index.js
const paragraph = document.querySelector('p');

paragraph.addEventListener('click', animation);

## index.js
const paragraph = document.querySelector('p');

paragraph.addEventListener();

## index.html
<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>

## index.js
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);

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

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

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

## index.html
 <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>

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

## index.html
<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>
	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.
	const paragraph = document.querySelector('p');

	paragraph.addEventListener('click', animation);
	const paragraph = document.querySelector('p');

	paragraph.addEventListener();
	<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>
	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);
	@media only screen and (min-width: 600px) {
	.section {
	width: 80%
	}

	.social-media-list li a {
	color: pink
	}
	}
	.flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
	}
	<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>