Category: javascript

Category Added in a WPeMatico Campaign

Use Express post request to emit Socket.io

I want get username when user post it, but io.sockets.emit is not working. However, When i didn’t put io.sockets.emit on app.post, It is working.

my html

<html>
    <body>
        <form action="chat" id="main" method="post">
            <div>
                <input type="text" id="id" name="username" value="" placeholder=" " required />
                <label for="id">暱稱</label>
            </div>
            <div>
                <input type="text" id="key" name="key" value="" placeholder=" " />
                <label for="key">房號</label>
            </div>
            <button type="submit" value="加入房間" class="btn">加入房間</button>
        </form>
    </body>
</html>

my js

io.on('connection', (socket) => {

    socket.on('joinRoom', username => {
        console.log(username);
        console.log("joinRoom");
    });
    socket.on('chat message', msg => {
        const user = getCurrentUser(socket.id);
        console.log(user);
        io.emit('chat message',  msg);
  });
});
app.post('/chat', urlencodedParser, function (req, res) {
    io.sockets.emit('joinRoom', "aa")
    console.log(req.body)
    res.sendFile('public/chat.html', { root: __dirname })
});

‘joinRoom’ seems not receive anything.

join value FormData with axios use javascript

i send value using postman with body form data format like this :

example with postman

analisa_type:1;1;2
eficiency_type:0;1;1

I input array data with separator (;)

i am confused how to separate it on axios
this is my code

let eficiency_name = this.items_efiicieny.map(x => x.analisa_exception_label).join(";");
let eficiency_type = this.combine.map(x => x.object_type).join(";");

const f = new FormData();
f.append("analisa_type", eficiency_name);
f.append("label_type", eficiency_type);

how to format the form data so that the value is like in postman?

Map inside map value

I tried show for each item in data array only the name key I need to show it with table.

