CodePartnersMD · okayishmael · Jun 26, 2018 · Jun 26, 2018 · Jun 27, 2018 · Jun 30, 2018
diff --git a/Lab-1/README.md b/Lab-1/README.md
@@ -0,0 +1,25 @@
+# Assignment Overview: Lab 1
+
+- Write a program that accepts user input and, based on that input, displays messages back to the user.
+
+
+# Technical Requirements
+
+- You may do the work in the same HTML file that we used for our class demo today. Because the originals from class are saved in the class GitHub repo, there is no worry in overwriting them or need for saving an unnecessary extra copy.
+- Using a total of four JavaScript 'prompt' or 'confirm' statements along the lines of our class demo from today, have a user answer four questions.
+- The user's response to each question (input) should be stored in a separate variable. Name your variables carefully.
+- Using these responses, return an alert to the user (output) that concatenates their response into some kind of reply like we did in class.
+- Strive to have your alert for each question utilize the responses to all of the prior questions such that by the fourth question, your response would look something like, "Greetings, *Iggy* from *Ipanema*, I also like to eat *bananas* while on vacation in *Paris*."
+- Be creative and have fun with your questions/responses! They can be whatever you want so long as the input/output requirements are met.
+- In addition, for each response, create a console.log() message that indicates the nature of the question and the user's response, as we did in class.
+- In the HTML portion of the file, place the four questions within a series of <p> tags so that they are listed on the screen.
+- If there are any lingering issues with the setup or functionality of your laptop and the software installations, we need to individually address that right away.
+
+# Submitting Your Assignment
+
+- Go to https://gist.github.com
+- In the "Gist description..." field, put your name
+- In the "Filename including extension..." field put 'index.html'.
+- Copy-paste your code into the big input field for the Gist.
+- Select the button that says "Create secret gist"; copy that link for submission in the Canvas assignment.
+- Add a comment to your Canvas submission with answers to the prompted questions.
diff --git a/Lab-1/index.1.html b/Lab-1/index.1.html
@@ -0,0 +1,97 @@
+<!--Author: 2018 Ishmael Sunday | https://github.com/okayishmael 
+ On Medium, Twitter, Instagram, Facebook, Behance as @okayishmael-->
+
+<!DOCTYPE html>
+<!--html begins-->
+<html lang="en">
+
+    <!-- head begins-->
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--Title-->
+    <title>Code 201 | Ishmael Sunday</title>
+    <!--responsiveness-->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!--link to css style sheet-->
+    <link rel="stylesheet" type="text/css" media="screen" href="main_6-24-18.css" />
+    <!-- link to JavaScript file-->
+
+</head>
+<!--head ends-->
+
+<!--body beigns-->
+<body>
+    <!--Header begins-->
+    <header>
+        <div id="header">
+           <div id="logo-container">
+               <a href="index.html">code<span class="num">201</span></a>
+               </div>
+            <ul >
+                <li><a href="index.html" class="h-navlink">Home</a></li>
+                <li><a href="mailto:[email protected]" class="h-navlink">Contact</a></li>
+            </ul>
+
+        </div>
+    </header>
+    <!-- Header ends-->
+
+    <!--first section Content begins-->
+            <div class="container">
+                    <h1>Collecting temp data from users. We used the built-in fucnction</h1>
+                    <p class="pmaster">My name is Ishmael Sunday. I am a <a href="https://www.codepartners.net/portal/customers/code/index.html#/courses/201" title="Detail about this course" target="_blank">code 201</a> student at <a href="https://codepartners.net" target="_blank" title="Code Partners Website">Code Partners</a>, a coding academy located in Bestheda, Maryland.
+                     This is my first attempt to push files to git repository. You can find technical requirements and instructions for this assignment in the readme file.
+                    Plese feel free to comment or <a href="mailto:[email protected]" title="Email Me">contact</a> me with any questions.</p>
+                    <p class="pmaster">
+                        <h3 class="header-purple">Questions from the pop-up.</h3>
+                        <ol>
+                            <li class="list">What's is your name?</li>
+                            <li class="list">Enter your current city?</li>
+                            <li class="list">Enter your gender.</li>
+                            <li class="list">Click <strong>OK</strong> if you're a coder.</li>
+                        </ol>
+                    </p>
+                    <hr>
+            </div>
+    <!--first section Content ends-->
+    <!--section 2 Content begins-->
+    <div class="container">
+        <h1>Func: Displaying User's input from prompt into the page</h1>
+        <table class="table-1">
+            <tr class="odd">
+                <th class="table-header">Name:</th>
+                <td id="name" class="tabel-details"></td>
+            </tr>
+             <tr class="even">
+                <th class="table-header">Current City:</th>
+                <td id="origin"></td>
+            </tr>
+            <tr class="odd">
+                <th class="table-header">Gender:</th>
+                <td id="gender" class="tabel-details"></td>
+            </tr>
+
+
+           <tr class="even">
+                <th class="table-header">Coder</th>
+                <td id="coder" class="tabel-details"></td>
+           </tr>
+
+
+
+
+        </table>
+        <p class="pmaster">In the first assignment, we collected some data from the user via <code><strong>prompt()</strong></code>. This time we displayed those data using javaScript's <code><strong>document.getElementById().innerText</strong></code>. We targeted the html elements in which we 
+        want the collected data to be displayed. I used table to display mine and targeted each ID of all <code><strong>< td ></strong></code> and populated them respectively.</p>
+        <p class="pmaster">Feel free to leave comment or ask any question.</p>
+
+        <hr>
+</div>
+<!--section 2 ends-->
+</body>
+<!--body ends-->
+<script src="main.js"></script>
+
+</html>
+<!--html ends-->
diff --git a/Lab-1/main.js b/Lab-1/main.js
@@ -0,0 +1,35 @@
+//Author:Ishmael Sunday | github.com/okayishmael
+//Code 201 Project1 @ Code Partners > https://codepartners.net
+
+let instruction = alert("Hello and welcome to Code 2o1. We need to collect some information (Name, Current City, Gender and confirm if you are a coder) from you before you can access the site.")
+let name = prompt("What\'s your name?"); //declare var use prompt to display value in browser and collect user input
+if (name != null){
+alert("Hi "+ name +"! Please click the \"OK button\" to enter your current city.")}; // using alert function. no input
+let origin = prompt(" Enter your current City:"); // prompt, input require
+let gender = prompt("Please enter your Gender:");// prompt, input require
+let coder = confirm('Finally, are you a coder?'); // declare var confirm to collect user input
+console.log(name); // printing place function name in the paranthesis 
+console.log(origin); // printing place function name in the paranthesis 
+console.log(gender); // printing place function name in the paranthesis 
+console.log(coder); // printing place function name in the paranthesis 
+
+// Displaying user's input into the html page.
+
+//Name
+
+if(name){
+    document.getElementById('name').innerText = name
+} 
+// Origin/Current City
+if(origin){
+    document.getElementById('origin').innerText = origin
+} 
+//user Gender
+if(gender){
+    document.getElementById('gender').innerText = gender
+} 
+//Is user a coder. True or false wil be displyed
+if(coder){
+    document.getElementById('coder').innerText = coder
+};
+
diff --git a/Lab-1/main_6-24-18.css b/Lab-1/main_6-24-18.css
@@ -0,0 +1,49 @@
+/*Author:Ishmael Sunday | https://github.com/okayishmael | On Medium, Twitter, Instagram, Facebook, Behance as @okayishmael*/
+/* Date: June, 2018 */
+/*Code 201 Project1 @ Code Partners > https://codepartners.net */
+
+/*=========================================================*/
+
+* { font-family: Arial, Helvetica, sans-serif;}
+a {text-decoration: none;}
+
+body { margin: 0; }
+
+/* heading */
+h1,h2,h3,h4,h5,h6 { color: royalblue; font-weight: 200;}
+.header-purple { color: rgb(59, 34, 85);}
+
+/*  Header box, site title and nav links */
+#logo-container {width: 100px; float: left;}
+#logo-container a { font-size: 40px; font-weight: 700;  letter-spacing: -2px; text-decoration: none;}
+#logo-container a .num  { color:royalblue;  font-size: 30px; font-weight: 600; }
+
+#header {  margin: 0;  height:50px;  background: rgb(233, 233, 233); padding: 25px;}
+#header ul  { float: right;}
+#header li { text-decoration: none; display: inline-block; margin-left: 30px;}
+.h-navlink { color: rebeccapurple;  font-size: 18px; font-weight: 600; text-decoration: none;}
+a.active { color: royalblue;}
+#header .h-navlink:hover { color: royalblue; font-weight: 600;}
+
+
+/*-- sention Containers--*/
+.container { max-width: 940px; margin: 60px auto;}
+
+hr { margin: 60px 0px; opacity: .5; width: 97%;}
+
+/*--Paragraphy --*/
+.pmaster {color: rgb(59, 34, 85); font-size: 16px; line-height: 1.7em;}
+.pmaster a { color: royalblue; font-weight: 500;}
+.pmaster a:hover { text-decoration: underline rebeccapurple;}
+
+.list {color: rgb(59, 34, 85); font-size: 16px; line-height: 1.7em;}
+
+/* Table style*/
+.table-1 { width: 940px; margin:  40px  0px 30px 0px; }
+.table-1 th { text-align: left; font-weight: bold;  width: 470px;padding: 10px 7px 10px 10px;}
+.table-1 td { text-align:left;  width: 470px; padding: 10px 7px 10px 10px; color: rgb(59, 34, 85);}
+.odd { background-color: rgb(230, 229, 231); }
+.even { background-color: rgb(245, 245, 245);} 
+.table-header { font-weight: bold; color: rgb(59, 34, 85);}
+.table-details { color: rgb(59, 34, 85); font-weight: bold;}
+tr:hover {background-color: rgb(236, 210, 248)}