How to copy all the text content inside the div

How to copy all the text content inside the div - javascript

I have a html in a given format:
<div class="export-details" id="export-area">
<div class="row m-0">
<div class="col-lg-6">
<h1 class="titleStyling py-2">Analytics testing-2</h1>
</div>
<div class="col-lg-6 text-right">
<i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
<i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
<ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
</ion-icon>
<ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
</ion-icon>
</div>
</div>
<!---->
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
<div>
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Recommendations</label>
</div>
<!---->
<div>
<div class="contentAlignment">
<span>
<p>testing purpose</p>
</span>
</div>
</div>
</div>
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Meta Information</label>
</div>
<div class="row rowSpacing">
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label>Publisher: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>ProtocolNow</span><span class="comma">, </span>
</div>
<div class="child">
<span>Other Medical Society</span><span class="comma">, </span>
</div>
<div class="child">
<span>Valley Perinatal</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label style="width: 111%;">Medical Field: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>Coronavirus - Covid 19</span><span class="comma">, </span>
</div>
<div class="child">
<span>Billing</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<!---->
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label><strong>Author: </strong></label>
</div>
<div class="displayFlex">
<div class="child">
<span>Neha KA</span><span class="comma">, </span>
</div>
</div>
</div>
</div>
</div>
</div>
I want to copy all the displayed text into clipboard:
<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>
I have made this worked by this js function:
var div = document.querySelectorAll(".export-details")[0].textContent;
function copyDivToClipboard() {
const el = document.createElement("textarea");
el.value = div;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body.removeChild(el);
}
However, it adds too many spaces between the text.
When I changed from textContent to innerText, it is working fine.
But according to this answer, ...innerText is much more performance-heavy: it requires layout information to return the result.
So, how can the text be copied to clipboard exactly similarly by using innerText.
Codepen

Try with document.createRange
function copyDivToClipboard() {
var range = document.createRange();
range.selectNode(document.getElementById("export-area"));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}
<div class="export-details" id="export-area">
<div class="row m-0">
<div class="col-lg-6">
<h1 class="titleStyling py-2">Analytics testing-2</h1>
</div>
<div class="col-lg-6 text-right">
<i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
<i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
<ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
</ion-icon>
<ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
</ion-icon>
</div>
</div>
<!---->
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
<div>
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Recommendations</label>
</div>
<!---->
<div>
<div class="contentAlignment">
<span>
<p>testing purpose</p>
</span>
</div>
</div>
</div>
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Meta Information</label>
</div>
<div class="row rowSpacing">
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label>Publisher: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>ProtocolNow</span><span class="comma">, </span>
</div>
<div class="child">
<span>Other Medical Society</span><span class="comma">, </span>
</div>
<div class="child">
<span>Valley Perinatal</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label style="width: 111%;">Medical Field: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>Coronavirus - Covid 19</span><span class="comma">, </span>
</div>
<div class="child">
<span>Billing</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<!---->
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label><strong>Author: </strong></label>
</div>
<div class="displayFlex">
<div class="child">
<span>Neha KA</span><span class="comma">, </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>

when I want to copy something to the control + C I do this.
const value = document.querySelector('#id').innerText
navigator.clipboard.writeText(value)
alert(`Copied value ${value}`)

Related

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

How do take inputted values from a html form and convert to a csv?

