jQuery toggleClass example

Toggle class name on click in jQuery

by gokulmaha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<div class="input-form">
    <input type="file" id="imageInput" accept="image/*"><br><br>
    <input type="text" id="titleInput" placeholder="Enter Title"><br><br>
    <textarea id="contentInput" placeholder="Enter Content" rows="4"></textarea><br><br>
    <button id="generateButton">Generate News Card</button>
    <button id="download" onClick="()">Generate News Card</button>

</div>

<div class="news-card" id="newsCard" style="display: none;">
<div id="news-image">
    <img id="newsImage" src="" alt="News Image">
</div>
    <div class="date" id="newsDate"></div>
    <div class="title" id="newsTitle"></div>
    <div class="content" id="newsContent"></div>
</div>

<canvas id="myCanvas" width="1920" height="1080"></canvas>

CSS

.news-card {
            width: 400px;
            border: 2px solid #000;
            padding: 10px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
            background: #ffe259;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            position: relative;
        }
        .news-card img {
            width: 100%;
            height: auto;
        }
        .news-card .date {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #004c99;
            color: #fff;
            padding: 5px;
        }
        .news-card .title {
            border-radius:20px;
            stroke: white;
          text-align:center;
            font-size: 20px;
            font-weight: bold;
            margin: 7px 0;
            padding: 10px;
            color: #fff;
           background: #8E2DE2;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


        }
        .news-card .content {
           text-align:center;
           border-radius:10px;
           padding: 10px; 
           font-size: 16px;
           background: #FF0099;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #493240, #FF0099);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #493240, #FF0099); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
        }

#news-image {
  
}

JavaScript

$(document).ready(function() {
 
 // Get the canvas element
let canvas = document.getElementById("myCanvas");
// Get the context
let ctx = canvas.getContext("2d");
// Create the video - can use any video url
let video = document.createElement("video");
video.src = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
video.play();
// Set the video to loop
video.loop = true;

// Create a function to draw frames on the canvas
let draw = function () {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // Repeat the draw loop
  requestAnimationFrame(draw);
};

// Call the draw loop
draw();
 
        $('#generateButton').click(function() {
            const reader = new FileReader();
            const file = $('#imageInput')[0].files[0];

            reader.onload = function(e) {
                $('#newsImage').attr('src', e.target.result);
            }

            if (file) {
                reader.readAsDataURL(file);
            }

            const title = $('#titleInput').val();
            const content = $('#contentInput').val();

            //$('#newsDate').text(date);
            //$('#newsTitle').text(title);
            //$('#newsContent').text(content);
            
            const today = new Date();
const yyyy = today.getFullYear();
let mm = today.getMonth() + 1; // Months start at 0!
let dd = today.getDate();

if (dd < 10) dd = '0' + dd;
if (mm < 10) mm = '0' + mm;

const formattedToday = dd + '-' + mm + '-' + yyyy;
            
            $('#newsDate').text(formattedToday);
            $('#newsTitle').text("title goes here");
            $('#newsContent').text("content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here");

            $('#newsCard').show();
        });
        
        function PrintDiv(){
        ...