Guessing Game

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Word Guess</title>
    <link rel="stylesheet" href="css/wordGuess.css">
</head>
<body>
    <div class="wrapper">
  <header>
    <h1>Guess the word</h1>
    <span class="time" id="countdown"></span>
  </header>
   <div class="message" id="message failure" ></div>
  <div class="content">
    <input type="text" maxlength="1" class="typing">
    <div class="inputs"></div>
    <div class="details">
      <p class="hint">Hints: <span>Hint will be shown here</span></p>
      <p class="category">Category: <span></span></p>
      <p class="level">Difficulty: <span></span></p>
      <p class="guess-left">Remaining Guess: <span></span></p>
      <p class="wrong-letter">Wrong word: <span></span></p>
      <p class="winlose"><span class="wins"></span> <span class="losses"></span></p>
    </div>
    <button class="reset-btn">/Reset Game</button>
   
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;1,100;1,300&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   border: none;
   outline: none;
    box-sizing: border-box;
    list-style: none;
    font-family: "Poppins", sans-serif;
}
body{
    background: #f0f0f0;
      /* font-family: "Poppins", sans-serif; */
display: flex;
align-items: center;
justify-content: center;
background:url(../assets/bgIMG.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: #00040f;    
}
    .wrapper{
        width: 400px;
background: #fff;
border-radius: 10px;
        height: auto;
        padding: 15px 20px;
    }
    .wrapper h1{
        font-weight: 700;
        font-size: 1.8rem;

}

.inputs{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .inputs input{
        height: 48px;
        width: 48px;
        margin: 8px;
        border: 1px solid #ccc;
        text-transform: uppercase;
        font-size: 18px;
        border-radius: 5px;
        box-shadow: 0 0 15px rgb(0 0 0 /8%);
        cursor: pointer;
        font-weight: 500;
        background: none;
        text-align: center;
    }

span.time.active{
        display: flex;
    }
    .wrapper .content{
        margin: 25px 25px 35px;
    }
    .content .typing{
        z-index: -999;
        position: absolute;
        opacity: 0;
    }

.inputs input:first-child{
        margin-right: 0;
    }
    .content .details{
        margin: 20px 0 25px;
    }

.details p{
        border-bottom: 1px solid #ddd;
        padding: 0px 0 8px;
        color: #222;
        font-size: 17px;
        margin-bottom: 10px;
        font-weight: 500;
    }
    .details p > span{
        font-weight: 400;
        color: #666;
        padding-left: 5px;
    }
    .content .reset-btn{
        width: 100%;
        font-size: 17px;
        padding: 14px 0;
        cursor: pointer;
        background-color: #1bb295;
        border-radius: 5px;
        color: #fff;
    }
    /* ... (existing CSS styles) */

.message {
    background-color: orange;
    width: 90%;
  margin: 10px auto 0 ;
  padding: 10px;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  /* display: none; */
}
.word{
    color: #721c24;
    font-size: 18px;
}

.success {
    display: block;
    color: #155724;
    background-color: #d4edda;
}

.failure {
    display: block;
  color: #721c24;
  background-color: #f8d7da;
}

@media (max-width:457px) {
        .wrapper{
            width: 90%;
        }
    }

.winlose{
        /* background-color: #fef; */
        display: flex;
        justify-content: space-between;
    }

JS

const words = [
  {
    word: "variable",
    hint: "A named container that holds a value",
    category: "Programming Concepts",
    difficulty: "Easy",
  },
  {
    word: "function",
    hint: "A reusable block of code that performs a specific task",
    category: "Programming Concepts",
    difficulty: "Easy",
  },
  {
    word: "array",
    hint: "An ordered collection of elements",
    category: "Programming Concepts",
    difficulty: "Easy",
  },
  {
    word: "loop",
    hint: "A control structure that repeats a block of code until a condition is met",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "conditional",
    hint: "A statement that executes different actions based on a condition",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "object",
    hint: "An entity that contains properties and methods",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "algorithm",
    hint: "A step by step procedure to solve a problem",
    category: "Programming Concepts",
    difficulty: "Hard",
  },
  {
    word: "recursion",
    hint: "A function that calls itself",
    category: "Programming Concepts",
    difficulty: "Hard",
  },
  {
    word: "inheritance",
    hint: "The ability of an object to acquire properties and methods from a parent object",
    category: "Programming Concepts",
    difficulty: "Hard",
  },
  {
    word: "variable scope",
    hint: "The visibility and accessibility of variables within a program",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "pointer",
    hint: "A memory address that points to a value or another memory address",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "abstraction",
    hint: "The process of hiding complex implementation details and exposing only essential functionalities",
    category: "Programming Concepts",
    difficulty: "Hard",
  },
  {
    word: "polymorphism",
    hint: "The ability of an object to take on many forms and behave differently in different situations",
    category: "Programming Concepts",
    difficulty: "Hard",
  },
  {
    word: "debugging",
    hint: "The process of identifying and fixing errors or defects in a program",
    category: "Programming Concepts",
    difficulty: "Easy",
  },
  {
    word: "data structure",
    hint: "A way of organizing and storing data to perform efficient operations",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "encapsulation",
    hint: "The bundling of data and methods together as a single unit",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "iteration",
    hint: "The repetition of a process or set of instructions",
    category: "Programming Concepts",
    difficulty: "Easy",
  },
  {
    word: "stack",
    hint: "A data structure that follows the Last In First Out (LIFO) principle",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "queue",
    hint: "A data structure that follows the First In First Out (FIFO) principle",
    category: "Programming Concepts",
    difficulty: "Medium",
  },
  {
    word: "apple",
    hint: "A fruit that is red or green",
    category: "Frui ts",
    difficulty: "Easy",
  },
  {
    word: "banana",
    hint: "A yellow fruit with a curved shape",
    category: "Fruits",
    difficulty: "Easy",
  },
  {
    word: "carrot",
    hint: "A long, orange vegetable",
    category: "Vegetables",
    difficulty: "Easy",
  },
  {
    word: "chocolate",
    hint: "A sweet treat made from cocoa",
    category: "Food",
    difficulty: "Medium",
  },
  {
    word: "elephant",
    hint: "A large animal with a long trunk",
    category: "Animals",
    difficulty: "Medium",
  },
  {
    word: "guitar",
    hint: "A musical instrument with strings",
    category: "Music",
    difficulty: "Medium",
  },
  {
    word: "sunflower",
    hint: "A tall plant with large yellow flowers",
    category: "Plants",
    difficulty: "Easy",
  },
  {
    word: "computer",
    hint: "An electronic device for processing data",
    category: "Technology",
    difficulty: "Medium",
  },
  {
    word: "mountain",
    hint: "A large natural elevation of the earth's surface",
    category: "Geography",
    difficulty: "Hard",
  },

{
    word: "pizza",
    hint: "A popular Italian dish with a round dough base and various toppings",
    category: "Food",
    difficulty: "Easy",
  },
  {
    word: "beach",
    hint: "A sandy or pebbly area by the sea or a lake",
    category: "Places",
    difficulty: "Easy",
  },
  {
    word: "book",
    hint: "A written or printed work consisting of pages glued or sewn together",
    category: "Literature",
    difficulty: "Easy",
  },
  {
    word: "camera",
    hint: "A device used to capture photographs or record videos",
    category: "Technology",
    difficulty: "Medium",
  },
  {
    word: "dog",
    hint: "A domesticated carnivorous mammal that typically has a long snout, an acute sense of smell, and a barking voice",
    category: "Animals",
    difficulty: "Easy",
  },
  {
    word: "sun",
    hint: "The star at the center of the solar system, around which the Earth and other planets revolve",
    category: "Astronomy",
    difficulty: "Easy",
  },
  {
    word: "music",
    hint: "The art of combining sounds to produce a harmonious and expressive composition",
    category: "Art",
    difficulty: "Easy",
  },
  {
    word: "rainbow",
    hint: "A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light",
    category: "Nature",
    difficulty: "Easy",
  },
  {
    word: "football",
    hint: "A popular sport played with a round ball between two teams of eleven players",
    category: "Sports",
    difficulty: "Medium",
  },
  {
    word: "tree",
    hint: "A woody perennial plant that typically has a single stem or trunk and bears lateral branches",
    category: "Plants",
    difficulty: "Easy",
  },
  {
    word: "pineapple",
    hint: "A tropical fruit with a rough, spiky skin and sweet, juicy flesh",
    category: "Fruits",
    difficulty: "Easy",
  },
  {
    word: "lemon",
    hint: "A yellow citrus fruit known for its sour taste",
    category: "Fruits",
    difficulty: "Easy",
  },
  {
    word: "broccoli",
    hint: "A green vegetable with a dense cluster of small, edible flower buds",
    category: "Vegetables",
    difficulty: "Easy",
  },
  {
    word: "ice cream",
    hint: "A frozen dessert made from dairy products, sugar, and flavorings",
    category: "Food",
    difficulty: "Medium",
  },
  {
    word: "lion",
    hint: "A large, powerful carnivorous mammal known for its majestic mane",
    category: "Animals",
    difficulty: "Medium",
  },
  {
    word: "violin",
    hint: "A stringed musical instrument played with a bow",
    category: "Music",
    difficulty: "Medium",
  },
  {
    word: "rose",
    hint: "A fragrant flower with thorny stems, often given as a symbol of love",
    category: "Plants",
    difficulty: "Easy",
  },
  {
    word: "smartphone",
    hint: "A mobile phone with advanced features and capabilities",
    category: "Technology",
    difficulty: "Medium",
  },
  {
    word: "volcano",
    hint: "A mountain with a vent through which molten rock, ash, and gases erupt",
    category: "Geography",
    difficulty: "Hard",
  },

{
    word: "sandwich",
    hint: "A food item consisting of two or more slices of bread with fillings",
    category: "Food",
    difficulty: "Easy",
  },
  {
    word: "forest",
    hint: "A large area of land covered with trees and undergrowth",
    category: "Nature",
    difficulty: "Medium",
  },
  {
    word: "cat",
    hint: "A small domesticated carnivorous mammal kept as a pet",
    category: "Animals",
    difficulty: "Easy",
  },
  {
    word: "moon",
    hint: "The natural satellite of the Earth, visible at night",
    category: "Astronomy",
    difficulty: "Easy",
  },
  {
    word: "painting",
    hint: "The art of creating images using various pigments on a surface",
    category: "Art",
    difficulty: "Medium",
  },
  {
    word: "waterfall",
    hint: "A cascade of water falling from a height",
    category: "Nature",
    difficulty: "Medium",
  },
  {
    word: "basketball",
    hint: "A sport played between two teams with a round ball and a hoop",
    category: "Sports",
    difficulty: "Medium",
  },
  {
    word: "flower",
    hint: "The reproductive structure of flowering plants",
    category: "Plants",
    difficulty: "Easy",
  },
  {
    word: "giraffe",
    hint: "A tall African mammal with a long neck and patterned coat",
    category: "Animals",
    difficulty: "Medium",
  },
  {
    word: "oxygen",
    hint: "A colorless, odorless gas essential for respiration",
    category: "Science",
    difficulty: "Medium",
  },
  {
    word: "bicycle",
    hint: "A pedal powered vehicle with two wheels",
    category: "Transportation",
    difficulty: "Easy",
  },
  {
    word: "desert",
    hint: "A barren, arid region with little precipitation and sparse vegetation",
    category: "Geography",
    difficulty: "Medium",
  },
  {
    word: "television",
    hint: "An electronic device used for receiving and displaying broadcast signals",
    category: "Technology",
    difficulty: "Medium",
  },
  {
    word: "rainforest",
    hint: "A dense forest with high rainfall, abundant biodiversity, and lush vegetation",
    category: "Nature",
    difficulty: "Hard",
  },
  {
    word: "soccer",
    hint: "A popular sport played with a round ball between two teams",
    category: "Sports",
    difficulty: "Medium",
  },
  {
    word: "astronomy",
    hint: "The study of celestial objects and phenomena",
    category: "Science",
    difficulty: "Hard",
  },
  {
    word: "architecture",
    hint: "The art and science of designing and constructing buildings",
    category: "Art",
    difficulty: "Hard",
  },
  {
    word: "bee",
    hint: "An insect known for its role in pollination and producing honey",
    category: "Animals",
    difficulty: "Easy",
  },
  {
    word: "dragonfly",
    hint: "An insect with a slender body and transparent wings",
    category: "Insects",
    difficulty: "Hard",
  },
  {
    word: "chemistry",
    hint: "The branch of science that deals with the composition, properties, and reactions of substances",
    category: "Science",
    difficulty: "Hard",
  },
  {
    word: "sculpture",
    hint: "The art of creating three dimensional forms",
    category: "Art",
    difficulty: "Hard",
  },
  {
    word: "revolution",
    hint: "A fundamental change in power or organizational structures that takes place in a relatively short period",
    category: "History Concepts",
    difficulty: "Medium",
  },
  {
    word: "colonization",
    hint: "The act of establishing a colony or colonies in a new territory",
    category: "History Concepts",
    difficulty: "Medium",
  },
  {
    word: "imperialism",
    hint: "A policy of extending a nation's power and influence through colonization, military force, or economic control",
    category: "History Concepts",
    difficulty: "Medium",
  },
  {
    word: "renaissance",
    hint: "A period of cultural and artistic rebirth that took place in Europe from the 14th to the 17th century",
    category: "History Concepts",
    difficulty: "Hard",
  },
  {
    word: "enlightenment",
    hint: "An intellectual and philosophical movement that emphasized reason, science, and individualism",
    category: "History Concepts",
    difficulty: "Hard",
  },
  {
    word: "industrialization",
    hint: "The process of developing industries on a large scale and the shift from manual labor to mechanized production",
    category: "History Concepts",
    difficulty: "Medium",
  },
  {
    word: "nationalism",
    hint: "A strong sense of loyalty and devotion to one's nation, often accompanied by the belief in its superiority",
    category: "History Concepts",
    difficulty: "Medium",
  },
  {
    word: "decolonization",
    hint: "The process of ending colonial rule and granting independence to former colonies",
    category: "History Concepts",
    difficulty: "Medium",
  },
  {
    word: "world war",
    hint: "A global military conflict involving many of the world's nations",
    category: "History Concepts",
    difficulty: "Hard",
  },
  {
    word: "Cold War",
    hint: "A period of geopolitical tension between the United States and the Soviet Union",
    category: "History Concepts",
    difficulty: "Medium",
  },
  {
    word: "Tawhid",
    hint: "The oneness of Allah and the central concept of Islamic monotheism",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Salah",
    hint: "The ritual prayer performed by Muslims five times a day",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Zakat",
    hint: "The obligatory charity given by Muslims to support the needy and the poor",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Sawm",
    hint: "The fasting observed by Muslims during the month of Ramadan",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Hajj",
    hint: "The pilgrimage to Mecca, one of the Five Pillars of Islam",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Quran",
    hint: "The holy book of Islam, believed to be the word of Allah as revealed to Prophet Muhammad",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Hadith",
    hint: "The collection of traditions and sayings of Prophet Muhammad",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Sharia",
    hint: "The Islamic law derived from the Quran and the teachings of Prophet Muhammad",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Imam",
    hint: "A religious leader or prayer leader in the Islamic community",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Jihad",
    hint: "The struggle or effort to strive for the sake of Allah and to promote righteousness",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Tawakkul",
    hint: "Reliance and trust in Allah's plan and divine will",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Ihsan",
    hint: "Excellence in worship and conduct, going above and beyond the minimum requirements",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Sunnah",
    hint: "The way and teachings of Prophet Muhammad, including his actions, sayings, and approvals",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Qibla",
    hint: "The direction faced by Muslims during prayer, towards the Kaaba in Mecca",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Iftar",
    hint: "The meal to break the fast during Ramadan",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Jannah",
    hint: "Paradise, the eternal abode of bliss for the righteous believers",
    category: "Islamic Concepts",
    difficulty: "Medium",
  },
  {
    word: "Zakah",
    hint: "The mandatory giving of a portion of one's wealth to the poor and needy",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Sadaqah",
    hint: "Voluntary acts of charity and giving",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Halal",
    hint: "Permissible and lawful according to Islamic principles",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Haram",
    hint: "Forbidden and prohibited according to Islamic principles",
    category: "Islamic Concepts",
    difficulty: "Easy",
  },
  {
    word: "Trinity",
    hint: "The Christian doctrine that God exists as three persons: the Father, the Son (Jesus Christ), and the Holy Spirit",
    category: "Christianity Concepts",
    difficulty: "Medium",
  },
  {
    word: "Salvation",
    hint: "The deliverance from sin and its consequences, believed to be achieved through faith in Jesus Christ",
    category: "Christianity Concepts",
    difficulty: "Medium",
  },
  {
    word: "Gospel",
    hint: "The teachings and message of Jesus Christ, specifically the accounts of his life, death, and resurrection",
    category: "Christianity Concepts",
    difficulty: "Easy",
  },
  {
    word: "Baptism",
    hint: "A Christian sacrament or rite of initiation, involving the application of water as a symbol of purification and admission into the Christian community",
    category: "Christianity Concepts",
    difficulty: "Easy",
  },
  {
    word: "Grace",
    hint: "The free and unmerited favor of God, given to humanity, particularly through Jesus Christ",
    category: "Christianity Concepts",
    difficulty: "Medium",
  },
  {
    word: "Crucifixion",
    hint: "The execution of Jesus Christ on the cross, regarded as the central event in Christian theology",
    category: "Christianity Concepts",
    difficulty: "Medium",
  },
  {
    word: "Resurrection",
    hint: "The belief in the rising of Jesus Christ from the dead, an essential tenet of Christian faith",
    category: "Christianity Concepts",
    difficulty: "Easy",
  },
  {
    word: "Redemption",
    hint: "The act of saving or delivering from sin and its consequences, often associated with the sacrifice of Jesus Christ",
    category: "Christianity Concepts",
    difficulty: "Medium",
  },
  {
    word: "Eucharist",
    hint: "The Christian sacrament commemorating the Last Supper, in which bread and wine are consecrated and consumed",
    category: "Christianity Concepts",
    difficulty: "Medium",
  },
  {
    word: "Kingdom of God",
    hint: "The reign or rule of God over all things, both present and future",
    category: "Christianity Concepts",
    difficulty: "Medium",
  },
  {
    word: "UCC",
    hint: "Abbreviation for University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Cape Coast",
    hint: "The city in Ghana where the University of Cape Coast is located",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Vice Chancellor",
    hint: "The principal academic and administrative officer of the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Medium",
  },
  {
    word: "Academics",
    hint: "The educational programs and courses offered at the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Faculties",
    hint: "The different academic divisions within the University of Cape Coast, such as the Faculty of Social Sciences or the Faculty of Education",
    category: "University of Cape Coast",
    difficulty: "Medium",
  },
  {
    word: "Students",
    hint: "Individuals who are enrolled in or attending the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Campus",
    hint: "The physical area or grounds of the University of Cape Coast where academic activities take place",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Library",
    hint: "A facility at the University of Cape Coast that provides resources and services for research and study",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Graduation",
    hint: "The ceremony or event where students receive their academic degrees upon completion of their studies at the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Medium",
  },
  {
    word: "Sports",
    hint: "Athletic activities and competitions that take place at the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Chancellor",
    hint: "The ceremonial head of the University of Cape Coast, often a distinguished public figure",
    category: "University of Cape Coast",
    difficulty: "Medium",
  },

{
    word: "Alumni",
    hint: "Former students of the University of Cape Coast who have graduated",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Research",
    hint: "The systematic investigation and study conducted by faculty and students at the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },

{
    word: "Community Engagement",
    hint: "The University of Cape Coast's involvement and interaction with the local community to address societal needs",
    category: "University of Cape Coast",
    difficulty: "Medium",
  },
  {
    word: "Lectures",
    hint: "Educational sessions delivered by professors and instructors to students at the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Graduate School",
    hint: "The division of the University of Cape Coast that offers advanced degree programs for postgraduate students",
    category: "University of Cape Coast",
    difficulty: "Medium",
  },
  {
    word: "Admissions",
    hint: "The process by which students apply and are accepted into programs at the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Easy",
  },
  {
    word: "Algorithm",
    hint: "A set of step by step instructions for solving a problem or accomplishing a task",
    category: "Computer Science",
    difficulty: "Easy",
  },
  {
    word: "Programming",
    hint: "The process of writing code to create computer programs",
    category: "Computer Science",
    difficulty: "Easy",
  },
  {
    word: "Data Structures",
    hint: "The organization and storage of data in a computer for efficient access and manipulation",
    category: "Computer Science",
    difficulty: "Medium",
  },
  {
    word: "Software Engineering",
    hint: "The application of engineering principles to the development of software systems",
    category: "Computer Science",
    difficulty: "Medium",
  },
  {
    word: "Residence Halls",
    hint: "The on campus accommodations provided for students at the University of Cape Coast",
    category: "University of Cape Coast",
    difficulty: "Medium",
  },
  {
    word: "Database Management",
    hint: "The design, implementation, and maintenance of databases to store and retrieve data",
    category: "Computer Science",
    difficulty: "Medium",
  },
  {
    word: "Artificial Intelligence",
    hint: "The development of computer systems that can perform tasks that normally require human intelligence",
    category: "Computer Science",
    difficulty: "Medium",
  },
  {
    word: "Network Security",
    hint: "The protection of computer networks and data from unauthorized access or attacks",
    category: "Computer Science",
    difficulty: "Medium",
  },
  {
    word: "Operating Systems",
    hint: "The software that manages computer hardware and provides a platform for running applications",
    category: "Computer Science",
    difficulty: "Easy",
  },
  {
    word: "Computer Networks",
    hint: "The interconnected systems that allow computers to communicate and share resources",
    category: "Computer Science",
    difficulty: "Easy",
  },
  {
    word: "Human Computer Interaction",
    hint: "The study of how humans interact with computers and the design of user friendly interfaces",
    category: "Computer Science",
    difficulty: "Medium",
  },
  {
    word: "Surah Al Fatiha",
    hint: "The Opening chapter of the Quran",
    category: "Quranic Verses",
    difficulty: "Easy",
  },
  {
    word: "Ayat Al Kursi",
    hint: "The Throne Verse (Quran 2:255)",
    category: "Quranic Verses",
    difficulty: "Easy",
  },
  {
    word: "Surah Al Ikhlas",
    hint: "Chapter of Sincerity (Quran 112)",
    category: "Quranic Verses",
    difficulty: "Easy",
  },
  {
    word: "Surah Al Baqarah",
    hint: "The Cow (Quran 2)",
    category: "Quranic Verses",
    difficulty: "Medium",
  },
  {
    word: "Surah Ya Sin",
    hint: "Heart of the Quran (Quran 36)",
    category: "Quranic Verses",
    difficulty: "Medium",
  },
  {
    word: "Surah Al Kahf",
    hint: "The Cave (Quran 18)",
    category: "Quranic Verses",
    difficulty: "Medium",
  },
  {
    word: "Surah Al Fajr",
    hint: "The Dawn (Quran 89)",
    category: "Quranic Verses",
    difficulty: "Easy",
  },
  {
    word: "Surah Al Anfal",
    hint: "The Spoils of War (Quran 8)",
    category: "Quranic Verses",
    difficulty: "Medium",
  },
  {
    word: "Surah Al Mulk",
    hint: "The Sovereignty (Quran 67)",
    category: "Quranic Verses",
    difficulty: "Medium",
  },
  {
    word: "Surah Al Hujurat",
    hint: "The Rooms (Quran 49)",
    category: "Quranic Verses",
    difficulty: "Medium",
  },
  {
    word: "Old Trafford",
    hint: "The iconic stadium and home ground of Manchester United",
    category: "Manchester United",
    difficulty: "Easy",
  },
  {
    word: "Sir Alex Ferguson",
    hint: "The legendary former manager of Manchester United",
    category: "Manchester United",
    difficulty: "Easy",
  },
  {
    word: "The Red Devils",
    hint: "The nickname of the Manchester United football team",
    category: "Manchester United",
    difficulty: "Easy",
  },
  {
    word: "Premier League",
    hint: "The top professional football league in England, in which Manchester United competes",
    category: "Manchester United",
    difficulty: "Easy",
  },
  {
    word: "Ryan Giggs",
    hint: "A former Manchester United player and club legend",
    category: "Manchester United",
    difficulty: "Medium",
  },
  {
    word: "UEFA Champions League",
    hint: "The premier club football competition in Europe, which Manchester United has won multiple times",
    category: "Manchester United",
    difficulty: "Medium",
  },
  {
    word: "George Best",
    hint: "One of the greatest players in Manchester United's history",
    category: "Manchester United",
    difficulty: "Medium",
  },
  {
    word: "The Class of '92",
    hint: "A group of talented Manchester United players who came through the club's youth system in the 1990s",
    category: "Manchester United",
    difficulty: "Medium",
  },

{
    word: "The Treble",
    hint: "The achievement of winning the Premier League, FA Cup, and UEFA Champions League in a single season, which Manchester United accomplished in 1999",
    category: "Manchester United",
    difficulty: "Medium",
  },
  {
    word: "Exercise",
    hint: "Physical activity performed to improve or maintain health and fitness",
    category: "Health",
    difficulty: "Easy",
  },
  {
    word: "Nutrition",
    hint: "The process of providing the body with the necessary nutrients for growth, development, and overall health",
    category: "Health",
    difficulty: "Easy",
  },
  {
    word: "Hydration",
    hint: "The act of providing adequate fluids to the body to maintain proper physiological function",
    category: "Health",
    difficulty: "Easy",
  },
  {
    word: "Sleep",
    hint: "A naturally recurring state of rest for the body and mind, essential for overall health and well being",
    category: "Health",
    difficulty: "Easy",
  },
  {
    word: "Stress Management",
    hint: "Techniques and strategies used to cope with and reduce stress levels",
    category: "Health",
    difficulty: "Medium",
  },
  {
    word: "Mental Health",
    hint: "The state of emotional, psychological, and social well being",
    category: "Health",
    difficulty: "Medium",
  },

{
    word: "Wellness",
    hint: "The active pursuit of activities, choices, and lifestyles that lead to a state of holistic health",
    category: "Health",
    difficulty: "Medium",
  },
  {
    word: "Vaccination",
    hint: "The administration of vaccines to stimulate the body's immune response and provide protection against infectious diseases",
    category: "Health",
    difficulty: "Medium",
  },
  {
    word: "Meditation",
    hint: "A practice of focusing the mind and achieving a mentally clear and emotionally calm state",
    category: "Health",
    difficulty: "Medium",
  },
  {
    word: "Alternating Current",
    hint: "A type of electric current that periodically reverses direction, championed by Nikola Tesla",
    category: "Nikola Tesla",
    difficulty: "Easy",
  },
  {
    word: "Tesla Coil",
    hint: "An electrical resonant transformer circuit invented by Nikola Tesla",
    category: "Nikola Tesla",
    difficulty: "Easy",
  },
  {
    word: "Wireless Power Transfer",
    hint: "The transmission of electrical energy without the need for wires or cables, a concept explored by Nikola Tesla",
    category: "Nikola Tesla",
    difficulty: "Medium",
  },
  {
    word: "Induction Motor",
    hint: "A type of electric motor utilizing rotating magnetic fields, invented by Nikola Tesla",
    category: "Nikola Tesla",
    difficulty: "Medium",
  },

{
    word: "Wardenclyffe Tower",
    hint: "An experimental wireless transmission station designed by Nikola Tesla",
    category: "Nikola Tesla",
    difficulty: "Medium",
  },
  {
    word: "Tesla's Egg of Columbus",
    hint: "An experiment by Nikola Tesla demonstrating wireless power transmission through electromagnetic induction",
    category: "Nikola Tesla",
    difficulty: "Medium",
  },
  {
    word: "Remote Control",
    hint: "A technology developed by Nikola Tesla that allows wireless operation of devices from a distance",
    category: "Nikola Tesla",
    difficulty: "Easy",
  },
  {
    word: "Earthquake Machine",
    hint: "A hypothetical invention attributed to Nikola Tesla that allegedly could generate earthquakes",
    category: "Nikola Tesla",
    difficulty: "Medium",
  },
  {
    word: "Magnifying Transmitter",
    hint: "A large scale electrical transformer designed by Nikola Tesla for wireless energy transmission",
    category: "Nikola Tesla",
    difficulty: "Medium",
  },
  {
    word: "Albert Einstein",
    hint: "A theoretical physicist known for the theory of relativity and the equation E=mc^2",
    category: "Famous Scientists",
    difficulty: "Easy",
  },
  {
    word: "Marie Curie",
    hint: "A physicist and chemist known for her pioneering research on radioactivity",
    category: "Famous Scientists",
    difficulty: "Easy",
  },
  {
    word: "Isaac Newton",
    hint: "A mathematician and physicist who formulated the laws of motion and universal gravitation",
    category: "Famous Scientists",
    difficulty: "Easy",
  },
  {
    word: "Charles Darwin",
    hint: "A naturalist and biologist known for his theory of evolution by natural selection",
    category: "Famous Scientists",
    difficulty: "Easy",
  },
  {
    word: "Nikola Tesla",
    hint: "An inventor and electrical engineer known for his contributions to alternating current (AC) and wireless power transmission",
    category: "Famous Scientists",
    difficulty: "Medium",
  },
  {
    word: "Stephen Hawking",
    hint: "A theoretical physicist known for his work on black holes and the theory of Hawking radiation",
    category: "Famous Scientists",
    difficulty: "Medium",
  },
  {
    word: "Galileo Galilei",
    hint: "An astronomer, physicist, and mathematician known as the father of modern science",
    category: "Famous Scientists",
    difficulty: "Medium",
  },
  {
    word: "Rosalind Franklin",
    hint: "A chemist and crystallographer who made significant contributions to the discovery of the structure of DNA",
    category: "Famous Scientists",
    difficulty: "Medium",
  },
  {
    word: "Louis Pasteur",
    hint: "A biologist and chemist known for his discoveries in vaccination, pasteurization, and microbial fermentation",
    category: "Famous Scientists",
    difficulty: "Easy",
  },
  {
    word: "Jane Goodall",
    hint: "A primatologist and anthropologist known for her research and conservation efforts on chimpanzees",
    category: "Famous Scientists",
    difficulty: "Medium",
  },
  {
    word: "butterfly",
    hint: "An insect with colorful wings",
    category: "Animals",
    difficulty: "Easy",
  },
];

function removeDuplicatesByProperty(arr, property) {
  return arr.filter(
    (obj, index, self) =>
      index === self.findIndex((o) => o[property] === obj[property])
  );
}

let uniqueArray = removeDuplicatesByProperty(words, "word");

const contents = document.querySelector(".content");
const typing = contents.querySelector(".typing");
const inputs = contents.querySelector(".inputs");
const hintType = contents.querySelector(".hint span");
const categoryType = contents.querySelector(".category span");
const difficultyLevel = contents.querySelector(".level span");
const wrongLetter = contents.querySelector(".wrong-letter span");
const guessLeft = contents.querySelector(".guess-left span");
const resetBtn = contents.querySelector(".reset-btn");
const win = contents.querySelector(".winlose .wins");
const lose = contents.querySelector(".winlose .losses");
let word;
let maxGuess;
let correct = [];
let incorrects = [];
let wins = 0;
let losses = 0;

const randomWord = () => {
  const randomObj = uniqueArray[Math.floor(Math.random() * uniqueArray.length)];
  word = randomObj.word.replace(" ", "").replace(" ", "").toLowerCase();

const { hint, difficulty, category } = randomObj;
  maxGuess = 8;
  hintType.innerText = hint;
  difficultyLevel.innerText = difficulty;
  categoryType.innerText = category;

correct = [];
  incorrects = [];
  let html = "";
  for (word of word) {
    html += `<input type="text" />`;
  }
  inputs.innerHTML = html;
};
randomWord();

Guessing Game

Recommended

HTML5 Canvas Game: "Just Hit The Button

Volley Random Game HTML5 Source Code

Breakout game

HTML

CSS

JS

Recommended

HTML5 Canvas Game: "Just Hit The Button

Volley Random Game HTML5 Source Code

Breakout game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS