commit
5edba0bd6a
12 changed files with 72163 additions and 0 deletions
@ -0,0 +1,2 @@ |
|||||
|
# csv-data-generator |
||||
|
A client side website that allows the user to create CSV data that is meaningful that can be used as data source for any data requirements |
||||
@ -0,0 +1 @@ |
|||||
|
./csv-data-generator.sh |
||||
@ -0,0 +1,5 @@ |
|||||
|
#!/usr/bin/env bash |
||||
|
|
||||
|
dir="$(dirname $(readlink -f $0))" |
||||
|
cd "$dir" |
||||
|
serve ./ |
||||
|
After Width: | Height: | Size: 694 KiB |
|
After Width: | Height: | Size: 510 KiB |
@ -0,0 +1,143 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>CSV File Generator</title> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" |
||||
|
integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" /> |
||||
|
<link rel="stylesheet" href="./style.css"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<!-- Intro container with a brief description of the Application --> |
||||
|
<div class="introduction"> |
||||
|
<h1>CSV File Generator</h1> |
||||
|
<p class='intro-details'>Welcome to the one stop solution for all your data generating needs. The CSV Data |
||||
|
Generator can generate a large amount of meaningul data depending on your data requirements in almost no |
||||
|
time. |
||||
|
<br><br> |
||||
|
It's a simple 4 step quick process |
||||
|
<br> |
||||
|
  Step 1) Add as many columns as you want |
||||
|
<br> |
||||
|
  Step 2) Set the type of data you want for each column |
||||
|
<br> |
||||
|
  Step 3) Put in the number of rows you want to generate |
||||
|
<br> |
||||
|
  Step 4) Generate the File |
