New Challenge for my Students! 18 july

JavaScript Conversations
#1

Q:- Write a function that takes an integer minutes and converts it to seconds.

Examples

convert(5) ➞ 300

convert(3) ➞ 180

convert(2) ➞ 120

Notes

  • Don’t forget to return the result.
3 Likes
#2
#3

Q:- Write a function that takes an integer minutes and converts it to seconds.

function convert(minutes) {
return minutes * 60;
}

    console.log(convert(3));
1 Like
#4 

1. Method using `parseInt()`:

``
<!DOCTYPE html>
<html>
<head>
  <title>Minutes to Seconds Converter</title>
</head>
<body>
  <label for="minutes">Enter minutes:</label>
  <input type="text" id="minutes">
  <button onclick="convertAndDisplay()">Convert</button>
  <p id="result"></p>

  <script>
    function convert(minutes) {
      return parseInt(minutes) * 60;
    }

    function convertAndDisplay() {
      const minutesInput = document.getElementById("minutes");
      const minutes = minutesInput.value;
      const seconds = convert(minutes);
      const resultDisplay = document.getElementById("result");
      resultDisplay.textContent = `Converted to seconds: ${seconds} seconds`;
    }
  </script>
</body>
</html>


2. Method using fat arrow and `parseInt()`:

``
<!DOCTYPE html>
<html>
<head>
  <title>Minutes to Seconds Converter</title>
</head>
<body>
  <label for="minutes">Enter minutes:</label>
  <input type="text" id="minutes">
  <button onclick="convertAndDisplay()">Convert</button>
  <p id="result"></p>

  <script>
    const convert = minutes => parseInt(minutes) * 60;

    const convertAndDisplay = () => {
      const minutesInput = document.getElementById("minutes");
      const minutes = minutesInput.value;
      const seconds = convert(minutes);
      const resultDisplay = document.getElementById("result");
      resultDisplay.textContent = `Converted to seconds: ${seconds} seconds`;
    };
  </script>
</body>
</html>
  1. Method using fat arrow and Number():
<!DOCTYPE html>
<html>
<head>
  <title>Minutes to Seconds Converter</title>
</head>
<body>
  <label for="minutes">Enter minutes:</label>
  <input type="text" id="minutes">
  <button onclick="convertAndDisplay()">Convert</button>
  <p id="result"></p>

  <script>
    const convert = minutes => Number(minutes) * 60;

    const convertAndDisplay = () => {
      const minutesInput = document.getElementById("minutes");
      const minutes = minutesInput.value;
      const seconds = convert(minutes);
      const resultDisplay = document.getElementById("result");
      resultDisplay.textContent = `Converted to seconds: ${seconds} seconds`;
    };
  </script>
</body>
</html>
  1. Method using fat arrow and parseFloat():
<!DOCTYPE html>
<html>
<head>
  <title>Minutes to Seconds Converter</title>
</head>
<body>
  <label for="minutes">Enter minutes:</label>
  <input type="text" id="minutes">
  <button onclick="convertAndDisplay()">Convert</button>
  <p id="result"></p>

  <script>
    const convert = minutes => Number(minutes) * 60;

    const convertAndDisplay = () => {
      const minutesInput = document.getElementById("minutes");
      const minutes = minutesInput.value;
      const seconds = convert(minutes);
      const resultDisplay = document.getElementById("result");
      resultDisplay.textContent = `Converted to seconds: ${seconds} seconds`;
    };
  </script>
</body>
</html>

5.Method using Number() :

<!DOCTYPE html>
<html>
<head>
  <title>Minutes to Seconds Converter</title>
</head>
<body>
  <label for="minutes">Enter minutes:</label>
  <input type="text" id="minutes">
  <button onclick="convertAndDisplay()">Convert</button>
  <p id="result"></p>

  <script>
    function convert(minutes) {
      return Number(minutes) * 60;
    }

    function convertAndDisplay() {
      const minutesInput = document.getElementById("minutes");
      const minutes = minutesInput.value;
      const seconds = convert(minutes);
      const resultDisplay = document.getElementById("result");
      resultDisplay.textContent = `Converted to seconds: ${seconds} seconds`;
    }
  </script>
</body>
</html>
2 Likes
#5 
function convert(x){
    return x*60;
}
var y = convert(5);
document.write(y);
1 Like
#6

function minute(n){
var result=n*60;
console.log(result);
}
minute(5);
minute(3);
minute(2)

1 Like
#7 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Covert minutes to Seconds</title>
</head>
<body>
    <script>
        let min=parseInt(prompt('Enter Minutes'));
        function print(){
            return min*60;
        }
        let output= print();
        console.log(output);
    </script>
</body>
</html>
1 Like
#8 
<!DOCTYPE html>
<html>
<head>
  <title>Minutes to Seconds Converter</title>
