HI,

I'm David Glatzl

Front End Developer

About me

Welcome to my Web Portfolio!   I am David Glatzl, Front End Developer.  In 2012, I graduated with highest distinction from the College of Westchester located in White Plains, NY with an overall [3.9] GPA, Summa Cum Laude, obtaining an AAS (Associate in Applied Science) Degree.

 

My major was in Digital Media. It was a well-rounded curriculum that taught Web Design  and Development which is one of my passions.  My experience as a Front End Developer for Simply Sacred Oils for the past ten years has given me the opportunity to really make a significant contribution to growing this entrepreneur’s   businesses.

My Work

Simply Sacred Oils

I built this working website in WordPress with one of their responsive templates. I rmanage and update the site regulary. Simply Sacred Oils™presently sells synergistically Charged Essential Oil Products. They are the manufacturers of their own products. On this site you will find Roll-On Chakra oils, Room & Body Sprays, Aromatherapy Pillows, etc.
Portfolio

My Web Portfolio with a Vertical Style Menu

This is another version of my Web Portfolio on a WordPress template with a complete Vertical Style Navigation Bar.

Skills

WordPress

Creating pages, drafts, clones & categories
Expert 100%
publish pages, public, private & password protec.
Expert 100%
Edit text or images with wordpress or photoshop
Expert 100%
uploading images, zip files & external plugins
Expert 100%
increase button functionality with javascript
Expert 100%
Correct URL links to match page or item titles
Expert 100%
setup paypal cart buttons for ordering items
Expert 100%
setup paypal redirect pages
Expert 100%
Elementor Pro
Expert 100%
Install, activate & edit plugins
Expert 100%
Sitemaps, Google Crawling, Update URL's
Expert 100%
editing css code, style sheets & apperance
Expert 100%
create accordian menus on pages with javascript
Expert 100%
setup paypal zipcodes for tax & shipping charges
Expert 100%
setup wordpress redirect pages with javascript
Expert 100%
resolve errors by ruling out the plugin culprits
Expert 100%
Product uploads, pricing and descriptions
Expert 100%
resolve website crashes due to plugin conflicts
Expert 100%

Code Samples

Note

This section contains JavaScript, PHP and C++ code samples written by me, website author David Glatzl. The purpose of this code sample portfolio is to demonstrate my knowledge and skill of these programming languages.

JavaScript

				
						/* Start JavaScript */
<script>
	     $(document).ready(function() {
		
		 $('.accordion .term').click(function () {
		 
		  if ($(this).next('p').is(':hidden')) {
		 		  
		 $('.accordion p').slideUp('fast');
          };
		 
		 $(this).next('p').slideToggle('fast');  
            
            });   
        
        });
        
</script>   
/* End JavaScript */
	

            

				
			
				
					<input type="checkbox" name="checkbox" value="check" id="agree" /> <em>By using this website you have read and agree to our <a href="http://simplysacredoils.com/images/Code-Sample-Blank-Form.pdf" target="_blank" rel="noopener noreferrer">Terms of Use</a></em>

/* Start JavaScript */

<form action="https://www.paypal.com/cgi-bin/webscr" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('Please indicate that you have read and agree to our Terms of Use'); return false; }">
    
/* End Javascript */
    
<input type="hidden" name="cmd" value="_s-xclick">

<input type="hidden" name="hosted_button_id"value="QK47DXLJ9NTPW">

<input type="image" src="https://www.dgsddpro.com/wp-admin/images/addedFunctionButton1.png" border="0" name="submit" alt="My button">

<img alt="addedFunctionButton1" border="0" src="https://www.dgsddpro.com/buttonGraphic.png" width="1" height="1">
</form>


				
			
				
					/* Start JavaScript */
<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>Search My Site</title>
<style>
	
	p {
  font-size: 25px;
 
      
}

input.largerGobox {
font-size: 25px;
width: 100px;
height: 40px;
        }

input.largerSearchbox {

width: 300px;
height: 20px;
        }
	
	
	</style>
  
   
	<!DOCTYPE html>
