thiscodeWorks - Organizing the best of code online

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML input tag</title>
</head>
<body>
    <form action="yourfile" method="post">
        <label for="first-name">First name:</label>
        <input type="text" name="first-name" id="first-name">
        <input type="submit" value="Submit">
        <input type="reset" name="Reset">
    </form>
</body>
</html>

#html #css #javasc #java #php #sass

HTML img Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML img tag</title>
</head>
<body>
    <div>
   		<img src="/img/example.png" alt="html">
    	
    </div>
</body>
</html>

#html #css #javasc #java #php #sass

HTML iframe Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML iframe tag</title>
</head>
<body>
    <iframe src="/index.html" width="400" height="300" scrolling="auto">
        <p>[Your browser does not support frames or is currently configured not to display frames. However, you may visit <a href="https://www.elementtutorials.com/">the related document.</a>]</p>
    </iframe>
</body>
</html>

#html #css #javasc #java #php #sass

HTML i Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML i tag</title>
</head>
<body>
    <p>Here is some <i>italic</i> text.</p>
	<p>Here is some <i>more italic</i> text.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML html Tag

<!DOCTYPE html>
<html>
<head>
    <title>A Complete HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML hr Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML hr tag</title>
</head>
<body>
    <p>This is the first paragraph of text.</p>
    <hr>
    <p>This is second paragraph of text.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML heading Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML headings tag</title>
</head>
<body>
    <h1>Heading  1</h1>
    <h2>Heading  2</h2>
    <h3>Heading  3</h3>
    <h4>Heading  4</h4>
    <h5>Heading  5</h5>
    <h6>Heading  6</h6>
</body>
</html>

#html #css #javasc #java #php #sass

HTML header Tag

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML header Tag</title>
</head>
<body>
    <header>
		<h1>Top Browsers</h1>
		<nav>
			<p>
                <a href="https://www.google.com">google</a> | 
                <a href="https://www.yahhoo.com">yahoo</a> | 
                <a href="https://www.bing.com">bing</a>
            </p>
		</nav>
	</header>
</body>
</html>

#html #css #javasc #java #php #sass

HTML head Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML head tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML form Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML form tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html>

#html #css #javasc #java #php #sass

HTML footer Tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML footer Tag</title>
</head>
<body>
    <footer>
		<nav>
			<p>
				<a href="https://www.google.com/">Terms of Use</a> |
				<a href="https://www.google.com/">Privacy Policy</a>
			</p>
		</nav>
		<p>Copyright &copy; 1998 </p>
	</footer>
</body>
</html>

#html #css #javasc #java #php #sass

HTML figure Tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML figure Tag</title>
</head>
<body>
    <figure>
		<img src="image.jpg" alt="Space Shuttle">
		
	</figure>
</body>
</html>

#html #css #javasc #java #php #sass

HTML fieldset Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML fieldset tag</title>
</head>
<body>
    <form action="http://www.google.com/" method="post">
        <fieldset>
            <legend>Gender</legend>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">Male</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">Female</label>
        </fieldset>
    </form>
</body>
</html>

#html #css #javasc #java #php #sass

HTML embed Tag

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML embed Tag</title>
</head>
<body>
    <embed src="/index.html" width="500" height="500">
</body>
</html>

#html #css #javasc #java #php #sass

HTML em Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML em tag</title>
</head>
<body>
    <p>This is an <em>important point</em> to consider.</p>
	<p>This is one more <em>important point</em> to consider.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML dt Tag

	<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dt tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html>

#html #css #javasc #java #php #sass

HTML dl Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dl tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html>

#html #css #javasc #java #php #sass