const data = [{id: "111", name: "Danny", city: "NYC"},
              {id: "222", name: "Roni", city: "LDN}, 
              {id: "333", name: "Suzi", city: "TLV",
              {id: "444", name: "John", city: "SF"}
             ]
const config = [{fieldToShow: "name"}]


  <tbody>
  {data.map((row) => {
    return (
      <tr>
        {config.map((value) => {
          return <td>{row[value.field]}</td>;
        })}
      </tr>
    );
  })}

but it not work …

Displaying selected options in custom multiselect dropdwown as tags – React

I’ve custom multiselect dropdown which is implemented as given below

const RequestExpertSupport = function Basic({ data, onSelectedItemsChanged, selectedItemsIndices }) {

        const props = {

            "data" : [

                "My account and profile",

                "Understanding my footprint",

                "Target setting",

                "Specific actions",

                "Creating a plan",

                "Finance, funding and grants ",

                "Using the Carbon Planner platform",

                "Other",

            ],

            "selectedItemsIndices": [],

        }

        //

        const handleSelectedItemsChanged = useCallback(

            selectedItemsIndices => {

                onSelectedItemsChanged(selectedItemsIndices)

            },

            [onSelectedItemsChanged]

        );

       function onSelectedItemsChanged(selectedItemsIndices) {

            // let arrTopic = [];

            // const selected = document.querySelectorAll('#multiSelectDrop:checked');

            // const values = Array.from(selected).map(el => el.value);

         

            // console.log(values);

            console.log(selectedItemsIndices);

        }

        function renderItem (datum, index) {

                                return (

                                                <span>

                                                                {datum}

                                                </span>

                                );

                }

   

        return(

            <RequestExpertSupportDiv>

                <div className="container">

                    <div className="formContainer">

                        <form>

                            <label className="helpLabel">What would you like help with?</label>

                            <DropdownListTrigger

                                dropdownList={

                                    <MultiSelectDropdownList

                                        id="multiSelectDrop"

                                        data={props.data}

                                        onSelectedItemsChanged={handleSelectedItemsChanged}

                                        renderItem={renderItem}

                                        selectedItemsIndices={selectedItemsIndices}

                                    />

                                }

                                position="right"

                                className="ddlFilter"

                                >

                                <button className="zb-button zb-button-secondary zb-button-with-icon-after">

                                    <Span>Choose topic(s)</Span>

                                    <Icon

                                        name="chev-down-xsmall"

                                        style={{

                                            verticalAlign: "text-bottom",

                                        }}

                                        title={null}

                                    />

                                </button>

                            </DropdownListTrigger>

                            <div className="selectedTopics">

                                Selected topics are:

                            </div>

                            <label className="tellUsLabel">What would you like help with?</label>

                            <textarea name="helpReview" rows="4" cols="43" className="textArea"

                                style={{ width: "410px", height: "290px", marginTop: "2%" }}

                                placeholder="Type your message here ..."></textarea>

                            <button className="sendBtn" name="sendBtn">Send</button>

                       </form>

                    </div>

                </div>

            </RequestExpertSupportDiv>

        );

    };

    export default RequestExpertSupport;

This code fetches the indices of selected options in Multiselect dropdown.

function onSelectedItemsChanged(selectedItemsIndices) {

        // let arrTopic = [];

        // const selected = document.querySelectorAll('#multiSelectDrop:checked');

        // const values = Array.from(selected).map(el => el.value);

     

        // console.log(values);

        console.log(selectedItemsIndices);

    }

Console is given below:
console
Now I want to display those selected options as tags like this:
tags
This is the code for tags:

<Div

                    flex="flex"

                    display="inline-flex"

                    height="36px"

                    borderWidth="1px solid #009FAC"

                    borderRadius="3px"

                    backgroundColor="#def8fa"

                    justifyContent="space-around"

                    alignItems="center"

                    marginRight="10px"

                    marginBottom="10px"

                    key={index}

                    style={{ minWidth: "92px", maxWidth: "175px" }}

                  >

                    <Span

                      padding="0px"

                      fontSize="14px"

                      lineHeight="20px"

                      fontWeight="400"

                      marginLeft="5px"

                      marginRight="5px"

                      style={{ maxWidth: "142px" }}

                    >

                      // need to put selected options here

                    </Span>

                    <Icon

                      name="close-inverted-small"

                      onClick={(event) => removeSelectedTopic(event, topicId)}

                    />

                    &nbsp;

                  </Div>

I’m not getting how to link function SelectedItemsChanged(selectedItemsIndices) with that tags frontend code to dosplay selected options as tags…

how to change the text of Alert box button

I want to change the “OK” text button to another thing like “Agree” but I don’t know how to do it, Would you guys help me?

here is my code:

function notification() {
    let isConfirm = window.confirm("any");

    if (isConfirm) {
        console.log("any");
    } else {
        console.log("any");
    }
}

notification();

How to update a key/value pair in a nested array of objects in Javascript

this is my data structure:

[
    0:
        key1: value,
        key2: value,
        array:
            0:
                thisId: xxxxx,
                thisValue: value,
            1:
                notThisId: someId,
                notThisValue: value,
        key3: value
    1:
        key1: value
        key2: value
        array:
            0:
                anotherId: id
                anotherValue: value
        key3: value
]

Hello, I have a query with is returning:

thisIdRef: xxxxx, 
thisNewValue: newValue

Is it possible to update the nested ‘thisValue’ to ‘thisNewValue’ where ‘thisIdRef’ is equal to ‘thisId’, or ‘xxxxx’?

I have done something similar below using findIndex and splice, but this is for a non-nested key/value pair and I can’t work out how to find a nested id, or indeed if it’s possible.

let newArray = oldArray;
const index = newArray.findIndex(post => post._id === editedPostId)
newArray.splice(index, 1, {
    ...newArray[index],
    post: editedContent
})

Any help very much appreciated.

Google pay button design in react native without libraries

I’m implementing Google pay to my react native app. I have to create the google pay button with the native assets provided by google, since i’m using the react native payments but they don’t have the already built in button, i’m confused to how can i use their assets to create the button. they mentioned in their site that we have to put drawable, layout and values in android/app/main/res folder. But i don’t understand what to do after that. and i’m getting an error when building. Can anyone please give me an example or an article where can i read about that. I searched but i didn’t find any article or tutorial about that.

Error: Objects are not valid as a React child (found: object with keys {username}) [duplicate]

In my ReactJS application I have been trying to solve this problem for a very long time.

In a Users.js file Im fetching all the users from the database and storing it in a state called user. My goal is to render all these users by iterating through the list of users.

Here is my list of users that im getting from my backend:
list of users to be displayed

Then I am running a loop in the Users.js component and for every user, im rendering a User component

Here is my Users.js component:

import React, { useEffect, useState } from "react";
import User from "./User/User";

export default function Users() {
   const [users, setUsers] = useState([]);
   useEffect(() => {
       axios
           .get("http://localhost:8000/users")
           .then((res) => {
               console.log(res.data);
               setUsers(res.data);
           })
           .catch((err) => console.log(err));
   }, []);
   return (
       <div className="container">
           {users.map((user) => {
               console.log(user);
               return <User key={user.id} username={user.username} />;
           })}
       </div>
   );
}

here is my User.js component:

import React from "react";
import { Link } from "react-router-dom";

export default function User(props) {
    console.log("User.js component.");
    console.log(props.username);
    return (
        <div>
            <div className="card">
                <Link to="/">
                    <div className="card-body">
                        Use this kinda element to show user: {props}
                    </div>
                </Link>
            </div>
        </div>
    );
}

I expected everything to run properly but I got this error:

error

I researched a little bit about the error and found out that it is because im passing an object as a prop to a component. But when I checked the typeof user.id and typeof user.username which i was passing as a prop to the User component. I found that none of them (user.id and user.username) were objects. They were number and string respectively.

Please help me solve this.

Thanks!

How to get Scrollbar for left side of the Image/Div after it is scaled at the center

I’m centering an image using display:flex & justify-content:center
and using some zoom buttons to scale the image when they’re clicked.

The issue is that I’m not able to get a scroll bar to go to the Left Side of the image after it is scaled.

I checked about the scaling property and learned that it scales the (0,0) coordinates and possibly I’m trying to go the negative coordinates (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()#scaling_the_x_and_y_dimensions_together)

Is there anything i can do to go to have full access of the image after it is being scaled? (by full access i mean to the left/right/top/bottom)
Here is the fiddle for reference : https://jsfiddle.net/r9sdhjyz/1/

es6 import index.js by directory name

I’ve been looking around and can’t seem to find a clear answer on this.

Is it possible to import a an index.js file from a client directory using the directory name (omitting /index.js)? If so, how? This is a new project and I don’t really want to bundle my code at this point.

The node version is v17.1.0.

File structure

package.json
server.js
src/
  index.js
  utils/
    index.js

package.json

{
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "nodemon --ignore src"
  },
  "devDependencies": {
    "express": "^4.17.1",
    "nodemon": "^2.0.14"
  }
}

server.js

import express from 'express'

express()
  .use(express.static('src'))
  .get('/', (_, res) => res.send(`
    <script type="module" src="index.js"></script>`))
  .listen(3000, () => console.log(`Running at http://localhost:3000`))

src/index.js

import { stuff } from './utils'

// Firefox: Loading module from “http://localhost:3000/utils/” 
// was blocked because of a disallowed MIME type (“text/html”).

I’ve tried running the app with node --experimental-specifier-resolution=node server.js and tried adding express.static.mime.define({'text/javascript': ['js']}) to server.js, but neither worked for me.

Working with jquery post request node js response

I am trying to send a jquery post request to node js.
I have a form, whose button has a click event listener and sends a jquery post request to the route “/login” and also attaches the data entered in the input fields. The node js works fine, but all the activities being done when the node js server gives some response back do not work. Here’s my javascript:

const loginCont = document.getElementById("loginCont");

loginCont.addEventListener("click", () => {
    const loginError = document.getElementById("login_error_box");
    const loginUser = document.getElementById("loginUsername").value;
    const loginPass = document.getElementById("loginPassword").value;

    $.post('/login',
        { username: loginUser, password: loginPass },
        function(data, status, jqXHR) { // Anything I do in this function doesn't get executed.
            loginError.classList.remove("hidden");
            loginError.innerHTML += `Login success`;
        }
    );
});

And here’s my server-side code (node js) :

var express = require('express');
var app = express();
var fs = require('fs');
var MongoClient = require('mongodb').MongoClient;
var bodyParser = require('body-parser')
app. use( bodyParser.json() );
app.use(bodyParser.urlencoded({ extended: true })); 

app.post('/login', function (req, res) {
  var user = req.body.username;
      pass = req.body.password;

  var myobj = { "user": user, "pass": pass };

  MongoClient.connect(mongo_profiles_url).then(function(db, err) {
    if (err) throw err;

    var dbo = db.db("PAL");
    dbo.collection("user-profiles").find(myobj).toArray(function(err, ob) {
      if (err) throw err;

      if (ob.length == 1) {
        var r = "success"
        res.writeHead(200, {'Content-Type': 'text'});
        console.log(` A person is trying to login with the following details (and is successful in doing so):
        • Username : ${user}
        • Password : ${pass}
        `);
      } else {
        var r = "fail"
        res.writeHead(200, {'Content-Type': 'text'});
        console.log(` A person is trying to login with the following details (but failed to do so):
        • Username : ${user}
        • Password : ${pass}
        `);
      }
      res.end(r);
    });
  });
});

app.listen(1000, function () {
    console.log("Server listening to http://localhost:1000");
});

Hope someone or the other will be able to help me out.

Thanks in advance!

How to call same api with different params on click of button in react native

I have made 3 different custom buttons:

<TouchableOpacity onPress={selectClosed}>
    <Text>Closed</Text>
</TouchableOpacity>

<TouchableOpacity onPress={selectPending}>
    <Text>Pending</Text>
</TouchableOpacity>

<TouchableOpacity onPress={selectComplete}>
    <Text>Complete</Text>
</TouchableOpacity>

and their onPress functions:

const selectClosed = () => {
    getShiftDetails.bind(null, 'closed');
};
const selectPending = () => {
    getShiftDetails.bind(null, 'pending');
};
const selectComplete = () => {
    getShiftDetails.bind(null, 'complete');
};

Below is how I am making my api call:

const getShiftDetails = useCallback(
    (
        page = 1,
        limit = 20,
        mode: 'pending' | 'complete' | 'closed' = 'complete',
    ) => {
            const payload = {
                page,
                limit,
                status: [mode],
            };
            ApiFunctions.post(apiUrl + '/shift', payload)
                .then(
                    // other stuff
                )
                .catch((err: any) => {
                    // other stuff
                });
    },
    [user],
);

By default my api call is being done with mode as complete. Now if I click on pending button then another api call should be made with mode as pending. But this is not happening. I am not sure where I went wrong.

Custom filename for BLOB URL

I am implementing this functionality in ReactJS, Application generated blob url but I want to replace it with my custom file name. I tried but unfortunately was not able to achieve my goal could someone please help me thanks.

  const blob = new Blob([res.data], { type: 'application/pdf' })
    const blobUrl = URL.createObjectURL(blob)
    var fileLink = document.createElement('a')
    fileLink.href = fileLink

    // it forces the name of the downloaded file
    fileLink.download = 'pdf_name.pdf'

    // triggers the click event
    fileLink.click()

I implemented this code but when it get downloaded it showing Failed - no file

my popup element will show up again after, i uncheck the radio and set all variable to undefine

i try set my variable to undefined again when user click button “hapus” then i click submit again, “alert” trigerred and show user need to fill all radio but then after click ok the popup show up

how make the pop up not show up and only show up when user fill radio ?
and why i need to click 2 times to run function when click submit ? how make it only need click 1 time?

here the the link for the page in case something wrong in snippet

test web

sry for my english,
here my code

let allData = ""

function inputData(data1, data2, data3, data4, data5) {
    let result;
    let result2;
    result = Number(data1) + Number(data2) + Number(data3) + Number(data4) + Number(data5);
    result2 = result / 5;
    return result2;
}

function prosesData(data1, data2, data3) {
    let result;
    let result2;
    result = Number(data1) + Number(data2) + Number(data3);
    result2 = result / 3;
    return result2
}

function outputData(data1, data2, data3, data4) {
    let result;
    let result2;
    result = Number(data1) + Number(data2) + Number(data3) + Number(data4);
    result2 = result / 4;
    return result2;
}


function hitungData(data1, data2, data3) {
    if (data1 >= 3 && data2 >= 3 && data3 >= 3) {
        allData = "Berkelanjutan"
        return allData;
    } else if ((data1 <= 3 && data2 <= 3) && (data3 > 3)) {
        allData = "Mandiri"
        return allData;
    } else if ((data1 >= 3 && data2 >= 3) && (data3 < 3)) {
        allData = "Berkembang"
        return allData;
    } else if (data1 < 3 && data2 < 3 && data3 < 3) {
        allData = "Dasar"
        return allData;
    } else if (data1 >= 3 || data2 >= 3 || data3 >= 3) {
        allData = "Dasar"
        return allData;
    } else {
        console.log("error");

    }
}

function panggilSemua() {
    //make variables from radio Input
    let input1 = document.querySelector('input[name="input-soal1"]:checked')?.value;
    let input2 = document.querySelector('input[name="input-soal2"]:checked')?.value;
    let input3 = document.querySelector('input[name="input-soal3"]:checked')?.value;
    let input4 = document.querySelector('input[name="input-soal4"]:checked')?.value;
    let input5 = document.querySelector('input[name="input-soal5"]:checked')?.value;
    if(input1 == undefined || input2 == undefined || input3 == undefined || input4 == undefined || input5 == undefined) {
        return alert("Data Input Masih Ada Yang Kosong")
    }

    //Make Variable from radio proses
    let proses1 = document.querySelector('input[name="proses-soal1"]:checked')?.value;
    let proses2 = document.querySelector('input[name="proses-soal2"]:checked')?.value;
    let proses3 = document.querySelector('input[name="proses-soal3"]:checked')?.value;
    if(proses1 == undefined || proses2 == undefined || proses3 == undefined) {
        return alert("Data Proses Masih Ada Yang Kosong")
    }

    //make variables from radio output
    let output1 = document.querySelector('input[name="output-soal1"]:checked')?.value;
    let output2 = document.querySelector('input[name="output-soal2"]:checked')?.value;
    let output3 = document.querySelector('input[name="output-soal3"]:checked')?.value;
    let output4 = document.querySelector('input[name="output-soal4"]:checked')?.value;
    if(output1 == undefined || output2 == undefined || output3 == undefined || output4 == undefined) {
        return alert("Data Output Masih Ada Yang Kosong")
    }

    let resultInput = inputData(input1, input2, input3, input4, input5);
    let resultProsses = prosesData(proses1, proses2, proses3);
    let resultOutput = outputData(output1, output2, output3, output4);

    resultFinal = hitungData(resultInput, resultProsses, resultOutput);
    document.getElementById('submit-btn').addEventListener('click', function(){
        document.querySelector('.showdata').innerHTML = "Klasifikasi :" + " " + resultFinal;
        document.querySelector('.bg-pop').style.display = "flex"
        location.href = "#showdata"
    });

    document.querySelector('.close-btn').addEventListener('click',
    function(){
        document.querySelector('.bg-pop').style.display = "none"
    });
}

function hapusData() {
        input1 = undefined;
        input2 = undefined;
        input3 = undefined;
        input4 = undefined;
        input5 = undefined;
        proses1 = undefined;
        proses2 = undefined;
        proses3 = undefined;
        output1 = undefined;
        output2 = undefined;
        output3 = undefined;
}
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
* {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif, monospace;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    position: relative;
} 

header {
    display: inline;
}

main {
    padding: 20px;
    overflow: auto;
}

h2 {
    color: #00a2c6;
}

h3 {
    color: #00a2c6;
}

footer {
    padding: 20px;
    color: white;
    background-color: #00a2c6;
}

.jumbotron {
    font-size: 20px;
    padding: 60px;
    background-color: #00c8eb;
    text-align: center;
    color: white;
}

nav {
    background-color: #00a2c6;
    padding: 5px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

nav a {
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    color: white;
}

nav a:hover {
    font-weight: bold;
}

nav li {
    display: inline;
    list-style-type: none;
    margin-right: 20px;
}

footer {
    padding: 20px;
    color: white;
    background-color: #00a2c6;
    text-align: center;
    font-weight: bold;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.226);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.headerbox {
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    font-weight: bold
}

#content {
    width: 75%;
}

.allButton {
    text-align: center;
}

.allButton .button {
    padding: 20px 30px;
    border-radius: 5px;
    border: 1px solid white;
    font-weight: bold;
}

.allButton .button:hover {
    background-color: #00c8eb;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.bg-pop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.pop-content {
    width: 500px;
    height: 300px;
    background-color:white;
    border-radius: 10px;
    padding: 50px;
    text-align: center;
    border: 1px solid black;
    margin: 0 20px;
}

.showdata {
    font-size:20px;
}

.close-btn {
    padding: 20px 30px;
    font-weight: bold;
    border: 1px solid white;
    border-radius: 10px;
}

.close-btn:hover {
    background-color:#00c8eb;
    color: white;
}

/* @media screen and (max-width: 992px) {
    #content {
        width: 100%;
        padding: 0;
    }
} */
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/bootstrap/css/bkkbn_css.css">
    <script src="https://kit.fontawesome.com/073910e859.js" crossorigin="anonymous"></script>
    <title>Simulasi Klasifikasi Kampung KB</title>
</head>

<body>
    <header>
        <div class="jumbotron">
            <h1>Simulasi Klasifikasi Kampung KB</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="#content">
            <form>
                <div class="databox">
                    <div class="card">
                        <div class="box input">
                            <div class="input headerbox">Input</div>
                            <div class="input-content">
                                <p>Keberadaan Pokja (kepemilikan pokja, SK Pokja, Pokja terlatih, sosialisasi pokja)</p>
                                <input type="radio" name="input-soal1" id="input-radio1" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="input-soal1" id="input-radio2" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="input-soal1" id="input-radio3" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="input-soal1" id="input-radio4" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Sumber dana (APBN, APBD, Dana Desa, CSR, swadaya masy, Hibah, Lainnya)</p>
                                <input type="radio" name="input-soal2" id="input-radio5" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="input-soal2" id="input-radio6" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="input-soal2" id="input-radio7" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="input-soal2" id="input-radio8" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Kepemilikan poktan (BKB, BKR, BKL, UPPKS, dan PIKR)</p>
                                <input type="radio" name="input-soal3" id="input-radio9" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="input-soal3" id="input-radio10" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="input-soal3" id="input-radio11" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="input-soal3" id="input-radio12" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Ada sarana tempat sektereiatan dan sarana rumah data</p>
                                <input type="radio" name="input-soal4" id="input-radio13" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="input-soal4" id="input-radio14" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="input-soal4" id="input-radio15" value="3">
                                <label for="radio">3</label>
                                <br>
                                <br>
                                <p>Keberadaan PKB/PLKB dan Regulasi</p>
                                <input type="radio" name="input-soal5" id="input-radio16" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="input-soal5" id="input-radio17" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="input-soal5" id="input-radio18" value="3">
                                <label for="radio">3</label>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="box proses">
                            <div class="proses headerbox">Proses</div>
                            <div class="proses-content">
                                <p>Penggunaan data untuk perencaan antara lain Data PK, Data Rutin, Data podes, Data
                                    Sektoral,
                                    Sumber Data lainnya</p>
                                <input type="radio" name="proses-soal1" id="proses-radio1" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="proses-soal1" id="proses-radio2" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="proses-soal1" id="proses-radio3" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="proses-soal1" id="proses-radio4" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Mekanisme operasional antara lain : rapat perencaan kegiatan koordinasi dengan litas
                                    sektoral
                                    melakukan sosialisasi kegiatan melakukan monev, membuat laporan.</p>
                                <input type="radio" name="proses-soal2" id="proses-radio5" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="proses-soal2" id="proses-radio6" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="proses-soal2" id="proses-radio7" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="proses-soal2" id="proses-radio8" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Intervansi lintas sektoral : Keterlibatan sektor lain dalam pelaksaan kegiatan</p>
                                <input type="radio" name="proses-soal3" id="proses-radio9" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="proses-soal3" id="proses-radio10" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="proses-soal3" id="proses-radio11" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="proses-soal3" id="proses-radio12" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="box output">
                            <div class="output headerbox">Output</div>
                            <div class="output-content">
                                <p>Partisipasi keluarga / remaja dalam kegiatan Poktan BKB, BKR, BKL, PIK-R dan UPPKS
                                </p>
                                <input type="radio" name="output-soal1" id="output-radio1" value="1">
                                <label for="radio" id="wkwk">1</label>
                                <input type="radio" name="output-soal1" id="output-radio2" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="output-soal1" id="output-radio3" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="output-soal1" id="output-radio4" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Capaian CPR kontrasepsi modern</p>
                                <input type="radio" name="output-soal2" id="output-radio5" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="output-soal2" id="output-radio6" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="output-soal2" id="output-radio7" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="output-soal2" id="output-radio8" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Capaian MKJP kontrasepsi mix</p>
                                <input type="radio" name="output-soal3" id="output-radio9" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="output-soal3" id="output-radio10" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="output-soal3" id="output-radio11" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="output-soal3" id="poutput-radio12" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                                <p>Persentase PUS tidak berKB / unmet need</p>
                                <input type="radio" name="output-soal4" id="output-radio13" value="1">
                                <label for="radio">1</label>
                                <input type="radio" name="output-soal4" id="output-radio14" value="2">
                                <label for="radio">2</label>
                                <input type="radio" name="output-soal4" id="output-radio15" value="3">
                                <label for="radio">3</label>
                                <input type="radio" name="output-soal4" id="output-radio16" value="4">
                                <label for="radio">4</label>
                                <br>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="allButton">
                            <!-- <div class="showdata" style="margin-bottom: 20px;">HASIL DISINI</div> -->
                            <input class="button" id="hapus-btn" type="reset" onclick="hapusData()" value="hapus">
                            <input class="button" id="submit-btn" type="button" onclick="panggilSemua()" value="submit">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>
    <footer>
        <p>BKKBN</p>
        <p id="tanggal"></p>
    </footer>
    <div class="bg-pop">
        <div class="pop-content" id="showdata">
            <i class="far fa-check-circle fa-4x" style="color: rgb(93, 223, 76)"></i>
            <p class="showdata"></p>
            <button class="close-btn">Tutup</button>
        </div>
    </div>
</body>
<script src="assets/js/bkkbn_js.js"></script>
<script>
    const tanggal = new Date().getFullYear();
    document.getElementById("tanggal").innerHTML = "&copy;" + " " + tanggal;
</script>

</html>