<html>
<head>
    <title>Search My Site</title>
	<script>
	//Search a specific site rather than the entire Web.
        function search(){
		 		        			
			var site = "dgsddpro.com";
			
			//Get the text that the user typed into the textbox.
            
			var lookfor = document.getElementById("txtlookfor").value;
			
			if(lookfor.length > 0) {
			
			//Look at the drop-down value and make search URL accordingly.        
			var ddchoice = document.getElementById("dropdown").value
			
			if (ddchoice == 1) {
				var query = "http://www.bing.com/search?q=" + encodeURIComponent(lookfor) + " site:" + site;
				} else if (ddchoice == 2) {
				var query = "http://www.google.com/search?q=" + encodeURIComponent(lookfor) + " site:" + site;
				} else {
				var query = "http://search.yahoo.com/search?p=" + encodeURIComponent(lookfor) + " site:" + site; 
				
				} 
						
			location.href = query;
								
 			} else {
			//If textbox was empty, show an alert.
			
			alert("Please type the word or words for which you want to search.");
			}
			
       }
   </script>
 </head>
<body>
    <p><p>Search This Site:  https://www.dgsddpro.com<br><br><br>
    <input type="text" class="largerSearchbox" id="txtlookfor" autofocus>
    <input type="button" class="largerGobox" onclick="search()" value="Go">
		<!-- Show drop-down list -->
        &nbsp;Choose engine:

		<select id="dropdown">
		<option value="1">Bing</option>
        <option value="2" selected>Google</option>
		<option value="3">Yahoo</option>
        </select>          
		
	    
  </p>
    
</body>
</html>


/* End JavaScript */

				
			

Alert Box

This program utilizes what is called a return statement in javaScript. This particular kind of statement returns the value of the userAccess function (on line 35).

In the code below, the keyword "return" that is highlighted in blue (on line 38), has the word "javascriptMessage" placed after it. The word "javascriptMessage" is the value of the userAccess function. This is the value that is to be returned.

When it is returned an alert box wil pop up with a message about JavaScript contained inside of it. (Please refer to the code on lines 53 - 55.)
				
					<pre>
<code>

<link href="css/pre10.css" rel="stylesheet" type="text/css" media="all" />
   
        function userAccess() {
           
            var javascriptMessage;
            javascriptMessage = document.retrieveMessage.value;
            return javascriptMessage;
        }
 
       onclick="alert( 'JavaScript is a very important programmming language.  
       
       It brings faster user experiences, user interface interactivity and 
       
       plays a big role in making websites responsive.', userAccess() );" />

    </code>  
</pre>


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />    


<link href="css/pre10.css" rel="stylesheet" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script type="text/javascript">

        function userAccess() {
            var javascriptMessage;
            javascriptMessage = document.retrieveMessage.value;
            return javascriptMessage;
        }

    </script>
    
   </head>

<body>
   
   <strong><h1>The output of this program is -></h1></strong>
    </br>
    </br>
</br>
<samp>
    
    <form name="retrieveMessage">
        <input type="button" class="block" value="Click here to call the userAccess function()" onclick="alert( 'JavaScript is a very important programmming language.  It brings faster user experiences, user interface interactivity and plays a big role in making websites responsive.', userAccess() );" />


    </form>
  </samp>
</body>

 

</html>
				
			

The Browser Object Model (BOM)

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser. With this code, JavaScript can access and manipulate the browser's objects.

The objects that make up the BOM include the window object, navigator object, screen object, history object, location object, and the document object.

In the code below on lines 10 - 19 is where JavaScript is used to access the browser's objects.

				
					<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Browser Objects Examples</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/pre11.css" rel="stylesheet" type="text/css" media="all" />
<div class="objectone">
<body>
    Your screen width is <script> document.write(screen.width)</script> pixels.<br>
    Your screen height is <script> document.write(screen.height)</script> pixels.<br>____________________________________________________________<br><br>
	Your user agent is <script> document.write(navigator.appVersion)</script>.<br>
    Your platform is <script> document.write(navigator.platform)</script>.<br>____________________________________________________________<br><br>
    Your page width is <script> document.write(window.innerWidth)</script> pixels.<br>
    Your page height is <script> document.write(window.innerHeight)</script> pixels.<br>____________________________________________________________<br><br>
    This page was last modified on <script> document.write(document.lastModified)</script>.<br>____________________________________________________________<br><br>
    This page title is <script> document.write(document.title)</script>.<br>____________________________________________________________<br><br>
    This page URL is <script> document.write(location.href)</script>.<br>____________________________________________________________<br><br>
	</div>
<div class="objecttwo">
	<label for="country">Please enter a country that you have traveled to:</label>
    <input type="text" class="objectthree" id="country"> then click</input>
    <input type="button" class="objectfour" value="Go" onclick="alert('I traveled to the country ' + document.getElementById('country').value)"></input>
    <p>                                                                                             
       <button class="objectfive" onclick="window.close()">Close Me</button>
    </p>
    </body>
</div>
</html>



				
			

PHP

An associative array with a while loop and for/each loop.

				
					<?php