So i want to take a couple of values from an HTML input-form, and basically be able to generate a csv file to download for the user when they click a button which will consist of the data they entered into the form. However, I am confused about how i would go about this and can't find a good guide online.
I also would like to customize how the csv format will be if possible, hope somehow knows what iam trying to do! thanks.
Edit: iam not asking to do this in just html, i assume javascript is best option
MY HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UniWeighter</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<style>
body {
background-image: url("images/background.png");
}
</style>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1><b>UniWeighter</b></h1>
<h2>Weighted Average Grade Calculator</h2>
<hr>
<div class="box">
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br>
</p>
</div>
<div class="column is-two-quarter is is-offset-two-quarter is-mobile">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="images/help.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>How does it actually work?</strong> <small>Just one example below</small>
<br>
Lets say you want to find a end of module final mark. You have 2 total exams/assignments for that module.
One worth <b>40%</b> weighting and you get <b>75/100</b> marks, the other worth <b>60%</b> weighting and you get <b>62/100</b>.
So you can type in 40 for the weight and 75 for the grade on first row, also 60 and 62 for the next row.
Press Calculate and you find you got an overall average mark of <b>67.2</b> and a grade of <b>2:1</b> for that module.
</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<br>
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
<div class="control">
<button id="download" class="button is-large is-fullwidth is-primary is-outlined">
Get CSV file of data
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile is-paddingless">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="averageGrade" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="formalGrade" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
<br>
<div class="line" style="padding: 1%;">
<hr>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<br><br>
<strong>UniWeighter</strong> by Mathews Joy. The source code is licensed
MIT. <strong>Share -</strong>
<a href="https://twitter.com/intent/tweet?text=https%3A//uniweighter.netlify.app/" aria-label="reply">
<span class="icon is-small">
<i class="fab fa-twitter-square" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//uniweighter.netlify.app/" aria-label="retweet">
<span class="icon is-small">
<i class="fab fa-facebook" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//uniweighter.netlify.app/&title=Checkout%20Uniweighter!&summary=&source=" aria-label="like">
<span class="icon is-small">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</p>
</div>
</footer>
</body>
<script src="index.js"></script>
</html>