HTML div Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML div tag</title>
    <style type="text/css">
        .welcome-box{
            background:lightblue;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="welcome-box">
        <h1>Welcome</h1>
        <p>Hi, welcome to our website.</p>
    </div>
    <p><strong>Note:</strong> To learn more about style rules please study tutorials on <a href="">CSS</a>.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML dialog Tag

<!DOCTYPE>
<html>  
<body>  
 
<dialog> <p>This is an HTML dialog popup</p> <button id="close">Close Dialog</button>
  </dialog> 
  <button id="show">Show Me the Dialog</button> 

  <script>  
    
    var dialog = document.querySelector('dialog'); 
    document.querySelector('#show').onclick = function() { 
      dialog.show(); }; document.querySelector('#close').onclick = 
        function() { dialog.close(); }; 
  </script>
  

</body>
</html>

#html #css #javasc #java #php #sass

HTML dfn Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dfn tag</title>
</head>
<body>
    <p>The <dfn title="Hyper Text Markup Language">HTML</dfn> is the publishing language of the World Wide Web.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML details Tag

<html>
<head>
<title>Example of HTML details Tag</title>
<style type="text/css">
    details{
    	margin: 10px;
    }
</style>
</head>
<body>
<details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of web pages.</p>
</details>
<details>
    <summary>What is Twitter Bootstrap?</summary>
    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. </p>
</details>
<details>
    <summary>What is CSS?</summary>
    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. </p>
</details>
<p><strong>Note:</strong> The details tag currently not supported in Firefox and Internet Explorer.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML del Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML del tag</title>
</head>
<body>
    <h1>To Do</h1>
    <ul>
        <li>$2000</li>
        <li>$3000</li>
        <li><del>$4000</del></li>
        <li>$5000</li>
    </ul>
</body>
</html>

#html #css #javasc #java #php #sass

HTML dd Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dd tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html>

#html #css #javasc #java #php #sass

HTML data Tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML data Tag</title>
<style>
    data:hover::after {
        content: ' (ID ' attr(value) ')';
        font-size: .7em;
    }
</style>
</head>
<body>
    <p>New Movie Makers</p>
    <ul>
        <li><data value="204">Alson</data></li>
        <li><data value="205">Corner</data></li>
        <li><data value="206">John</data></li>
    </ul>
	<p><strong>Note:</strong> Place the mouse pointer over the list item to see how it actually works.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML colgroup Tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML col Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <colgroup>
            <col style="background-color:red">
            <col span="2" style="background-color:yellow">
        </colgroup>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alson</td>
            <td>Alson@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Corner</td>
            <td>Corner@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John doe</td>
            <td>John@mail.com</td>
        </tr>
    </table>
</body>
</html>

#html #css #javasc #java #php #sass

HTML code tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML code tag</title>
</head>
<body>
    <p>This is paragraph <code>computer code</code> another line.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML cite Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML cite Tag</title>
</head>
<body>
    <p>My favorite movie is <cite>Avengers</cite>.</p>
	<p>My another favorite movie is <cite>Bloodshoot</cite>.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML caption Tag

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML caption Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid gray;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alson</td>
                <td>Alson@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Conner</td>
                <td>Conner@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Doe</td>
                <td>John@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

#html #css #javasc #java #php #sass

HTML canvas Tag

<!DOCTYPE html>
  <html>
  <body>
  
  <canvas id="firstcanvas" width="500" height="500" style="border:1px solid red;">
  Your browser does not support the HTML canvas tag.
  </canvas>
  
  </body>
  </html>

#html #css #javasc #java #php #sass

HTML button Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML button tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html>

#html #css #javasc #java #php #sass

HTML br Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML br tag</title>
</head>
<body>
    <p>This paragraph contains<br>a line break.</p>
	<p>This paragraph contains <br>multiple <br>line breaks.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML body Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML body tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML blockquote Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML blockquote tag</title>
</head>
<body>
    <blockquote>
        <p>This is an example of a long quotation.</p>
    </blockquote>
</body>
</html>

#html #css #javasc #java #php #sass

HTML bdo Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML bdo tag</title>
</head>
<body>
    <p>The sequence "1-2-3-4-5" was reversed as: <bdo dir="rtl">1-2-3-4-5</bdo></p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML bdi Tag

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML bdi Tag</title>
</head>
<body>
  <p>If the bdi element is not supported in the browser, the username of the Arabic user would confuse the text</p>
    <p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML base Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML base tag</title>
    <base href="https://www.elementtutorials.com/">
</head>
<body>
	<p>Learn <a href="https://www.elementtutorials.com/">CSS</a>.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML b Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML b Tag</title>
</head>
<body>
    <p>This <b>sentence</b> contains some <b>bold</b> words.</p>
	<p>Here are <b>some</b> more <b>bold</b> words.</p>
</body>
</html>

#html #css #javasc #java #php #sass

HTML audio Tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML audio Tag</title>
</head>
<body>
	<audio controls="controls" src="/audio.mp3">
        Your browser does not support the HTML5 audio element.
    </audio>
</body>
</html>

#html #css #javasc #java #php #sass

HTML aside tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML aside Tag</title>
</head>
<body>
	<h1>Apollo 13 Mission</h1>
	<p>This is paragraph</p>
	<p>[...]</p>
    <aside>
		<h1>Apollo 13 Facts</h1>
		<p>The aside element represents a section of the web page that encloses content which is tangentially related to the content around it.</p>
	</aside>
</body>
</html>

#html #css #javasc #java #php #sass

HTML article Tag

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML article Tag</title>
</head>
<body>
    <article>
		<h1>Introduction to HTML</h1>
		<p>HTML is a markup language that is used for creating web pages.</p>
	</article>
</body>
</html>

#html #css #javasc #java #php #sass

HTML area Tag

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="/img/favicon.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

#html #css #javasc #java #php #sass

HTML area Tag

http://www.elementtutorials.com//ref/area.html

#html #css #java #javasc #php #sass

HTML address Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML address tag </title>
</head>
<body>
    <address>
        Written by <a href="mailto:hello@example.com">Alson</a>.<br> 
        Contact us at:<br>
        street NO:, Hollywood<br>
        USA
    </address>
</body>
</html>

#html #css #java #javasc #php #sass

HTML a Tag

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML a tag</title>
</head>
<body>
<a href="https://www.elementtutorials.com/">ElementTutorials</a>
</body>
</html>

#html #css #java #javasc #php #sass

HTML abbr Tag

http://www.elementtutorials.com//ref/abbr.html

#array #destructuring #javasc #react.js

Fetch data Component React

// This is what I've been using, pretty straight forward
// It passes the JSON to the children as props
// Of course, you fetch what you will
 
import React, { Component, Fragment } from 'react';
 
export class FetchJsonController extends Component
{
	constructor(props) {
		super(props);
		this.state = {
			data: null,
		};
	}
 
	componentDidMount() {
		fetch(this.props.src)
			.then(response => response.json())
			.then(data => {
				console.log(data);
				this.setState({ data })
			});
	}
 
	render() {
		const _data = this.state.data;
		const children = React.Children.map(this.props.children, child => {
			return React.cloneElement(child, {
				jsonData: _data
			});
		});
		return (
			<div>{ children }</div>
		)
	}
}
 
// This is how it's used
// SomeCompnent will receive the JSON data
<FetchJsonController src="somefile.json">
  <SomeComponent />
</FetchJsonController>

#array #destructuring #javasc #react.js

Pure functions!

//What are pure functions?
//Pure functions take an input value (a parameter or argument) and produce an output value. //Like with hashing, the same input it will always return the same output 

const myPureFunction = number => return number * 4

//Pure functions must:
//1. Contain no side effects
//2. When given the same input, return the same output.
// A pure component avoids any use of state.
map
filter
reduce

#array #destructuring #javasc #react.js

Add random element to array : React

import React, { Component } from "react";

class IconList extends Component {
  static defaultProps = {
    options: [
      "angry",
      "anchor",
      "archive",
      "at",
      "archway",
      "baby",
      "bell",
      "bolt",
      "bone",
      "car",
      "city",
      "cloud",
      "couch"
    ]
  };
  constructor(props) {
    super(props);
    this.state = { icons: ["bone", "cloud"] };
    this.addIcon = this.addIcon.bind(this);
  }
  //DON'T DO THIS!!!!
  // addIcon() {
  //   let idx = Math.floor(Math.random() * this.props.options.length);
  //   let newIcon = this.props.options[idx];
  //   let icons = this.state.icons;
  //   icons.push(newIcon);
  //   this.setState({ icons: icons });
  // }

  addIcon() {
    // get random index
    let idx = Math.floor(Math.random() * this.props.options.length);
 	// get new element
    let newIcon = this.props.options[idx];
    // update the state of the icons array (spread icons into new array, add new icon to it)
    this.setState({ icons: [...this.state.icons, newIcon] });
  }
  render() {
    // render newly mapped icons array
    const icons = this.state.icons.map(i => <i className={`fas fa-${i}`} />);
    return (
      <div>
        <h1>Icons: {icons}</h1>
        <button onClick={this.addIcon}>Add New Icon</button>
      </div>
    );
  }
}

export default IconList;

#php #javasc #html #python

Java Class/Object Syntax

public class Main {
  int x = 5;

  public static void main(String[] args) {
    Main myObj = new Main();
    System.out.println(myObj.x);
  }
}

#php #javasc #html #python

Python Class Syntax

class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age

p1 = Person("John", 36)

print(p1.name)
print(p1.age)

#php #javasc #html

Site Tracker using PHP and Ajax. (view.js Page) part 6

let count = 0;
let counttxt = document.querySelector("#count");

window.addEventListener("DOMContentLoaded", (e) => {
  getView();
});

// handle posting data to db
function getView() {
  $.ajax({
    url: "insert.php",
    method: "POST",
    dataType: "text",
    data: {
      count: count,
    },
    success: (data, status) => {
      console.log(data);
    },
  });
}

setInterval(() => {
  getData();
}, 1000);

// handle getting dada from database

function getData(data) {
  $.ajax({
    url: "fetch.php",
    method: "POST",
    dataType: "text",
    data: {
      fetch: true,
    },
    success: (data, status) => {
      counttxt.textContent = data;
    },
  });
}

async function userLocation() {
    const API_KEY = "7c0a8d3613ed43a7adeb63a2884f59b4";

  let locationcont = document.querySelector(".v-loc");
  let url =
    `https://ipgeolocation.abstractapi.com/v1/?api_key=${API_KEY}`;

  let fetchdata = await fetch(url);
  let data = await fetchdata.json();
  const { city, country, ip_address, latitude, longitude } = data;

  let loader = document.querySelector(".loader-cont");
  if (location.innerHTML = "") {
    loader.style.display = "flex";
    locationcont.innerHTML = "";
  } else {
    setTimeout(() => {
        loader.style.display = "none";
    }, 2000);
    locationcont.innerHTML = `
    <div class="location">
    <div class="box">
        <div class="icon"><ion-icon name="location-outline"></ion-icon></div>
        <b><p>${country}</p></b>
    </div>
    <div class="box">
        <div class="icon"><ion-icon name="locate-outline"></ion-icon></div>
        <b><p>${city}</p></b>
    </div>
  </div>
  <div class="geo">
    <div class="box">
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lat</i>
            <br>
            <small>${latitude}</small>
        </div>
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lng</i>
            <br>
            <small>${longitude}</small>
        </div>
    </div>
    <div class="ip">
        <span class="icon"><ion-icon name="navigate-outline"></ion-icon></span>
        <small>IP ADDRESS</small>
        <h3><i>${ip_address}</i></h3>
    </div>
  </div>
    `;
  }
}
userLocation();

#php #javasc #html

Site Tracker using PHP and Ajax. (fetch.php Page) part 5

<?php 
require("db.php");


if(isset($_POST['fetch'])){
    $sql = mysqli_query($conn, "SELECT * FROM views");
    $data = mysqli_fetch_assoc($sql);
    $count = $data['count'];

    if(mysqli_num_rows($sql) > 0){
        echo $count;
    }else{
        echo "0";
    }
}else{
    return false;
}


?>

#php #javasc #html

Site Tracker using PHP and Ajax. (insert.php Page) part 4

<?php 
require("db.php");


$count = 0;
if(isset($_POST['count'])){
        $sql = mysqli_query($conn, "SELECT * FROM views");
        $data = mysqli_fetch_assoc($sql);
    
        $newcount = $data['count'];
    
        if(mysqli_num_rows($sql) > 0){
            $newcount+=1;
            $sql = mysqli_query( $conn, "UPDATE views SET count='$newcount'");
    
            if($sql){
                echo "Success";
            }
        }
    }else{
        echo "Something went wrong";
        die;
    }
    // getCount();
}else{
    return false;
}

