some styling changes

vcgithub41210 · Aug 6, 2024 · ed6e2a5 · ed6e2a5
1 parent 03580e1
commit ed6e2a5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,14 @@
 <html>
-	<head>
-	<link rel="stylesheet" href="style.css" >
-	<script src="script.js"></script>
-	</head>
-	<body>
-		<!--<p>Enter the name of your name: </p> -->
-		<input type="text" id="myInput" placeholder="Enter the name of your name">
-<button onclick="getInputValue()">Get Value</button>
-		<p id="display"></p>
-		<img id="myImage" src="#" width="300">
-	</body>
+  <head>
+    <link rel="stylesheet" href="style.css" >
+    <script src="script.js"></script>
+  </head>
+  <body>
+    <input type="text" id="myInput" placeholder="Enter the name of the most famous person in the world">
+    <button onclick="getInputValue()">Submit</button>
+    <p id="display"></p>
+    <img id="myImage" src="#" width="300">
+    <audio id = "myAudio" src = "sura.mp3" muted>
+    </audio>
+  </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,19 +1,23 @@
 function getInputValue() {
-        // Get the input element by its ID
-        var inputElement = document.getElementById('myInput');
-        var documentImage = document.getElementById('myImage');
-        var displayElement = document.getElementById('display');
-        // Retrieve the value from the input element
-        var inputValue = inputElement.value;
-        if (inputValue == "sura"){
-                documentImage.src = 'images.jpeg';
-                documentImage.style.display = 'block';
-                displayElement.textContent = 'dont try to play the fool with me Niggesh'
-        }
-        else{
-                documentImage.style.display = 'none';
-                displayElement.textContent = 'Fuck off';
-        }
-        // Display the value in the <p> element with ID 'display'
-        // displayElement.textContent = 'Input value: ' + inputValue;
+	// Get the input element by its ID
+	var inputElement = document.getElementById('myInput');
+	var documentImage = document.getElementById('myImage');
+	var displayElement = document.getElementById('display');
+	var audio = document.getElementById("myAudio");
+	var inputValue = inputElement.value;
+	if (inputValue == "sura"){
+		documentImage.src = 'images.jpeg';
+		audio.muted = false;
+		audio.play();
+		documentImage.style.display = 'block';
+		displayElement.textContent = 'dont try to play the fool with me Niggesh'
+	}
+	else{
+		audio.pause();
+		audio.currentTime = 0;
+		documentImage.style.display = 'none';
+		displayElement.textContent = 'Fuck off';
+	}
+	// Display the value in the <p> element with ID 'display'
+	// displayElement.textContent = 'Input value: ' + inputValue;
 }
diff --git a/style.css b/style.css
@@ -1,6 +1,12 @@
 body{
 	background-color: green;
 }
+#myInput{
+  width:25rem;
+  height:2rem;
+  background-color:white;
+  border:none;
+}
 #myImage{
 display: none;
 animation: App-logo-spin infinite 5s linear;