document.querySelector("#download").addEventListener('click', generateCSV);
function generateCSV(e){
e.preventDefault();
const formdata = new FormData(document.getElementById('grade-form'));
const formObj = Object.fromEntries(formdata);
const len = Object.keys(formObj).length/2;
let formValues = '';
for(let i=1; i<= len; i++){
// comma separated values and break line
formValues += formObj['grade'+i] +','+formObj['credit'+i]+ "\r\n";
}
downloadCSV(formValues);
}
function downloadCSV(formValues){
const columnNames = "Grade (%), Weight (Credits)";
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += columnNames + "\r\n";
csvContent += formValues + "\r\n";
const encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my-form-data.csv");
document.body.appendChild(link);
link.click();
// link.remove();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UniWeighter</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<style>
body {
background-image: url("images/background.png");
}
</style>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1><b>UniWeighter</b></h1>
<h2>Weighted Average Grade Calculator</h2>
<hr>
<div class="box">
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br>
</p>
</div>
<div class="column is-two-quarter is is-offset-two-quarter is-mobile">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="images/help.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>How does it actually work?</strong> <small>Just one example below</small>
<br>
Lets say you want to find a end of module final mark. You have 2 total exams/assignments for that module.
One worth <b>40%</b> weighting and you get <b>75/100</b> marks, the other worth <b>60%</b> weighting and you get <b>62/100</b>.
So you can type in 40 for the weight and 75 for the grade on first row, also 60 and 62 for the next row.
Press Calculate and you find you got an overall average mark of <b>67.2</b> and a grade of <b>2:1</b> for that module.
</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<br>
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" name="grade1" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit1" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade2" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit2" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade3" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit3" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade4" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit4" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade5" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit5" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade6" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit6" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade7" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit7" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
<div class="control">
<button id="download" class="button is-large is-fullwidth is-primary is-outlined">
Get CSV file of data
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile is-paddingless">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="averageGrade" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="formalGrade" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
<br>
<div class="line" style="padding: 1%;">
<hr>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<br><br>
<strong>UniWeighter</strong> by Mathews Joy. The source code is licensed
MIT. <strong>Share -</strong>
<a href="https://twitter.com/intent/tweet?text=https%3A//uniweighter.netlify.app/" aria-label="reply">
<span class="icon is-small">
<i class="fab fa-twitter-square" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//uniweighter.netlify.app/" aria-label="retweet">
<span class="icon is-small">
<i class="fab fa-facebook" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//uniweighter.netlify.app/&title=Checkout%20Uniweighter!&summary=&source=" aria-label="like">
<span class="icon is-small">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</p>
</div>
</footer>
</body>
<!--<script src="index.js"></script>-->
</html>

Takes all input names as columnNames and append to csv content as the first row (column names)
const columnNames = Object.keys(formObj).map(key => key.toUpperCase()).join(",");
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += columnNames + "\r\n";
Take out all form values and append to csv content.
Lets say user has entered address value as New Braunfels, TX, 78130
Since its commma separated, for this CSV will create 3 column entries New Braunfels, TX, and 78130.
To handle this we will replace , with so that it will add it in one column
const formValues = Object.values(formObj).map(val => val.replaceAll(',', ' ')).join(",");
csvContent += formValues + "\r\n";
function downloadCSV(){
const formEl = document.forms.userForm;
const formData = new FormData(formEl);
const formObj = Object.fromEntries(formData);
const columnNames = Object.keys(formObj).map(key => key.toUpperCase()).join(",");
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += columnNames + "\r\n";
const formValues = Object.values(formObj).map(val => val.replaceAll(',', ' ')).join(",");
csvContent += formValues + "\r\n";
// Set encoded csvContent as `href` attribute and also set download attribute to set the file name
const encodedUri = encodeURI(csvContent);
const link = document.querySelector("#downloadRef");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my-form-data.csv");
}
<form id="userForm">
<div><label>Name<input type="text" name="name"></label></div>
<div><label>Age<input type="number" name="age"></label></div>
<div>
Gender
<label>Male<input type="radio" name="gender" value="male"></label>
<label>Female<input type="radio" name="gender" value="female"></label>
</div>
<div><label>Address<textarea name="address"></textarea></label></div>
<button onclick="downloadCSV()">
<a id="downloadRef"style="text-decoration:none" href="#">Create CSV</a>
</button>
</form>
After setting csvContent as href attribute, the click event will be taken care of by Event capturing
*This snippet will not download CSV file here, run code on your host

Html site keeps refreshing and not giving output when i clicked button for submitting

I have a site which i want to enter values into form fields, and then output some results however Ive finished the Website UI and moving onto the javascript to do the actual calculations however, when i press the button my website just keeps refreshing and erasing the values and my function doesn't console.log the values but iam not getting errors.
I am completely new to javascript so any help would be great. If you need any further code please ask me.
(the css is done with bulma)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Uni Weight Grade Calculator</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1>Weighted Average Calculator</h1>
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br><br><br>
</p>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">8</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade8" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit8" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="monthlyPayment" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="totalInterest" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
</body>
<script src="index.js"></script>
</html>
JAVASCRIPT
// Check if user has entered any values and pressed submit
document.getElementById("submit").onclick = function(){
calculateResults;
};
// Grade calculation function
function calculateResults(e){
e.preventDefault();
const UIgrade1 = document.getElementById("grade1").value(), UIcredit1 = document.getElementById("credit1").value();
const UIgrade2 = document.getElementById("grade2").value(), UIcredit2 = document.getElementById("credit2").value();
const UIgrade3 = document.getElementById("grade3").value(), UIcredit3 = document.getElementById("credit3").value();
const UIgrade4 = document.getElementById("grade4").value(), UIcredit4 = document.getElementById("credit4").value();
const UIgrade5 = document.getElementById("grade5").value(), UIcredit5 = document.getElementById("credit5").value();
const UIgrade6 = document.getElementById("grade6").value(), UIcredit6 = document.getElementById("credit6").value();
const UIgrade7 = document.getElementById("grade7").value(), UIcredit7 = document.getElementById("credit7").value();
const UIgrade8 = document.getElementById("grade8").value(), UIcredit8 = document.getElementById("credit8").value();
console.log(UIgrade1);
console.log(UIcredit1);
}

// Get the event parameter
document.getElementById("submit").onclick = function(e){
calculateResults(e); // Call the function
};

Bootstrap Placing Elements one under another

I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?

The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>

How to set large amount of HTML in Vue.js template?

I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.

There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.

Develop Reference

JavaScript is the programming language of the Web.

How to copy all the text content inside the div - javascript

when I want to copy something to the control + C I do this. const value = document.querySelector('#id').innerText navigator.clipboard.writeText(value) alert(`Copied value ${value}`)

Related

Get text content of all parent divs

How do take inputted values from a html form and convert to a csv?

Html site keeps refreshing and not giving output when i clicked button for submitting

Bootstrap Placing Elements one under another

How to set large amount of HTML in Vue.js template?

Categories

Resources