$military = array("\n . Leader\n . Beretta hand gun\n . Four star\n\n\n" => "General:", "\n . Second rank\n . Glock hand gun and M27 rifle\n . Silver collar insignia \n\n\n" => "First Lieutenant:", "\n . Third rank\n . M27 rifle and Remington shotgun\n . Embroidered green on red badge\n\n\n" => "Sergeant:", "\n . Fourth rank\n . M27 rifle and Marine sword\n . Embroidered gold on red badge\n\n\n" => "Corporal:"); 

$i = 0;

while( $i < sizeof( $military ) )

$i++;

foreach ( $military as $attribute => $ninja ) {
    echo "Attributes of the $ninja \n $attribute";
}

?>
				
			

An associative array with two - for/each loops.

				
					<?php

$military = array(
    'GENERAL' => array('    Role' => 'Leader', '    Weapon' => 'Beretta hand gun', '    Rank' => 'Four star' . "\n\n\n"),
    'FIRST LIEUTENANT' => array('    Role' => 'Second in command',  '    Weapon' => 'Glock hand gun and M27 rifle', '    Rank' => 'Silver collar Insignia' . "\n\n\n"),
    'SERGEANT' => array('    Role' => 'Third in command', '    Weapon' => 'M27 rifle and Remington shotgun', '    Rank' => 'Embroidered green on red badge' . "\n\n\n"),
    'CORPORAL' => array('    Role' => 'Fourth in command', '    Weapon' => 'M27 rifle and a Marine sword', '    Rank' => 'Embroidered gold on red badge' . "\n\n\n")
);


foreach ( $military as $ninja => $attribute ) {
    echo "$ninja-\n\n";

foreach ( $attribute as $label => $attr ) {
        echo "$label: $attr\n";

    }
 }

?>
				
			

Numeric Array

In this particular program the array uses the print_r () function to display its output.
				
					<?php

$solution = array(
$Algebra =  6 + 220 * 311 - 1,
$Algebra2 = 22 / ( 10 * 6 - 32 ) * 4,
$Algebra3 = 30 * ( 100 / 5 - 23 * 2 + 9 * 339)
);

print_r($solution);

?>
				
			

Numeric Array

In this particular program the array uses the echo () function to display its output.
				
					<?php

$x = 5;
$y = 21;
$z = 44;

$solution = array(
$Algebra =  6 + 220 + 311 - 1 / $x,
$Algebra2 = 3 / 10 * (6 - 32) % 20,
$Algebra3 = 30 * ( 100 / 5)  - 23 * 2 + (9 * 339),
$Algebra4 = 3 % (70 * 2) - 10 + (8 + 12 * 2) + 1 + 1 -22,
$Algebra5 = ($x + 50) + ($y - 3) - 3 + $y / (4 * $x),
$Algebra6 = ($x - 120) - ($y + 2) + ($z + 1.2) - ( $x % 281) - ( 5 - $x) + $z,
);

echo "Question #1 \n";
echo "6 + 220 + 311 - 1 / $x = " . $solution[0] . "\n\n\n";
echo "Question #2 \n";
echo "3 / 10 * (6 - 32) % 20 = " . $solution[1] . "\n\n\n";
echo "Question #3 \n";
echo "30 * (100 / 5) - 23 * 2 + (9 * 339) = " . $solution[2] . "\n\n\n";
echo "Question #4 \n";
echo "3 % (70 * 2) - 10 + (8 + 12 * 2) + 1 +1 - 22 = " . $solution[3] . "\n\n\n";
echo "Question #5 \n";
echo "($x + 50) + ($y - 3) - 3 + $y / (4 * $x) = " . $solution[4] . "\n\n\n";
echo "Question #6 \n";
echo "($x - 120) - ($y + 2) + ($z + 1.2) - ($x % 281) - (5 - $x) + $z = " . $solution[5] . "\n\n";

?>
				
			

Comparison Function

This is a function that compares two integers and prints out the greater of the two. Below, there are three separate pairs of integers that are compared by this function.
				
					<?php
function integer_comparison( $num1, $num2) {

    if ($num1 > $num2) {
        return $num1;

    } else if($num2 > $num1) {
        return $num2;
}

}

var_dump( integer_comparison( 2219, 4196 ) );

var_dump( integer_comparison( 23, 22) );

var_dump( integer_comparison(743, 734 ) );

?>
				
			

c++

Bubble Sort Algorithm

This C++ algorithm can take any group of ten numbers and put them in descending order from the highest number to the lowest number. On line fifteen in the program below, you can see a group of ten numbers in any random order.