?>

#php #javasc #html

Site Tracker using PHP and Ajax. (db.php Page) part 3

<?php 

$conn = mysqli_connect("localhost", "root", null, "views");

echo $conn ? "" : "Error connecting ".mysqli_error($conn);


?>

#php #javasc #html

Site Tracker using PHP and Ajax. (css Page) part 2

body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background: #0c0c18 !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.container .card{
    width:400px;
    height:350px;
    margin: 50px auto !important;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container .v-loc{
    width: 500px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "location"
    "geo"
    ;
}

.container .v-loc .location{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    grid-area: location;
    flex-wrap:wrap;
}
.container .v-loc .icon{
    color:#ffff00;
    font-size:30px;
    padding:5px;
    float:left;
}
.container .v-loc .location .box{
    width:245px;
    padding:15px 45px;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    margin-right:2px;
    border-radius: 2px;
    display:flex;
    text-align: start;
}
.container .v-loc .location .box h5{
    padding:8px;
    font-size:28px;
}
.container .v-loc .geo{
    margin:10px auto;
    display:flex;
    flex-wrap:wrap;
    grid-area: geo;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    width:100%;
    padding:12px;
}
.container .v-loc .geo .box{
    display:flex;
    flex-wrap:wrap;
    padding:12px;
}
.container .v-loc .geo .box .box-1{
    width:195px;
    padding:10px 45px;
    margin:5px;
}
.container .v-loc .geo .box .box-1 i{
    padding:12px;
}
.container .v-loc .geo .ip{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    width:100%;
    text-align: center;
}

