Posts

Showing posts from December, 2018

Day 73

This is turning into a long ass drive! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <DOCTYPE html> <body>  <p>This is me claiming a free code day, with a crapton of bad weather on a long ass drive from ID to OK.</p> </body>

Day 72

Working with Steffan again... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html lang="en-US"> <head> <title>Chapter 8, Meta and Head</title> <meta charset="UTF-8"> <style> h1 {color:red;} p {color:blue;} </style> <script> function callAlert(aVar) { alert("You clicked on the text: " + aVar.innerHTML); } </script> </head> <body> <h1 onclick="callAlert(this);">Meta Tags and the Head</h1> <p lang="fr-CA"> Voici! Ceci et la Francais mal ecrit!</p> <p onclick="callAlert(this);"> UTF-8 (Unicode) covers almost all of the characters and symbols in the world.</p> </body> </html>

Day 71

Little refresher on forms... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>Chapter 11 - HTML Forms and JavaScript</title> </head> <body> <p id="target"></p> <form name="logIn" id="formLog" action="http://studioweb.com" method="get"> <span>What's my name?</span> <input type="text" name="nameFirst" id="nameFirst"> <input type="submit" id="submit" > </form> <script type="text/javascript" src="validate.js"></script> </body> </html>

Day 70

Working out some issues... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * { font-size: 16px; box-sizing: border-box; } body { background-color: #f0ead6; } input {   text-align: center; } /* #test {   display: block;   margin: auto; width: 840px; } #aliasRegName {   display: block;   margin: auto; max-width: 840px; } */ #main-div { margin: auto; max-width: 960px; } #main-1, #main-2/*, #regName*/ {   display: block;   margin: auto; max-width: 700px; } #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

Day 69

Building constructors... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** 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; } }

Day 68

Learning to work arrays with the W3 Schools website #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <body>   <h2>JavaScript Arrays</h2>   <p>The length property returns the length of an array.</p>   <p id="demo"></p>   <script>     var fruits = ["Banana", "Orange", "Apple", "Mango"];     document.getElementById("demo").innerHTML = fruits.length;   </script> </body>

Day 67

Demo to work on CSS display placement. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <style>   .PARENT {     background: red;     color: black;     width: 200px;     height: 200px;     padding: 25px;     border: 5px solid blue;     display: inline-block;   }   .CHILD {     background: white;     color: black;     height: 100%;   } </style>

Day 66

#CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript Functions</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> <h1>More about Functions</h1> <input type="button" id="button" value="Check age"> <p id="target"></p> </div> <script> /* true AND false are the boolean data types */ function checkAge(age) { var oldEnough; if(age > 17) { oldEnough = true; } else { oldEnough = false; } return oldEnough; } document.getElementById("

Day 65

