Skip to content
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

Quick fixes #18

Merged
merged 2 commits into from
May 31, 2023
Merged

Quick fixes #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
640bdc1
Format code
SheepTester May 31, 2023
af1800e
Update links between parts of the app
SheepTester May 31, 2023
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
69 changes: 37 additions & 32 deletions source/FortuneCookie/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,57 @@
<html>
<head>
<title>Fortune Cookie</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="menu-bar" aria-label="navigation">
<ul class="nav-items-list" role="menubar">
<li class="nav-list">
<a href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ">Main Page</a>
</li>
<li class="nav-list">
<a href = "https://www.youtube.com/watch?v=L_jWHffIx5E">Palm Reading</a>
</li>
<li class="nav-list">
<a href = "https://www.google.com">Zodiac Compatibility</a>
</li>
<li class="audio-dropdown">
<a href="#" class="dropbtn">Audio Options</a>
<div class="audio-content">
<a href="#">
<input type="checkbox" id="voice-toggle-checkbox" checked>
<label for="voice-toggle-checkbox">Toggle Voice</label>
</a>
<a href="#">
<select name="voice" id="voice-select">
<option value="select" disabled selected>Select Voice:</option>
</select>
</a>

</div>
</ul>
<ul class="nav-items-list" role="menubar">
<li class="nav-list">
<a href="../home-page/">Main Page</a>
</li>
<li class="nav-list">
<a href="../PalmReading/">Palm Reading</a>
</li>
<li class="nav-list">
<a href="../Zodiac_compatibility/">Zodiac Compatibility</a>
</li>
<li class="audio-dropdown">
<a href="#" class="dropbtn">Audio Options</a>
<div class="audio-content">
<a href="#">
<input type="checkbox" id="voice-toggle-checkbox" checked />
<label for="voice-toggle-checkbox">Toggle Voice</label>
</a>
<a href="#">
<select name="voice" id="voice-select">
<option value="select" disabled selected>Select Voice:</option>
</select>
</a>
</div>
</li>
</ul>
</nav>
<h1 class="page-title">DAILY FORTUNE COOKIE</h1>
<p class="page-subtitle">
"Start your day by cracking a fortune cookie and finds out what your future holds..."
"Start your day by cracking a fortune cookie and finds out what your
future holds..."
</p>
<div class="fortune-container">
<img class="fortune-cookie" src="./Images/Fortune cookie image.png" alt="fortune cookie">
<img
class="fortune-cookie"
src="./Images/Fortune cookie image.png"
alt="fortune cookie"
/>
<button id="fortune-button">Open the cookie</button>
<p id="fortune-text"></p>
</div>

<audio id="fortune-crack">
<source src="Audio/FortuneCrack.mp3" type="audio/mpeg">
<source src="Audio/FortuneCrack.mp3" type="audio/mpeg" />
</audio>

<script src="script.js"></script>
</body>
</html>
207 changes: 102 additions & 105 deletions source/FortuneCookie/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,112 @@
const fortunes = [
"Your future is bright, embrace it with open arms.",
"A wonderful surprise is coming your way.",
"Believe in yourself and you will achieve great things.",
"Your kindness will lead to good fortune.",
"The journey may be difficult, but the destination is worth it.",
"Your talents will soon be recognized and rewarded.",
"Don't be afraid to take a chance, it may lead to great things.",
"Your hard work and perseverance will pay off in the end.",
"Keep an open mind and you will find new opportunities.",
"Your positivity and optimism will bring you success.",
"You will soon experience a life-changing event.",
"Your creativity and imagination will bring you great success.",
"The best things in life are yet to come.",
"You will soon receive unexpected blessings.",
"A new friendship will bring you great happiness.",
"Your future is full of endless possibilities.",
"Good things come to those who work hard and never give up.",
"Let go of the past and embrace a bright future.",
"Your perseverance will lead to victory.",
"Your ability to adapt to change will bring you great success.",
"Your determination and hard work will pay off in the long run.",
"The journey may be tough, but the reward will be worth it.",
"Trust in your intuition and you will make the right decisions.",
"A new opportunity is on the horizon, seize it.",
"Your courage and confidence will bring you great success.",
"Your future is filled with abundance and prosperity.",
"Your greatest treasure is the love and support of those around you.",
"Your creativity will bring you great success in all areas of life.",
"Embrace change and you will find success and happiness.",
"Your positive attitude will bring you good luck and fortune."
];

