Jump to content

Dilip

Members
 View Profile  See their activity

  • Posts

    31

  • Joined

  • Last visited

Dilip's Achievements

Member

Member (2/5)

0

Reputation

  1. Dilip
    Hi, attaching all the files, please check <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown Timer</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet"> <link href="/style.css" rel="stylesheet"> </head> <body> <div class="container my-5"> <h1>Countdown Timer</h1> <br> <br> <h4 class="text-success">Contest Ends on 31st May 2024 GMT at 11:59:59 PM</h4> <br> <p>Time Now in GMT :</p> <p class="text-success" id="nowtimeutc"></p> <br> <p>Contest Ends on (your date)</p> <br> <div id="yourdate"></div> <br> <div class="text-danger fs-1" id="expired"></div> <br> <p>Time left, the contest ends in</p> <br> <!-- <h2 class="text-danger fs-1" id="countdown"></h2> --> <br> <div class="container text-center"> <div class="row"> <div class="col"> <div class="fs-1" id="daysleft"></div>days </div> <div class="col"> <div class="fs-1" id="hoursleft"></div>hours </div> <div class="col"> <div class="fs-1" id="minutesleft"></div>minutes </div> <div class="col"> <div class="fs-1" id="secondsleft"></div>seconds </div> </div> </div> </div> <script src="/script2.js"></script> </body> </html> let endingDate = new Date(Date.UTC(2024, 4, 31, 23,59,59)); // Enter the date in UTC console.log(endingDate); let yourDate = document.getElementById("yourdate"); // Get te date in your time zone yourDate.textContent = endingDate; let now = new Date(); // time now console.log(now); let difference = endingDate.getTime() - now.getTime(); // Difference between target time and time now, in milliseconds console.log(difference); // Time now in UTC timeNow = new Date().toUTCString(); //timeNow = Math.floor((new Date()).getTime() / 1000); let nowTime = document.getElementById("nowtimeutc"); nowTime.textContent = timeNow; // Main function function displayCountdown(){ // input area start let endingDate = new Date(Date.UTC(2024, 4, 31, 23,59,59)); // Enter the date in UTC console.log(endingDate); let yourDate = document.getElementById("yourdate"); // Get te date in your time zone yourDate.textContent = endingDate; let now = new Date(); // time now console.log(now); let difference = endingDate.getTime() - now.getTime(); // Difference between target time and time now, in milliseconds console.log(difference); // input area ends let days = Math.floor(difference / 86400000); // divide Difference in milliseconds by no. of millisecond in a day to get days left console.log(days); let hours = Math.floor((difference % 86400000) / (1000 * 60 * 60)); // To get hours use modulus, get the time remaining after "days" and find how many hours in it console.log(hours); let minutes = Math.floor(((difference % 86400000) % (1000 * 60 * 60)) / (1000 * 60)); // finding minutes left - in effect hours - minutes in milliseconds console.log(minutes); let seconds = Math.floor((((difference % 86400000) % (1000 * 60 * 60)) % (1000 * 60)) / 1000); console.log(seconds); //let displayCount = `${days} days ${hours} hours ${minutes} minutes ${seconds} seconds`; //document.getElementById("countdown").innerHTML = displayCount; //setTimeout(displayCountdown, 1000); // Refreshes every 1 seconds //console.log("refreshed"); //Handling values individually // days const element = document.getElementById("daysleft"); element.textContent = days; document.getElementById("daysleft").innerHTML = myDays; setTimeout(myDays, 1000); // Refreshes every 1 seconds const element2 = document.getElementById("hoursleft"); element2.textContent = hours; document.getElementById("hoursleft").innerHTML = myHours; setTimeout(myHours, 1000); // Refreshes every 1 seconds const element3 = document.getElementById("minutesleft"); element3.textContent = minutes; document.getElementById("minutesleft").innerHTML = myMinutes; setTimeout(myMinutes, 1000); // Refreshes every 1 seconds const element4 = document.getElementById("secondsleft"); element4.textContent = seconds; document.getElementById("secondsleft").innerHTML = mySeconds; setTimeout(mySeconds, 1000); // Refreshes every 1 seconds }; // check if the time difference is valid if (difference <= 0) { console.log("Contest Finished, time expired"); let expiredContest = "Contest Finished, entry time expired"; document.getElementById("expired").innerHTML = expiredContest; } else { //setTimeout(displayCountdown, 500); // Call updateCountdown again every second } // setInterval(displayCountdown, 100); // Refreshes every 5 seconds // To stop the automatic execution: //clearInterval(intervalId); //setTimeout(displayCountdown, 1000); // Refreshes every 1 seconds displayCountdown(); console.log("printed"); }; //displayCountdown();
  2. Dilip
    Hi, this is a beginner-level question. Please don't mind I have an index.html and script.js. I have included script.js in index.html. I am building a countdown timer. The script.js has values like const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); How do I call days, hours, minutes etc to the index.html separately so that I can style the countdown timer? Say <div class="red">days</div> <div class="green">hours</div> ... etc Thanks
  3. Dilip
    Hi, I have been creating graphics for around 10 years now. I started learning by creating logos and banners for my projects. Now I can do videos, animated GIF banners and more. Have decent command over 2D and some 3D. My entry was voted into top 10 for Ubuntu wallpaper content last month. Feel free to PM me if you need any graphics help.
  4. Dilip
    Awesome!! Thanks a lot
  5. Dilip
    This is what I am trying to achieve. Get my original P code listed with the input description. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>P Code Generator</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h1>P Code Generator</h1> <input type="text" id="myInputText" placeholder="Enter Description"> <button onclick="replaceDescription()">Generate Code</button> <script src="myscript.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> function replaceDescription() { // Get the user input for the Description const myInput = document.getElementById("myInputText").value; // The original text with $description placeholder const originalText = '<p style="background: black; padding: 15px; color:white;"> $description </p>'; // Replace description with the input const replacedText = originalText.replace(/\$description/g, myInput); // Access the element where you want to display the plain text const displayElement = document.getElementById("textDisplay"); // Set the element's textContent to the replaced text (display as plain text) displayElement.textContent = replacedText; }
  6. Dilip
    Hi, regret to confuse, I will show my raw code in a couple of minutes.
  7. Dilip
    Hi, thanks. I was hoping an HTML text input and the output as plain text. So that I can copy the <p> code from browser and paste it. ie, the output is plain text, not styled <p> tag. Something like <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>P Code Generator</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h1>P Code Generator</h1> <input type="text" id="myInput" placeholder="Enter Description"> <button onclick="replaceDescription()">Generate Code</button> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>
  8. Dilip
    Hi,I have this code. I need help using a text input to replace the $description in this code <p style="background: black; padding: 15px; color:white;"> $description </p> Because I need to add description many times and can save time if I have a text input that takes in description and displays the above code with text input as plain text. I can then copy paste, use it. Any help will be great.
  9. Dilip
    Fixed by using col-sm-12
  10. Dilip
    Hi, I am using Grid in Bootstrap 5.3. It scales instead of stacking one below another. <section class="mt25me"> <div class="text-center"> <h2 class="mt-2">Why me?</h2> <br> <h1 class="fs-5 poppins-extralight">The Copywriter</h1> <br> </div> <br><br><br> <div class="container text-center"> <div class="row"> <div class="col"> <div class="mb-4" style="color: #0070ff;"> <i class="fa-solid fa-thumbs-up fa-5x"></i> </div> <h3>Impressive</h3> <br> <p>Words that work magic, helps gain attention</p> </div> <div class="col"> <div class="mb-4 green"> <i class="fa-solid fa-circle-check fa-5x"></i> </div> <h3>Effective</h3> <br> <p>Post that standout in crowd. Simple by design, effective on field</p> </div> <div class="col"> <div class="mb-4" style="color: #ffa700;"> <i class="fa-solid fa-trophy fa-5x"></i> </div> <h3>Result Oriented</h3> <br> <p>They will love you for sure, and buy from you as well</p> </div> </div> </div> </section> CSS .msect5 { margin-top: 50px; padding-top: 15px; margin-bottom: 75px; } Please help.
  11. Dilip
    Thanks @maxxd
  12. Dilip
    Hi, is there any method to export text effects as GIF or webp ( with transparency ). Say I have a web page and I have a Fade In animation for text. I have only that made either using CSS or a library like animate.css. Is it possible to export as image? I can of course take a screen grab, but it will have the white background added. PS: was not sure which board to use
  13. Dilip
    I guess ../ is the only way then .
  14. Dilip
    Yes, please see Edit 1 : It works fine when I use include " ../inc/header.php";
  15. Dilip
    Hi, I just tried using /inc/header.php in index.php as well as a subfolder PHP file. But it is not being called it all Attaching the screenshot. Some of the content is not English Edit 1: the index.php works when I use `include "inc/header.php";` but not sure what to do for subfolders and deeper
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.