JavaScript in the Browser i-Assess [Module 2 JavaScript and ES6]

PHOTO EMBED

Sat Oct 05 2024 05:13:56 GMT+0000 (Coordinated Universal Time)

Saved by @signup #html #javascript 

//1. JS - Maximum event count
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Count for a Month</title>
</head>
<body>
    <h2>Event count for a month</h2>

    <div>
        <label>Birthday party event:</label>
        <input type="number" id="event1"><br><br>

        <label>Engagement parties event:</label>
        <input type="number" id="event2"><br><br>

        <label>Corporate event:</label>
        <input type="number" id="event3"><br><br>

        <label>Social Gathering event:</label>
        <input type="number" id="event4"><br><br>

        <button id="button" onclick="maxevent()">Submit</button>
    </div>

    <div id="result"></div>

    <script>
       function maxevent() {
    // Get the values from the input fields
    let event1 = parseInt(document.getElementById('event1').value) || 0;
    let event2 = parseInt(document.getElementById('event2').value) || 0;
    let event3 = parseInt(document.getElementById('event3').value) || 0;
    let event4 = parseInt(document.getElementById('event4').value) || 0;

    // Determine the maximum value
    let maxEvents = Math.max(event1, event2, event3, event4);

    // Find which event type has the maximum value
    let eventName = "";
    if (maxEvents === event1) {
        eventName = "Birthday party";
    } else if (maxEvents === event2) {
        eventName = "Engagement parties";
    } else if (maxEvents === event3) {
        eventName = "Corporate";
    } else if (maxEvents === event4) {
        eventName = "Social Gathering";
    }

    // Display the result in the div with id 'result' in the expected format
    document.getElementById('result').innerHTML = `Maximum number of event occurred in this month is ${eventName}`;
}

    </script>
</body>
</html>





//2. Event Listeners
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming Contest</title>
    <style>
        textarea {
            width: 400px;
            height: 200px;
            border: 2px solid red;
            font-family: monospace;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <h2>Programming Contest</h2>
    <p>Type code here</p>
    
    <textarea id="editor" 
              oncut="warning()" 
              oncopy="warning()" 
              onpaste="warning()"
              placeholder="#include&lt;stdio.h&gt;
int main() {
    printf(&quot;Hello World&quot;);
    return 0;
}">
    </textarea>

    <script>
        function warning() {
            alert('Cut/Copy/Paste is restricted.');
        }
    </script>

</body>
</html>




//3. JS - Show more / less
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Planner</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h2>Wedding Planner</h2>
    <img src="image.jpg" alt="Wedding Image">

    <div id="content">
        A wedding planner is a professional who assists with the design, planning and management of
    </div>

    <a href="javascript:void(0)" id="anchor" onclick="read()">more</a>
</body>
</html>


//script.js


let isExpanded = false;

function read() {
    const content = document.getElementById("content");
    const anchor = document.getElementById("anchor");

    if (!isExpanded) {
        content.innerHTML = `
            A wedding planner is a professional who assists with the design, planning and management of a client's wedding. Weddings are significant events in people's lives and as such, couples are often willing to spend considerable amount of money to ensure that their weddings are well-organized. Wedding planners are often used by couples who work long hours and have little spare time available for sourcing and managing wedding venues and wedding suppliers.<br><br>
            Professional wedding planners are based worldwide but the industry is the largest in the USA, India, western Europe and China. Various wedding planning courses are available to those who wish to pursue the career. Planners generally charge either a percentage of the total wedding cost, or a flat fee.<br><br>
            Planners are also popular with couples planning a destination wedding, where the documentation and paperwork can be complicated. Any country where a wedding is held requires different procedures depending on the nationality of each the bride and the groom. For instance, US citizens marrying in Italy require a Nulla Osta (affidavit sworn in front of the US consulate in Italy), plus an Atto Notorio (sworn in front of the Italian consulate in the US or at a court in Italy), and legalization of the above. Some countries instead have agreements and the couple can get their No Impediment forms from their local registrar and have it translated by the consulate in the country of the wedding. A local wedding planner can take care of the different procedures.
        `;
        anchor.textContent = "less";
    } else {
        content.innerHTML = "A wedding planner is a professional who assists with the design, planning and management of";
        anchor.textContent = "more";
    }

    isExpanded = !isExpanded;
}
content_copyCOPY