const fortuneButton = document.getElementById("fortune-button");
const fortuneText = document.getElementById("fortune-text");
const fortuneAudioCrack = document.getElementById("fortune-crack");
const voiceToggle = document.getElementById("voice-toggle-checkbox");
"Your future is bright, embrace it with open arms.",
"A wonderful surprise is coming your way.",
"Believe in yourself and you will achieve great things.",
"Your kindness will lead to good fortune.",
"The journey may be difficult, but the destination is worth it.",
"Your talents will soon be recognized and rewarded.",
"Don't be afraid to take a chance, it may lead to great things.",
"Your hard work and perseverance will pay off in the end.",
"Keep an open mind and you will find new opportunities.",
"Your positivity and optimism will bring you success.",
"You will soon experience a life-changing event.",
"Your creativity and imagination will bring you great success.",
"The best things in life are yet to come.",
"You will soon receive unexpected blessings.",
"A new friendship will bring you great happiness.",
"Your future is full of endless possibilities.",
"Good things come to those who work hard and never give up.",
"Let go of the past and embrace a bright future.",
"Your perseverance will lead to victory.",
"Your ability to adapt to change will bring you great success.",
"Your determination and hard work will pay off in the long run.",
"The journey may be tough, but the reward will be worth it.",
"Trust in your intuition and you will make the right decisions.",
"A new opportunity is on the horizon, seize it.",
"Your courage and confidence will bring you great success.",
"Your future is filled with abundance and prosperity.",
"Your greatest treasure is the love and support of those around you.",
"Your creativity will bring you great success in all areas of life.",
"Embrace change and you will find success and happiness.",
"Your positive attitude will bring you good luck and fortune.",
];


// Gets a random fortune and displays it
function showFortune() {
const randomIndex = Math.floor(Math.random() * fortunes.length);
const fortune = fortunes[randomIndex];
fortuneText.textContent = fortune;
fortuneText.style.display = "block";
if (voiceToggle.checked) {
speakFortune(fortune);
}
}
const fortuneButton = document.getElementById("fortune-button");
const fortuneText = document.getElementById("fortune-text");
const fortuneAudioCrack = document.getElementById("fortune-crack");
const voiceToggle = document.getElementById("voice-toggle-checkbox");

// Uses speech synthesis to read out fortune
function speakFortune(fortune) {
const speech = new SpeechSynthesisUtterance(fortune);
const option = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(let i = 0; i < voices.length; i++)
{
if(voices[i].name == option)
speech.voice = voices[i];
}
speech.lang = "en-US";
speech.rate = 0.8;
speech.pitch = 1.2;
window.speechSynthesis.speak(speech);
// Gets a random fortune and displays it
function showFortune() {
const randomIndex = Math.floor(Math.random() * fortunes.length);
const fortune = fortunes[randomIndex];
fortuneText.textContent = fortune;
fortuneText.style.display = "block";
if (voiceToggle.checked) {
speakFortune(fortune);
}
}

// Turn button back on when fortune is done being read
speech.addEventListener("end", (event) => {
fortuneButton.disabled = false;
fortuneButton.style.opacity = "1";
});
// Uses speech synthesis to read out fortune
function speakFortune(fortune) {
const speech = new SpeechSynthesisUtterance(fortune);
const option = voiceSelect.selectedOptions[0].getAttribute("data-name");
for (let i = 0; i < voices.length; i++) {
if (voices[i].name == option) speech.voice = voices[i];
}

// When button is clicked, audio plays and then fortune is read/displayed
fortuneButton.addEventListener("click", function() {
fortuneAudioCrack.play();
speech.lang = "en-US";
speech.rate = 0.8;
speech.pitch = 1.2;
window.speechSynthesis.speak(speech);

// Turn button off so user cannot spam click button
fortuneButton.disabled = true;
fortuneButton.style.opacity = "0.5";
setTimeout(showFortune, 1000);
// Turn button back on when fortune is done being read
speech.addEventListener("end", (event) => {
fortuneButton.disabled = false;
fortuneButton.style.opacity = "1";
});

// Added options for different voices
const synth = window.speechSynthesis;
}

// When button is clicked, audio plays and then fortune is read/displayed
fortuneButton.addEventListener("click", function () {
fortuneAudioCrack.play();

// Turn button off so user cannot spam click button
fortuneButton.disabled = true;
fortuneButton.style.opacity = "0.5";
setTimeout(showFortune, 1000);
});

// Added options for different voices
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];

function populateVoiceList() {
voices = synth.getVoices();

for (let i = 0; i < voices.length; i++) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;

if (voices[i].default) {
option.textContent += " — DEFAULT";
}

option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voiceSelect.appendChild(option);
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

let voices = [];

function populateVoiceList() {
voices = synth.getVoices();

for (let i = 0; i < voices.length; i++) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;

if (voices[i].default) {
option.textContent += " — DEFAULT";
}

option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voiceSelect.appendChild(option);
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
Loading