Click here to Skip to main content
15,614,270 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
See more:
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Tamagotchi </title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <h3 class="title" style="color: purple"> Tamagotchi </h3>
    <script src="main.js" async defer></script> 

    <img id="tam" src="images/chame.png" alt="tama" width="300" height="300">
    <img id="love" src="images/sleepy.jpeg" alt="tame" width="300" height="300">
    <img id="love" src="images/chamametchi.jpeg" alt="tame" width="300" height="300">
    <img id="love" src="images/cry.jpeg" alt="tame" width="300" height="300">
    <p id="count">Hunger: 2 </p>
    <p id="age">Age: 3 </p>
    <p id="boredom"> Boredom: 7</p>
    <p id="sleepiness"> Sleepiness: 1 </p>

    <button id="btn-start">Feed</button>
    <button id="btn-pause">Play</button>
    <button id="btn-stop">Stop</button>

    <!-- <p> <div id="my-hunger"> Hunger: 0 </div> </p>
    <p> <div id="my-sleepiness"> Sleepiness: 3</div></p>
    <p> <div id="my-boredom"> Boredom: 5 </div></p>
    <p> <div id="my-age"> Age: 8 </div></p>

    <button id="my-hungry">Feed</button>
    <button id="my-feed">Age</button>
    <button id="my-play">Boredom</button> -->
          <a href="" target="_blank" href="">Linkedin</a>
          <a href="" target="_blank" href="">Github </a>

// let myName = window.prompt("enter name please?");
// console.log("Hello", myName );
// document.getElementById("myButton").onclick = function () =>
// {
//     let myName = document.getElementById("myText").value;
//     console.log("Hello", myName);
// }

const feedEl = document.getElementById("btn-start");
const playEl = document.getElementById("btn-pause");
const stopEl = document.getElementById("btn-stop");
const hungerEl = document.getElementById("count");
const ageEl = document.getElementById("age");

let count = 6;
let myCounter = null;
// console.log(typeof(myCounter));
function handlefeedClick() {
  // console.log("start button clicked!");
  myCounter = setInterval(function(){

What I have tried:

I want to have the time for the different p elements in html stop at 20, and all of them mist start at a different time, having a hard time writing a function I use clear interval but that’s not working
Also the Images in the HTML , May you show me how to write the code to at h the picture so, when the timer gets to a certain time the picture changes for example if the sleepiness timer gets to 15 it must change to the sleepy image.
Richard Deeming 11-Mar-22 3:11am    
Your code is incomplete. We can't tell you how to fix code we cannot see. And nobody here is going to write the code for you.

Click the green "Improve question" link and add the rest of your code, and a clear description of the problem you have and what you have tried.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900