.loader-cont{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    position:fixed;
    background:#000000e3;
    top:0px;
    left:0px;
    /* display:none; */
}
.loader-cont .icon{
    font-size:55px;
    color:#ffff00;
    animation: spin linear infinite;
}

#php #java #javasc #html

Site Tracker using PHP and Ajax. (index Page) part 1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Views Counts</title>
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</head>

<body>
    <br>
    <br>
    <h1 class="display-4 text-center text-white">Site Tracker</h1>
    <div class="container">
        <div class="card">
            <div class="container">
                <div class="card-header">
                    <h3>Visitor Views</h3>
                    <p>Last 30min</p>
                </div>
                <div class="card-body">
                    <h1 id="count">0</h1>
                </div>
            </div>
        </div>
        <div class="v-loc"></div>
    </div>

    <div class="loader-cont">
        <h3 class="text-white">Loading.......</h3>
        <div class="icon">
            <ion-icon name="cog-outline" class="ion"></ion-icon>
        </div>
    </div>

    <script src="view.js"></script>
    <script src="jquery.js"></script>
</body>

</html>

#php #java #javasc #html

Send Mail With PHP and PHPMailer (PHP PART)

<?php 
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once "vendor/autoload.php";


if(isset($_POST['submit'])){
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $msg = htmlspecialchars($_POST['msg']);

    $error = "";
    $pass = "";
    // check if fields are empty

    if(empty($name) || empty($email) || empty($msg)){
        $error .= str_replace(" ", "-", "Fields cannot be empty");
        header("location: index.php?err=$error");
        die;
    }
    else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $error .= str_replace(" ", "-", "Email given is invalid");
        header("location: index.php?err=$error");
        die;
    }
    else {
        // if no error occur send mail
        $to = "alumonabenaiah71@gmail.com";
        $mail = new PHPMailer(true); 
        $mail->IsSMTP();
        $mail->Mailer = "smtp";
        $mail->SMTPDebug  = 1;  
        $mail->SMTPAuth   = TRUE;
        $mail->SMTPSecure = "tls";
        $mail->Port       = 587;
        $mail->Host       = "smtp.gmail.com";
        $mail->Username   = "your-gmail-account-address";
        $mail->Password   = "your-password";
        $mail->From = $email;
        $mail->FromName = $name;
        $mail->addAddress($to);
        $mail->Subject = "Contact Form Request";
        $mail->Body = $msg;
        if($mail->send()){
            $pass .= str_replace(" ", "-", "Message sent Successfully!!");
            header("location: index.php?pass=$pass");
            die;
        }else{
            $error .= str_replace(" ", "-", "An error occur while sending message, please try later ".$mail->ErrorInfo);
            header("location: index.php?err=$error");
            die;
        }
    }
}
else{
    header("location: index.php");
    die;
}

