Skip to content

add color triggers #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ramizhajj1 wants to merge 14 commits into
base: main
Choose a base branch
from
Open

add color triggers #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
82683b5
Update README.md
mho04 Jun 8, 2024
b0ba213
Update index.html
mho04 Jun 8, 2024
3f68e62
Update speechSynth.html
mho04 Jun 8, 2024
882a38e
Update speechSynth.html
mho04 Jun 8, 2024
7f4d783
Update index.html
mho04 Jun 8, 2024
fd9c7fa
Update index.html
mho04 Jun 8, 2024
072f330
Update speechSynth.html
mho04 Jun 8, 2024
38a81d5
adding tag
mho04 Jun 8, 2024
59e6629
adding tag
mho04 Jun 8, 2024
020fefc
google manager tag
mho04 Jun 9, 2024
60eae57
google manager tags
mho04 Jun 9, 2024
b64eb61
add screenshot
mho04 Jun 10, 2024
d3461da
tag placement changed
mho04 Jun 11, 2024
f916aa9
Add trigger to switch color
ramizhajj1 Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
# Lab 10 - Starter
https://cse110-lab10-mho004.canny.io/
54 changes: 53 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,24 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Lab 10 - Return of the Party Horn</title>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Y2QECXRNJJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-Y2QECXRNJJ');
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- JS Confetti -->
<script src="assets/scripts/js-confetti.browser.js"></script>

Expand All @@ -17,6 +35,11 @@
</head>

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-54SC3SNQ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<header>
<nav>
<a href="speechSynth.html" title="Go to speech synthesizer">Speech Synthesizer</a>
Expand All @@ -42,6 +65,35 @@ <h2>Return of the Party Horn</h2>
<audio class="hidden" src=""></audio>
</section>
</main>

<script>
// Generate a random number between 0 and 1
const randomNumber = Math.random();
// Determine if the class should be applied
const shouldApplyClass = randomNumber < 0.5;
// Get the body element
let body = document.querySelector('body');
// Apply or remove the "blue" class based on the random number
if (shouldApplyClass) {
body.classList.add('blue');
}

function handleClassChange() {
if (body.classList.contains('blue')) {
console.log('Background is blue');
document.body.style.backgroundColor = 'lightblue';
} else {
console.log('Background is white');
document.body.style.backgroundColor = 'white';
}
}

const observer = new MutationObserver(handleClassChange);

observer.observe(body, { attributes: true, attributeFilter: ['class'] });

handleClassChange();
</script>
</body>

</html>
</html>
Binary file added screenshots/google-analytics.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 27 additions & 2 deletions speechSynth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,44 @@
<!DOCTYPE html>
<html lang="en">

<head>
<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" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Lab 5 - Party Horn</title>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-54SC3SNQ');</script>
<!-- End Google Tag Manager -->

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Y2QECXRNJJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-Y2QECXRNJJ');
</script>

<!-- Main Stylesheet & Scripts -->
<link rel="stylesheet" href="assets/styles/global.css" />
<script src="assets/scripts/speechSynth.js" type="module"></script>
</head>



<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-54SC3SNQ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<header>
<nav>
<a href="index.html" title="Go to party horn">Party Horn</a>
Expand All @@ -34,4 +59,4 @@ <h2>Speech Synthesizer</h2>
</main>
</body>

</html>
</html>