Working on my book layout for a while today.  Lite work after a 25 hour drive. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** body { background-color: #f9f9f9; width: 100%; margin: auto; } #why {   text-align: center;   margin: auto; } h2 { text-align: center; background-color: #ddd; } div { background-color: #f2f2f2; padding: 2em; } article { background-color: #f2f2f2; padding: 2em } #sean1 { font-size: 1.2em; } #sean2 { font-weight: 600;   font-size: 1.1em;      }

Day 64

Building out the structure... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html class="no-js">   <head>     <meta charset="utf-8">     <title>Social Media</title>     <meta name="description" content="">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">     <link rel="stylesheet" href="css/reset.css">     <link rel="stylesheet" href="css/main.css">   </head>   <body>     <header>       <div class="logo-area header-inline">         <

Day 63

I finished the header... My code looks diferent when I compare it to the code in the class.  Mine looks better. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** * {   box-sizing: border-box; } html {   max-width: 960px;   margin: 0 auto;   font-family: sans-serif; } header {   background: #3B5998;   padding: 15px; } header a {   color: white;   text-decoration: none; } header .logo-area {   padding-left: 20px;   display: inline-block;   width: 14%; } header .logo-area a {   font-size: 1rem;   font-weight: 400;   color: white;   text-decoration: none; } header .menu {   display: inline-block;   margin-left: -4px;   width: 12%; } header .menu ul li {   display: inline-block;   text-decoration: none;   color: white;   font-size: 0.7rem;   padding: 0 0.75rem; } header .icon-links {   margin-left: -4px;   width: 16%;   display: inline-block;   padding: 0 4%;   border-left: solid grey 1px;   border-right: solid grey 1px;

Day 62

I had issues with this today and spent to much time figuring out that my nesting was wrong... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <!DOCTYPE html> <html class="no-js">   <head>     <meta charset="utf-8">     <title>Social Media</title>     <meta name="description" content="">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">     <link rel="stylesheet" href="css/reset.css">     <link rel="stylesheet" href="css/main.css">   </head>   <body>     <header>       <div class="logo

Day 61

Moving further into the social... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** html {   font-family: sans-serif; } header {   background: #3B5998; } .logo-area {   color: white;   display: inline-block; } .logo-area a {   color: white;   text-decoration: none;   font-size: 20px; } .menu {   display: inline-block; } .menu ul li {   display: inline-block; } .icon-links {   display: inline-block; } .icon-links ul li {   display: inline-block; } .quick-options {   display: inline-block; } .privacy {   display: inline-block; } .search-area {   display: inline-block; } .search-area ul li {   display: inline-block; }

Day 60

Working the social tut!!! #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********       <div id="links">         <ul id="linkList">           <li id="user">             <a href="chloe.html">Chloe</a>           </li>           <li id="home">             <a href="chloe.html">Home</a>           </li>         </ul>       </div>

Day 59

After some syntax stuff, the social class starts with building the header. #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <div>       <ul>         <li>           <a href="chloe.html">Chloe</a>         </li>         <li>           <a href="chloe.html">Home</a>         </li>       </ul>     </div>     <div>       <ul>         <li>            <i class="fa fa-users" aria-hidden="true"></i>         </li>         <li>             <i class="fa fa-comment" aria-hidden="true"></i>         </li>         <li>            <i class="fa fa-bell" aria-hidden="true"></i>         </li>       </ul>       <div>         lock       </div>       <ul>         <li>           search-icon        

Day 58

Started the text styles of the social class Joe... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** h1 {   text-align: center;   font-size: 2.5em;   text-transform: capitalize; } h4 {   text-align: center;   text-transform: uppercase } p {   margin: 0 auto;   width: 500px;   text-align: justify; }

Day 57

Starting with the basics of CSS and how to use selectors... Good review here! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** div {   background: red;   padding: 20px;   box-sizing: border-box; } div p {   background: white;   margin: 0;   padding: 15px; }

Day 56

Aaaand, back to the social tutorial/class #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <header style="background: red; height: 100px; padding: 25px"> <nav style="background: white; height: 100px;"> Menu </nav> </header> <div style="background: blue; height: 500px;"> Content area </div> <footer style="background: green; height: 200px;"> copyright </footer> <h1>The Page</h1> <h2>The Page</h2> <h3>The Page</h3> <h4>The Page</h4> <h5>The Page</h5> <h6>The Page</h6> <p>In his most substantive <strong>public remarks</strong> on the demonstrations that have roiled France, President Emmanuel Macron <em>promised steps</em> to address them.</p> <p>The

Day 55

Back to the vault with me!!! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <ul id="main-nav"> <li class="left"><a href="main.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> <ul id="second-nav"> <li><a href="#">Compose</a></li> <li><a href="#">Manage</a></li> <li><a href="#">Profi

Day 54

Working on the social network calss again... #CodingPhase #TheCodingWay #365CodingPhaseChallenge **********     <form action="/register.php" method="POST">       <div>         <label for="text">Text</label>         <input type="text" name="text"/><br>         <label for="password">Password</label>         <input type="password" name="password"/><br>         <label for="email">Email</label>         <input type="email" name="email" placeholder="bubba@duki.com"/><br>       </div>       <div>         <label for="relationship1">Status</label><br>         <input type="radio" name="relationship1" value="single"> Single <br>         <input type="radio" name="relationship1"

Day 53

Started the social network course by Codingphase today... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <! DOCTYPE html > < html > < head > < meta charset =" utf-8 " /> < meta http-equiv =" X-UA-Compatible " content =" IE=edge "> < title > All HTML Tags </ title > < meta name =" description " content =" Free Web Tutorials "> < meta name =" keywords " content =" HTML, CSS, XML, JavaScript "> < meta name =" author " content =" Sean Connelly "> < meta name =" viewport " content =" width=device-width, initial-scale=1 "> < link rel =" stylesheet " type =" text/css " media =" screen " href =" main.css " /> < script src =" main.js "> < / script > </ head > < body > < a href

Day 52

Customizing my "Bash" prompt! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** blue=$(tput setaf 153); green=$(tput setaf 71); orange=$(tput setaf 166); white=$(tput setaf 15); yellow=$(tput setaf 228); reset=$(tput sgr0); bold=$(tput bold); PS1="\[\033]0;\w\007\]"; PS1="\[${bold}\]\n"; PS1="\[${userStyle}\]\u"; PS1="\[${white}\] @ "; PS1="\[${hostStyle}\]\h"; PS1="\[${white}\] in "; PS1="\[${green}\]\W"; #Use w toshorten path PS1="\[${prompt_git /"/[${white}\] on \[${blue}\]\" \"\[${blue}\ PS1="\n"; PS1="\[${white}\]\$ \[${reset}\]"; export PS1;

Day 51

Did some work today on a cheat sheet.  This is the array section. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** // Array var colors1 = []; //initialized array var colors1 =['red', 'green', 'blue']; //initialized w/values alert(colors1); //alert contains all values alert(colors1[1]); //returns green // Arrays are 0(zero) based. // Three values are in positions 0, 1, and 2 // Alternate array declaration var colors2 = new Array('grey', 'yellow', 'pink'); alert(colors2[2]); //returns pink // Adding values to the array colors2[3] = 'orange'; // works for known positions // A better way to add values colors2.push('teal'); // Called "dot" syntax alert(colors2); var numbers = [5,56,85,124,3,84,'Twenty']; // Values can be mixed alert(numbers[0] + numbers[3]); alert(numbers.length); alert(numbers.sort()); alert(numbers.reverse()); // End Array

Day 50

I need to focus and stop jumping around... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div class="shape0" id="shape0"> <button type="button" class="gameload" id="play" onclick="setActiveControl(1)">Play</button> <button type="button" id="exit" onclick="window.location.href='http://games.smchosting.com/'">Exit</button> <button type="button" id="colors">Colors</button> <button type="button" id="math">Math</button> <button type="button" id="addsub">Add / Subtract</button> <button type="button" id="multdiv">Multiply / Divide</button> <button type="button" id="easy">Easy</button> <button type="button" id="medium">Medium</button> <b

Day 49

A set lists to prove to myself that html ignores white space. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <h4>My color list</h4> <ol> <li>Red</li> <li>Green</li> <li>Blue <ul> <li>Cobalt</li> <li>Midnight</li> <li>Cerulian</li> </ul> </li> </ol> <!-- The sam nested list works as a single line of code.  This prooves that html does not care about white space or lines to reder a page. --> <ol><li>Red</li><li>Green</li><li>Blue<ul><li>Cobalt</li><li>Midnight</li><li>Cerulian</li></ul></li></ol><br> <ul> <li><strong>Red</strong></li> <li>Green</li> <li>Blue</li> </ul>

Day 48

Nothing fancy today.  I did get my dev environment finished though! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** body { text-align: center; font-family: sans-serif; font-size: 18px; } li { list-style: none; line-height: 2em; text-align: left; } .header { background: #f4f4f4; border-bottom: #ccc 3px solid; padding: 20px; } .container { width: 700px; margin: 30px auto; }

Day 47

Working with console.log today. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** var person = { firstName: 'Sean', lastName: 'Connelly', age: 50, children: ['Danielle', 'Kieran'], address: { // Embedded object street: '555 Merryville Ln', city: 'Broken Bow', state: 'OK' }, fullName: function() { return this.firstName + " " + this.lastName; } } console.log(person.firstName); console.log(person.children[0]); console.log(person.address); // Shows entire object console.log(person.address.state); console.log(person.fullName());

Day 46

I know there is no reference here, but this is a snippet of the CSS file I am working with to modify the layout of a Prestashop website.  My first ever client! #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; }

Day 45

This is becoming mind numbing today... GET OVER IT AND MAKE IT HAPPEN! #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>

Day 44

Writing a book to publish online... Just started working on the layout.  Long way to go. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** body { background-color: #f9f9f9; width: 100%; margin: auto; } #why {   text-align: center;   margin: auto; } h2 { text-align: center; background-color: #ddd; } div { background-color: #f2f2f2; padding: 2em; } article { background-color: #f2f2f2; padding: 2em }

Day 43

Lots of info to collect on the registration page... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <div id="regButtons">             <input type="button" name="register" value="Register" />             <input type="button" name="reset" value="Reset" />             <input type="button" name="cancel" value="Cancel" />           </div>           <input type="checkbox" name="newAccount" /> Create New Account <br>           <input type="checkbox" name="profileAlias" /> Select to use Alias <br>           <input type="checkbox" name="regLinks" /> Send registration links <br><br>           <input type="radio" name="aaCode" value="auto"> Auto generate the Account Association code<br>