Sean D Connelly - CP365 LOG

Part of the form I will be using to build accounts in my project... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div id="regName">         <div id="test">           <label>Account Code?</label>           <input type="text" name="acntCode" size="15" maxlength="13">                        <label>Account Association Code?</label>           <input type="text" name="acntCode" size="15" maxlength="13">         </div>         <br>         <label>First Name</label>         <input type="text" name="firstName" size="10" maxlength="12">         <label>Middle Initial</label>         <input type="text" name="mInitial" size="1" maxlength="1">         <label>Last Name</label>  

This is me building some shapes in my project using CSS. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #shape0 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250px; height: 250px; margin: auto; box-shadow: 3px 3px 4px lightblue; border-radius: 25px; background-color: #efefef; } #shape0 #exit { position: absolute; bottom: 20px; left: 10px; border-radius: 12px; box-shadow: 3px 3px 4px lightblue; background-color: #ff1a1a; width: 110px; height: 40px; }

Building the main nav of the project #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #main-nav { margin: 0; padding: 5px; position: absolute; width: 75%; top: 11%; left: 51%; transform: translate(-50%, -50%); border-radius: 10px 10px 10px 10px; border: 1px solid #c0c0c0; box-shadow: 0 2px 3px #33b3a6; overflow: hidden; list-style-type: none; font-size: .8rem; /*border-radius: 12px 12px 0 0;*/ /*border-bottom: 1px solid #c0c0c0;*/ background-color: #66e6d9; }

Back to work on my project... For today anyway. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <ul id="main-nav"> <li class="left"><a href="index.html">Home</a></li> <li class="left"><a href="about.html">About</a></li> <li class="right"><a href="faq.html">F A Q</a></li> <li class="right"><a href="contact.html">Contact</a></li> <li class="right"><a href="register.html">Register</a></li> <li class="right"><a href="login.html">Login</a></li> </ul>

