Streaming Platform

by HamzaSamiHussein1_

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h3>
        Streaming platforms price per month is :- <mark>13.99$</mark>

    </h3>
    <form id="form">
        <label>Movie/series Name</label>
        <input type="text" id="input-form">

        <label>Select your favourite streaming platform</label>
        <select id="select-platform">

        </select>

        <input type="submit" value="submit" id="submit">

        <label>Enter how many platforms you watch from(max 7)</label>
        <input type="number" min="1" max="7">
    </form>

    <table id="table">
        <tr>
            <td>Movie Name</td>
            <td>Favourite streaming platform</td>
            <td>Movie Rate</td>
        </tr>
    </table>
    <!-- <td>You pay monthly on streaming platforms</td> -->
<script src="app.js"></script>
</body>
</html>

CSS

table, th, td {
    padding: 1.5%;
    border: 1px solid black;
    text-align: center;
}

button{
    width: 100%;
    height: 100%;
    padding: 2px ;
    margin: 2px;
}

JavaScript

'use strict'
var allMovie = [];
var selectArr = ['netflix','Amazon Prime video','HBO','Hulu','Apple TV Plus','Disney Plus','Crunchyroll'];
var selectPlatform = document.getElementById('select-platform');
var table  = document.getElementById('table');

for (let i = 0; i < selectArr.length; i++) {
    var option = document.createElement('option');
    option.textContent = selectArr[i];
    selectPlatform.appendChild(option);
}

var form1 = document.getElementById('form');
form1.addEventListener('submit',addfun);
function addfun(){
    event.preventDefault();
    console.log(event)
    

    new Movie(event.target[0].value, event.target[1].value, event.target[3].value);

    clearTable();
    render();

    set();

}
get();
render();
clearTable();
render();


/*Constructor*/
function Movie(MovieName, selectPlatform, monthlyPay){
    this.MovieName11 = MovieName;
    this.selectPlatform11 = selectPlatform;
    this.monthlyPay11 = monthlyPay *13.99;
    this.randomRate = generateRandomRate(100,10);
    allMovie.push(this);
}


function render(){
for (let i = 0; i < allMovie.length; i++) {
    var tr = document.createElement('tr');
    tr.setAttribute("id", "mainTR");
    table.appendChild(tr);

    var td1 = document.createElement('td');
    td1.textContent = allMovie[i].MovieName11;
    td1.setAttribute("class", "td1");
    tr.appendChild(td1);
    
    var td2 = document.createElement('td');
    td2.textContent = allMovie[i].selectPlatform11;
    td2.setAttribute("class", "td2");
    tr.appendChild(td2);

    var td3 = document.createElement('td');
    td3.textContent = allMovie[i].randomRate;
    td3.setAttribute("class", "td3");
    tr.appendChild(td3);

    var td4 = document.createElement('td');
    td4.textContent = allMovie[i].monthlyPay11;
    td4.setAttribute("class", "td4");
    tr.appendChild(td4);

    var td5 = document.createElement('td');
    td5.setAttribute("id", "td5");
    td5.innerHTML = `<button onclick=remove()> X </button>`
   ...