?>

#php #java #javasc #html

Send Mail With PHP and PHPMailer (CSS PART)

body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background:url("https://images.unsplash.com/photo-1530893609608-32a9af3aa95c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fHRlY2h8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60") !important;
    background-size:cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
    height:100vh;
}
.container .form-cont{
    width:450px;
    padding:12px;
    background:rgba(0,0,0,.8);
    color:#fff;
}

.container .form-cont form textarea{
    height:100px;
}

#php #java #javasc #html

Send Mail With PHP and PHPMailer (HTML PART)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Mail</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <div class="form-cont">
            <h3>Contact Form</h3>
            <br>
            <div class="err-cont">
                <?php if(isset($_GET['err'])){?>
                <div class="alert alert-danger"><small><?php echo $_GET['err'];?></small></div>
                <?php }else if(isset($_GET['pass'])){?>
                <div class="alert alert-success"><small><?php echo $_GET['pass'];?></small></div>
                <?php }?>
            </div>
            <form action="sendmail.php" class="form-group" method="POST">
                <label for="fname">Fullname</label>
                <input type="text" name="name" placeholder="Your name.." class="form-control">
                
                <label for="fname">Email</label>
                <input type="email" name="email" placeholder="Your Email Address.." class="form-control">
                
                <label for="subject">Message</label>
                <textarea name="msg" placeholder="Write something.." class="form-control"></textarea>
            
                <input type="submit" name="submit" value="Send Message" class="btn btn-block btn-primary mt-2">
            
              </form>
        </div>
    </div>