I will give you more when I get this working the way I want it... Forms!!! Yipeeee! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** .contact form button, .contact form input, .contact form textarea{   width:100%;   padding:1em;   border:1px solid #c9e6ff; } .contact form button{   background:#c9e6ff;   border:0;   text-transform: uppercase; } .contact form button:hover,.contact form button:focus{   background:#92bde7;   color:#fff;   outline:0;   transition: background-color 2s ease-out; }

Some notes I put together on "for" loops #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** //Loops // for loops // for(set a variable; set the condition; increment) { // do something // } for (var i = 0; i < 10; i++) { console.log(i); } var w = 0; while(w < 10) { console.log(w); w++; } var digits = [55,84,95,221,2,8,665,35,44]; digits.forEach(function(number){ console.log(number); }); //End Loops

Media query to adjust for screen size. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** @media(min-width:700px)  {   .wrapper{     display: grid;     grid-template-columns: 1fr 2fr;   }   .wrapper > *  {     padding:2em;   }   .company-info h3, .company-info ul, .brand  {     text-align: left;   }

Starting work on a responsive registration form for my first major project... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <form>      <p>        <label>Name</label>        <input type="text" name="name">      </p>      <p>        <label>Company</label>        <input type="text" name="company">      </p>      <p>        <label>Email Address</label>        <input type="email" name="email">      </p>      <p>        <label>Phone Number</label>        <input type="text" name="phone">      </p>      <p class="full">        <label>Message</label>        <textarea name="message" rows="5"></textarea>      </p>      <p class="full">        <button>Submit</bu

Using CSS variables to build a menu... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* Navigation */ .main-nav ul {   display: grid;   grid-gap: 20px;   padding: 0;   list-style: none;   grid-template-columns: repeat(4, 1fr); } .main-nav a {   background: var(--primary);   display: block;   text-decoration: none;   padding: 0.8rem;   text-align: center;   color: var(--dark);   text-transform: uppercase;   font-size: 1.1rem;   box-shadow: var(--shadow); } .main-nav a:hover {   background: var(--dark);   color: var(--light); }

And today, while learning about CSS Grid, I discovered CSS variables...  This is to cool! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** /* CSS Variables */ :root {   --primary: #ddd;   --dark: #333;   --light: #fff;   --shadow: 0 1px 5px rgba(104, 104, 104, 0.8); } html {   box-sizing: border-box;   font-family: Arial, Helvetica, sans-serif;   color: var(--dark); }

Starting the responsive CSS Grid Tut by Traversy Media. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <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"> <script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css">     <title>Responsive TUT CSS-Grid</title> </head>

This my first day playing with CSS Grid.  It looks promissing so far... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #codes { display : grid ; grid-template-columns : 0.7fr 2fr 1.3fr 2fr ; grid-auto-rows : minmax ( auto ); grid-gap : 2em ; justify-items : stretch ; align-items : stretch ; } #AC { text-align : right ; }

One month of the challenge is done... I am working on learning JS constructors today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** // Constructor Pattern function Fruit(name, color, shape) { this.name = name; this.color = color; this.shape = shape; this.describe = function() { return 'A ' + this.name + ' is the color ' + this.color + ' and is the shape ' + this.shape; } } var orange = new Fruit('orange', 'orange', 'round'); var melon = new Fruit('melon', 'green', 'round'); console.log(orange); console.log(melon.shape); console.log(melon.describe()); // You can also create arrays of objects // End Object

I am having issues...  I am working to modify code to open a variable controlled settings window... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html > <html> <head> <title> Email Vault - Main </title> <meta charset = "UTF-8" >    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >    <link rel = "stylesheet" type = "text/css" href = "style.css" > </head> <body> <button id = "lovedOnes" onclick = " createLovedOnes ()" > Set the number of recipient addresses needed </button> <button id = "test" onclick = " PopupCenter ()" > Testset the number of recipient addresses needed </button> <div id = "tester" > text </div> <script> function PopupCenter ( url , title , w , h

Codingphase was in a weather related car wreck and did not post a video.  I am still going to post code today...  Somedays I wish I could take a break, but this is very important to me and the future of my family. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** handleAddProject(project){     let projects = this.state.projects;     projects.push(project);     this.setState({projects:projects});   }   handleDeleteProject(id){     let projects = this.state.projects;     let index = projects.findIndex(x => x.id === id);     projects.splice(index, 1);     this.setState({projects:projects});   }   render() {     return (       <div className="App">         <AddProject addProject={this.handleAddProject.bind(this)} />         <Projects projects={this.state.projects} onDelete={this.handleDeleteProject.bind(this)} />         <hr />         <Todos todos={this.state.todos} />       </div>     );

Following a tut for React.JS.  This is interesting. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** getProjects(){     this.setState({projects: [       {         id:uuid.v4(),         title: 'Business Website',         category: 'Web Deisgn'       },       {         id:uuid.v4(),         title: 'Social App',         category: 'Mobile Development'       },       {         id:uuid.v4(),         title: 'Ecommerce Shopping Cart',         category: 'Web Development'       }     ]});   }   componentWillMount(){     this.getProjects();     this.getTodos();   }   componentDidMount(){     this.getTodos();   }

Today is my first ever venture into React.JS... Thank you Brad Traversy. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** import React, { Component } from 'react'; import uuid from 'uuid'; import $ from 'jquery'; import Projects from './Components/Projects'; import AddProject from './Components/AddProject'; import Todos from './Components/Todos'; import './App.css'; class App extends Component {   constructor(){     super();     this.state = {       projects: [],       todos:[]     }   }   getTodos(){     $.ajax({       url: 'https://jsonplaceholder.typicode.com/todos',       dataType:'json',       cache: false,       success: function(data){         this.setState({todos: data}, function(){           console.log(this.state);         });       }.bind(this),       error: function(xhr, status, err){         console.log(err);       }     });   }

This is pissing me off!  The code I am posting today, works perfectly on a stand alone page, but when I include it ina full page... NOTHING! I have something in my page that is blocking this functionality... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html > <html> <head> <title> Vault - Main </title> <meta charset = "UTF-8" >    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >    <link rel = "stylesheet" type = "text/css" href = "style.css" > </head> <body> <button id = "lovedOnes" onclick = " createLovedOnes ()" > Set the number of recipient addresses needed </button> <div id = "tester" > text </div> <script> function createLovedOnes () { var heading = document . getElement

My problem child... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <button id = "lovedOnes" onclick = " createLovedOnes ()" > Set the number of recipient addresses needed </button> </form> </div> <!-- Close register-form --> <div id = "tester" > text </div> <script> function createLovedOnes () { var heading = document . getElementById ( "tester" );        heading . innerHTML = 'You Clicked Me Three!' // document.getElementById('tester').innerHTML = 'changed text'; } < /script>

Not a very productive day... Just some basic CSS. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #header-div {    width : 100% ;    height : 9rem ;    position : relative ;    background-color : #40e0d0 ;    border : 2px solid #c0c0c0 ;    border-radius : 15px ;    box-shadow : 0 2px 5px #33b3a6 ; } #header-div h1   {    margin : 0 ;    position : absolute ;    width : 55% ;    top : 56% ;    left : 51% ;    transform : translate ( -50% , -50% );    font-size : 8vw ;    color : #000080 ; } #main-nav {    margin : 0 ;    padding : 5px ;    position : absolute ;    width : 75% ;    top : 11% ;    left : 51% ;    transform : translate ( -50% , -50% );    border-radius : 10px 10px 10px 10px ;    border : 1px solid #c0c0c0 ;    box-shadow : 0 2px 3px #33b3a6 ;    overflow : hidden ;    list-style-type : none ;    font-size : .8rem ;    /*border-radius: 12px 12px 0 0;*/    /*border-bott

Trying to write a function that will add a variable number of inputs to the DOM... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <script> function createLovedOnes ( needed ) { for ( i = 1 ; i <= needed ; i ++) { var newFirstName = "newFirstName" + i ; var newLastName = "newLastName" + i ; var newBirthday = "newBirthday" + i ; var newDiv = document . createElement ( "newDiv" + 1 ); document . body . appendChild ( div ); <input type = "text" id = "newFirstName" name = "newFirstName" size = "11" maxlength = "15" /> <input type="text" id="newLastName" name="newLastName" size="11" maxlength="15" /> <input type="date" id="newBirthday" n

Thanks Stefan... More functions. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** #CodingPhase #TheCodingWay #365CodingPhaseChallenge

Hoping that the Codingphase meetup goes well!!! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html > <html> <head>    <title> - Main </title>    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >    <link rel = "stylesheet" type = "text/css" href = "style.css" > </head> <body> <div id = "main-div" > <!-- Main body div -->    <div id = "header-div" > <!-- Main header div -->      <h1> Email Vault </h1>      <ul id = "main-nav" >        <li class = "left" ><a href = "index.html" > Home </a></li>        <li class = "left" ><a href = "about.html" > About </a></li>        <li class = "right" ><a href = "f

I decided to get back one of my projects.  I plan to make this one a commercial product some day, soooo... not a lot of details. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html > <html> <head>    <title> Email Vault - Main </title>    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >    <link rel = "stylesheet" type = "text/css" href = "style.css" > </head> <body> <div id = "main-div" > <!-- Main body div -->    <div id = "header-div" > <!-- Main header div -->      <h1> Email Vault </h1>      <ul id = "main-nav" >        <li class = "left" ><a href = "index.html" > Home </a></li>        <li class = "left" ><a href = "about.html" > Abou

Stefan and I are going over the DOM today.  Thank you all. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ch10 JavaScript Dom</title> <style type="text/css"> div {position: relative} h1 {margin: 25px auto; width: 100%; background-color: #E84B0D; text-align: center; font-size: 24px; font-family: sans-serif; color: #FFF} #leftbutt {width: 100px} </style> </head> <body> <div id='theDiv'> <h1>The HTML DOM</h1> <input type="button" id="button" value="Activate!"> <p id="target"></p> </div> <script> /* 3 ways to insert HTML into a page with JS: 1. document.write() - never use! 2. innerHTML - you will use often. 3. DOM manipulation methods - more complex but

Today I am learning Objects and Arrays... FUN! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ch8 JavaScript Objects and Arrays</title> </head> <body> <h1>Looping can make your code spin!</h1> <input type="button" id="looper" value="Do it again!"> <p id="target"></p> <script> document.getElementById("looper").onclick=function() { var dogs = [ "German Shepherd", 325425,   " Beagle",   " Boxer",   " Chimpdog" ]; dogs.push("Pushing Dog"); for (index = 0; index < dogs.length; index++) { alert(dogs[index]); } var pets = ["Pets", "Pets2", dogs, false]; alert(dogs.length); document.getEleme

Stefan is walking me through JS conditionals today... Some fun! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ch6 JS Conditional statements</title> <script type="text/javascript"> /* Properties are the values associated with a JavaScript object. innerHTML is a property that is the HTML content of an element */ function runIt() { var str = "This is it"; var result = str.indexOf("i"); console.log(result); if(result != -1) { console.log("Result is: " + result); console.log(true); } else { console.log("Result is: " + result); console.log(false); } } </script> </head> <body> <h2>JavaScript Conditional Statements</h2> <button id="activator" type=&qu

This code is from a class I am taking from Stefan.  Today we covered  Event handling. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html onkeypress="sniffer('You pressed a key!')"> <head> <meta charset="UTF-8"> <title>Ch2 JavaScript</title> <!-- http://www.w3schools.com/jsref/dom_obj_event.asp Common event handlers: - onclick - onmouseover - onmouseout - onload - onkeypress - onchange - for form fields --> <script> function sniffer(message) { console.log("Something happened: " + message); } </script> <style type="text/css"> #secondP {width: 200px; background-color: #AFE6A5; float: right} p:hover, button:hover {cursor: pointer;} </style> </head> <body> <h1>Welcome Uber Nerdling!</h1> <input type="text" onchange="alert('It

Coding is going slowly this week.  I find myself spending more time figuring out what I want to do, than actually doing it.  Time to take a few classes so that I can get moving again... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html > <html>    <head>      <link rel = "stylesheet" type = "text/css" href = "shapes.css" >      <title> Gramps' Simon </title>    </head>    <body>      <div id = "shape-board" >        <div id = "shape00" >          <button id = "cancel" onclick = " setActiveControl ( 0 )" > Cancel </button>          <button id = "start" onclick = " freebee ()" > Start </button>          <button id = "stop" > Stop </button>          <!-- <button id="btn-time"></button>         If