||||
|
<br><br> |
||||
|
No Installations, No Sign-ins, No Hiccups. |
||||
|
<br> |
||||
|
<small class="intro-footer">This works best on a Chrome/Firefox Browser</small> |
||||
|
</p> |
||||
|
<button class="btn" id='getStarted'>Get Started</button> |
||||
|
</div> |
||||
|
<!-- Main Content of the Website --> |
||||
|
<div id="main-content"> |
||||
|
<!-- Header --> |
||||
|
<div class="header-section cover"> |
||||
|
<h1>CSV File Generator</h1> |
||||
|
<div class="info">Easy, Customizable, Open Source, Fast & Free</div> |
||||
|
</div> |
||||
|
<!-- Main Container with the table, buttons and QnA --> |
||||
|
<div class="main-container"> |
||||
|
<div class="data-input-container"> |
||||
|
<div class="row header" id="tableColNames"> |
||||
|
<div class="column">Column Name</div> |
||||
|
<div class="column">Type of Data</div> |
||||
|
<div class="column actions"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="columns"> |
||||
|
</div> |
||||
|
<div class="config"> |
||||
|
<div class='row-count-input'> |
||||
|
<label for="row-count">Number of Rows</label> |
||||
|
<div class="help-tip"> |
||||
|
<p>Enter the total number of rows that you want to generate</p> |
||||
|
</div> |
||||
|
<input type="number" class="row-count" value="1000" name="row-count" id="row-count" max="1000"> |
||||
|
|
||||
|
</div> |
||||
|
<div class='buttons'> |
||||
|
<!-- <button class="btn" id="view-sample">View Sample</button> --> |
||||
|
<button class="btn" id="generate-button">Generate File</button> |
||||
|
<!-- <button class="btn" id="generate-SQL">Generate SQL Script</button> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="additional-details"> |
||||
|
<h3>Why generate test data?</h3> |
||||
|
<p>You should always have a good |
||||
|
volume of mocked up data when testing your application. This will help catch performance issues in |
||||
|
your code |
||||
|
early on in the cycle as well as issues with the UI. Maybe you need to use a larger width to display |
||||
|
the name of your customer because you saw that some customers have long names which are getting |
||||
|
trimmed. Or maybe you see that you dont have enough space in your DB for the addresses you want to |
||||
|
store. |
||||
|
</p> |
||||
|
<h3>Is having realistic data really important?</h3> |
||||
|
<p>If you are trying to showcase your project as a real time application, it adds a lot of value to |
||||
|
actually show realistic names, addresses and data instead of random alphabets typed out in a hurry |
||||
|
by you. Creating |
||||
|
data and testing it on your app will also add realstic issues like an apostrophe in a name or |
||||
|
address which your code might not be able to handle. |
||||
|
</p> |
||||
|
<h3>Why use CSV Data Generator?</h3> |
||||
|
<p>The CSV Data Generator is Light, Easy and Customizable with absolutely NO registration. Other data |
||||
|
generators available either do not have the various options provided here OR try and get you to sign |
||||
|
in and pay for the more advanced features which are available here for absolutely free!! |
||||
|
<br> |
||||
|
This is a light-weight solution and all the data gets created entirely on the client side using |
||||
|
Vanilla Javascript. |
||||
|
</p> |
||||
|
<h3>How many rows/columns can I generate?</h3> |
||||
|
<p>The CSV Data Generator is a light weight application that has been built using vanilla Javascript. |
||||
|
You can create as much data as you like but your browser could crash if you are trying to create 1 |
||||
|
trillion records for a bunch of columns! So go easy :) |
||||
|
</p> |
||||
|
<h3>How can I see the code?</h3> |
||||
|
<p>Head right down to the github repository in the footer and check it out |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- The popup displaying all the options --> |
||||
|
<div class="select-input-background"> |
||||
|
|
||||
|
<div class="select-input-container"> |
||||
|
<div class="select-input-classification"> |
||||
|
<h2>Classification of Data</h2> |
||||
|
</div> |
||||
|
<div class="select-input-options"> |
||||
|
</div> |
||||
|
<button class="close" id="closeInputSelector">X</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- Footer with contact details --> |
||||
|
<footer> |
||||
|
<section id="contact" class="contact"> |
||||
|
<div class="profile-picture"> |
||||
|
<a href="http://www.markbdsouza.com" target="_blank"> |
||||
|
<img class="display-pic" src="images/Mark DSouza.jpeg" alt="Mark Dsouza"> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="contact-section"> |
||||
|
<span class="">This open source application was developed by <br> Mark Dsouza </span> |
||||
|
<div class="contact-details"> |
||||
|
<a href="https://www.linkedin.com/in/mark-dsouza-44692095/" class="" target="_blank"><i |
||||
|
class="fab fa-linkedin-in"></i></a> |
||||
|
<a href="https://twitter.com/MarkBDsouza" class="" target="_blank"><i |
||||
|
class="fab fa-twitter"></i></a> |
||||
|
<a href="https://github.com/markbdsouza/csv-data-generator" class="" target="_blank"> |
||||
|
<i class="fab fa-github"></i></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</footer> |
||||
|
</div> |
||||
|
<script src="./scripts/faker.js" type="text/javascript"></script> |
||||
|
<script src="./scripts/script.js" type="module"></script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,32 @@ |
|||||
|
function generateDataArrayForColumn(totalRowCount, columnConfig) { |
||||
|
let result = []; |
||||
|
let columnCountArray = Array.from(Array(totalRowCount), (x, i) => i); |
||||
|
columnCountArray.forEach((x, i) => { |
||||
|
result.push(columnConfig.getData()); |
||||
|
}); |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
function createHeaders(dataConfig) { |
||||
|
let headers = dataConfig.map((a) => a.columnName); |
||||
|
return headers; |
||||
|
} |
||||
|
|
||||
|
export function createExcelRowData(totalRowCount, dataConfig) { |
||||
|
const rows = []; |
||||
|
rows.push(createHeaders(dataConfig)); |
||||
|
let createDataSet = []; |
||||
|
dataConfig.forEach((columnConfig) => { |
||||
|
createDataSet.push(generateDataArrayForColumn(totalRowCount, columnConfig)); |
||||
|
}); |
||||
|
|
||||
|
for (let i = 0; i < totalRowCount; i++) { |
||||
|
let rowData = []; |
||||
|
createDataSet.forEach((columnData) => { |
||||
|
rowData.push(columnData[i]); |
||||
|
}); |
||||
|
rows.push(rowData); |
||||
|
} |
||||
|
|
||||
|
return rows; |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,34 @@ |
|||||
|
function downloadFile(csvFile, filename) { |
||||
|
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' }); |
||||
|
if (navigator.msSaveBlob) { |
||||
|
//for IE
|
||||
|
navigator.msSaveBlob(blob, filename); |
||||
|
} else { |
||||
|
//Chrome and Firefox
|
||||
|
var link = document.createElement('a'); |
||||
|
if (link.download !== undefined) { |
||||
|
var url = URL.createObjectURL(blob); |
||||
|
link.setAttribute('href', url); |
||||
|
link.setAttribute('download', filename); |
||||
|
link.style.visibility = 'hidden'; |
||||
|
document.body.appendChild(link); |
||||
|
link.click(); |
||||
|
document.body.removeChild(link); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function generateFile(rows) { |
||||
|
let csvFile = ''; |
||||
|
var d = new Date(); |
||||
|
|
||||
|
let filename = `CSV_Data_${d.getFullYear()}_${ |
||||
|
d.getMonth() + 1 |
||||
|
}_${d.getDate()} ${d.getHours()}:${d.getMinutes()}.csv`;
|
||||
|
|
||||
|
rows.forEach(function (rowArray) { |
||||
|
let row = rowArray.join(','); |
||||
|
csvFile += row + '\r\n'; |
||||
|
}); |
||||
|
downloadFile(csvFile, filename); |
||||
|
} |
||||
@ -0,0 +1,481 @@ |
|||||
|
export const ALL_OPTIONS = [ |
||||
|
// name
|
||||
|
{ |
||||
|
name: 'First Name', |
||||
|
value: 'firstName', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.firstName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Last Name', |
||||
|
value: 'lastName', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.lastName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Full Name', |
||||
|
value: 'findName', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.findName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Job Title', |
||||
|
value: 'jobTitle', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.jobTitle(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Name Prefix', |
||||
|
value: 'prefix', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.prefix(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Name Suffix', |
||||
|
value: 'suffix', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.suffix(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Name Title', |
||||
|
value: 'title', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.title(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Job Descriptor', |
||||
|
value: 'jobDescriptor', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.jobDescriptor(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Job Area', |
||||
|
value: 'jobArea', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.jobArea(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Job Type', |
||||
|
value: 'jobType', |
||||
|
type: 'Name', |
||||
|
getData() { |
||||
|
return faker.name.jobType(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
//Address
|
||||
|
{ |
||||
|
name: 'Street Name', |
||||
|
value: 'streetName', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.streetName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Street Address', |
||||
|
value: 'streetAddress', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.streetAddress(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Secondary Address', |
||||
|
value: 'secondaryAddress', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.secondaryAddress(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Zip Code', |
||||
|
value: 'zipCode', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.zipCode(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'County', |
||||
|
value: 'county', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.county(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'City', |
||||
|
value: 'city', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.city(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'State', |
||||
|
value: 'state', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.state(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'State Abbr', |
||||
|
value: 'stateAbbr', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.stateAbbr(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Country', |
||||
|
value: 'country', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.country(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Country Code', |
||||
|
value: 'countryCode', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.countryCode(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Latitude', |
||||
|
value: 'latitude', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.latitude(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Longitude', |
||||
|
value: 'longitude', |
||||
|
type: 'Address', |
||||
|
getData() { |
||||
|
return faker.address.longitude(); |
||||
|
}, |
||||
|
}, |
||||
|
//Company
|
||||
|
|
||||
|
{ |
||||
|
name: 'Company Name', |
||||
|
value: 'companyName', |
||||
|
// type: 'company',
|
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.company.companyName(); |
||||
|
}, |
||||
|
}, |
||||
|
// {
|
||||
|
// name: 'bs',
|
||||
|
// value: 'bs',
|
||||
|
// type: 'company',
|
||||
|
// getData() {
|
||||
|
// return faker.company.bs();
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// name: 'companySuffix',
|
||||
|
// value: 'companySuffix',
|
||||
|
// type: 'company',
|
||||
|
// getData() {
|
||||
|
// return faker.company.companySuffix();
|
||||
|
// },
|
||||
|
// },
|
||||
|
// {
|
||||
|
// name: 'catchPhraseAdjective',
|
||||
|
// value: 'catchPhraseAdjective',
|
||||
|
// type: 'company',
|
||||
|
// getData() {
|
||||
|
// return faker.company.catchPhraseAdjective();
|
||||
|
// },
|
||||
|
// },
|
||||
|
|
||||
|
//finance
|
||||
|
{ |
||||
|
name: 'Account', |
||||
|
value: 'account', |
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.finance.account(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Account Name', |
||||
|
value: 'accountName', |
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.finance.accountName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Currency Code', |
||||
|
value: 'currencyCode', |
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.finance.currencyCode(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
name: 'Currency Name', |
||||
|
value: 'currencyName', |
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.finance.currencyName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Currency Symbol', |
||||
|
value: 'currencySymbol', |
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.finance.currencySymbol(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Bitcoin Address', |
||||
|
value: 'bitcoinAddress', |
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.finance.bitcoinAddress(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'IBAN', |
||||
|
value: 'iban', |
||||
|
type: 'Finance', |
||||
|
getData() { |
||||
|
return faker.finance.iban(); |
||||
|
}, |
||||
|
}, |
||||
|
//internet
|
||||
|
{ |
||||
|
name: 'Email', |
||||
|
value: 'email', |
||||
|
type: 'Internet', |
||||
|
getData() { |
||||
|
return faker.internet.email(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'User Name', |
||||
|
value: 'userName', |
||||
|
type: 'Internet', |
||||
|
getData() { |
||||
|
return faker.internet.userName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'URL', |
||||
|
value: 'url', |
||||
|
type: 'Internet', |
||||
|
getData() { |
||||
|
return faker.internet.url(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Domain Name', |
||||
|
value: 'domainName', |
||||
|
type: 'Internet', |
||||
|
getData() { |
||||
|
return faker.internet.domainName(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'IP Address', |
||||
|
value: 'ip', |
||||
|
type: 'Internet', |
||||
|
getData() { |
||||
|
return faker.internet.ip(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
//Date
|
||||
|
{ |
||||
|
name: 'Past Date', |
||||
|
value: 'past', |
||||
|
type: 'Date', |
||||
|
getData() { |
||||
|
return faker.date.past(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Future Date', |
||||
|
value: 'future', |
||||
|
type: 'Date', |
||||
|
getData() { |
||||
|
return faker.date.future(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Recent Date', |
||||
|
value: 'recent', |
||||
|
type: 'Date', |
||||
|
getData() { |
||||
|
return faker.date.recent(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Month', |
||||
|
value: 'month', |
||||
|
type: 'Date', |
||||
|
getData() { |
||||
|
return faker.date.month(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Weekday', |
||||
|
value: 'weekday', |
||||
|
type: 'Date', |
||||
|
getData() { |
||||
|
return faker.date.weekday(); |
||||
|
}, |
||||
|
}, |
||||
|
//random
|
||||
|
|
||||
|
{ |
||||
|
name: 'UUID', |
||||
|
value: 'uuid', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.random.uuid(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Boolean', |
||||
|
value: 'boolean', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.random.boolean(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'word', |
||||
|
value: 'word', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.random.word(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Random Character', |
||||
|
value: 'randomCharacter', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
let characters = |
||||
|
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; |
||||
|
return characters[Math.floor(Math.random() * characters.length)]; |
||||
|
}, |
||||
|
}, |
||||
|
// {
|
||||
|
// name: 'Sequence Generated Integer',
|
||||
|
// value: 'index',
|
||||
|
// index: 0,
|
||||
|
// type: 'a0',
|
||||
|
// getData: function () {
|
||||
|
// return this.index;
|
||||
|
// },
|
||||
|
// },
|
||||
|
{ |
||||
|
name: 'Random Integer', |
||||
|
value: 'randomInteger', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return Math.floor(Math.random() * 10000); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
//Commerce
|
||||
|
{ |
||||
|
name: 'Color', |
||||
|
value: 'color', |
||||
|
// type: 'commerce',
|
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.commerce.color(); |
||||
|
}, |
||||
|
}, |
||||
|
// {
|
||||
|
// name: 'Price',
|
||||
|
// value: 'price',
|
||||
|
// type: 'commerce',
|
||||
|
// getData() {
|
||||
|
// return faker.commerce.price();
|
||||
|
// },
|
||||
|
// },
|
||||
|
{ |
||||
|
name: 'Product', |
||||
|
value: 'product', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.commerce.product(); |
||||
|
}, |
||||
|
}, |
||||
|
//database
|
||||
|
// {
|
||||
|
// name: 'DataBase Column',
|
||||
|
// value: 'column',
|
||||
|
// type: 'database',
|
||||
|
// getData() {
|
||||
|
// return faker.database.column();
|
||||
|
// },
|
||||
|
// },
|
||||
|
|
||||
|
{ |
||||
|
name: 'Database Column Type', |
||||
|
value: 'type', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.database.type(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Database Collation', |
||||
|
value: 'collation', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.database.collation(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Database Engine', |
||||
|
value: 'engine', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.database.engine(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
name: 'Phone', |
||||
|
value: 'phone', |
||||
|
type: 'Other', |
||||
|
getData() { |
||||
|
return faker.phone.phoneNumber(); |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,189 @@ |
|||||
|
import { generateFile } from './filegeneration.js'; |
||||
|
import { createExcelRowData } from './datageneration.js'; |
||||
|
import { ALL_OPTIONS } from './options.js'; |
||||
|
|
||||
|
const generateBtn = document.getElementById('generate-button'); |
||||
|
const rowCountEl = document.getElementById('row-count'); |
||||
|
const dataInputContainer = document.querySelector('.data-input-container'); |
||||
|
const introduction = document.querySelector('.introduction'); |
||||
|
const getStarted = document.getElementById('getStarted'); |
||||
|
const mainContent = document.getElementById('main-content'); |
||||
|
const closeBtnForInputSelector = document.getElementById('closeInputSelector'); |
||||
|
const inputSelectorBkg = document.querySelector('.select-input-background'); |
||||
|
const selectGroupingOptions = document.querySelector( |
||||
|
'.select-input-classification' |
||||
|
); |
||||
|
const selectInputContainer = document.querySelector('.select-input-options'); |
||||
|
|
||||
|
const ROWS_TO_START_WITH = 8; |
||||
|
let DOMrows = []; |
||||
|
let i = 0; |
||||
|
let selectedRow; |
||||
|
|
||||
|
function addValuesToOptions(filter) { |
||||
|
selectInputContainer.innerHTML = ''; |
||||
|
ALL_OPTIONS.forEach((option) => { |
||||
|
if (!filter || option.type === filter) { |
||||
|
let optionEl = document.createElement('button'); |
||||
|
optionEl.classList.add('btn'); |
||||
|
optionEl.classList.add('selectOption'); |
||||
|
optionEl.dataset.value = option.value; |
||||
|
optionEl.innerText = option.name; |
||||
|
optionEl.addEventListener('click', (e) => { |
||||
|
//add value to current row
|
||||
|
selectedRow.querySelector( |
||||
|
'.inputSelection' |
||||
|
).innerHTML = `${e.target.textContent} <i class="fa fa-angle-down"></i>`; |
||||
|
selectedRow.querySelector('.inputSelection').dataset.value = |
||||
|
e.target.dataset.value; |
||||
|
inputSelectorBkg.classList.remove('show'); |
||||
|
}); |
||||
|
selectInputContainer.appendChild(optionEl); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function returnGetDataFunction(selectedOptionName) { |
||||
|
let selectedOptionObject = ALL_OPTIONS.filter((option) => { |
||||
|
return option.value === selectedOptionName; |
||||
|
}); |
||||
|
return selectedOptionObject[0].getData; |
||||
|
} |
||||
|
|
||||
|
function fetchDOMValues() { |
||||
|
let dataConfig = []; |
||||
|
const rows = document.querySelectorAll('.row'); |
||||
|
rows.forEach((row, index) => { |
||||
|
// to exclude the header which is the first row
|
||||
|
|
||||
|
if (index >= 1) { |
||||
|
dataConfig.push({ |
||||
|
columnName: row.querySelector('.columnName').value, |
||||
|
type: row.querySelector('.inputSelection').dataset.value, |
||||
|
getData: returnGetDataFunction( |
||||
|
row.querySelector('.inputSelection').dataset.value |
||||
|
), |
||||
|
maxLength: 100, |
||||
|
minLength: 0, |
||||
|
nullable: false, |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
return dataConfig; |
||||
|
} |
||||
|
|
||||
|
function convertToColumnName(name) { |
||||
|
return name.toUpperCase().split(' ').join('_'); |
||||
|
} |
||||
|
|
||||
|
function addToDOMRows(rowClicked) { |
||||
|
let randomOption = |
||||
|
ALL_OPTIONS[Math.floor(Math.random() * ALL_OPTIONS.length)]; |
||||
|
let newRow = document.createElement('div'); |
||||
|
newRow.classList.add('row'); |
||||
|
newRow.classList.add('hide'); |
||||
|
newRow.innerHTML = `
|
||||
|
<div class="column"> |
||||
|
<input type="text" class="columnName" value="${convertToColumnName( |
||||
|
randomOption.name |
||||
|
)}"> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<button class="inputSelection" data-value="${randomOption.value}">${ |
||||
|
randomOption.name |
||||
|
}<i class="fa fa-angle-down"></i> </button> |
||||
|
</div> |
||||
|
<div class="column actions"> |
||||
|
<button class="add"> <i class="far fa-plus-square fa-2x add"></i><span class="tooltiptext">Add a New Row</span></button> |
||||
|
<button class="delete"> <i class="fas fa-trash-alt fa-2x delete"></i><span class="tooltiptext">Delete Existing Row</span></button> |
||||
|
</div>`; |
||||
|
|
||||
|
DOMrows.push(newRow); |
||||
|
if (rowClicked) { |
||||
|
rowClicked.insertAdjacentElement('afterend', newRow); |
||||
|
} else { |
||||
|
dataInputContainer.insertAdjacentElement('beforeend', newRow); |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
newRow.classList.remove('hide'); |
||||
|
}, 100); |
||||
|
i++; |
||||
|
} |
||||
|
|
||||
|
function displayInputSelection(row) { |
||||
|
inputSelectorBkg.classList.add('show'); |
||||
|
selectedRow = row; |
||||
|
} |
||||
|
|
||||
|
function deleteRowFromDOM(parentRow) { |
||||
|
parentRow.classList.add('hide'); |
||||
|
setTimeout(() => { |
||||
|
dataInputContainer.removeChild(parentRow); |
||||
|
DOMrows = DOMrows.filter((row) => { |
||||
|
return row !== parentRow; |
||||
|
}); |
||||
|
if (DOMrows.length === 0) { |
||||
|
addToDOMRows(); |
||||
|
} |
||||
|
}, 600); |
||||
|
} |
||||
|
|
||||
|
function loadMainContainer() { |
||||
|
introduction.classList.add('hide'); |
||||
|
mainContent.style.display = 'inline'; |
||||
|
setTimeout(() => { |
||||
|
introduction.style.display = 'none'; |
||||
|
}, 1000); |
||||
|
} |
||||
|
|
||||
|
function documentClick(e) { |
||||
|
const parentRow = e.target.closest('.row'); |
||||
|
if (e.target.classList.contains('add')) { |
||||
|
addToDOMRows(parentRow); |
||||
|
} |
||||
|
if (e.target.classList.contains('delete')) { |
||||
|
deleteRowFromDOM(parentRow); |
||||
|
} |
||||
|
if (e.target.classList.contains('inputSelection')) { |
||||
|
displayInputSelection(parentRow); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function fetchDataAndGenerateFile() { |
||||
|
let rowCount = +rowCountEl.value; |
||||
|
let dataConfig = fetchDOMValues(); |
||||
|
let rows = createExcelRowData(rowCount, dataConfig); |
||||
|
generateFile(rows); |
||||
|
} |
||||
|
|
||||
|
//event listeners
|
||||
|
generateBtn.addEventListener('click', fetchDataAndGenerateFile); |
||||
|
document.addEventListener('click', documentClick); |
||||
|
getStarted.addEventListener('click', loadMainContainer); |
||||
|
closeBtnForInputSelector.addEventListener('click', () => { |
||||
|
inputSelectorBkg.classList.remove('show'); |
||||
|
}); |
||||
|
|
||||
|
for (let i = 0; i < ROWS_TO_START_WITH; i++) { |
||||
|
addToDOMRows(); |
||||
|
} |
||||
|
addValuesToOptions(); |
||||
|
|
||||
|
let GROUPED_OPTIONS = {}; |
||||
|
ALL_OPTIONS.forEach((option) => { |
||||
|
if (!GROUPED_OPTIONS[option.type]) { |
||||
|
GROUPED_OPTIONS[option.type] = []; |
||||
|
} |
||||
|
GROUPED_OPTIONS[option.type].push(option); |
||||
|
}); |
||||
|
|
||||
|
for (let key in GROUPED_OPTIONS) { |
||||
|
let group = document.createElement('div'); |
||||
|
group.className = 'optionGroup'; |
||||
|
group.innerText = `${key}(${GROUPED_OPTIONS[key].length})`; |
||||
|
group.addEventListener('click', () => { |
||||
|
console.log('clicked'); |
||||
|
addValuesToOptions(key); |
||||
|
}); |
||||
|
selectGroupingOptions.appendChild(group); |
||||
|
} |
||||
@ -0,0 +1,621 @@ |
|||||
|
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); |
||||
|
|
||||
|
:root { |
||||
|
--primary-color: rgb(17, 153, 158); |
||||
|
--secondary-color: rgb(228, 249, 245); |
||||
|
--btn-bg: rgba(255, 77, 77, 0.4); |
||||
|
--text-color: rgba(10, 10, 10, 1); |
||||
|
--option-1: rgb(48, 227, 202); |
||||
|
--option-1-faded: rgba(48, 227, 202, 0.2); |
||||
|
--option-2: rgb(64, 81, 78); |
||||
|
--option-2-faded: rgba(64, 81, 78, 0.6); |
||||
|
--background-img: linear-gradient( |
||||
|
to top left, |
||||
|
var(--primary-color), |
||||
|
var(--option-2) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
* { |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
html { |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
position: relative; |
||||
|
min-height: 100vh; |
||||
|
height: 100%; |
||||
|
font-family: 'Lato', sans-serif; |
||||
|
background-color: var(--secondary-color); |
||||
|
color: var(--text-color); |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
/* Intro container with a brief description of the Application */ |
||||
|
.introduction { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 100vh; |
||||
|
z-index: 1; |
||||
|
margin: 0; |
||||
|
color: white; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background: url('./images/campaign-creators-pypeCEaJeZY-unsplash.jpg') center |
||||
|
center no-repeat; |
||||
|
z-index: 1; |
||||
|
transition: all 1s ease-out; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.introduction.hide { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.introduction::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
} |
||||
|
|
||||
|
.introduction button { |
||||
|
z-index: 1; |
||||
|
display: block; |
||||
|
width: 40%; |
||||
|
padding: 2rem; |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
.introduction h1 { |
||||
|
z-index: 1; |
||||
|
font-size: 4rem; |
||||
|
} |
||||
|
|
||||
|
.introduction .intro-details { |
||||
|
width: 50%; |
||||
|
text-align: justify; |
||||
|
line-height: 1.7; |
||||
|
font-size: 2rem; |
||||
|
padding: 3rem 0 2rem; |
||||
|
color: white; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.introduction .intro-footer { |
||||
|
position: absolute; |
||||
|
bottom: 5px; |
||||
|
left: 20px; |
||||
|
} |
||||
|
|
||||
|
#main-content { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/*Header */ |
||||
|
.header-section { |
||||
|
display: Flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 1rem; |
||||
|
padding: 2rem 5rem; |
||||
|
background-image: var(--background-img); |
||||
|
color: var(--secondary-color); |
||||
|
font-weight: bold; |
||||
|
transition: all 1s ease-in; |
||||
|
transform: translateY(0); |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
.header-section .info { |
||||
|
letter-spacing: 1.3px; |
||||
|
} |
||||
|
|
||||
|
/* The main container holds the configuration and the table container*/ |
||||
|
.main-container { |
||||
|
display: Flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 1rem; |
||||
|
} |
||||
|
|
||||
|
/* Number of rows and generate File Button */ |
||||
|
.config { |
||||
|
padding: 2rem 3rem; |
||||
|
border-radius: 1rem; |
||||
|
margin-bottom: 1rem; |
||||
|
font-size: 1.6rem; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.config .row-count-input { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 5px; |
||||
|
position: relative; |
||||
|
width: inherit; |
||||
|
} |
||||
|
|
||||
|
.config input { |
||||
|
margin-top: 0.5rem; |
||||
|
width: 80%; |
||||
|
} |
||||
|
|
||||
|
.config .buttons { |
||||
|
margin-top: 1.5rem; |
||||
|
} |
||||
|
/* End of number of rows and generate file Button */ |
||||
|
|
||||
|
/* container and the entire column/row set */ |
||||
|
.data-input-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
display: flex; |
||||
|
max-width: 600px; |
||||
|
width: 75%; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.6s ease-in-out; |
||||
|
transform: translateX(0%); |
||||
|
opacity: 1; |
||||
|
position: relative; |
||||
|
align-items: flex-start; |
||||
|
box-shadow: 2px 0px 3px var(--option-2); |
||||
|
} |
||||
|
.row.hide { |
||||
|
transform: translateX(-100%); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
.row:nth-child(odd) { |
||||
|
background-color: var(--option-2-faded); |
||||
|
} |
||||
|
.row:nth-child(even) { |
||||
|
background-color: var(--option-1-faded); |
||||
|
} |
||||
|
.row:first-child { |
||||
|
background-color: var(--option-2); |
||||
|
color: rgba(223, 249, 251, 1); |
||||
|
border-top-left-radius: 10px; |
||||
|
border-top-right-radius: 10px; |
||||
|
} |
||||
|
.row:last-child { |
||||
|
border-bottom-left-radius: 10px; |
||||
|
border-bottom-right-radius: 10px; |
||||
|
box-shadow: 2px 2px 3px var(--option-2); |
||||
|
} |
||||
|
|
||||
|
.column { |
||||
|
width: 40%; |
||||
|
padding: 1rem; |
||||
|
margin: 0 1rem; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
height: initial; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.column.actions { |
||||
|
display: flex; |
||||
|
width: 20%; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.actions button:first-child { |
||||
|
margin-right: 2rem; |
||||
|
} |
||||
|
|
||||
|
.actions button { |
||||
|
cursor: pointer; |
||||
|
display: relative; |
||||
|
border: 0; |
||||
|
margin: 0; |
||||
|
background-color: transparent; |
||||
|
outline: 0; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
padding: 1rem 3rem; |
||||
|
margin: 1rem; |
||||
|
border-radius: 1rem; |
||||
|
cursor: pointer; |
||||
|
background-image: var(--background-img); |
||||
|
color: white; |
||||
|
font-size: 1.6rem; |
||||
|
border: 0; |
||||
|
border: 2px solid var(--btn-bg); |
||||
|
transform: translateX(0); |
||||
|
transition: transform 0.5s ease-in; |
||||
|
outline: 0; |
||||
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); |
||||
|
} |
||||
|
|
||||
|
.btn:hover, |
||||
|
.btn:focus { |
||||
|
border: 2px solid var(--option-2-faded); |
||||
|
transform: translateY(-5px); |
||||
|
} |
||||
|
|
||||
|
/* Tool tip for Number of Rows */ |
||||
|
.help-tip { |
||||
|
position: absolute; |
||||
|
top: 18px; |
||||
|
right: 18px; |
||||
|
text-align: center; |
||||
|
background-color: #bcdbea; |
||||
|
border-radius: 50%; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
font-size: 1.4rem; |
||||
|
line-height: 26px; |
||||
|
cursor: default; |
||||
|
} |
||||
|
|
||||
|
.help-tip:before { |
||||
|
content: '?'; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.help-tip:hover p { |
||||
|
display: block; |
||||
|
transform-origin: 100% 0%; |
||||
|
-webkit-animation: fadeIn 0.3s ease-in-out; |
||||
|
animation: fadeIn 0.3s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.help-tip p { |
||||
|
/* The tooltip */ |
||||
|
display: none; |
||||
|
text-align: left; |
||||
|
background-image: var(--background-img); |
||||
|
padding: 1rem; |
||||
|
width: 300px; |
||||
|
position: absolute; |
||||
|
border-radius: 3px; |
||||
|
box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.2); |
||||
|
right: -4px; |
||||
|
color: #fff; |
||||
|
font-size: 1, 5rem; |
||||
|
line-height: 1.4; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.help-tip p:before { |
||||
|
/* The pointer of the tooltip */ |
||||
|
position: absolute; |
||||
|
content: ''; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border: 6px solid transparent; |
||||
|
border-bottom-color: #1e2021; |
||||
|
right: 10px; |
||||
|
top: -12px; |
||||
|
} |
||||
|
|
||||
|
.help-tip p:after { |
||||
|
/* Prevents the tooltip from being hidden */ |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: -40px; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
/* For the Column Name and Option Grid Elements */ |
||||
|
input, |
||||
|
.inputSelection { |
||||
|
border-radius: 5px; |
||||
|
padding: 0.5rem 1rem; |
||||
|
font-size: 1.4rem; |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
border-radius: 0.5em; |
||||
|
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); |
||||
|
background-color: #fff; |
||||
|
outline: none; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.inputSelection { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
input:focus, |
||||
|
.inputSelection:focus { |
||||
|
border-color: #aaa; |
||||
|
box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); |
||||
|
box-shadow: 0 0 0 3px -moz-mac-focusring; |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
.inputSelection i { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
transform: translateX(-100%) translateY(15%); |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
/* End of Column Name and Option Grid Elements */ |
||||
|
|
||||
|
/* CSS for the tool tip for Add and Delete Row */ |
||||
|
.actions button .tooltiptext { |
||||
|
visibility: hidden; |
||||
|
width: fit-content; |
||||
|
background-color: black; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
padding: 8px 8px; |
||||
|
border-radius: 6px; |
||||
|
position: absolute; |
||||
|
z-index: 1000; |
||||
|
transform: translateX(-120%) translateY(40%); |
||||
|
} |
||||
|
|
||||
|
.actions button:hover .tooltiptext, |
||||
|
.actions button:focus .tooltiptext { |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
/* Second section of the main container containing the questions and answers */ |
||||
|
.additional-details { |
||||
|
font-size: 1.5rem; |
||||
|
padding: 1rem 5rem; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
.additional-details h3, |
||||
|
.additional-details p { |
||||
|
margin-top: 1.5rem; |
||||
|
} |
||||
|
/* End of Second Section */ |
||||
|
|
||||
|
/* Option selector popup Start */ |
||||
|
.select-input-background { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.select-input-background.show { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: top; |
||||
|
} |
||||
|
|
||||
|
.select-input-background.show .select-input-container { |
||||
|
justify-content: space-between; |
||||
|
margin: auto; |
||||
|
background-color: rgba(255, 255, 255, 1); |
||||
|
border-radius: 1rem; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
width: 70%; |
||||
|
top: 20vh; |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.optionGroup { |
||||
|
font-size: 1.6rem; |
||||
|
cursor: pointer; |
||||
|
padding: 0.5rem 0 0.5rem; |
||||
|
} |
||||
|
|
||||
|
.select-input-container .selectOption { |
||||
|
margin: 0.3rem; |
||||
|
padding: 0.8rem 1.6rem; |
||||
|
} |
||||
|
|
||||
|
.select-input-container .select-input-classification { |
||||
|
height: max-content; |
||||
|
width: 25%; |
||||
|
padding: 1rem 2.4rem; |
||||
|
} |
||||
|
|
||||
|
.select-input-classification h2 { |
||||
|
padding-bottom: 1rem; |
||||
|
font-size: 1.8rem; |
||||
|
} |
||||
|
|
||||
|
.select-input-container .close { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
font-size: 1.4rem; |
||||
|
font-weight: bold; |
||||
|
padding: 1rem 1.2rem; |
||||
|
border-radius: 50%; |
||||
|
background-color: #d9455f; |
||||
|
transform: translateX(50%) translateY(-50%) scale(1); |
||||
|
outline: none; |
||||
|
transition: all 1s ease-in; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.select-input-background.show .select-input-container .close:hover { |
||||
|
transform: translateX(50%) translateY(-50%) scale(1.3); |
||||
|
} |
||||
|
|
||||
|
.select-input-options { |
||||
|
width: 75%; |
||||
|
padding: 1rem 2.6rem; |
||||
|
border-left: 4px solid var(--primary-color); |
||||
|
box-shadow: 2px 2px 5px var(--option-2); |
||||
|
border-radius: 1rem; |
||||
|
background-color: rgba(0, 0, 0, 0.2); |
||||
|
margin: 1rem 1rem 1rem 2rem; |
||||
|
} |
||||
|
/* Option selector popup End */ |
||||
|
|
||||
|
/* Footer Start */ |
||||
|
footer { |
||||
|
width: 100%; |
||||
|
background-image: var(--background-img); |
||||
|
color: var(--secondary-color); |
||||
|
margin: 0 auto; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
border: 1px solid; |
||||
|
padding: 1rem 1rem 0.5rem 1rem; |
||||
|
margin-top: 2rem; |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
footer i { |
||||
|
font-size: 3rem; |
||||
|
padding: 1rem 3rem; |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
footer .display-pic { |
||||
|
height: 10rem; |
||||
|
border-radius: 50%; |
||||
|
border-style: solid; |
||||
|
border-color: #393e46; |
||||
|
border-width: 3px; |
||||
|
margin-right: 3rem; |
||||
|
} |
||||
|
|
||||
|
footer .contact { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
footer .contact-details { |
||||
|
margin-top: 1rem; |
||||
|
} |
||||
|
/* Footer End */ |
||||
|
|
||||
|
/* CSS animation */ |
||||
|
@-webkit-keyframes fadeIn { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
transform: scale(0.6); |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
opacity: 100%; |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeIn { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* On screens that are 992px wide or less*/ |
||||
|
@media screen and (max-width: 992px) { |
||||
|
html { |
||||
|
font-size: 9px; |
||||
|
} |
||||
|
|
||||
|
.introduction .intro-details { |
||||
|
width: 70%; |
||||
|
line-height: 1.6; |
||||
|
font-size: 1.8rem; |
||||
|
padding: 3rem 0 2rem; |
||||
|
} |
||||
|
.header-section { |
||||
|
font-size: 1.8rem; |
||||
|
padding: 2rem 1rem; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.row { |
||||
|
width: 80%; |
||||
|
box-shadow: 2px 0px 3px var(--option-2); |
||||
|
} |
||||
|
.select-input-background.show .select-input-container { |
||||
|
width: 90%; |
||||
|
} |
||||
|
.select-input-container .btn { |
||||
|
padding: 1.2rem; |
||||
|
margin: 0.5rem; |
||||
|
} |
||||
|
.select-input-options { |
||||
|
padding: 1rem; |
||||
|
width: 75%; |
||||
|
} |
||||
|
.select-input-classification { |
||||
|
width: 25%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* On screens that are 600px wide or less*/ |
||||
|
@media screen and (max-width: 600px) { |
||||
|
html { |
||||
|
font-size: 8px; |
||||
|
} |
||||
|
|
||||
|
.introduction .intro-details { |
||||
|
width: 80%; |
||||
|
line-height: 1.6; |
||||
|
font-size: 1.8rem; |
||||
|
padding: 3rem 0 2rem; |
||||
|
} |
||||
|
|
||||
|
.header-section { |
||||
|
flex-direction: column; |
||||
|
font-size: 1.8rem; |
||||
|
} |
||||
|
|
||||
|
.header-section .info { |
||||
|
margin-top: 1rem; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
width: 90%; |
||||
|
} |
||||
|
.select-input-container { |
||||
|
width: 80%; |
||||
|
} |
||||
|
.select-input-container .btn { |
||||
|
padding: 1rem; |
||||
|
margin: 0.3rem; |
||||
|
} |
||||
|
|
||||
|
.select-input-options { |
||||
|
padding: 1rem; |
||||
|
width: 75%; |
||||
|
} |
||||
|
.select-input-classification { |
||||
|
width: 25%; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue