My Mini Project – "Joke Danger Meter"

As a budding web developer, I recently completed a mini project that combines humor with interactive functionality: the "Joke Danger Meter." This project is a fun little tool built using HTML, CSS, and JavaScript, which calculates the chance of you ending up in "jail" based on a series of yes/no questions.

What is the Joke Danger Meter?

The Joke Danger Meter is a lighthearted, interactive web application that evaluates your answers to a series of yes/no questions to determine how "dangerous" your jokes might be. The idea is simple: based on your responses, the app calculates the potential "chance" of you going to jail for your joke.

Of course, it's all in good fun, but it's a fun example of using web development technologies to create an engaging, playful experience.

The Technologies Used:

HTML (HyperText Markup Language): This is the backbone of the project. HTML is used to structure the content of the web page, including the questions, buttons, and display areas.
CSS (Cascading Style Sheets): CSS is used to style the page, making it visually appealing. I applied a clean and modern design with fun colors and simple animations to make the user experience more engaging.
JavaScript: The heart of the project lies in JavaScript. It powers the logic of the "Joke Danger Meter." JavaScript collects the answers to the yes/no questions and calculates a danger score, which is then displayed to the user in a fun and dynamic way.

How It Works The concept behind the Joke Danger Meter is simple but effective:

Questions: The user is presented with a series of yes/no questions that might humorously hint at whether a joke is "dangerous" or not.

For example: "Do you often tell jokes that are a bit too edgy?"

"Have you ever offended someone with a joke?"

"Do you sometimes joke about serious topics?"

Interactive Responses: The user answers these questions by selecting "Yes" or "No." Each answer is linked to a specific outcome, contributing to the total "danger score."
Danger Meter: Once all questions are answered, the JavaScript logic adds up the score. If your score is high, the app humorously suggests you're at a high risk of being "sent to jail" for your joke. A lower score means you're safer with your humor!

Result Display: Based on the total score, the app dynamically updates the danger meter and displays the results, such as "You are at a 50% chance of jail," or "You’re in the clear!"

The Fun and Creativity Behind It.

Source Code

-> HTML Code :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JOKE DANGER METER</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" id="mainbox">
        <div class="left">
            <h3>Jail meter</h3>
            <div class="levelout"><div class="level"><div id="lev"></div></div></div>
        </div>
        <div class="right">
            <h1>Joke Danger Meter</h1>
            <h5>Find out if your joke is safe or offensive</h5>
            <div class="ques">
                <h3>Is your joke about a polotical party?</h3>
                <span>
                <button class="no" id="no1" onclick="">No</button>
                <button class="yes" id="yes1" onclick="">Yes</button>
                </span>
            </div>
            <div class="ques">
                <h3>Does your joke involve religion?</h3>
                <span>
                <button class="no" id="no2" onclick="">No</button>
                <button class="yes" id="yes2" onclick="">Yes</button>
                </span>
            </div>
            <div class="ques">
                <h3>Is it a dark humor joke?</h3>
                <span>
                <button class="no" id="no3" onclick="">No</button>
                <button class="yes" id="yes3" onclick="">Yes</button>
                </span>
            </div>
            <div class="ques">
                <h3>Does it target a specific gender?</h3>
                <span>
                <button class="no" id="no4" onclick="">No</button>
                <button class="yes" id="yes4" onclick="">Yes</button>
                </span>
            </div>
            <div class="ques">
                <h3>Is your joke about someone's mom/dad?</h3>
                <span>
                <button class="no" id="no5" onclick="">No</button>
                <button class="yes" id="yes5" onclick="">Yes</button>
                </span>
            </div>
            <div class="ques">
                <h3>Is it a joke about a taboo topic?</h3>
                <span>
                <button class="no" id="no6" onclick="">No</button>
                <button class="yes" id="yes6" onclick="">Yes</button>
                </span>
            </div>
            <button id="btn">Check Result</button>
        </div>

    </div>
    <div class="result_box hide" id="boxmode">
        <img src="green-tick.png" width="100px">
        <h1>Submitted!</h1>
        <h3>Chance of Jail : <span id="resValue"></span></h3>
        <h5 style="text-align: center;">Thanks for playing with us.I hope you<br> enjoyed this web application.</h5>
        <button id="okay">Okay</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

