generic component complete

Valentine-Mario · Sep 22, 2020 · a440b5b · a440b5b
1 parent 8792ca7
commit a440b5b
Show file tree

Hide file tree

Showing 6 changed files with 362 additions and 117 deletions.
diff --git a/app.html b/app.html
@@ -7,11 +7,18 @@
 
         </head>
 
-        <body><p>hi: {name}</p>i said hello
-<p>Age:{age}</p><p>title:{title}</p>
+        <body>
+<p>hi: kenneth</p>i said hello<p>Age: 34</p><p>title:chief</p>
+
+<h1>Header one</h1><h2>sell one</h2>
+<h2>sell one</h2>
+<p id="start" >hello world</p><span id="some" >this is some long ass text longer than 10 char</span><input id="user" ><p>--------</p>
+<p>section two start<p>This is some text</p><form id="myForm">	<input name="email" type="text"/><button id="mybut" >click</button></form>
+<textarea id="text"  placeholder="some text"></textarea><div id="food" >foodie here</div><input id="getter"  type="text" value="my world"><button id="but" >click</button><p id="num1" >10000</p><p id="num2" >10000.234</p>
+<p id="four_head" >text four<p><div id="some_date" >2020-06-10T17:47:29.156Z</div><div id="some_date3" >2020-06-10T17:47:29.156Z</div><div id="some_date4" >2020-06-10T17:47:29.156Z</div><div id="some_date2" >2020-06-10T17:47:29.156Z</div><div id="some_date5" >2020-06-16T17:47:29.156Z</div>
+<p id="money"  >1000</p><p id="money2"  >1000</p><p id="my_sring" > this is some text fuckers</p><p id="ccc" >12000</p><p id="cccd" >12000000</p><p id="write"></p><input id="writter"  type="text"><form id="form1"><input name="first" type="text"/>	<input name="second" type="number"/>	<textarea name="third"></textarea></form><form id="form2"><input name="first" type="text"/>	<input name="second" type="number"/></form><button id="form_getter" getForm=form1>click</form><button id="form_getter2" getForm=form2>click</form><a id="link1" >fb</a><a id="link2" >tw</a><a id="link3" >tel</a><a id="link4" >wha</a><br/>
+<div><p id="to_copy">copy me</p><button id="copy_me" >copy</button><p id="money"  >1000</p><p id="money2"  >1000</p><p id="my_sring" > this is some text fuckers</p><p id="ccc" >12000</p><p id="cccd" >12000000</p><p id="write"></p><input id="writter"  type="text"><form id="form1"><input name="first" type="text"/>	<input name="second" type="number"/>	<textarea name="third"></textarea></form><form id="form2"><input name="first" type="text"/>	<input name="second" type="number"/></form><button id="form_getter" getForm=form1>click</form><button id="form_getter2" getForm=form2>click</form><a id="link1" >fb</a><a id="link2" >tw</a><a id="link3" >tel</a><a id="link4" >wha</a><br/><textarea id="text"  placeholder="some text"></textarea><div id="food" >foodie here</div><input id="getter"  type="text" value="my world"><button id="but" >click</button><p id="num1" >10000</p><p id="num2" >10000.234</p></div><p id="start" >hello world</p><span id="some" >this is some long ass text longer than 10 char</span><input id="user" ><p>--------</p>
 
-in[one:[name="kenneth"]]in[two:[age="34" title="chief"]]in[one:[name="val"]]
-in[one:[name="ken"]]
 </body>
         <script type='text/javascript' src='app.js'></script>
         </html>
