Merge pull request #325 from ShrishtiSingh26/update

adding text to speech convertor and image generator feature #90
iamrahulmahato · Oct 5, 2024 · e2631ac · e2631ac
2 parents 40c2247 + 52d94c7
commit e2631ac
Show file tree

Hide file tree

Showing 9 changed files with 396 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -322,6 +322,30 @@ <h3 class="card-heading">Wordle Game</h3>
                     </p>
                 </div>
             </a>
+            <!----->
+            <a href="./projects/Text to Speech/index.html" class="card">
+                <div class="card-cover">
+                    <img src="./projects/Text to Speech/txtsp.png" alt="Text to Speech logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Text to Speech</h3>
+                    <p class="card-description">
+                        Text to speech convertor
+                    </p>
+                </div>
+            </a>
+            <a href="./projects/image Generator/index.html" class="card">
+                <div class="card-cover">
+                    <img src="./projects/image Generator/search.png" alt="Image Generator logo">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Image Generator</h3>
+                    <p class="card-description">
+                        Generates Images 
+                    </p>
+                </div>
+            </a>
+
 
             <!-- START -->
             <a href="./projects/githubProfileViewer/index.html" class="card">

diff --git a/projects/Text to Speech/index.html b/projects/Text to Speech/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Interactive Text to Speech</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Text to Speech</h1>
+    <textarea id="text-input" placeholder="Type something..."></textarea>
+
+    <div class="controls">
+      <label for="rate">Rate: <span id="rate-value">1</span></label>
+      <input type="range" id="rate" min="0.5" max="5" step="0.2" value="1">
+
+      <label for="pitch">Pitch: <span id="pitch-value">1</span></label>
+      <input type="range" id="pitch" min="0" max="5" step="0.2" value="1">
+    </div>
+
+    <button id="speak-btn">Speak</button>
+
+    <p id="status"></p>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/Text to Speech/script.js b/projects/Text to Speech/script.js
@@ -0,0 +1,40 @@
+const textInput = document.getElementById("text-input");
+const speakBtn = document.getElementById("speak-btn");
+const rateInput = document.getElementById("rate");
+const pitchInput = document.getElementById("pitch");
+const rateValue = document.getElementById("rate-value");
+const pitchValue = document.getElementById("pitch-value");
+const status = document.getElementById("status");
+
+rateInput.addEventListener("input", () => {
+  rateValue.textContent = rateInput.value;
+});
+
+pitchInput.addEventListener("input", () => {
+  pitchValue.textContent = pitchInput.value;
+});
+
+speakBtn.addEventListener("click", function() {
+  const text = textInput.value;
+  if (!text) {
+    status.textContent = "Please enter some text!";
+    return;
+  }
+
+  const speech = new SpeechSynthesisUtterance(text);
+  speech.pitch = pitchInput.value;
+  speech.rate = rateInput.value;
+
+  // Update status during speech
+  status.textContent = "Speaking...";
+
+  speech.onend = () => {
+    status.textContent = "Speech finished.";
+  };
+
+  speech.onerror = () => {
+    status.textContent = "Error occurred while speaking.";
+  };
+
+  window.speechSynthesis.speak(speech);
+});
diff --git a/projects/Text to Speech/style.css b/projects/Text to Speech/style.css
@@ -0,0 +1,104 @@
+/* General reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Body styling with gradient background and centered content */
+  body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center; /* Centering text */
+  }
+
+  /* Center the container and style it */
+  .container {
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 350px;
+  }
+
+  /* Style the heading with a new font and center it */
+  h1 {
+    margin-bottom: 15px;
+    font-size: 28px;
+    font-family: 'Pacifico', cursive; /* New font for the main heading */
+    color: #333;
+  }
+
+  /* Style the textarea */
+  textarea {
+    width: 100%;
+    height: 120px;
+    padding: 15px;
+    font-size: 16px;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    resize: none;
+    outline: none;
+    transition: border 0.3s;
+  }
+
+  textarea:focus {
+    border-color: #28a745;
+  }
+
+  /* Styling the controls for pitch and rate */
+  .controls {
+    margin-bottom: 20px;
+    text-align: left;
+  }
+
+  label {
+    font-size: 14px;
+    color: #555;
+  }
+
+  input[type="range"] {
+    width: 100%;
+    margin: 10px 0;
+  }
+
+  /* Style the button */
+  button {
+    width: 100%;
+    padding: 15px;
+    background-color: #28a745;
+    color: white;
+    font-size: 16px;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  button:hover {
+    background-color: #218838;
+  }
+
+  /* Feedback text during speech */
+  #status {
+    margin-top: 20px;
+    font-size: 14px;
+    color: #888;
+    font-style: italic;
+  }
+
+  /* Display the value of rate and pitch */
+  #rate-value, #pitch-value {
+    font-weight: bold;
+    color: #28a745;
+  }
+
+  /* Google Fonts import */
+  @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@300;400;500;700&display=swap');
+
diff --git a/projects/Text to Speech/txtsp.png b/projects/Text to Speech/txtsp.png
diff --git a/projects/image Generator/index.html b/projects/image Generator/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title> Image Generator</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <button id="scrollTopBtn" class="scroll-top-btn">↑ Scroll to Top</button>
+        <h1> IMAGE SEARCH</h1>
+        <form id="search-form">
+            <input type="text" id="search-box" placeholder="search anything here...">
+            <button> Search</button>
+        </form>
+        <div id="search-result"></div>
+        <button id="show-more-btn">Show More</button>
+
+        <script src="script.js"></script>
+        <script>
+            // script.js
+window.onscroll = function() {
+    toggleScrollTopButton();
+};
+
+const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+function toggleScrollTopButton() {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        scrollTopBtn.style.display = "block"; // Show button after scrolling down
+    } else {
+        scrollTopBtn.style.display = "none"; // Hide button when at the top
+    }
+}
+
+scrollTopBtn.onclick = function() {
+    window.scrollTo({ top: 0, behavior: 'smooth' }); // Smooth scroll to top
+};
+
+        </script>
+
+
+    </body>
+</html>
diff --git a/projects/image Generator/script.js b/projects/image Generator/script.js
@@ -0,0 +1,61 @@
+const accessKey = "eJCYDaO5lcyBr6Vyscq1RmWvikF8jBibrzAomh1JX6M";
+const searchForm = document.getElementById("search-form");
+const searchBox = document.getElementById("search-box");
+const searchResult = document.getElementById("search-result");
+const showMoreBtn = document.getElementById("show-more-btn");
+
+let keyword = "";
+let page = 1;
+
+async function searchImages() {
+    keyword = searchBox.value;
+    // Use backticks to correctly interpolate the variables
+    const url = `https://api.unsplash.com/search/photos?page=${page}&query=${keyword}&client_id=${accessKey}&per_page=9`;
+
+    try {
+        const response = await fetch(url);
+
+        // Check if the response status is OK (200–299)
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        // Clear previous search results if starting a new search
+        if (page === 1) {
+            searchResult.innerHTML = "";
+        }
+
+        const results = data.results;
+        results.map((result) => {
+            const image = document.createElement("img");
+            image.src = result.urls.small;
+            const imageLink = document.createElement("a");
+            imageLink.href = result.links.html;
+            imageLink.target = "_blank";
+
+            imageLink.appendChild(image);
+            searchResult.appendChild(imageLink);
+        });
+
+        // Show "Show More" button if there are results
+        if (results.length > 0) {
+            showMoreBtn.style.display = "block";
+        } else {
+            showMoreBtn.style.display = "none";
+        }
+    } catch (error) {
+        console.error('Error fetching images:', error);
+    }
+}
+
+searchForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    page = 1;  // Reset page on new search
+    searchImages();
+});
+showMoreBtn.addEventListener("click", () => {
+    page++;  // Increment page for next set of results
+    searchImages();
+});
diff --git a/projects/image Generator/search.png b/projects/image Generator/search.png