</body>
</html>

HTML input Tag

HTML img Tag

HTML iframe Tag

HTML i Tag

HTML html Tag

HTML hr Tag

HTML heading Tag

HTML header Tag

HTML head Tag

HTML form Tag

HTML footer Tag

HTML figure Tag

HTML fieldset Tag

HTML embed Tag

HTML em Tag

HTML dt Tag

HTML dl Tag

HTML div Tag

HTML dialog Tag

HTML dfn Tag

HTML details Tag

HTML del Tag

HTML dd Tag

HTML data Tag

HTML colgroup Tag

HTML code tag

HTML cite Tag

HTML caption Tag

HTML canvas Tag

HTML button Tag

HTML br Tag

HTML body Tag

HTML blockquote Tag

HTML bdo Tag

HTML bdi Tag

HTML base Tag

HTML b Tag

HTML audio Tag

HTML aside tag

HTML article Tag

HTML area Tag

HTML area Tag

HTML address Tag

HTML a Tag

HTML abbr Tag

Fetch data Component React

Pure functions!

Add random element to array : React

Java Class/Object Syntax

Python Class Syntax

Site Tracker using PHP and Ajax. (view.js Page) part 6

Site Tracker using PHP and Ajax. (fetch.php Page) part 5

Site Tracker using PHP and Ajax. (insert.php Page) part 4

Site Tracker using PHP and Ajax. (db.php Page) part 3

Site Tracker using PHP and Ajax. (css Page) part 2

Site Tracker using PHP and Ajax. (index Page) part 1

Send Mail With PHP and PHPMailer (PHP PART)

Send Mail With PHP and PHPMailer (CSS PART)

Send Mail With PHP and PHPMailer (HTML PART)

Save snippets that work with our extensions