-> CSS Code :


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: rgb(219, 214, 214);
    transition: 0.6s all;
}
body{
    background-color: rgb(217, 70, 148);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.container{
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    width: 100vw;
}
.level{
    height: 240px;
    width:  45px;
    margin: 5px;
    background-color: rgb(219, 214, 214);
    border-radius: 40px;
}
.levelout{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(221,7,7,1) 0%, rgba(246,231,82,1) 90% );
    border-radius: 40px;
}
.left{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.left h3{
    color: rgb(107, 101, 101);
}
.right{
    background-color: rgb(244, 242, 242);
    display: flex;
    padding: 10px;
    border-radius: 20px;
    flex-direction: column;
    /* align-items: center; */
}
.right h1{
    text-align: center;
    margin: 10px;
    margin-bottom: 0;
    padding-left: 10px;
    color: rgb(23, 23, 23);
   background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(221,7,7,1) 0%, rgba(246,231,82,1) 90% );
}
.right h5{
    color: rgb(68, 66, 66);
    text-align: center;
    margin-bottom: 10px;
}
.right .ques{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 20px;
}
.right .ques h3{
    color: rgb(57, 56, 56);
}
.right .ques .no{
    color: rgb(231, 229, 229);
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(0,152,155,1) 0.1%, rgba(0,94,120,1) 94.2% );
    border: none;
    outline: none;
    font-size: 15px;
    border-radius: 8px;
    padding: 7px 13px 7px 13px;
    &:hover{
        cursor: pointer;
        background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgb(3, 127, 129) 0.1%, rgba(0,94,120,1) 94.2% );
    }
}
.right .ques .yes{
    color: rgb(231, 229, 229);
    background-image: linear-gradient( 109.6deg,  rgba(233,207,112,1) 11.2%, rgba(221,9,9,1) 91.1% );
    border: none;
    outline: none;
    font-size: 15px;
    border-radius: 8px;
    padding: 7px 13px 7px 13px;
    &:hover{
        cursor: pointer;
        background-image: linear-gradient( 109.6deg,  rgba(233,207,112,1) 11.2%, rgb(148, 10, 10) 91.1% );
    }
}
#btn{
    background-image: linear-gradient( 109.6deg,  rgba(15,2,2,1) 11.2%, rgba(36,163,190,1) 91.1% );
    border: none;
    outline: none;
    font-size: 15px;
    border-radius: 8px;
    padding: 7px 13px 7px 13px;
    color: rgb(255, 255, 255);
    margin: 20px;
    &:hover{
        cursor: pointer;
        background-image: linear-gradient( 109.6deg,  rgba(15,2,2,1) 11.2%, rgb(23, 99, 117) 91.1% );
    }
}
.level{
    overflow: hidden;
}


.result_box{
    padding: 20px 40px;
    background-color: rgb(249, 247, 247);;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 14px;
    transition: 0.5s all;
}
.result_box h1{
    color: rgb(47, 174, 114);
}
.result_box h3{
    margin: 10px;
    color: rgb(102, 112, 107);
}
.result_box button{
    margin: 10px;
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(0,152,155,1) 0.1%, rgba(0,94,120,1) 94.2% );
    border: none;
    outline: none;
    padding: 10px 20px;
    font-size: 15px;
    color: white;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    &:hover{
        background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(0,152,155,1) 0.1%, rgb(16, 53, 63) 94.2% );
    }
}
.result_box h5{
    color: rgb(56, 54, 54);
}

.hide{
    display: none;
}
#resValue{
    color: rgb(89, 86, 86);
}

-> JS Code :


const no1=document.getElementById("no1")
const no2=document.getElementById("no2")
const no3=document.getElementById("no3")
const no4=document.getElementById("no4")
const no5=document.getElementById("no5")
const no6=document.getElementById("no6")

const yes1=document.getElementById("yes1")
const yes2=document.getElementById("yes2")
const yes3=document.getElementById("yes3")
const yes4=document.getElementById("yes4")
const yes5=document.getElementById("yes5")
const yes6=document.getElementById("yes6")

const level=document.getElementById("lev")
let globalvalue=0;

const btn=document.getElementById("btn")

