Natalia Osorio Cueto osor0024

## forms.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Working with HTML Forms</title>
    <meta name="viewport" content="width=device-width">
    <style>
        *,
        *::after,
        *:before{

## forms.js
// forms.js
//

const init = function(){
    document.getElementById('button-cancel').addEventListener('click', reset);
    document.getElementById('button-send').addEventListener('click', send);
}

const reset = function(ev){
    //HTML will automatically put the form back to its initial state

## css-ellipsis.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Ellipsis</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css"/>
    <style>
        /* handling text overflow with
        Ellipsis

## cards.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Grid and Layout</title>
    <!-- https://getbootstrap.com/ -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link href="css/main.css" rel="stylesheet" />
</head>

## canvas-lines.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drawing Lines and Curves in Canvas</title>
    <style>
        #canvas{
            border: 1px solid #999;
            margin: 1rem auto;
            display: block;

## canvas-video.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Canvas Video</title>
    <style>
        video{
            border: 4px solid cornflowerblue;
        }
        canvas{

## canvas-piechart.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Pie Charts</title>
    <style>
        canvas{
            border: 2px solid #333;
            margin: 2rem auto;


## canvas-transforms.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas Rotation</title>
    <style>
        html{
            background-color: #999;

## happy.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #canvas{
            border: 1px solid red;

## basic-spa.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SPA Demo</title>
    <style>
        *{
            padding:0;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Working with HTML Forms</title>
	<meta name="viewport" content="width=device-width">
	<style>
	*,
	*::after,
	*:before{
	// forms.js
	//

	const init = function(){
	document.getElementById('button-cancel').addEventListener('click', reset);
	document.getElementById('button-send').addEventListener('click', send);
	}

	const reset = function(ev){
	//HTML will automatically put the form back to its initial state