diff --git a/app.js b/app.js
@@ -0,0 +1,254 @@
+let var1= document.getElementById("food").innerHTML;
+
+
+let var1= document.getElementById("food").innerHTML;
+
+
+let var2=document.getElementById("getter").value;
+
+
+let var2=document.getElementById("getter").value;
+
+
+document.getElementById("start").innerHTML="a whole new world";
+
+
+document.getElementById("start").innerHTML="a whole new world";
+
+
+document.getElementById("some").innerHTML= document.getElementById("some").innerHTML.substring(0, 10);
+
+
+document.getElementById("some").innerHTML= document.getElementById("some").innerHTML.substring(0, 10);
+
+
+document.getElementById("user").disabled=true;
+
+
+document.getElementById("text").disabled=true;
+
+
+document.getElementById("text").disabled=true;
+
+
+document.getElementById("user").disabled=true;
+
+
+document.getElementById("but").addEventListener("click", ()=>{
+console.log("hi");console.log("zee") });
+
+
+document.getElementById("but").addEventListener("click", ()=>{
+console.log("hi");console.log("zee") });
+
+
+document.getElementById("num1").innerHTML= Intl.NumberFormat().format(parseInt(document.getElementById("num1").innerHTML));
+
+
+document.getElementById("num1").innerHTML= Intl.NumberFormat().format(parseInt(document.getElementById("num1").innerHTML));
+
+
+document.getElementById("num2").innerHTML= Intl.NumberFormat().format(parseFloat(document.getElementById("num2").innerHTML));
+
+
+document.getElementById("num2").innerHTML= Intl.NumberFormat().format(parseFloat(document.getElementById("num2").innerHTML));
+
+
+document.getElementById("money").innerHTML='$'+ Intl.NumberFormat().format(parseFloat(document.getElementById("money").innerHTML));
+
+
+document.getElementById("money2").innerHTML='€'+ Intl.NumberFormat().format(parseFloat(document.getElementById("money2").innerHTML));
+
+
+document.getElementById("money").innerHTML='$'+ Intl.NumberFormat().format(parseFloat(document.getElementById("money").innerHTML));
+
+
+document.getElementById("money2").innerHTML='€'+ Intl.NumberFormat().format(parseFloat(document.getElementById("money2").innerHTML));
+
+
+document.getElementById("four_head").style.visibility = "visible";
+
+
+function timeAgo(date) {
+
+                var seconds = Math.floor((new Date() - date) / 1000);
+
+                var interval = Math.floor(seconds / 31536000);
+
+                if (interval > 1) {
+                  return interval + ' years ago';
+                }
+                interval = Math.floor(seconds / 2592000);
+                if (interval > 1) {
+                  return interval + ' months ago';
+                }
+                interval = Math.floor(seconds / 86400);
+                if (interval > 1) {
+                  return interval + ' days ago';
+                }
+                interval = Math.floor(seconds / 3600);
+                if (interval > 1) {
+                  return interval + ' hours ago';
+                }
+                interval = Math.floor(seconds / 60);
+                if (interval > 1) {
+                  return interval + ' minutes ago';
+                }
+                return Math.floor(seconds) + ' seconds ago';
+              }
+
+
+document.getElementById('some_date2').innerHTML=timeAgo(new Date(document.getElementById('some_date2').innerHTML).getTime())
+
+
+document.getElementById('some_date5').innerHTML=timeAgo(new Date(document.getElementById('some_date5').innerHTML).getTime())
+
+
+document.getElementById("some_date").innerHTML= new Date(Date.parse(document.getElementById("some_date").innerHTML)).getDate()+'/'+parseInt(new Date(Date.parse(document.getElementById("some_date").innerHTML)).getMonth()+1) +'/'+new Date(Date.parse(document.getElementById("some_date").innerHTML)).getFullYear()
+
+
+document.getElementById("some_date3").innerHTML= parseInt(new Date(Date.parse(document.getElementById("some_date3").innerHTML)).getMonth()+1)+'/' + new Date(Date.parse(document.getElementById("some_date3").innerHTML)).getDate()+'/'+new Date(Date.parse(document.getElementById("some_date3").innerHTML)).getFullYear()
+
+
+document.getElementById("some_date4").innerHTML= new Date(Date.parse(document.getElementById("some_date4").innerHTML)).getFullYear()+ '/'+ parseInt(new Date(Date.parse(document.getElementById("some_date4").innerHTML)).getMonth()+1) +'/'+ new Date(Date.parse(document.getElementById("some_date4").innerHTML)).getDate()
+
+
+document.getElementById('my_sring').innerHTML= document.getElementById('my_sring').innerHTML.split(' ').reverse().join(' ')
+
+
+document.getElementById('my_sring').innerHTML= document.getElementById('my_sring').innerHTML.split(' ').reverse().join(' ')
+
+
+function NumFormatter(num) {
+                if(Math.abs(num) < 999){
+                    return Math.sign(num)*Math.abs(num)
+                }else if(Math.abs(num) > 999 && Math.abs(num) < 1000000){
+                    return Math.sign(num)*((Math.abs(num)/1000).toFixed(2)) + 'k'
+                }else if(Math.abs(num) > 999999 && Math.abs(num) < 1000000000)
+                {
+                    return Math.sign(num)*((Math.abs(num)/1000000).toFixed(2)) + 'M'
+                }else if(Math.abs(num) > 999999999 && Math.abs(num) < 1000000000000){
+                    return Math.sign(num)*((Math.abs(num)/1000000000).toFixed(2)) + 'B'
+                }else if(Math.abs(num) > 999999999999 && Math.abs(num) < 1000000000000000){
+                    return Math.sign(num)*((Math.abs(num)/1000000000000).toFixed(2)) + 'T'
+                }
+                }
+
+
+document.getElementById('ccc').innerHTML=NumFormatter(parseInt(document.getElementById('ccc').innerHTML))
+
+
+document.getElementById('cccd').innerHTML=NumFormatter(parseInt(document.getElementById('cccd').innerHTML))
+
+
+document.getElementById('ccc').innerHTML=NumFormatter(parseInt(document.getElementById('ccc').innerHTML))
+
+
+document.getElementById('cccd').innerHTML=NumFormatter(parseInt(document.getElementById('cccd').innerHTML))
+
+
+document.getElementById('writter').addEventListener('input', (event)=>{
+                document.getElementById('write').innerHTML=event.target.value
+            })
+
+
+document.getElementById('writter').addEventListener('input', (event)=>{
+                document.getElementById('write').innerHTML=event.target.value
+            })
+
+
+function getForm(form){
+                var elements = document.getElementById(form).elements;
+                    var obj ={};
+                    for(var i = 0 ; i < elements.length ; i++){
+                    var item = elements.item(i);
+                    obj[item.name] = item.value;
+                    if(obj[item.name]==''){
+                       delete obj[item.name];
+                    }
+                    }	
+                return obj
+            }
+
+
+document.getElementById('mybut').addEventListener('click', (event)=>{
+                event.preventDefault();
+                fetch('https://rocky-mesa-69765.herokuapp.com/email/add', {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json'
+},
+                    body:JSON.stringify(getForm('myForm'))
+                }).then((res) => res.json())
+                .then((data) =>  console.log(data))
+                .catch((err)=>console.log(err))
+            })
+
+
+var pageUrl=window.location.href;
+
+var link1 = document.getElementById('link1');
+                    link1.href='https://www.facebook.com/sharer.php?u='+pageUrl;
+                    document.body.appendChild(link1)
+;
+
+
+var link2 = document.getElementById('link2');
+                    link2.href='https://twitter.com/intent/tweet?url='+pageUrl;
+                    document.body.appendChild(link2)
+;
+
+
+var link1 = document.getElementById('link1');
+                    link1.href='https://www.facebook.com/sharer.php?u='+pageUrl;
+                    document.body.appendChild(link1)
+;
+
+
+var link2 = document.getElementById('link2');
+                    link2.href='https://twitter.com/intent/tweet?url='+pageUrl;
+                    document.body.appendChild(link2)
+;
+
+
+var link3 = document.getElementById('link3');
+                     link3.href='https://t.me/share/url?url='+'www.google.com';
+                     document.body.appendChild(link3)
+;
+
+
+var link4 = document.getElementById('link4');
+                     link4.href='https://api.whatsapp.com/send?text='+'www.google.com';
+                     document.body.appendChild(link4)
+;
+
+
+var link3 = document.getElementById('link3');
+                     link3.href='https://t.me/share/url?url='+'www.google.com';
+                     document.body.appendChild(link3)
+;
+
+
+var link4 = document.getElementById('link4');
+                     link4.href='https://api.whatsapp.com/send?text='+'www.google.com';
+                     document.body.appendChild(link4)
+;
+
+
+function copyToClip(id){
+                var copyText = document.getElementById(id);    
+                var textArea = document.createElement('textarea');
+                    textArea.value = copyText.textContent;
+                    document.body.appendChild(textArea);
+                    textArea.select();
+                    document.execCommand('Copy');
+                    textArea.remove();
+                }
+
+
+document.getElementById('copy_me').addEventListener('click', (e)=>{
+                e.preventDefault();
+                copyToClip('to_copy')
+                })
+
+
diff --git a/gen.scml b/gen.scml
@@ -1,17 +1,86 @@
-[html one]
-<p>hi: {name}</p>
+[html onesense]
+<p>hi: {{name}}</p>
 i said hello
 [html]
 
