Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions 01week/hungerGames.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
'use strict';

/*
* Pick a random student from this class
*
* Store names in a variable - array
*
* generate a random number, less than amount in class
*
* apply the index to the array
*
* from that array, pick a random name
*
* return a name
*/

const classArray = ['Cameron', 'Craig', 'Trevor', 'Ty', 'Ryan'];

function genRanNum(max, min) {
return Math.floor(Math.random() * (1 + max - min) ) + min;
}
console.log(genRanNum(5,0));

function genRanName() {
const index = genRanNum(classArray.length - 1, 0);
console.log(index);
return classArray[index];

}
console.log(genRanName());
20 changes: 20 additions & 0 deletions 01week/javascripting/css/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
123 changes: 123 additions & 0 deletions 01week/javascripting/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
/* CSS Reset -- Typically in reset.css. Place right below comment if no reset.css is referenced in html */

/* Box Sizing border-box */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background-color: lightgray;
font-family: Arial;
color: skyblue;
}

header {
width: 90%;
margin: auto;
padding: 10px 0px 20px 0px;
background-color: darkslategray;
border-bottom: 2px groove darkgray;
/*margin-bottom: 10px;*/
}

h3 {
width: 100%;
margin-bottom: 10px;
font-weight: bold;
font-size: 16pt;
color: white;
}

.web-title {
font-size: 24pt;
text-align: center;
}

/*Panel for the assignment*/
.my-tests {
width: 90%;
margin: auto;
background-color: darkslategray;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
/*align-items: flex-end;*/
}

/*Style for each test section*/
.test {
width: 100%;
padding: 10px;
border: 2px groove gray;
border-radius: 5px;
display:flex;
flex-wrap: wrap;
align-items: baseline;
margin: 10px;

}

#current-date {
font-weight: bold;
font-style: italic;
/*color: white;*/
}

/*Used for Test 1 date test*/
.underline {
border-bottom: 2px solid skyblue;
}

/*Button styling*/
.btn {
font-size: 14pt;
margin-left: 20px;
background-color: skyblue;
color: darkslategray;
}

/*input field styling*/
.num, .str {
font-size: 16pt;
text-align: center;
background-color: darkslategray;
color: inherit;
width: 10%;
/*margin-left: 20px;*/

}

/*Using these question styles to control flexbox objects*/
.question {
width: 10%;
/*margin: 0px 5px;*/
}

.q2 {
width: 90%;
}

.q4 {
width: 70%;
}

.qlast {
width: 100%;
}

/*Styling for the result sentences*/
.sentence {
padding-left: 50px;
font-size: 24pt;
}

.sentence4b, .sentence4c, .sentence4d {
width: 100%;
}

.secret {
color: yellow;
font-weight: bold;
}
121 changes: 121 additions & 0 deletions 01week/javascripting/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<title>Javascripting</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 class="web-title">Craig's Javascripting Tests</h1>
</header>

<main class="my-tests">

<!-- This div covers Test 1: display day and time -->
<!-- Take note, styles are defined as {num, str}{A,B,C}_{1, 2, 3}.
ABC represents the frequency of object in section. 123 represents the test number -->
<div class="test test1">
<h3>Test 1 - Display day and time</h3>
<p id="current-date"></p>
<input class="btn btn1" type="button" value="Get Date">
</div>

<!-- This div covers Test 2: Converting a number into a string -->
<div class="test test2">
<h3>Test 2 - Number to a string</h3>
<p class="question q1">Pick a Number: </p>
<p class="question q2">Pick a Noun: </p>

<input class="num num-a2" type="number" name="numA_2" min="2" max="100" value="42">
<select class="str str-a2" name="strA_2">
<option value="books">books</option>
<option value="salt shakers">salt shakers</option>
<option value="coins">coins</option>
<option value="beamers">beamers</option>
<option value="doggies">doggies</option>
<option value="pencils">pencils</option>
<option value="bananas">bananas</option>
</select>
<input class="btn btn2" type="button" value="Gen Sentence">
<p class="sentence sentence2"></p>
</div>

<!-- This div covers Test 3: Converting a string into a number -->
<div class="test test3">
<h3>Test 3 - String to a number</h3>
<p class="question q1">Type in a Number: </p>
<p class="question q2">Type in another one: </p>
<input class="num num-a3" type="text" name="numA_3" value="foo">
<input class="num num-b3" type="text" name="numB_3" value="bar">
<input class="btn btn3" type="button" value="Gen Sentence">
<p class="sentence sentence3"></p>
</div>

<!-- This div covers Test 4: Scenarios to display different datatypes -->
<div class="test test4">
<h3>Test 4 - Different datatypes</h3>
<p class="question q1 qlast">Type anything in... I am the soothsayer. I can tell you if your entry is a string, number, boolean, or NULL</p>
<input class="num num-a4" type="text" name="numA_4" value="myFoo">
<input class="btn btn4" type="button" value="Name that Datatype!">
<p class="sentence sentence4"></p>
<br><br><br>
<p class="question q2 qlast">To test "undefined" and "Not a Number (NaN)", I need to force the test.</p>
<input class="btn btn4b" type="button" value="Final Datatype Test">
<p class="sentence sentence4b"></p>
<p class="sentence sentence4c"></p>
<p class="sentence sentence4d"></p>
</div>

<!-- This div covers Test 5: Add 2 numbers -->
<div class="test test5">
<h3>Test 5 - Add two numbers</h3>
<p class="question q1">Type in a Number: </p>
<p class="question q2">Type in another one: </p>
<input class="num num-a5" type="text" name="num-a5" value="1">
<input class="num num-b5" type="text" name="num-b5" value="2">
<input class="btn btn5" type="button" value="Add">
<p class="sentence sentence5"></p>
</div>

<!-- This div sets up a control section to manage tests 6, 7, 8 -->
<div class="test test-control">
<h3>Setup below covers tests 6, 7, 8</h3>
<p class="question q1">Select Number A: </p>
<p class="question q-2">Select Number B: </p>
<p class="question q3">Type in String A: </p>
<p class="question q4">Type in String B: </p>
<input class="num num-a678" type="number" name="num-a678" min="1" max="100" value="42">
<input class="num num-b678" type="number" name="num-b678" min="1" max="100" value="42">
<input class="str str-a678" type="text" name="str-a678" value="foo">
<input class="str str-b678" type="text" name="str-b678" value="bar">
<input class="btn btn678" type="button" value="Test!">
</div>

<!-- This div covers Test 6: Tests for both conditions are TRUE -->
<div class="test test6">
<h3>Test 6 - Comparing! IF num A = B AND str A = B THEN display "secret sentence"</h3>
<p class="sentence sentence6"></p>
</div>

<!-- This div covers Test 7: Tests if one of the conditions is TRUE -->
<div class="test test7">
<h3>Test 7 - Comparing! IF num A = B OR str A = B THEN display "secret sentence"</h3>
<p class="sentence sentence7"></p>
</div>

<!-- This div covers Test 8: Tests if none of the conditions are TRUE -->
<div class="test test8">
<h3>Test 8 - Comparing! IF num A != B AND str A != B THEN display "secret sentence"</h3>
<p class="sentence sentence8"></p>
</div>

</main>

<!-- <footer></footer> -->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/datatypes.js"></script>
</body>
</html>
1 change: 0 additions & 1 deletion 01week/javascripting/introduction.js

This file was deleted.

Loading