This is my newest and official website portfolio.
4 |
21 | 
25 | 
27 |
--------------------------------------------------------------------------------
/scripts/form.js:
--------------------------------------------------------------------------------
1 | const nameInput = document.querySelector("#name");
2 | const emailInput = document.querySelector("#email");
3 | const messageInput = document.querySelector("#message");
4 | const success = document.querySelector("#success")
5 | const error = document.querySelectorAll(".error")
6 |
7 | /* The function will validate the form if there is a name and email and messages have a input and
8 | Follow the requirement if its valid
9 | */
10 |
11 | function validateForm(){
12 |
13 | clearMessage()
14 | let errorMessage = false;
15 |
16 | if(nameInput.value.length < 1){
17 | error[0].innerText = "\u0021 Name cannot be blank";
18 | nameInput.classList.add("error")
19 | errorMessage = true;
20 | }
21 |
22 | if(!validEmail(emailInput.value)){
23 | error[1].innerText = "\u0021 Invalid Email Address";
24 | emailInput.classList.add("error")
25 | errorMessage = true;
26 | }
27 |
28 | if(messageInput.value.length < 1){
29 | error[2].innerText = "\u0021 Please Enter a Message";
30 | messageInput.classList.add("error")
31 | errorMessage = true;
32 | }
33 |
34 | if (!errorMessage){
35 | success.innerText = "Message Sent"
36 | history.back();
37 | }
38 | }
39 |
40 | // call the function for validateForm and wil clear the input if its reload
41 | function clearMessage(){
42 | for(let i = 0; i < error.length; i++){
43 | error[i].innerText = "";
44 | }
45 | success.innerText = "";
46 | nameInput.classList.remove("error")
47 | emailInput.classList.remove("error")
48 | messageInput.classList.remove("error")
49 | }
50 |
51 | //this will check the email if its an valid email
52 | function validEmail(emailInput){
53 | let symbol = /\S+@\S+\.\S+/;
54 | return symbol.test(emailInput);
55 | }
--------------------------------------------------------------------------------
/scripts/message.js:
--------------------------------------------------------------------------------
1 | (function() {
2 |
3 | function getFormData(form) {
4 | var elements = form.elements;
5 |
6 | var fields = Object.keys(elements).filter(function(k) {
7 | return (elements[k].name !== "honeypot");
8 | }).map(function(k) {
9 | if(elements[k].name !== undefined) {
10 | return elements[k].name;
11 | }else if(elements[k].length > 0){
12 | return elements[k].item(0).name;
13 | }
14 | }).filter(function(item, pos, self) {
15 | return self.indexOf(item) == pos && item;
16 | });
17 |
18 | var formData = {};
19 | fields.forEach(function(name){
20 | var element = elements[name];
21 | formData[name] = element.value;
22 | if (element.length) {
23 | var data = [];
24 | for (var i = 0; i < element.length; i++) {
25 | var item = element.item(i);
26 | if (item.checked || item.selected) {
27 | data.push(item.value);
28 | }
29 | }
30 | formData[name] = data.join(', ');
31 | }
32 | });
33 |
34 | // add form-specific values into the data
35 | formData.formDataNameOrder = JSON.stringify(fields);
36 | formData.formGoogleSheetName = form.dataset.sheet || "PortfolioSheet"; // default sheet name
37 | formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default
38 |
39 | console.log(formData);
40 | return formData;
41 | }
42 |
43 | function handleFormSubmit(event) {
44 | event.preventDefault();
45 | var form = event.target;
46 | var data = getFormData(form);
47 | if( data.email && !validEmail(data.email) ) {
48 | var invalidEmail = form.querySelector(".email-invalid");
49 | if (invalidEmail) {
50 | invalidEmail.style.display = "block";
51 | return false;
52 | }
53 | } else {
54 | disableAllButtons(form);
55 | var url = form.action;
56 | var xhr = new XMLHttpRequest();
57 | xhr.open('POST', url);
58 | xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
59 | xhr.onreadystatechange = function() {
60 | console.log(xhr.status, xhr.statusText);
61 | console.log(xhr.responseText);
62 | var formElements = form.querySelector(".form-elements")
63 | if (formElements) {
64 | formElements.style.display = "none"; // hide form
65 | }
66 | var thankYouMessage = form.querySelector(".thankyou_message");
67 | if (thankYouMessage) {
68 | thankYouMessage.style.display = "block";
69 | }
70 | return;
71 | };
72 | var encoded = Object.keys(data).map(function(k) {
73 | return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
74 | }).join('&');
75 | xhr.send(encoded);
76 | }
77 | }
78 |
79 | function loaded() {
80 | console.log("Contact form submission handler loaded successfully.");
81 | var forms = document.querySelectorAll("form.gform");
82 | for (var i = 0; i < forms.length; i++) {
83 | forms[i].addEventListener("submit", handleFormSubmit, false);
84 | }
85 | };
86 | document.addEventListener("DOMContentLoaded", loaded, false);
87 |
88 | function disableAllButtons(form) {
89 | var buttons = form.querySelectorAll("button");
90 | for (var i = 0; i < buttons.length; i++) {
91 | buttons[i].disabled = true;
92 | }
93 | }
94 | })();
--------------------------------------------------------------------------------
/scripts/t.min.js:
--------------------------------------------------------------------------------
1 | /*t.js-1.3.1;(c)2014-2018 - Mntn(r) service :
131 |started :
136 |completed :
141 |This Digital clock is also a side project for enhancing my JavaScript skills and also my front end skills
146 |
162 | .png)
165 | service :
131 |started :
136 |completed :
141 |This calculator app is tend to increase my knowledge about Javascript and the purpose of this is to practice about my coding skills and it has also the option of Dark Mode and Light Mode
146 |
162 | 
165 | service :
130 |started :
135 |completed :
140 |My project for the Online Replit Hackathon was the Discord Bot. This is done using the Python language and Procfile, and it will run continuously for 24 hours.
145 |service :
130 |started :
135 |completed :
140 |A fiverr web design for a customer that i present to see if they will like the design and make a copy for a personal look in the project section
145 |service :
131 |started :
136 |completed :
141 |Capstone title generator is created for Computer related course to help college to brainstorm their title for their capstone
146 |service :
131 |started :
136 |completed :
141 |This Weather app is created as a side project and we use an API which weatherman.org to help us fetch some of the information. We used HTML CSS and JavaScript
146 |
162 | 
165 | 
168 | service :
131 |started :
136 |completed :
141 |This Todo List App is created first thru Figma making the UI in different devices of it and Next is We developed it like on the UI This also make me learn new things in JavaScript enhancing my skills more
146 |
162 | 
165 | 
168 | service :
130 |started :
135 |completed :
140 |QR Code Generator is created for marketing business that uses QR Code to reach someone by scanning the QR with this you just need to put some info from the website and will be able to generate QR Codes
145 |service :
131 |started :
136 |completed :
141 |HomeCity Creator: Design your dream city with React - a user-friendly front-end app. Build, customize, and share without backend hassle. Create your urban masterpiece today!
146 |
162 | .png)
165 | 
168 | service :
130 |started :
135 |completed :
140 |Research Title Generator for SHS Students to use in their Research Titles, similar to the Capstone Generator, except this will be available for all strands to use to generate ideas.
145 |service :
130 |started :
135 |completed :
140 |Express Eat is a website that provides a wide variety of recipes. Recipes that we offer not only here in the philippines but for different countries. We also have a search bar that allows you to search for a specific recipe. We hope that you will enjoy this website and find the recipe that you are craving for.
145 |service :
131 |started :
136 |completed :
141 |This website is created with no prior exprience in searching for some solution but it fails in developing in terms of the media queries but it developed the backend of Email and Minimalist Design with help of JavaScript
146 |service :
130 |started :
135 |completed :
140 |This is created thru the fiverr freelancing app and the owner want to developed it by own but i created a copy of mine its only a Web Design and No Backend Code
145 |I provide high-quality website and app development services at reasonable pricing. I am skilled and well-trained to create outstanding websites and apps that will assist you in meeting your company objectives.
118 | 119 |