</head>
<body>
  <h1>Minutes to Seconds Converter</h1>
  <label for="minutesInput">Enter Minutes:</label>
  <input type="number" id="minutesInput">
  <button onclick="convertAndDisplay()">Convert to Seconds</button>
  <p id="result"></p>

  <script>
    const convert = (function() {
      return function(minutes) {
        return minutes * 60;
      };
    })();

    function convertAndDisplay() {
      const minutesInput = document.getElementById('minutesInput');
      const resultElement = document.getElementById('result');

      const minutes = parseInt(minutesInput.value, 10);
      const seconds = convert(minutes);

      resultElement.textContent = `${minutes} minutes is equal to ${seconds} seconds.`;
    }
  </script>
</body>
</html>
2 Likes
#9

Q- Tell me about jQuery Syntax!!

#10

$(document).ready(function(){
})

1 Like
#11 
<script type="text/javascript" src="session22.js"></script>

$(document).ready(function(){
console.log(“hi mam”);
})

1 Like
#12 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .back{
            background-image: url('https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?cs=srgb&dl=pexels-pixabay-257360.jpg&fm=jpg');
            background-size: cover;
            background-position: center;
            width: 50%;
            height: 70dvb;
            border: 2px solid red;
            margin: 100px auto;
        }

    </style>
</head>

<body>
    <div>
        Background Image
    </div>
    <script src="jquery-3.7.0.min.js"></script>
    <script>
        $(document).ready(
            function () {
                $('div').addClass('back');
                console.log($('div'));
            })
    </script>
</body>

</html>
1 Like
#13 
var demo1= parseFloat(prompt("Enter the minutes to covert in seconds"));

function convert() {
    var result = demo1 * 60;
    return result;
}
var demo2= convert();
document.write(demo2);
1 Like
#14

$(document).ready(function(){
console.log(‘hey’)

});
//$ is representing Jquery

1 Like
#15

$(document).ready(function(){
console.log(“Hi this is syntax of jQuery”);
})

1 Like
#16

jQuery is a fast, small, and feature-rich JavaScript library designed to simplify and enhance the client-side scripting of HTML.
Syntax of jQuery:The basic syntax of jQuery is based on the dollar sign ($) and follows the following pattern:

$(selector).action();

The $ is an alias for the jQuery object, making it easier to call jQuery functions.
selectoris used to select HTML elements to perform actions on. It can be any valid CSS selector.action` is the jQuery method that performs the desired operation on the selected elements.

Example : Animations

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Animation</title>
</head>
<body>
  <div id="box"></div>
  <button id="animateBtn">Animate</button>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // jQuery code
    $(document).ready(function() {
      $('#animateBtn').click(function() {
        $('#box').animate({ left: '250px', opacity: '0.5', height: '+=150px', width: '+=150px' }, 'slow');
      });
    });
  </script>
</body>
</html>

a div element with ID “box” and a button with ID “animateBtn” are provided in the HTML.
In the jQuery code, $('#box') selects the div element with ID “box”.
.animate()is a jQuery method that animates CSS properties of the selected element. In this example, we animate the position, opacity, height, and width of the "box" div. The’slow’` parameter specifies the animation duration.

2 Likes
#17 
$document.ready(function(){ 
   console.log('Hi! I am Sayantan');
});

HTML
<h1> Jquery Session</h1>
<p id="demo1">Today We learnt abut Jquery.</p>

JS 
$document.ready(function(){
  $('h1').css("color","blue")
});
1 Like
#18 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQUERY</title>
    <style>
        .div_style{
            color: aqua;
            border: 1px solid blue;
            height: 300px;
            width: 50%;
            margin: auto;
            background-image: url(biryani\ \(1\).jpg);
            background-size: cover;
        }
        #mouse{
            height: 100px;
            width: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- <div>I LOVE YOU</div> -->
    
    <div id="mouse"></div>
    <script src="jquery-3.7.0.min.js"></script>
    <script type="text/javascript" src="session22.js"></script>
    
</body>
</html>

$(document).ready(function(){
    console.log("hey");
    $("div").addClass("div_style");
    // console.log($("div"))
    setInterval(function(){
        $("div").css("border","1px solid red")
    })
},3000);
$("#mouse").mouseover(function(){
    $("#mouse").css("background-color","red")
});
$("#mouse").mouseout(function(){
    $("#mouse").css("background-color","blue") 
})
// function convert(x){
//     return x*60;
// }
// var y = convert(5);
// document.write(y);
function convert(x){
    document.write(x*60);
}
convert(2);
$(document).ready(function(){
    console.log("hi mam");
})
1 Like
#19 

$(document).ready(function(){
});
1 Like
#20 

function minuteToSecond(a) {
return a * 60;
}

    console.log(minuteToSecond((3));
1 Like