From 5c245506479c3bbb6ec21ee18973601e675432aa Mon Sep 17 00:00:00 2001 From: NAME Date: Tue, 26 Jun 2018 17:40:40 -0400 Subject: [PATCH 1/6] Added file to repo for submission --- Lab-1/README.md | 25 +++++++++++++++++ Lab-1/index.html | 62 ++++++++++++++++++++++++++++++++++++++++++ Lab-1/main.js | 12 ++++++++ Lab-1/main_6-24-18.css | 40 +++++++++++++++++++++++++++ 4 files changed, 139 insertions(+) create mode 100644 Lab-1/README.md create mode 100644 Lab-1/index.html create mode 100644 Lab-1/main.js create mode 100644 Lab-1/main_6-24-18.css diff --git a/Lab-1/README.md b/Lab-1/README.md new file mode 100644 index 0000000..50861f6 --- /dev/null +++ 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

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.html b/Lab-1/index.html new file mode 100644 index 0000000..c79c799 --- /dev/null +++ b/Lab-1/index.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + Code 201 | Ishmael Sunday + + + + + + + + + + + + +

+ +
+ + + +
+

Well, Hello there!

+

My name is Ishmael Sunday. I am a code 201 student at Code Partners, 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 contact me with any questions.

+

+

Questions from the pop-up.

+
    +
  1. What's is your name?
    2. +
  2. Enter your current city?
    3. +
  3. Enter your gender.
    4. +
  4. Click OK if you're a coder.
    5. +
+

+
+
+ + + + + + \ No newline at end of file diff --git a/Lab-1/main.js b/Lab-1/main.js new file mode 100644 index 0000000..6e9c950 --- /dev/null +++ b/Lab-1/main.js @@ -0,0 +1,12 @@ +//Author:Ishmael Sunday | github.com/okayishmael +//Code 201 Project1 @ Code Partners > https://codepartners.net + + +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.")}; // Same here +let origin = prompt("Enter your current City:"); +let gender = prompt("Gender:"); +let coder = confirm('Click "OK" if you are a coder.'); // declare var confirm to collect user input +console.log(); // Conprint + diff --git a/Lab-1/main_6-24-18.css b/Lab-1/main_6-24-18.css new file mode 100644 index 0000000..8c14c15 --- /dev/null +++ b/Lab-1/main_6-24-18.css @@ -0,0 +1,40 @@ +/*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; min-width: 350px; margin: 0 auto; padding: 30px;} + +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;} + From 64bb4833e5582c1e427eee8ac2e714ced9faf109 Mon Sep 17 00:00:00 2001 From: NAME Date: Tue, 26 Jun 2018 18:48:56 -0400 Subject: [PATCH 2/6] added notes to main.js code --- Lab-1/main.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Lab-1/main.js b/Lab-1/main.js index 6e9c950..af5409c 100644 --- a/Lab-1/main.js +++ b/Lab-1/main.js @@ -4,9 +4,9 @@ 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.")}; // Same here -let origin = prompt("Enter your current City:"); -let gender = prompt("Gender:"); +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("Gender:");// prompt, input require let coder = confirm('Click "OK" if you are a coder.'); // declare var confirm to collect user input -console.log(); // Conprint +console.log(); // printing place function name in the paranthesis From 8c4e4816b2cf9b8e4d657a0a76804f6778b76f05 Mon Sep 17 00:00:00 2001 From: NAME Date: Wed, 27 Jun 2018 19:23:51 -0400 Subject: [PATCH 3/6] updated main.js --- Lab-1/main.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/Lab-1/main.js b/Lab-1/main.js index af5409c..4d6d73a 100644 --- a/Lab-1/main.js +++ b/Lab-1/main.js @@ -4,9 +4,13 @@ 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("Gender:");// prompt, input require -let coder = confirm('Click "OK" if you are a coder.'); // declare var confirm to collect user input -console.log(); // printing place function name in the paranthesis - + alert("Hi "+ name +"! Please click the \"OK button\" to enter your current city.")}; // using alert function. no input + let origin = prompt(name + " Enter your current City:"); // prompt, input require + let gender = prompt(name + " Gender:");// prompt, input require + let coder = confirm(name + ' Click "OK" if you are 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 + + \ No newline at end of file From e95e6a0f7d588b79d4db4b22ee5babe1a15ef579 Mon Sep 17 00:00:00 2001 From: NAME Date: Sat, 30 Jun 2018 11:32:12 -0400 Subject: [PATCH 4/6] adding part 2 to assignment --- Lab-1/{index.html => index.1.html} | 39 ++++++++++++++++++++++++++-- Lab-1/main.js | 41 ++++++++++++++++++++++-------- Lab-1/main_6-24-18.css | 11 +++++++- 3 files changed, 77 insertions(+), 14 deletions(-) rename Lab-1/{index.html => index.1.html} (61%) diff --git a/Lab-1/index.html b/Lab-1/index.1.html similarity index 61% rename from Lab-1/index.html rename to Lab-1/index.1.html index c79c799..4cf1cca 100644 --- a/Lab-1/index.html +++ b/Lab-1/index.1.html @@ -16,7 +16,7 @@ - + @@ -39,7 +39,7 @@
-

