madbunnykim/index.html

## index.html
<html>

<head>
    <title>Strange Connection</title>
    <h1><p align=center>Strange Connection</p></h1>
</head>

<body>

    <p align=center><i>"This new dating app is a total game-changer." - The New York Times</i></p>
    <p align=center>Tired of deciding who to go on a date with based on only a few boring images? Try *Strange Connection* - a strange but real way to turn strangers into "friends".</p>
    <p align=center>Get to know more about the Bae you're interested in by one simple click.</p>
    <p align=center>
        <img id="dude01" src="/assets/dude01.png" style="width:250px;height:300px;padding:20px;">
        <img id="dude02" src="/assets/dude02.jpg" style="width:250px;height:300px;padding:20px;">
        <img id="dude03" src="/assets/dude08.jpg" style="width:250px;height:300px;padding:20px;">
        <img id="dude04" src="/assets/dude04.jpg" style="width:250px;height:300px;padding:20px;">
        <img id="dude05" src="/assets/dude05.png" style="width:250px;height:300px;padding:20px;">
        <img id="dude06" src="/assets/dude03.jpg" style="width:250px;height:300px;padding:20px;">
        <br>
    </p>

    <script src='script.js'></script>
</body>

</html>

<!-- <ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

## scripts.js
console.log('hello from script');
const synth = window.speechSynthesis;

const speak = text => {
  if (synth.speaking) {
    console.error('speechSynthesis.speaking');
    return;
  }
  let utterThis = new SpeechSynthesisUtterance(text);
  utterThis.pitch = 0.7;
  utterThis.rate = 1;
  synth.speak(utterThis);
};

document.querySelector('#dude01').onclick = () => {
  speak('Hello, I am Nick. I just turned 27 yesterday yay! I live in Hoboken and yes that is my dog Oliver.');
};

document.querySelector('#dude02').onclick = () => {
  speak('What up sexy, I am Andrew with a British accent. I just got back from the gym. Would you like to come join me in the shower? l m k');
};


document.querySelector('#dude03').onclick = () => {
  speak('My name is Dan. I graduated from London School of Economics and I am currently an Investment Banker. I am 6 feet and 6 inches tall so I get a lot of matches. Also, thats not my girlfriend, shes just a friend, wink wink!');
};

document.querySelector('#dude04').onclick = () => {
  speak('Just looking for a perfect catch! x o x o, Tyler.');
};

document.querySelector('#dude05').onclick = () => {
  speak('Ciao, I am Giuseppe and I just moved to New York with my scooter. H m u if you want a ride!');
};

document.querySelector('#dude06').onclick = () => {
  speak('Hey its Nate here. I live by the motto: the sky is the limit. The lady behind me is just a really good model friend from a campaign shoot. Cheers!');
};
	<html>

	<head>
	<title>Strange Connection</title>
	<h1><p align=center>Strange Connection</p></h1>
	</head>

	<body>

	<p align=center><i>"This new dating app is a total game-changer." - The New York Times</i></p>
	<p align=center>Tired of deciding who to go on a date with based on only a few boring images? Try Strange Connection - a strange but real way to turn strangers into "friends".</p>
	<p align=center>Get to know more about the Bae you're interested in by one simple click.</p>
	<p align=center>
	<img id="dude01" src="/assets/dude01.png" style="width:250px;height:300px;padding:20px;">
	<img id="dude02" src="/assets/dude02.jpg" style="width:250px;height:300px;padding:20px;">
	<img id="dude03" src="/assets/dude08.jpg" style="width:250px;height:300px;padding:20px;">
	<img id="dude04" src="/assets/dude04.jpg" style="width:250px;height:300px;padding:20px;">
	<img id="dude05" src="/assets/dude05.png" style="width:250px;height:300px;padding:20px;">
	<img id="dude06" src="/assets/dude03.jpg" style="width:250px;height:300px;padding:20px;">
	<br>
	</p>

	<script src='script.js'></script>
	</body>

	</html>

	<!-- <ul id="test">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	</ul>
	console.log('hello from script');
	const synth = window.speechSynthesis;

	const speak = text => {
	if (synth.speaking) {
	console.error('speechSynthesis.speaking');
	return;
	}
	let utterThis = new SpeechSynthesisUtterance(text);
	utterThis.pitch = 0.7;
	utterThis.rate = 1;
	synth.speak(utterThis);
	};

	document.querySelector('#dude01').onclick = () => {
	speak('Hello, I am Nick. I just turned 27 yesterday yay! I live in Hoboken and yes that is my dog Oliver.');
	};

	document.querySelector('#dude02').onclick = () => {
	speak('What up sexy, I am Andrew with a British accent. I just got back from the gym. Would you like to come join me in the shower? l m k');
	};


	document.querySelector('#dude03').onclick = () => {
	speak('My name is Dan. I graduated from London School of Economics and I am currently an Investment Banker. I am 6 feet and 6 inches tall so I get a lot of matches. Also, thats not my girlfriend, shes just a friend, wink wink!');
	};

	document.querySelector('#dude04').onclick = () => {
	speak('Just looking for a perfect catch! x o x o, Tyler.');
	};

	document.querySelector('#dude05').onclick = () => {
	speak('Ciao, I am Giuseppe and I just moved to New York with my scooter. H m u if you want a ride!');
	};

	document.querySelector('#dude06').onclick = () => {
	speak('Hey its Nate here. I live by the motto: the sky is the limit. The lady behind me is just a really good model friend from a campaign shoot. Cheers!');
	};