yes1.addEventListener("click",()=>{
    globalvalue=globalvalue+40;
    // console.log(globalvalue)
    level.style.height=`${globalvalue}px`;
    level.style.width=`100%`;
    level.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(42, 39, 131) 93.2% )"
    level.style.overflow="hidden"
    yes1.disabled=true
    no1.disabled=true
    yes1.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no1.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
yes2.addEventListener("click",()=>{
    globalvalue=globalvalue+40;
    // console.log(globalvalue)
    level.style.height=`${globalvalue}px`;
    level.style.width=`100%`;
    level.style.backgroundImage="linear-gradient( 104.1deg,  rgba(0,61,100,1) 13.6%, rgba(47,127,164,1) 49.4%, rgba(30,198,198,1) 93.3% )"
    level.style.overflow="hidden"
    yes2.disabled=true
    no2.disabled=true
    yes2.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no2.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
yes3.addEventListener("click",()=>{
    globalvalue=globalvalue+40;
    // console.log(globalvalue)
    level.style.height=`${globalvalue}px`;
    level.style.width=`100%`;
    level.style.backgroundImage="linear-gradient( 111.9deg,  rgba(255,255,169,1) 0.2%, rgba(255,208,120,1) 14.1%, rgba(255,156,94,1) 27.4%, rgba(251,99,95,1) 41.4%, rgba(226,28,114,1) 55.8%, rgba(176,0,140,1) 70.2%, rgba(83,0,166,1) 84.1% )"
    level.style.overflow="hidden"
    yes3.disabled=true
    no3.disabled=true
    yes3.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no3.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
yes4.addEventListener("click",()=>{
    globalvalue=globalvalue+40;
    // console.log(globalvalue)
    level.style.height=`${globalvalue}px`;
    level.style.width=`100%`;
    level.style.backgroundImage="radial-gradient( circle 382px at 50% 50.2%,  rgba(73,76,212,1) 0.1%, rgba(3,1,50,1) 100.2% )"
    level.style.overflow="hidden"
    yes4.disabled=true
    no4.disabled=true
    yes4.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no4.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
yes5.addEventListener("click",()=>{
    globalvalue=globalvalue+40;
    // console.log(globalvalue)
    level.style.height=`${globalvalue}px`;
    level.style.width=`100%`;
    level.style.backgroundImage="linear-gradient( 109.9deg,  rgba(0,174,182,1) 4.5%, rgba(190,223,224,1) 22.6%, rgba(217,198,225,1) 45.1%, rgba(248,178,54,1) 68.5%, rgba(235,105,17,1) 87.2% )"
    level.style.overflow="hidden"
    yes5.disabled=true
    no5.disabled=true
    yes5.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no5.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
yes6.addEventListener("click",()=>{
    globalvalue=globalvalue+40;
    // console.log(globalvalue)
    level.style.height=`${globalvalue}px`;
    level.style.width=`100%`;
    level.style.backgroundImage="linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )"
    level.style.overflow="hidden"
    yes6.disabled=true
    no6.disabled=true
    yes6.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no6.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
no1.addEventListener("click",()=>{
    if(globalvalue==0){
        globalvalue=globalvalue
    }
    else{
        globalvalue=globalvalue-40;
        level.style.height=`${globalvalue}px`;
        level.style.width=`100%`;
        level.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(42, 39, 131) 93.2% )"
        level.style.overflow="hidden"
    }
    yes1.disabled=true
    no1.disabled=true
    yes1.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no1.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
no2.addEventListener("click",()=>{
    if(globalvalue==0){
        globalvalue=globalvalue
    }
    else{
        globalvalue=globalvalue-40;
        level.style.height=`${globalvalue}px`;
        level.style.width=`100%`;
        level.style.backgroundImage="linear-gradient( 104.1deg,  rgba(0,61,100,1) 13.6%, rgba(47,127,164,1) 49.4%, rgba(30,198,198,1) 93.3% )"
        level.style.overflow="hidden"
    }
    yes2.disabled=true
    no2.disabled=true
    yes2.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no2.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
no3.addEventListener("click",()=>{
    if(globalvalue==0){
        globalvalue=globalvalue
    }
    else{
        globalvalue=globalvalue-40;
        level.style.height=`${globalvalue}px`;
        level.style.width=`100%`;
        level.style.backgroundImage="linear-gradient( 111.9deg,  rgba(255,255,169,1) 0.2%, rgba(255,208,120,1) 14.1%, rgba(255,156,94,1) 27.4%, rgba(251,99,95,1) 41.4%, rgba(226,28,114,1) 55.8%, rgba(176,0,140,1) 70.2%, rgba(83,0,166,1) 84.1% )"
        level.style.overflow="hidden"
    }
    yes3.disabled=true
    no3.disabled=true
    yes3.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no3.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
no4.addEventListener("click",()=>{
    if(globalvalue==0){
        globalvalue=globalvalue
    }
    else{
        globalvalue=globalvalue-40;
        level.style.height=`${globalvalue}px`;
        level.style.width=`100%`;
        level.style.backgroundImage="radial-gradient( circle 602px at 2.1% 5.1%,  rgba(233,0,120,1) 0%, rgba(0,0,0,1) 90.1% )"
        level.style.overflow="hidden"
    }
    yes4.disabled=true
    no4.disabled=true
    yes4.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no4.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
no5.addEventListener("click",()=>{
    if(globalvalue==0){
        globalvalue=globalvalue
    }
    else{
        globalvalue=globalvalue-40;
        level.style.height=`${globalvalue}px`;
        level.style.width=`100%`;
        level.style.backgroundImage="linear-gradient( 109.9deg,  rgba(0,174,182,1) 4.5%, rgba(190,223,224,1) 22.6%, rgba(217,198,225,1) 45.1%, rgba(248,178,54,1) 68.5%, rgba(235,105,17,1) 87.2% )"
        level.style.overflow="hidden"
    }
    yes5.disabled=true
    no5.disabled=true
    yes5.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no5.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})
no6.addEventListener("click",()=>{
    if(globalvalue==0){
        globalvalue=globalvalue
    }
    else{
        globalvalue=globalvalue-40;
        level.style.height=`${globalvalue}px`;
        level.style.width=`100%`;
        level.style.backgroundImage="linear-gradient( 226.4deg,  rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(255,241,0,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(113,63,254,1) 100.1% )"
        level.style.overflow="hidden"
    }
    yes6.disabled=true
    no6.disabled=true
    yes6.style.backgroundImage="linear-gradient( 111.4deg,  rgb(43, 43, 48) 6.5%, rgb(80, 79, 97) 93.2% )"
    no6.style.backgroundImage="linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgb(60, 60, 68) 93.2% )"
})

const boxmode=document.getElementById("boxmode")
const mainbox=document.getElementById("mainbox")
const resValue=document.getElementById("resValue")
btn.addEventListener("click",()=>{
    const result=`${(globalvalue/240)*100}%`;
    resValue.innerText=result
    btn.innerText="please wait...."
    setTimeout(() => {
        boxmode.classList.remove("hide")
        mainbox.classList.add("hide")    
    }, 1000);
})


const okay=document.getElementById("okay")
okay.addEventListener("click",()=>{
    okay.innerText="please wait.."
    setTimeout(() => {
        window.location.reload("C:\Users\ASUS\OneDrive\Desktop\code\projects\joke danger meter\index.html")
    }, 1500);
})

What I love most about this project is that it doesn’t take itself too seriously. It was meant to be fun, while still giving me an opportunity to apply important web development skills. I also learned a lot while building it, especially in how to manage user inputs and create dynamic content with JavaScript.

Challenges Faced While the project was relatively simple, there were still a few challenges I faced:

JavaScript Logic: Ensuring that the scoring system was accurate and that the results were dynamically updated in real-time was a bit tricky. I had to spend time refining the logic to ensure it worked correctly for every possible combination of answers.
Responsive Design: I wanted the project to look good on both desktop and mobile devices, so I had to fine-tune the CSS to ensure everything displayed well across different screen sizes.

Thankfully, CSS media queries helped me make it responsive.

User Experience: Since this was a lighthearted project, I needed to make sure the user experience was engaging. I focused on smooth animations and transitions for the buttons and danger meter to keep it playful.

Future Improvements While the project is simple, I have a few ideas for enhancing it in the future:

More Questions and Personalization: Right now, the app has a fixed set of questions. I plan to add more questions and perhaps allow the user to add their own to make it more personalized and interactive.
Adding Sound Effects: It would be fun to add sound effects that play when the user answers questions or when they see their final danger score.
A More Detailed Result: Instead of just showing a danger score, I could add more detailed, humorous messages depending on how "dangerous" the user’s answers are.

For instance, a high score could result in a message like, "You’re definitely on thin ice!" while a low score might say, "Phew! You’re safe for now."

Conclusion:

This mini project was a great way for me to practice my HTML, CSS, and JavaScript skills while having fun. The Joke Danger Meter may be lighthearted, but it served as a valuable learning experience in building interactive web applications. The best part is that it also gave me a chance to be creative, blending humor with technology.

I’m excited about the future improvements I have in mind, and who knows, maybe I’ll turn this into a full-fledged web app someday! If you’re looking for a simple and fun project to practice your web development skills, I highly recommend giving something like this a try.

Feel free to check out the code and give the Joke Danger Meter a spin yourself.

You never know how dangerous your jokes might really be!

Study Peak's

Joke Danger Meter | Mini Project |

Source Code

Thanks everyone!

Posted by Study Peak's

Post a Comment

0 Comments

Most Popular

🖼️ Image Compressor Project | HTML | CSS | JS

🥤Coca Cola trending hover card | HTML | CSS

🧪 Module 7: Final Project & Publishing

Tags

Categories

Report Abuse

Search This Blog

Popular Posts

HTML Course from beginner to advance with codes | Page 1

HTML Course from beginner to advance with codes | Page 2

🖼️ Image Compressor Project | HTML | CSS | JS

Recent Post

🖼️ Image Compressor Project | HTML | CSS | JS

Joke Danger Meter | Mini Project |

🥤Coca Cola trending hover card | HTML | CSS

Popular Posts

🖼️ Image Compressor Project | HTML | CSS | JS

🥤Coca Cola trending hover card | HTML | CSS

🧪 Module 7: Final Project & Publishing

Footer Menu Widget

Contact form

Joke Danger Meter | Mini Project |

Source Code

Thanks everyone!

Posted by Study Peak's

You may like these posts

Post a Comment

0 Comments

Social Plugin

Most Popular

Tags

Categories

Search This Blog

Popular Posts

Recent Post

Popular Posts

Footer Menu Widget

Contact form