Well, Hello there!

+

Collecting temp data from users. We used the built-in fucnction

My name is Ishmael Sunday. I am a code 201 student at Code Partners, 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 contact me with any questions.

@@ -55,8 +55,43 @@

Questions from the pop-up.

+ +
+

Func: Displaying User's input from prompt into the page

+ + + + + + + + + + + + + + + + + + + + + + + +
Name:
Current City:
Gender:
Coder
+

In the first assignment, we collected some data from the user via prompt(). This time we displayed those data using javaScript's document.getElementById().innerText. 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 < td > and populated them respectively.

+

Feel free to leave comment or ask any question.

+ +
+
+ + \ No newline at end of file diff --git a/Lab-1/main.js b/Lab-1/main.js index 4d6d73a..4e4fd60 100644 --- a/Lab-1/main.js +++ b/Lab-1/main.js @@ -1,16 +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(name + " Enter your current City:"); // prompt, input require - let gender = prompt(name + " Gender:");// prompt, input require - let coder = confirm(name + ' Click "OK" if you are 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 - - \ No newline at end of file +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, please Click "OK" if you are 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 index 8c14c15..990d9f3 100644 --- a/Lab-1/main_6-24-18.css +++ b/Lab-1/main_6-24-18.css @@ -27,7 +27,7 @@ a.active { color: royalblue;} /*-- sention Containers--*/ -.container { max-width: 940px; min-width: 350px; margin: 0 auto; padding: 30px;} +.container { max-width: 940px; margin: 60px auto;} hr { margin: 60px 0px; opacity: .5; width: 97%;} @@ -38,3 +38,12 @@ hr { margin: 60px 0px; opacity: .5; width: 97%;} .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)} From 1cb0fc0aac914af056a7303bb462151e7f232cda Mon Sep 17 00:00:00 2001 From: NAME Date: Sat, 30 Jun 2018 13:48:13 -0400 Subject: [PATCH 5/6] changed coder question from confirm to prompt --- Lab-1/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Lab-1/main.js b/Lab-1/main.js index 4e4fd60..de9b242 100644 --- a/Lab-1/main.js +++ b/Lab-1/main.js @@ -7,7 +7,7 @@ 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, please Click "OK" if you are a coder.'); // declare var confirm to collect user input +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 From 4a70cc1d7de3b0cee5a5feede924f5125c51f6cf Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Sat, 30 Jun 2018 18:00:08 -0400 Subject: [PATCH 6/6] wrapping logic and variables into functions --- Lab-1/index.1.html | 18 ++++++++++++++++++ Lab-1/main.js | 9 +++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/Lab-1/index.1.html b/Lab-1/index.1.html index 4cf1cca..90022c6 100644 --- a/Lab-1/index.1.html +++ b/Lab-1/index.1.html @@ -89,6 +89,24 @@

Func: Displaying User's input from prompt into the page

+ +
+

Collecting temp data from users. We used the built-in fucnction

+

My name is Ishmael Sunday. I am a code 201 student at Code Partners, 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 contact me with any questions.

+

+

Questions from the pop-up.

+
    +
  1. What's is your name?
    2. +
  2. Enter your current city?
    3. +
  3. Enter your gender.
    4. +
  4. Click OK if you're a coder.
    5. +
+

+
+
+ diff --git a/Lab-1/main.js b/Lab-1/main.js index de9b242..5628c2e 100644 --- a/Lab-1/main.js +++ b/Lab-1/main.js @@ -1,6 +1,7 @@ //Author:Ishmael Sunday | github.com/okayishmael //Code 201 Project1 @ Code Partners > https://codepartners.net +let myInstruction = function() { 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){ @@ -12,14 +13,16 @@ 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 - +}; +myInstruction(); // Displaying user's input into the html page. //Name - +let myLogic= function() { if(name){ document.getElementById('name').innerText = name } + // Origin/Current City if(origin){ document.getElementById('origin').innerText = origin @@ -33,3 +36,5 @@ if(coder){ document.getElementById('coder').innerText = coder }; +}; +myLogic(); \ No newline at end of file