+[html twosense]
+<p>Age: {{age}}</p>
+<p>title:{{title}}</p>
+[html]
+
+[html]
+in[onesense:[name="kenneth"]]
+in[twosense:[age="34" title="chief"]]
+[html]
+
+inFile[head.scml]
+[html one]
+<p id="start" append="a whole new world" end>hello world</p>
+<span id="some" limit=10>this is some long ass text longer than 10 char</span>
+<input id="user" disable=true>
+<p>--------</p>
+[html]
+
 [html two]
-<p>Age:{age}</p>
-<p>title:{title}</p>
+<p>section two start
+<p>This is some text</p>
+<form id="myForm">
+	<input name="email" type="text"/>
+<button id="mybut" submitForm[https://rocky-mesa-69765.herokuapp.com/email/add]=myForm>click</button>
+</form>
 [html]
 
+[html three]
+<textarea id="text" disable=true placeholder="some text"></textarea>
+<div id="food" innerHTML=var1>foodie here</div>
+<input id="getter" getValue=var2 type="text" value="my world">
+<button id="but" click={console.log("hi");console.log("zee")}>click</button>
+<p id="num1" formatInt>10000</p>
+<p id="num2" formatFloat>10000.234</p>
 [html]
-in[one:[name="kenneth"]]
-in[two:[age="34" title="chief"]]
-in[one:[name="val"]]
+
+[html four]
+#this is a comment
+<p id="four_head" visibility=visible>text four<p>
+<div id="some_date" formatDate=dd/mm/yyyy>2020-06-10T17:47:29.156Z</div>
+<div id="some_date3" formatDate=mm/dd/yyyy>2020-06-10T17:47:29.156Z</div>
+<div id="some_date4" formatDate=yyyy/mm/dd>2020-06-10T17:47:29.156Z</div>
+<div id="some_date2" formatTimeAgo>2020-06-10T17:47:29.156Z</div>
+<div id="some_date5" formatTimeAgo>2020-06-16T17:47:29.156Z</div>
 [html]
 
-in[one:[name="ken"]]
+[html five]
+<p id="money"  formatCurrency="dollar">1000</p>
+<p id="money2"  formatCurrency="euro">1000</p>
+<p id="my_sring" reverseString> this is some text fuckers</p>
+<p id="ccc" shortenNum>12000</p>
+<p id="cccd" shortenNum>12000000</p>
+<p id="write"></p>
+<input id="writter" onChange=write type="text">
+<form id="form1">
+<input name="first" type="text"/>
+	<input name="second" type="number"/>
+	<textarea name="third"></textarea>
+</form>
+<form id="form2">
+<input name="first" type="text"/>
+	<input name="second" type="number"/>
+</form>
+<button id="form_getter" getForm=form1>click</form>
+<button id="form_getter2" getForm=form2>click</form>
+<a id="link1" shareDefault="facebook">fb</a>
+<a id="link2" shareDefault="twitter">tw</a>
+<a id="link3" shareCustome[www.google.com]="telegram">tel</a>
+<a id="link4" shareCustome[www.google.com]="whatsapp">wha</a><br/>
+[html]
+
+[html six]
+<div>
+<p id="to_copy">copy me</p>
+<button id="copy_me" copyArea=to_copy>copy</button>
+in[five:[name="val house" age="34" date="23/34/2020"]]
+in[three:[name="kin" age="44" date="23/34/2020"]]
+
+</div>
+in[one]
+[html]