When you look at the output of this program you can see the group of numbers have been put in decsending order starting from the highest number to the lowest number.
				
					// Bubblesort Algorithm.cpp 
// Author David Glatzl

#include <iostream>

using namespace std;

const int MAXSIZE = 10;

void bubbleSort(int arr[], int size);
void swap(int& x, int& y);

int main()
{
	int nums[] = { 1, 7, 5, 3, 15, 11, 13, 17, 21, 19 };
	int k;

	cout << "BEFORE SORT: ";
	for (k = 0; k < MAXSIZE; k++)
		cout << nums[k] << " ";

	bubbleSort(nums, MAXSIZE);

	cout << endl << endl;
	cout << "AFTER SORT: ";
	for (k = 0; k < MAXSIZE; k++)
		cout << nums[k] << " ";

	cout << endl << endl << endl;

	system("PAUSE");
	return 0;
} // end main()

void bubbleSort(int arr[], int size)
{
	int last = size - 2;
	int isChanged = 1;

	while (last >= 0 && isChanged)
	{
		isChanged = 0;

		for (int k = 0; k <= last; k++)
			if (arr[k] < arr[k + 1])
			{
				swap(arr[k], arr[k + 1]);
				isChanged = 1;
			}
		last--;
	}
}// end bubbleSort()

void swap(int& x, int& y)
{
	int temp;
	temp = x;
	x = y;
	y = temp;
}// end swap()
				
			

Array Sort User

This program sorts an array of numbers in ascending order from the lowest number to the highest number.

Then, after the numbers are sorted, the program will ask the user to enter any number that is within the array.

After that, the index number of the element (the number that the user chose) will output or be displayed in the console window.
				
					// File: ArrayUser.cpp
// a pgm that sorts an array and asks the user to find an element by calling the index number.

// Author: David Glatzl

#include<iostream>
#include<stdlib.h>
using namespace std;

const int MAXSIZE = 10;

void sortArr( int arg[], int size );
void swap( int& x, int& y );
int findIndex( int x[] );

int main()
{
	int num[10] = { 45, 9, 23, 100, 90, 6, 86, 17, 3, 5 };
	int i;
	int index;
	
	cout << endl;
	cout << "The elements in the array before they are sorted: ";
	for( i = 0; i < MAXSIZE; ++i )
		cout << num[i] << " ";

	sortArr( num, MAXSIZE );

	cout << endl << endl;
	cout << "After the elements are sorted: ";
	for( i = 0; i < MAXSIZE; ++i )
		cout << num[i] << " ";

	cout << endl << endl;
	
	for( i = 0; i < 1; ++i )
	{
		cout << "Enter any number within the array: ";
		cin >> num[i];
	}

	index = findIndex( num );

	cout << endl;
	cout << "The index for the element you entered is: " << num[index] << endl;
	cout << endl;
	return 0;
}

void sortArr( int arg[], int size )
{
	int last = size - 1;
	int isChanged = 1;

	while (last >= 0 && isChanged)
	{
		isChanged = 0;

		for(int i = 0; i <= last; ++i)
			if(arg[i] < arg[i-1])
			{
				swap(arg[i], arg[i-1]);
				isChanged = 1;
			}
			last--;
	}
}

void swap(int& x, int& y)
{
	int temp;
	temp = x;
	x = y;
	y = temp;
}

int findIndex( int x[] )
{	
	int i = 0;
	for( i = 0; i < 10; ++i )
	{
		if( x[i] == 3 )
			{
				x[i] = 0;
				break;
			}
		if( x[i] == 5 )
			{
				 x[i] = 1;
				 break;
			}	
		if( x[i] == 6 )
			{
				 x[i] = 2;
				 break;
			}
		if( x[i] == 9 )
			{
				x[i] = 3;
				break;
			}
		if( x[i] == 17 )
			{
				x[i] = 4;
				break;
			}
		if( x[i] == 23 )
			{
				x[i] = 5;
				break;
			}
		if( x[i] == 45 )
			{
				x[i] = 6;
				break;
			}
		if( x[i] == 86 )
			{
				x[i] = 7;
				break;
			}
		if( x[i] == 90 )
			{
				x[i] = 8;
				break;
			}
		if( x[i] == 100 )
			{
				x[i] = 9;
				break;
			}
		}
		return 0;
}
				
			

Contact

Contact me...

Please contact me if you need a Front End Developer to join, help or assist your team.

I am the kind of Front End Developer that can also manage your web hosting, database and do all the backend maintenance work that your website requires.

Thank you!

David